/* SkyOps — Inspection comparator
   Compare two MIC cycles from the same site side-by-side.
   KPIs · defect-class bar · detection delta heatmap · trend over all cycles · re-fly queue. */

const { useState: useStateCmp, useMemo: useMemoCmp } = React;

function InspectionCompare({ siteId, micAId, micBId, go, setActiveMic }) {
  const site = (window.SITES || []).find(s => s.id === siteId);
  const siteInsps = (window.INSPECTIONS || []).filter(i => i.siteId === siteId)
    .sort((a,b) => (a.startedAt || a.plannedFor || "").localeCompare(b.startedAt || b.plannedFor || ""));
  const [aId, setAId] = useStateCmp(micAId || siteInsps[siteInsps.length - 2]?.id);
  const [bId, setBId] = useStateCmp(micBId || siteInsps[siteInsps.length - 1]?.id);
  const A = siteInsps.find(i => i.id === aId) || siteInsps[0];
  const B = siteInsps.find(i => i.id === bId) || siteInsps[siteInsps.length - 1];

  // Synthetic defect distribution per cycle
  const defectClasses = [
    { k: "hot_cell",   name: "Hot cell",    color: "#ef4444" },
    { k: "bypass",     name: "Bypass",      color: "#f59e0b" },
    { k: "pid",        name: "PID",         color: "#a855f7" },
    { k: "soiling",    name: "Soiling",     color: "#84cc16" },
    { k: "vegetation", name: "Vegetation",  color: "#14b8a6" },
    { k: "string_off", name: "String off",  color: "#64748b" },
  ];
  const distFor = (mic) => {
    let seed = parseInt(mic.id.replace(/\D/g,"").slice(-4) || "1", 10);
    const rand = () => { seed = (seed * 9301 + 49297) % 233280; return seed / 233280; };
    const total = mic.detections || 0;
    const weights = defectClasses.map(() => rand());
    const sum = weights.reduce((a,b) => a+b, 0) || 1;
    return defectClasses.map((c, i) => ({ ...c, count: Math.round((weights[i] / sum) * total) }));
  };
  const distA = useMemoCmp(() => distFor(A), [A.id]);
  const distB = useMemoCmp(() => distFor(B), [B.id]);

  // Delta map grid: 18 × 10 panels. State = "new", "resolved", "persistent", "clean"
  const deltaGrid = useMemoCmp(() => {
    let seedA = parseInt(A.id.replace(/\D/g,"").slice(-4) || "1", 10);
    let seedB = parseInt(B.id.replace(/\D/g,"").slice(-4) || "2", 10);
    const randA = () => { seedA = (seedA * 9301 + 49297) % 233280; return seedA / 233280; };
    const randB = () => { seedB = (seedB * 9301 + 49297) % 233280; return seedB / 233280; };
    const out = [];
    for (let r = 0; r < 10; r++) {
      for (let c = 0; c < 22; c++) {
        const a = randA() < 0.14;
        const b = randB() < 0.12;
        let state = "clean";
        if (a && b) state = "persistent";
        else if (!a && b) state = "new";
        else if (a && !b) state = "resolved";
        out.push({ r, c, state });
      }
    }
    return out;
  }, [A.id, B.id]);

  const counts = useMemoCmp(() => {
    const c = { new: 0, resolved: 0, persistent: 0, clean: 0 };
    deltaGrid.forEach(d => c[d.state]++);
    return c;
  }, [deltaGrid]);

  const kpis = [
    { k: "coverage", label: "Coverage", unit: "%", a: A.coverage || 0, b: B.coverage || 0, goodDir: 1, digits: 1 },
    { k: "det",      label: "Total detections", a: A.detections, b: B.detections, goodDir: -1 },
    { k: "crit",     label: "Critical",       a: A.critical, b: B.critical, goodDir: -1 },
    { k: "new",      label: "New panels",     a: 0, b: counts.new, goodDir: -1 },
    { k: "resolved", label: "Resolved",       a: 0, b: counts.resolved, goodDir: 1 },
    { k: "gsd",      label: "GSD",  unit: " cm/px", a: A.gsd || 0, b: B.gsd || 0, goodDir: -1, digits: 2 },
  ];

  const pct = (a, b) => {
    if (!a && !b) return null;
    if (!a) return { sym: "+", val: "new" };
    const d = ((b - a) / a) * 100;
    return { sym: d > 0 ? "+" : "", val: d.toFixed(1) + "%" };
  };

  return (
    <div className="page" data-screen-label="InspectionCompare">
      <div className="page-head">
        <div className="title">
          <div className="kicker">
            <button className="page-kicker-crumb" onClick={() => go("portfolio")}>Portfolio</button>
            <span className="page-kicker-sep">/</span>
            <button className="page-kicker-crumb" onClick={() => go("site")}>{site?.name}</button>
            <span className="page-kicker-sep">/</span>
            <span>Inspection comparator</span>
          </div>
          <h1>{site?.name} · temporal comparison</h1>
          <div className="sub">Detect what changed between two MIC cycles — re-fly targets, resolved panels, drift in defect distribution.</div>
        </div>
      </div>

      <div className="cmp-ab-picker">
        <div className="cmp-ab-side cmp-ab-a">
          <div className="cmp-ab-kick">Baseline · A</div>
          <select className="cmp-ab-sel" value={A.id} onChange={e => setAId(e.target.value)}>
            {siteInsps.map(i => <option key={i.id} value={i.id}>{i.id} · {i.cycle} · {i.startedAt || i.plannedFor}</option>)}
          </select>
          <div className="cmp-ab-meta mono">{A.coverage}% · {A.detections} det · {A.flights || "—"} flights</div>
        </div>
        <div className="cmp-ab-vs"><Icon name="arrow_right" size={14}/></div>
        <div className="cmp-ab-side cmp-ab-b">
          <div className="cmp-ab-kick">Current · B</div>
          <select className="cmp-ab-sel" value={B.id} onChange={e => setBId(e.target.value)}>
            {siteInsps.map(i => <option key={i.id} value={i.id}>{i.id} · {i.cycle} · {i.startedAt || i.plannedFor}</option>)}
          </select>
          <div className="cmp-ab-meta mono">{B.coverage}% · {B.detections} det · {B.flights || "—"} flights</div>
        </div>
      </div>

      {/* KPIs */}
      <div className="cmp-kpis">
        {kpis.map(kp => {
          const d = pct(kp.a, kp.b);
          const isGood = d && d.val !== "new" && (kp.goodDir * (kp.b - kp.a) >= 0);
          return (
            <div key={kp.k} className="cmp-kpi">
              <div className="cmp-kpi-label">{kp.label}</div>
              <div className="cmp-kpi-vals">
                <span className="cmp-kpi-a mono">{typeof kp.a === "number" ? kp.a.toFixed(kp.digits || 0) : kp.a}{kp.unit || ""}</span>
                <Icon name="arrow_right" size={10}/>
                <span className="cmp-kpi-b mono">{typeof kp.b === "number" ? kp.b.toFixed(kp.digits || 0) : kp.b}{kp.unit || ""}</span>
              </div>
              {d && <div className={`cmp-kpi-delta ${isGood ? "is-good" : "is-bad"}`}>{d.sym}{d.val}</div>}
            </div>
          );
        })}
      </div>

      <div className="cmp-grid">
        {/* Delta map */}
        <div className="card cmp-deltamap">
          <div className="cmp-card-hd">
            <div>
              <div className="kicker">Panel-level delta</div>
              <h3>What changed · {A.id} → {B.id}</h3>
            </div>
            <div className="cmp-deltamap-legend">
              <span className="cmp-leg"><i style={{background: "#ef4444"}}/>new · {counts.new}</span>
              <span className="cmp-leg"><i style={{background: "#84cc16"}}/>resolved · {counts.resolved}</span>
              <span className="cmp-leg"><i style={{background: "#f59e0b"}}/>persistent · {counts.persistent}</span>
              <span className="cmp-leg"><i style={{background: "var(--border-strong)"}}/>clean</span>
            </div>
          </div>
          <div className="cmp-deltamap-grid">
            {deltaGrid.map((d, i) => (
              <span key={i} className={`cmp-delta-cell cmp-delta-${d.state}`} title={`row ${d.r+1}, col ${d.c+1} · ${d.state}`}/>
            ))}
          </div>
          <div className="cmp-deltamap-foot">
            <button className="btn btn-secondary btn-xs" onClick={() => { if (setActiveMic) setActiveMic(B.id); go("planner"); }}>
              <Icon name="crosshair" size={11}/>
              Re-fly persistent & new · {counts.persistent + counts.new} panels
            </button>
            <button className="btn btn-ghost btn-xs"><Icon name="download" size={11}/>Export .geojson</button>
          </div>
        </div>

        {/* Defect distribution */}
        <div className="card cmp-dist">
          <div className="cmp-card-hd">
            <div>
              <div className="kicker">Defect distribution</div>
              <h3>Class mix · A vs B</h3>
            </div>
            <div className="mono cmp-mut">{A.detections} → {B.detections}</div>
          </div>
          <div className="cmp-dist-body">
            {defectClasses.map((c, i) => {
              const aCount = distA[i].count, bCount = distB[i].count;
              const maxA = Math.max(...distA.map(x => x.count), 1);
              const maxB = Math.max(...distB.map(x => x.count), 1);
              return (
                <div key={c.k} className="cmp-dist-row">
                  <div className="cmp-dist-lbl">
                    <span className="cmp-dist-dot" style={{ background: c.color }}/>
                    {c.name}
                  </div>
                  <div className="cmp-dist-bars">
                    <div className="cmp-dist-bar-wrap">
                      <span className="cmp-dist-bar cmp-dist-bar-a" style={{ width: `${(aCount / maxA) * 100}%`, background: c.color }}/>
                      <span className="cmp-dist-bar-val mono">{aCount}</span>
                    </div>
                    <div className="cmp-dist-bar-wrap">
                      <span className="cmp-dist-bar cmp-dist-bar-b" style={{ width: `${(bCount / maxB) * 100}%`, background: c.color }}/>
                      <span className="cmp-dist-bar-val mono">{bCount}</span>
                    </div>
                  </div>
                  <div className={`cmp-dist-delta ${bCount - aCount > 0 ? "is-up" : bCount - aCount < 0 ? "is-down" : ""}`}>
                    {bCount - aCount > 0 ? "+" : ""}{bCount - aCount}
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Trend across all cycles */}
        <div className="card cmp-trend">
          <div className="cmp-card-hd">
            <div>
              <div className="kicker">Trend · all cycles at {site?.name}</div>
              <h3>Detections & coverage over time</h3>
            </div>
            <div className="cmp-trend-legend">
              <span className="cmp-leg"><i style={{background: "var(--accent-primary)"}}/>detections</span>
              <span className="cmp-leg"><i style={{background: "var(--sev-low)"}}/>coverage %</span>
            </div>
          </div>
          <div className="cmp-trend-body">
            <svg viewBox="0 0 800 220" width="100%" preserveAspectRatio="none">
              {/* grid */}
              {[0,1,2,3,4].map(i => (
                <line key={i} x1="40" y1={40 + i * 35} x2="780" y2={40 + i * 35}
                      stroke="var(--border-base)" strokeWidth="0.5" strokeDasharray="3 4"/>
              ))}
              {(() => {
                const pts = siteInsps.filter(i => i.detections > 0);
                if (pts.length < 2) return null;
                const maxDet = Math.max(...pts.map(p => p.detections));
                const w = 720, h = 140, x0 = 40, y0 = 40;
                const xFor = (i) => x0 + (i / (pts.length - 1)) * w;
                const yDet = (v) => y0 + h - (v / maxDet) * h;
                const yCov = (v) => y0 + h - (v / 100) * h;
                const detPath = pts.map((p, i) => `${i===0?"M":"L"} ${xFor(i)} ${yDet(p.detections)}`).join(" ");
                const covPath = pts.map((p, i) => `${i===0?"M":"L"} ${xFor(i)} ${yCov(p.coverage)}`).join(" ");
                return (
                  <>
                    <path d={detPath} stroke="var(--accent-primary)" strokeWidth="2" fill="none"/>
                    <path d={covPath} stroke="var(--sev-low)" strokeWidth="2" fill="none" strokeDasharray="4 3"/>
                    {pts.map((p, i) => {
                      const isA = p.id === A.id, isB = p.id === B.id;
                      return (
                        <g key={p.id}>
                          <circle cx={xFor(i)} cy={yDet(p.detections)} r={isA || isB ? 5 : 3}
                                  fill="var(--accent-primary)" stroke="var(--bg-canvas)" strokeWidth="2"/>
                          <circle cx={xFor(i)} cy={yCov(p.coverage)} r={isA || isB ? 5 : 3}
                                  fill="var(--sev-low)" stroke="var(--bg-canvas)" strokeWidth="2"/>
                          <text x={xFor(i)} y="200" textAnchor="middle" fontSize="10"
                                fill={isA || isB ? "var(--fg-base)" : "var(--fg-muted)"}
                                fontFamily="var(--font-mono)" fontWeight={isA || isB ? 600 : 400}>
                            {p.cycle}
                          </text>
                          {(isA || isB) && (
                            <rect x={xFor(i) - 12} y="208" width="24" height="12" rx="2"
                                  fill={isA ? "rgba(74,144,217,0.2)" : "rgba(132,204,22,0.2)"}
                                  stroke={isA ? "var(--accent-primary)" : "var(--sev-low)"} strokeWidth="0.8"/>
                          )}
                          {(isA || isB) && (
                            <text x={xFor(i)} y="217" textAnchor="middle" fontSize="9"
                                  fill={isA ? "var(--accent-primary)" : "var(--sev-low)"}
                                  fontFamily="var(--font-mono)">
                              {isA ? "A" : "B"}
                            </text>
                          )}
                        </g>
                      );
                    })}
                  </>
                );
              })()}
            </svg>
          </div>
        </div>

        {/* Persistent defects list */}
        <div className="card cmp-persist">
          <div className="cmp-card-hd">
            <div>
              <div className="kicker">Carry-over</div>
              <h3>Persistent defects · {counts.persistent}</h3>
            </div>
          </div>
          <div className="cmp-persist-body">
            {Array.from({ length: 6 }).map((_, i) => {
              const cls = defectClasses[i % defectClasses.length];
              return (
                <div key={i} className="cmp-persist-row">
                  <span className="cmp-persist-dot" style={{ background: cls.color }}/>
                  <span className="mono cmp-persist-id">PANEL · p{(i+2)}-{(i*7)%22}</span>
                  <span className="cmp-persist-kind">{cls.name}</span>
                  <span className="mono cmp-persist-age">{2 + i % 3} cycles</span>
                  <Icon name="chevron_right" size={11}/>
                </div>
              );
            })}
          </div>
          <div className="cmp-persist-foot">
            <button className="btn btn-ghost btn-xs"><Icon name="arrow_right" size={11}/>Open all in Review</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.InspectionCompare = InspectionCompare;