// Photos + AI analysis — site photo review with computer vision overlays.
// Shows a large image, AI-detected objects (framing, rebar, workers w/ PPE,
// defects) as bounding boxes, plus an insights sidebar and a progress strip.

function PhotosPage() {
  return (
    <div style={{
      width: '100%', height: '100%', background: C.bg, color: C.ink,
      fontFamily: C.sans, fontSize: 13, display: 'grid',
      gridTemplateColumns: '220px 1fr 360px', letterSpacing: '-0.005em',
    }}>
      <CSidebar active="Daily logs" />

      {/* center */}
      <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden', background: C.bg }}>
        <CHead
          crumb="Field / Photos"
          title="Site photos · Apr 21"
          sub="Harborview Blk B · Level 3 framing · 312 photos captured this month"
          right={<div style={{ display: 'flex', gap: 8 }}>
            <CButton icon="⌖">Map view</CButton>
            <CButton icon="⎘">Compare</CButton>
            <CButton primary icon="+">Capture</CButton>
          </div>}
        />

        {/* hero image with overlay */}
        <div style={{ padding: '16px 24px', flex: 1, display: 'flex', flexDirection: 'column', gap: 12, minHeight: 0 }}>
          <div style={{
            position: 'relative', flex: 1, minHeight: 0,
            background: '#1a1f2b', borderRadius: 10, overflow: 'hidden',
            border: `1px solid ${C.line}`,
          }}>
            {/* simulated site photo — painted via gradients + svg */}
            <svg width="100%" height="100%" viewBox="0 0 900 520" preserveAspectRatio="xMidYMid slice" style={{ display: 'block' }}>
              <defs>
                <linearGradient id="sky" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0" stopColor="#c8d4e0" />
                  <stop offset="1" stopColor="#eaeef4" />
                </linearGradient>
                <linearGradient id="ground" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0" stopColor="#8a7d6a" />
                  <stop offset="1" stopColor="#6b5f4e" />
                </linearGradient>
                <linearGradient id="wood" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0" stopColor="#d6a574" />
                  <stop offset="1" stopColor="#a37a4a" />
                </linearGradient>
              </defs>
              {/* sky */}
              <rect width="900" height="340" fill="url(#sky)" />
              {/* distant buildings */}
              <rect x="0" y="220" width="200" height="120" fill="#9aa5b0" opacity="0.6" />
              <rect x="210" y="240" width="150" height="100" fill="#8a95a0" opacity="0.55" />
              <rect x="720" y="230" width="180" height="110" fill="#9aa5b0" opacity="0.55" />
              {/* ground */}
              <rect y="340" width="900" height="180" fill="url(#ground)" />
              {/* slab edge */}
              <rect y="360" width="900" height="12" fill="#b4b0a6" />
              {/* vertical framing studs */}
              {Array.from({ length: 18 }).map((_, i) => (
                <rect key={i} x={80 + i * 42} y={180} width="8" height="190" fill="url(#wood)" />
              ))}
              {/* top plate */}
              <rect x="78" y="176" width="756" height="10" fill="#8f6633" />
              {/* bottom plate */}
              <rect x="78" y="362" width="756" height="8" fill="#8f6633" />
              {/* cross brace */}
              <line x1="92" y1="370" x2="500" y2="186" stroke="#8f6633" strokeWidth="6" />
              <line x1="500" y1="186" x2="830" y2="370" stroke="#8f6633" strokeWidth="6" />
              {/* a worker silhouette */}
              <g transform="translate(360, 310)">
                <circle cx="0" cy="-48" r="9" fill="#e8a85c" />
                <rect x="-4" y="-40" width="8" height="3" fill="#2a2a2a" />
                <rect x="-9" y="-38" width="18" height="26" fill="#f0c040" />
                <rect x="-8" y="-12" width="6" height="22" fill="#3a3a42" />
                <rect x="2" y="-12" width="6" height="22" fill="#3a3a42" />
              </g>
              <g transform="translate(610, 318)">
                <circle cx="0" cy="-44" r="8" fill="#d89060" />
                <rect x="-3" y="-38" width="6" height="3" fill="#2a2a2a" />
                <rect x="-8" y="-36" width="16" height="22" fill="#2b64a8" />
                <rect x="-7" y="-14" width="5" height="20" fill="#242a34" />
                <rect x="2" y="-14" width="5" height="20" fill="#242a34" />
              </g>
              {/* rebar pile bottom-left */}
              {Array.from({ length: 10 }).map((_, i) => (
                <line key={i} x1={30 + i * 3} y1={440} x2={110 + i * 3} y2={432} stroke="#5a5a62" strokeWidth="2" />
              ))}
              {/* bucket / debris */}
              <ellipse cx="770" cy="420" rx="30" ry="8" fill="#3a3a42" opacity="0.5" />
              <rect x="750" y="390" width="40" height="30" fill="#d04a2a" />
            </svg>

            {/* detection overlays */}
            <DetectBox left="8%" top="32%" w="78%" h="38%" label="Wood framing · 18 studs" confidence="0.97" tone="mint" />
            <DetectBox left="38%" top="48%" w="6.5%" h="19%" label="Worker · hard hat ✓ vest ✓" confidence="0.94" tone="blue" small />
            <DetectBox left="66%" top="51%" w="5.5%" h="18%" label="Worker · hard hat ✗" confidence="0.91" tone="red" small alert />
            <DetectBox left="2%" top="79%" w="14%" h="8%" label="Rebar stock · est. 1.4 ton" confidence="0.88" tone="amber" small />
            <DetectBox left="82%" top="72%" w="10%" h="14%" label="Debris · container near full" confidence="0.83" tone="amber" small />

            {/* Scan sweep animation */}
            <div style={{
              position: 'absolute', left: 0, right: 0, top: 0, bottom: 0,
              background: `linear-gradient(180deg, transparent 40%, rgba(37,99,235,0.08) 48%, rgba(37,99,235,0.25) 50%, rgba(37,99,235,0.08) 52%, transparent 60%)`,
              animation: 'photoScan 4s linear infinite', pointerEvents: 'none',
            }} />

            {/* Photo metadata badges */}
            <div style={{
              position: 'absolute', top: 12, left: 12, display: 'flex', gap: 6,
              fontSize: 11, fontFamily: C.mono, color: '#fff',
            }}>
              <span style={{ padding: '4px 8px', background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(6px)', borderRadius: 4 }}>IMG_04218_132.HEIC</span>
              <span style={{ padding: '4px 8px', background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(6px)', borderRadius: 4 }}>Apr 21 · 10:14 AM</span>
              <span style={{ padding: '4px 8px', background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(6px)', borderRadius: 4 }}>L3 · grid C4→F4</span>
            </div>
            <div style={{
              position: 'absolute', top: 12, right: 12, display: 'flex', gap: 6,
              fontSize: 11, color: '#fff',
            }}>
              <span style={{ padding: '4px 8px', background: 'rgba(37,99,235,0.85)', backdropFilter: 'blur(6px)', borderRadius: 4, display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#fff', animation: 'pulse 1.2s ease-in-out infinite' }} />
                5 detections · 1 safety flag
              </span>
            </div>

            {/* thumbnail strip */}
            <div style={{
              position: 'absolute', bottom: 12, left: 12, right: 12,
              display: 'flex', gap: 6, overflowX: 'hidden',
            }}>
              {[
                ['08:14','ok'],['09:02','ok'],['10:14','warn','on'],['11:30','ok'],
                ['12:44','ok'],['13:20','warn'],['14:05','ok'],['15:12','ok'],
                ['16:30','ok'],['17:01','ok'],
              ].map(([t,s,o], i) => (
                <div key={i} style={{
                  width: 72, height: 48, borderRadius: 4,
                  background: ['#6b7785','#7a8592','#5f6e7e','#6b7785','#7a8592','#5f6e7e','#6b7785','#7a8592','#5f6e7e','#6b7785'][i % 10],
                  border: o === 'on' ? `2px solid ${C.blue}` : '1px solid rgba(255,255,255,0.15)',
                  position: 'relative', overflow: 'hidden', flexShrink: 0,
                  opacity: o === 'on' ? 1 : 0.7,
                }}>
                  <span style={{ position: 'absolute', top: 2, left: 4, fontSize: 9, fontFamily: C.mono, color: '#fff' }}>{t}</span>
                  {s === 'warn' && <span style={{ position: 'absolute', top: 2, right: 4, width: 6, height: 6, borderRadius: '50%', background: C.amber }} />}
                </div>
              ))}
              <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.6)', alignSelf: 'center', marginLeft: 6 }}>+ 302 more</div>
            </div>
          </div>

          {/* progress inference strip */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12 }}>
            {[
              ['Framing complete','62%','based on 47 photos today','mint','+4% vs yesterday'],
              ['PPE compliance','98%','1 violation flagged','amber','1 alert sent'],
              ['Rebar on site','~1.4 ton','matches delivery ticket','default','auto-reconciled'],
              ['Crew visible','34 of 41','7 in interior, not seen','default','roll call tab →'],
            ].map(([k,v,s,t,foot]) => (
              <div key={k} style={{ background: C.panel, border: `1px solid ${C.line}`, borderRadius: 8, padding: '12px 14px' }}>
                <div style={{ fontSize: 11, color: C.ink3, marginBottom: 5 }}>{k}</div>
                <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.015em', color: t === 'mint' ? C.mint : t === 'amber' ? C.amber : C.ink }}>{v}</div>
                <div style={{ fontSize: 11, color: C.ink2, marginTop: 3 }}>{s}</div>
                <div style={{ fontSize: 10, color: C.ink3, marginTop: 6, fontFamily: C.mono }}>{foot}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* right panel — detections + insights */}
      <div style={{
        background: C.panel, borderLeft: `1px solid ${C.line}`,
        display: 'flex', flexDirection: 'column', overflow: 'hidden',
      }}>
        <div style={{ padding: '14px 18px', borderBottom: `1px solid ${C.line}`, display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 26, height: 26, borderRadius: 6,
            background: `linear-gradient(135deg, ${C.blue}, ${C.indigo})`,
            color: '#fff', display: 'grid', placeItems: 'center',
            fontFamily: C.mono, fontSize: 12, fontWeight: 600,
          }}>C</div>
          <div>
            <div style={{ fontSize: 13, fontWeight: 600 }}>Vision analysis</div>
            <div style={{ fontSize: 11, color: C.ink3 }}>Auto-run on every upload · 1.8s</div>
          </div>
        </div>

        {/* summary */}
        <div style={{ padding: '14px 18px', borderBottom: `1px solid ${C.line}`, background: C.bg }}>
          <div style={{ fontSize: 13, lineHeight: 1.55 }}>
            L3 framing looks on pace — <b>62% complete</b> by stud count vs. plan. One worker without a hard hat near grid E4; I've pinged the foreman. Debris container is near full.
          </div>
        </div>

        {/* detections */}
        <div style={{ padding: '14px 18px', borderBottom: `1px solid ${C.line}`, overflow: 'auto' }}>
          <div style={{ fontSize: 10, color: C.ink3, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 500, marginBottom: 10 }}>
            Detections · 5
          </div>
          {[
            ['Wood framing',      '18 studs · top & bottom plate', '0.97', 'mint'],
            ['Worker · PPE ok',   'hard hat + vest',                '0.94', 'blue'],
            ['Worker · NO hard hat','grid E4 · 10:14',              '0.91', 'red'],
            ['Rebar stockpile',   'est. 1.4 ton · matches PO-0338', '0.88', 'amber'],
            ['Debris container',  '~87% full · schedule pickup',    '0.83', 'amber'],
          ].map(([t, s, c, tone], i) => (
            <div key={i} style={{
              display: 'flex', gap: 10, padding: '10px 0',
              borderTop: i ? `1px solid ${C.line2}` : 'none', alignItems: 'center',
            }}>
              <span style={{
                width: 8, height: 8, borderRadius: '50%',
                background: tone === 'mint' ? C.mint : tone === 'red' ? C.red : tone === 'amber' ? C.amber : C.blue,
              }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12, fontWeight: 500 }}>{t}</div>
                <div style={{ fontSize: 11, color: C.ink3 }}>{s}</div>
              </div>
              <span style={{ fontFamily: C.mono, fontSize: 10, color: C.ink3 }}>{c}</span>
            </div>
          ))}
        </div>

        {/* suggested actions */}
        <div style={{ padding: '14px 18px', flex: 1, overflow: 'auto' }}>
          <div style={{ fontSize: 10, color: C.ink3, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 500, marginBottom: 10 }}>
            Suggested actions
          </div>
          {[
            ['Send safety reminder to crew','PPE violation at 10:14 · Diego M.','1 tap'],
            ['Auto-update daily log',      'Framing 62% · debris pickup due','draft ready'],
            ['Schedule debris haul',       'Via Marley Freight · ETA tomorrow','$240'],
            ['Add to client update',       'Photo + progress note to Calloway',''],
          ].map(([t, s, c], i) => (
            <div key={i} style={{
              padding: 10, border: `1px solid ${C.line}`, borderRadius: 7,
              marginBottom: 8, background: C.bg,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                <span style={{ fontSize: 13, fontWeight: 500 }}>{t}</span>
                {c && <span style={{ marginLeft: 'auto', fontSize: 10, fontFamily: C.mono, color: C.ink3 }}>{c}</span>}
              </div>
              <div style={{ fontSize: 11, color: C.ink2, lineHeight: 1.45 }}>{s}</div>
            </div>
          ))}

          <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
            <CButton primary icon="✓">Accept all</CButton>
            <CButton>Review each</CButton>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes photoScan {
          0% { transform: translateY(-100%) }
          100% { transform: translateY(100%) }
        }
        @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.3 } }
      `}</style>
    </div>
  );
}

function DetectBox({ left, top, w, h, label, confidence, tone, small, alert }) {
  const color = tone === 'mint' ? C.mint : tone === 'red' ? C.red : tone === 'amber' ? C.amber : C.blue;
  return (
    <div style={{
      position: 'absolute', left, top, width: w, height: h,
      border: `1.5px solid ${color}`, borderRadius: 3,
      boxShadow: `0 0 0 1px rgba(255,255,255,0.2) inset`,
      animation: alert ? 'alertPulse 1.4s ease-in-out infinite' : 'none',
    }}>
      <div style={{
        position: 'absolute', top: -22, left: -1.5,
        padding: '2px 7px', background: color, color: '#fff',
        fontSize: small ? 9 : 10, fontFamily: C.mono, whiteSpace: 'nowrap',
        borderRadius: '3px 3px 3px 0',
        display: 'flex', alignItems: 'center', gap: 5,
      }}>
        {label}
        <span style={{ opacity: 0.8 }}>· {confidence}</span>
      </div>
      <style>{`
        @keyframes alertPulse {
          0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.2) inset, 0 0 0 0 rgba(220,38,38,0.5); }
          50%      { box-shadow: 0 0 0 1px rgba(255,255,255,0.2) inset, 0 0 0 6px rgba(220,38,38,0); }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { PhotosPage });