import { useState, useCallback, useRef, useEffect } from "react";

// ─── PALETTE ──────────────────────────────────────────────────────────────────
const C = {
  bg:        "#07090f",
  bgAlt:     "#0c0f18",
  panel:     "#0f1420",
  panelAlt:  "#111827",
  border:    "#1a2236",
  borderHi:  "#243050",
  accent:    "#4f9eff",
  accentDim: "#2a6abd",
  accentBg:  "#4f9eff12",
  gold:      "#f0b429",
  goldBg:    "#f0b42912",
  good:      "#34d399",
  goodBg:    "#34d39912",
  warn:      "#fb923c",
  warnBg:    "#fb923c12",
  danger:    "#f87171",
  dangerBg:  "#f8717112",
  purple:    "#a78bfa",
  purpleBg:  "#a78bfa12",
  text:      "#cbd5e1",
  muted:     "#475569",
  heading:   "#f1f5f9",
};

// ─── HALL DEFAULTS ────────────────────────────────────────────────────────────
// Confirmed geometry from SK-303 Version B + site measurements
//
// PLAN (square seating zone):
//   Overall seating plan: 20914 x 20914mm (half-width = 10457mm)
//   Row 1 front edge:  2210mm radius from centre
//   Row pitch:         883mm FFL to FFL (8 main rows)
//   Row 8 back face:   8411mm radius (per SK-303 drawing)
//   Back aisle:        2046mm  (10457 - 8411 = 2046 ✓)
//   Corner seating:    4 rows, same 883mm pitch, front of row 1 = 620mm from aisle wall
//   Corner row 1 front radius ≈ 10457 + 620 = beyond main seating — in corner zone
//
// SECTION (flat ceiling — "1 in 8 slope"):
//   Ceiling at row 1 front (r=2210):   4338mm  (3600 + 738)
//   Ceiling at row 8 back  (r=8411):   3600mm  (confirmed)
//   Ceiling  perimeter aisle:          3600mm (confirmed)
//   Ceiling behind last corner row:    2950mm
//
// FLOOR (dished — rises from centre outward):
//   Centre floor: 0mm datum (lowest)
//   Row 8 back:  +738mm rise (SK-303)
//   Slope ≈ 1:8.4
//
// CORNER SPEAKERS:
//   Radius: 10310mm from centre
//   1500mm from side walls (wall at 10457mm → coord = 8957mm on one axis)


const HALL_DEFAULTS = {
  hallWidth:          20914,  // mm — confirmed seating plan dimension
  rows:               8,      // main circular rows
  row1Radius:         2210,   // mm — centre to front edge of row 1
  rowPitch:           883,    // mm — FFL to FFL
  row8Back:           8411,   // mm — centre to back face of row 8
  aisleWidth:         2046,   // mm — back aisle width
  // Corner seating
  cornerRows:         4,
  cornerFrontOffset:  620,    // mm — front of corner row 1 from aisle back wall
  hasCornerRows:      true,
  // Ceiling — SLOPED, higher at centre, lower at perimeter
  ceilAtRow1Front:    4338,   // mm — ceiling at r=2210mm (row 1 front)
  ceilAtRow8Back:     3600,   // mm — ceiling at r=8411mm (back of row 8 / aisle)
  ceilAtCornerBack:   2950,   // mm — ceiling behind last corner row
  // Floor — DISHED, rises from centre outward
  dishRise:           700,    // mm — floor rise from centre to row 8 back
  // Acoustic
  earHeight:          1100,   // mm — seated ear above local floor
  speedOfSound:       343,    // m/s
  tileGrid:           600,    // mm — ceiling tile grid
};

// Confirmed speaker layout — all flush with flat ceiling (no drop rods)
// Ceiling at 4300mm above centre floor datum throughout
// Inner ring:  8× at r=5720mm
// Outer ring:  8× at r=8600mm
// Corner:      8× (2 per corner) at r=10310mm
const SPEAKER_DEFAULTS = {
  centre: {
    enabled: true,  count: 1,  radius: 0,     dropRod: 0,
    power: 6,  sensitivity: 88, phase:  1, label: "Centre (×1)",
  },
  inner: {
    enabled: true,  count: 8,  radius: 5720,  dropRod: 0,
    power: 8,  sensitivity: 88, phase:  1, label: "Inner Ring (×8)",
  },
  outer: {
    enabled: true,  count: 8,  radius: 8600,  dropRod: 0,
    power: 8,  sensitivity: 88, phase:  1, label: "Outer Ring (×8)",
  },
  corner: {
    enabled: true,  count: 8,  radius: 10310, dropRod: 0,
    power: 4,  sensitivity: 88, phase:  1, label: "Corner (×8, 2/corner)",
  },
};

const SETTINGS_DEFAULTS = {
  provider: "ollama",
  ollamaHost: "http://127.0.0.1", ollamaPort: "11434", ollamaModel: "",
  anthropicKey: "", anthropicModel: "claude-sonnet-4-20250514",
  rewHost: "http://127.0.0.1", rewPort: "4735",
  maxTokens: 2048, temperature: 0.3,
  systemPrompt: "You are an expert acoustic consultant specialising in distributed ceiling speaker systems for large assembly halls. You have deep knowledge of the Brethren meeting hall (PBCC Universal hall) speaker system design, including the MS6 speaker with Visaton FRS8M and G20SC drivers, the MIDAS MR12 active crossover system, anti-phasing techniques, and the Haas effect in multi-speaker environments. Analyse the provided coverage data and give specific, technical, actionable recommendations.",
};

// ─── GEOMETRY ENGINE ──────────────────────────────────────────────────────────
// Ceiling is FLAT at ceilFlat mm above centre floor datum (lowest point).
// Floor rises linearly from 0 at centre to dishRise at row 8 outer radius.
// earToCell = ceilFlat - (earHeight + floorRise) — gets smaller toward perimeter.
// speakerHeightAboveCentreDatum = ceilFlat - dropRod (flat ceiling mount).
// ── Ceiling height at any radius (linear interpolation / extrapolation) ──────
// Seating zone:  r=row1Radius(2210) → r=row8Back(8411): 4338mm → 3600mm
// Corner zone:   r=row8Back(8411)   → r=cornerBackR:    3600mm → 2950mm
function ceilHeightAtRadius(r, hall) {
  const { row1Radius, row8Back, ceilAtRow1Front, ceilAtRow8Back, ceilAtCornerBack,
          cornerRows, cornerFrontOffset, aisleWidth, rowPitch } = hall;
  const halfW = hall.hallWidth / 2;
  // Corner back wall radius (along axis, not diagonal)
  const cornerFrontR = halfW + cornerFrontOffset;          // ≈10457+620=11077 — wait,
  // Actually corners are IN the square beyond the circular aisle.
  // Corner row 1 front is 620mm PAST the aisle back wall (halfW = 10457mm)
  // so corner row 1 front = halfW - aisleWidth ... no.
  // The aisle sits between row8Back(8411) and halfW(10457).
  // Corner seating is in the SQUARE CORNERS beyond the circular arrangement.
  // For ceiling purposes we use radius from centre as proxy:
  // Corner row mid positions along the diagonal axis ≈ halfW + 620 + pitch*n/2
  // But for section analysis we treat them on a radial axis:
  const cornerRow1Front = halfW + cornerFrontOffset; // beyond the back wall... 
  // CORRECTION: corners are WITHIN the building. The aisle back wall IS the building
  // back wall at halfW=10457mm. Corner rows face inward FROM that wall:
  // Corner row 1 front = halfW - cornerFrontOffset = 10457 - 620 = 9837mm from centre
  const cFront = halfW - cornerFrontOffset;   // 9837mm — front of corner row 1
  const cBack  = cFront + (cornerRows) * rowPitch; // back of last corner row

  if (r <= row8Back) {
    // Main seating zone: interpolate between row1Front ceiling and row8Back ceiling
    const t = Math.max(0, (r - row1Radius) / (row8Back - row1Radius));
    return Math.round(ceilAtRow1Front - t * (ceilAtRow1Front - ceilAtRow8Back));
  } else {
    // Aisle + corner zone: interpolate from row8Back ceiling to cornerBack ceiling
    const t = Math.min(1, (r - row8Back) / (cBack - row8Back));
    return Math.round(ceilAtRow8Back - t * (ceilAtRow8Back - ceilAtCornerBack));
  }
}

// ── Floor height at radius (dish — rises from 0 at centre to dishRise at row8Back) ─
function floorHeightAtRadius(r, hall) {
  const ref = hall.row8Back;
  if (r <= ref) return Math.round((r / ref) * hall.dishRise);
  // Beyond row8Back: floor continues to rise (conservative — same slope)
  return Math.round((r / ref) * hall.dishRise);
}

function computeHallGeometry(hall) {
  const { rows, row1Radius, rowPitch, earHeight, aisleWidth,
          hasCornerRows, cornerRows, cornerFrontOffset, hallWidth } = hall;
  const halfW   = hallWidth / 2;      // 10457mm
  const dishRef = hall.row8Back;

  const rowData = [];

  // ── Main circular rows 1–8 ──────────────────────────────────────────────────
  for (let r = 1; r <= rows; r++) {
    const frontEdge = row1Radius + (r - 1) * rowPitch;
    const radius    = frontEdge + Math.round(rowPitch / 2); // mid-bench ear
    const floorRise = floorHeightAtRadius(radius, hall);
    const ceilH     = ceilHeightAtRadius(radius, hall);
    const earAFF    = earHeight + floorRise;
    const earToCell = ceilH - earAFF;
    rowData.push({ row: r, radius, frontEdge, floorRise, ceilHeight: ceilH, earAFF, earToCell, isCorner: false });
  }

  // ── Corner rows ─────────────────────────────────────────────────────────────
  // Corner rows face inward from the back wall.
  // Front of corner row 1 = halfW - cornerFrontOffset from centre (along axis)
  // BUT corners are at 45° diagonals — for acoustic section we use the radial
  // distance along the corner row axis (approx = distance from centre along diagonal)
  if (hasCornerRows) {
    const cRow1Front = halfW - cornerFrontOffset; // 9837mm — front of corner row 1
    for (let cr = 1; cr <= cornerRows; cr++) {
      const frontEdge = cRow1Front + (cr - 1) * rowPitch;
      const radius    = frontEdge + Math.round(rowPitch / 2);
      const floorRise = floorHeightAtRadius(radius, hall);
      const ceilH     = ceilHeightAtRadius(radius, hall);
      const earAFF    = earHeight + floorRise;
      const earToCell = ceilH - earAFF;
      rowData.push({ row: `C${cr}`, radius, frontEdge, floorRise, ceilHeight: ceilH, earAFF, earToCell, isCorner: true, cornerRow: cr });
    }
  }
  return rowData;
}

function computeCoverage(hall, speakers, rowData) {
  const c = hall.speedOfSound;
  const rings = ["centre", "inner", "outer", "corner"];
  const results = [];
  for (const row of rowData) {
    const rowResults = { row: row.row, radius: row.radius, earAFF: row.earAFF, speakers: {} };
    // Speaker flush at sloped ceiling — height = ceilHeightAtRadius(spk.radius) - dropRod
    let minDelay = Infinity;
    for (const ring of rings) {
      const spk = speakers[ring];
      if (!spk.enabled) continue;
      const spkH     = ceilHeightAtRadius(spk.radius, hall) - spk.dropRod;
      const vertDiff = spkH - row.earAFF;
      const horizDist= Math.abs(row.radius - spk.radius);
      const slant    = Math.sqrt(vertDiff ** 2 + horizDist ** 2);
      const delay    = (slant / 1000) / c * 1000;
      if (delay < minDelay) minDelay = delay;
    }
    for (const ring of rings) {
      const spk = speakers[ring];
      if (!spk.enabled) { rowResults.speakers[ring] = null; continue; }
      const spkH      = ceilHeightAtRadius(spk.radius, hall) - spk.dropRod;
      const vertDiff  = spkH - row.earAFF;
      const horizDist = Math.abs(row.radius - spk.radius);
      const slant     = Math.sqrt(vertDiff ** 2 + horizDist ** 2);
      const slantM    = slant / 1000;
      const delay     = slantM / c * 1000;
      const haasExcess= delay - minDelay;
      // off-axis angle: 0°=straight down from speaker, increases toward horizontal
      const offAxisDeg= Math.round(Math.atan2(horizDist, Math.max(vertDiff, 1)) * 180 / Math.PI);
      // SPL: 88dB/1W/1m + 20log(1/d) + 10log(W)
      const splAtEar  = spk.sensitivity + 20 * Math.log10(1 / Math.max(slantM, 0.1)) + 10 * Math.log10(Math.max(spk.power, 0.01));
      const inCoverage= offAxisDeg <= 55;
      let haasStatus  = "primary";
      if      (haasExcess > 30) haasStatus = "danger";
      else if (haasExcess > 10) haasStatus = "warn";
      else if (haasExcess > 0)  haasStatus = "ok";
      rowResults.speakers[ring] = {
        slantM, delay, haasExcess, offAxisDeg,
        splAtEar: Math.round(splAtEar * 10) / 10,
        inCoverage, haasStatus, spkH, vertDiff,
      };
    }
    results.push(rowResults);
  }
  return results;
}

// Flutter: flat ceiling vs rising floor — clearance decreases toward perimeter
function computeFlutter(hall) {
  const dishRef = hall.row8Back; // not used directly below but kept for reference
  // Centre: floor=0, ear=earHeight
  // Centre: use row1 front radius as proxy for centre-zone ceiling
  const centreR      = hall.row1Radius;
  const centreCeil   = ceilHeightAtRadius(centreR, hall);
  const centreClear  = centreCeil - hall.earHeight;
  // Row 8 mid-bench
  const row8Mid      = hall.row8Back - Math.round(hall.rowPitch / 2);
  const row8Floor    = floorHeightAtRadius(row8Mid, hall);
  const row8Ceil     = ceilHeightAtRadius(row8Mid, hall);
  const row8Clear    = row8Ceil - (hall.earHeight + row8Floor);
  // Last corner row mid
  const halfW        = hall.hallWidth / 2;
  const cFront       = halfW - hall.cornerFrontOffset;
  const cLastMid     = cFront + (hall.cornerRows - 0.5) * hall.rowPitch;
  const cFloor       = floorHeightAtRadius(cLastMid, hall);
  const cCeil        = ceilHeightAtRadius(cLastMid, hall);
  const cornerClear  = cCeil - (hall.earHeight + cFloor);

  const f = (mm) => Math.round((hall.speedOfSound * 1000) / (2 * Math.max(mm, 100)));
  const fundamentalCentre = f(centreClear);
  const harmonics = [1,2,3,4,5].map(n => Math.round(fundamentalCentre * n));
  // Tile diffraction: c/tileGrid
  const tileDiffraction = Math.round((hall.speedOfSound * 1000) / hall.tileGrid);
  return {
    fundamentalCentre, fundamentalRow8: f(row8Clear), fundamentalCorner: f(cornerClear),
    harmonics, tileDiffraction,
    centreClearMm: centreClear, row8ClearMm: row8Clear, cornerClearMm: cornerClear,
  };
}

// ─── PRIMITIVES ───────────────────────────────────────────────────────────────
const Lbl = ({ children, sub }) => (
  <div style={{ marginBottom: 5 }}>
    <label style={{ display: "block", fontSize: 10, letterSpacing: 1.3, textTransform: "uppercase", color: C.muted }}>{children}</label>
    {sub && <span style={{ fontSize: 10, color: C.muted, opacity: 0.7 }}>{sub}</span>}
  </div>
);

const Field = ({ label, sub, children }) => (
  <div style={{ marginBottom: 14 }}>
    <Lbl sub={sub}>{label}</Lbl>
    {children}
  </div>
);

const numStyle = { background: "#080b12", border: `1px solid ${C.border}`, borderRadius: 6, color: C.heading, padding: "7px 10px", width: "100%", fontSize: 13, outline: "none", fontFamily: "inherit", boxSizing: "border-box" };
const NumIn = ({ value, onChange, min, max, step = 1, unit, style: sx }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
    <input type="number" value={value} min={min} max={max} step={step} onChange={e => onChange(+e.target.value || 0)} style={{ ...numStyle, ...sx }} />
    {unit && <span style={{ fontSize: 11, color: C.muted, whiteSpace: "nowrap" }}>{unit}</span>}
  </div>
);

const TxtIn = ({ value, onChange, type = "text", placeholder, style: sx }) => (
  <input type={type} value={value} placeholder={placeholder} onChange={e => onChange(e.target.value)}
    style={{ ...numStyle, ...sx }} />
);

const Btn = ({ onClick, disabled, children, color = C.accent, outline, style: sx }) => (
  <button onClick={onClick} disabled={disabled} style={{
    background: outline ? "transparent" : disabled ? C.border : color,
    color: outline ? color : disabled ? C.muted : C.bg,
    border: `1px solid ${outline ? color : disabled ? C.border : color}`,
    borderRadius: 7, padding: "9px 18px", fontSize: 12, fontWeight: 700,
    letterSpacing: 0.5, cursor: disabled ? "not-allowed" : "pointer",
    fontFamily: "inherit", transition: "all 0.15s", ...sx,
  }}>{children}</button>
);

const Tag = ({ color = C.accent, children, size = "sm" }) => (
  <span style={{ background: color + "20", border: `1px solid ${color}40`, color, borderRadius: 4, padding: size === "sm" ? "2px 8px" : "4px 12px", fontSize: size === "sm" ? 10 : 12, letterSpacing: 0.5, whiteSpace: "nowrap" }}>{children}</span>
);

const Dot = ({ color }) => <span style={{ display: "inline-block", width: 7, height: 7, borderRadius: "50%", background: color, flexShrink: 0 }} />;

const Panel = ({ children, style: sx, accent }) => (
  <div style={{ background: C.panel, border: `1px solid ${accent ? accent + "40" : C.border}`, borderRadius: 12, padding: 20, marginBottom: 14, ...sx }}>{children}</div>
);

const SectionHead = ({ children, sub }) => (
  <div style={{ marginBottom: 16 }}>
    <h2 style={{ margin: 0, color: C.heading, fontSize: 14, fontWeight: 700, letterSpacing: 0.3 }}>{children}</h2>
    {sub && <p style={{ margin: "4px 0 0", fontSize: 11, color: C.muted }}>{sub}</p>}
  </div>
);

const Divider = () => <div style={{ height: 1, background: C.border, margin: "16px 0" }} />;

// ─── HAAS STATUS HELPERS ──────────────────────────────────────────────────────
const haasColor = (s) => ({ primary: C.good, ok: C.accent, warn: C.gold, danger: C.danger }[s] || C.muted);
const haasLabel = (s) => ({ primary: "Primary", ok: "OK <10ms", warn: "Warn 10–30ms", danger: "Echo >30ms" }[s] || "—");

// ─── SECTION DIAGRAM ──────────────────────────────────────────────────────────
function SectionDiagram({ hall, speakers, rowData }) {
  const W = 640, H = 220, PAD = 40;
  const outerR   = hall.row1Radius + (hall.rows - 1) * hall.rowPitch;
  const totalW   = outerR + hall.aisleWidth;
  const scaleX   = (W - PAD * 2) / totalW;
  const maxCeil  = ceilHeightAtRadius(hall.row1Radius, hall);
  const scaleY   = (H - PAD * 2) / maxCeil;
  const cx = (r) => PAD + r * scaleX;
  const cy = (h) => H - PAD - h * scaleY;

  return (
    <svg width="100%" viewBox={`0 0 ${W} ${H}`} style={{ display: "block", background: "#07090f", borderRadius: 8, border: `1px solid ${C.border}` }}>
      {/* flat ceiling */}
      {/* Sloped ceiling line */}
      {(() => { const cpts = rowData.map(r => `${cx(r.radius)},${cy(r.ceilHeight)}`).join(' '); return <polyline points={`${cx(0)},${cy(ceilHeightAtRadius(0,hall))} ${cpts} ${cx(totalW)},${cy(hall.ceilAtCornerBack)}`} fill="none" stroke={C.borderHi} strokeWidth={2} />; })()}
      <text x={cx(hall.row1Radius)+4} y={cy(ceilHeightAtRadius(hall.row1Radius,hall))-4} fill={C.muted} fontSize={9}>Ceiling (sloped {hall.ceilAtRow1Front}→{hall.ceilAtRow8Back}→{hall.ceilAtCornerBack}mm)</text>
      {/* dish floor — rises from centre to perimeter */}
      <polyline
        points={`${cx(0)},${cy(0)} ` + rowData.map(r => `${cx(r.radius)},${cy(r.floorRise)}`).join(" ")}
        fill="none" stroke={C.borderHi} strokeWidth={1.5} strokeDasharray="4,3" />
      <text x={cx(outerR) + 4} y={cy(hall.dishRise) - 4} fill={C.muted} fontSize={9}>Floor (+{hall.dishRise}mm rise)</text>
      {/* rows — vertical line from floor to ear height */}
      {rowData.map((r) => (
        <g key={r.row}>
          <line x1={cx(r.radius)} y1={cy(r.floorRise)} x2={cx(r.radius)} y2={cy(r.earAFF)} stroke={C.border} strokeWidth={1} />
          <circle cx={cx(r.radius)} cy={cy(r.earAFF)} r={3} fill={C.accent} opacity={0.8} />
          <text x={cx(r.radius)} y={cy(r.floorRise) + 12} fill={C.muted} fontSize={8} textAnchor="middle">{r.isCorner ? "C" : r.row}</text>
        </g>
      ))}
      {/* speakers */}
      {Object.entries(speakers).map(([ring, spk]) => {
        if (!spk.enabled) return null;
        const spkH  = ceilHeightAtRadius(spk.radius, hall) - spk.dropRod;
        const spkY  = cy(spkH);
        const spkX  = cx(spk.radius);
        const color = ring === "centre" ? C.gold : ring === "inner" ? C.good : ring === "outer" ? C.purple : C.accent;
        return (
          <g key={ring}>
            <line x1={spkX} y1={cy(ceilHeightAtRadius(spk.radius,hall))} x2={spkX} y2={spkY} stroke={color} strokeWidth={1} strokeDasharray="2,2" opacity={0.5} />
            <rect x={spkX - 7} y={spkY - 4} width={14} height={8} fill={color} rx={2} opacity={0.9} />
            <text x={spkX} y={spkY - 7} fill={color} fontSize={7} textAnchor="middle">{spk.radius === 0 ? "CTR" : spk.radius >= 10000 ? "CNR" : spk.radius >= 8000 ? "OUT" : "INN"}</text>
            {/* rays to each row */}
            {rowData.map(r => {
              const res = computeCoverage(hall, { [ring]: spk }, [r])[0]?.speakers[ring];
              if (!res) return null;
              const rayColor = res.inCoverage
                ? ({ primary: C.good, ok: C.accent, warn: C.gold, danger: C.danger }[res.haasStatus] || C.muted)
                : "#444";
              return <line key={r.row} x1={spkX} y1={spkY} x2={cx(r.radius)} y2={cy(r.earAFF)} stroke={rayColor} strokeWidth={0.7} opacity={0.3} />;
            })}
          </g>
        );
      })}
      {/* legend */}
      {[["●", C.accent, "Ear pos"], ["▬", C.gold, "Centre"], ["▬", C.good, "Main ring"], ["▬", C.purple, "Outer ring"], ["—", C.good, "Haas OK"], ["—", C.gold, "Warn"], ["—", C.danger, "Echo/OOB"]].map(([sym, col, lbl], i) => (
        <text key={i} x={PAD + i * 82} y={H - 6} fill={col} fontSize={7}>{sym} {lbl}</text>
      ))}
    </svg>
  );
}

// ─── COVERAGE HEATMAP ────────────────────────────────────────────────────────
function CoverageHeatmap({ coverage, speakers }) {
  const rings = Object.entries(speakers).filter(([, v]) => v.enabled).map(([k, v]) => [k, v]);
  const cellW = 110, cellH = 52, lblW = 50;
  const W = lblW + rings.length * cellW + 10;
  const H = 28 + coverage.length * cellH + 10;

  return (
    <div style={{ overflowX: "auto" }}>
      <svg width="100%" viewBox={`0 0 ${W} ${H}`} style={{ display: "block", minWidth: W }}>
        {/* column headers */}
        {rings.map(([ring, spk], ci) => (
          <text key={ring} x={lblW + ci * cellW + cellW / 2} y={18} fill={ring === "centre" ? C.gold : ring === "inner" ? C.good : ring === "outer" ? C.purple : C.accent} fontSize={10} textAnchor="middle" fontWeight="700">{spk.label}</text>
        ))}
        {coverage.map((row, ri) => (
          <g key={row.row}>
            {/* row label */}
            <text x={lblW - 6} y={28 + ri * cellH + cellH / 2 + 4} fill={C.muted} fontSize={10} textAnchor="end">
              {row.row === "C" ? "Corner" : `Row ${row.row}`}
            </text>
            {rings.map(([ring], ci) => {
              const d = row.speakers[ring];
              if (!d) return null;
              const bg = d.inCoverage
                ? d.haasStatus === "primary" ? C.goodBg : d.haasStatus === "ok" ? C.accentBg : d.haasStatus === "warn" ? C.goldBg : C.dangerBg
                : C.dangerBg;
              const borderCol = d.inCoverage
                ? haasColor(d.haasStatus)
                : C.danger;
              return (
                <g key={ring}>
                  <rect x={lblW + ci * cellW + 2} y={28 + ri * cellH + 2} width={cellW - 4} height={cellH - 4} fill={bg} stroke={borderCol} strokeWidth={1} rx={4} opacity={0.9} />
                  <text x={lblW + ci * cellW + cellW / 2} y={28 + ri * cellH + 17} fill={C.heading} fontSize={9} textAnchor="middle">{d.slantM.toFixed(2)}m · {d.delay.toFixed(1)}ms</text>
                  <text x={lblW + ci * cellW + cellW / 2} y={28 + ri * cellH + 29} fill={haasColor(d.haasStatus)} fontSize={9} textAnchor="middle">{haasLabel(d.haasStatus)}</text>
                  <text x={lblW + ci * cellW + cellW / 2} y={28 + ri * cellH + 41} fill={d.inCoverage ? C.text : C.danger} fontSize={9} textAnchor="middle">{d.offAxisDeg}° off-ax · {d.splAtEar.toFixed(1)}dB</text>
                </g>
              );
            })}
          </g>
        ))}
      </svg>
    </div>
  );
}

// ─── HALL GEOMETRY TAB ────────────────────────────────────────────────────────
function HallTab({ hall, setHall }) {
  const rowData = computeHallGeometry(hall);
  const flutter = computeFlutter(hall);
  const outerRadius = hall.row1Radius + (hall.rows - 1) * hall.rowPitch;

  return (
    <div>
      <Panel>
        <SectionHead sub="22.2m × 22.2m square — adjust per hall">Hall Dimensions</SectionHead>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <Field label="Hall Width" sub="square plan"><NumIn value={hall.hallWidth} onChange={v => setHall(h => ({ ...h, hallWidth: v }))} unit="mm" /></Field>
          <Field label="Number of Rows"><NumIn value={hall.rows} onChange={v => setHall(h => ({ ...h, rows: Math.max(1, v) }))} min={1} max={12} /></Field>
          <Field label="Row 1 Radius" sub="centre to row 1 inner edge"><NumIn value={hall.row1Radius} onChange={v => setHall(h => ({ ...h, row1Radius: v }))} unit="mm" /></Field>
          <Field label="Row Pitch" sub="FFL to FFL"><NumIn value={hall.rowPitch} onChange={v => setHall(h => ({ ...h, rowPitch: v }))} unit="mm" /></Field>
          <Field label="Corner Aisle Width" sub="aisle before corner rows"><NumIn value={hall.aisleWidth} onChange={v => setHall(h => ({ ...h, aisleWidth: v }))} unit="mm" /></Field>
          <Field label="Ear Height AFF" sub="seated listener"><NumIn value={hall.earHeight} onChange={v => setHall(h => ({ ...h, earHeight: v }))} unit="mm" /></Field>
        </div>
        <Divider />
        <SectionHead sub="Ceiling slopes down toward perimeter · floor dishes upward · 1-in-8 slope">Ceiling & Dish Floor</SectionHead>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14 }}>
          <Field label="Ceiling at Row 1 Front" sub="highest point — r=2210mm">
            <NumIn value={hall.ceilAtRow1Front} onChange={v => setHall(h => ({ ...h, ceilAtRow1Front: v }))} unit="mm" />
          </Field>
          <Field label="Ceiling at Row 8 Back" sub="r=8411mm · aisle level">
            <NumIn value={hall.ceilAtRow8Back} onChange={v => setHall(h => ({ ...h, ceilAtRow8Back: v }))} unit="mm" />
          </Field>
          <Field label="Ceiling at Corner Back" sub="behind last corner row">
            <NumIn value={hall.ceilAtCornerBack} onChange={v => setHall(h => ({ ...h, ceilAtCornerBack: v }))} unit="mm" />
          </Field>
          <Field label="Floor Dish Rise" sub="centre=0 → row 8 back">
            <NumIn value={hall.dishRise} onChange={v => setHall(h => ({ ...h, dishRise: v }))} unit="mm" />
          </Field>
          <Field label="Corner Rows" sub="rows in each corner">
            <NumIn value={hall.cornerRows} onChange={v => setHall(h => ({ ...h, cornerRows: Math.max(1,v) }))} min={1} max={8} />
          </Field>
          <Field label="Corner Row 1 Offset" sub="from aisle back wall inward">
            <NumIn value={hall.cornerFrontOffset} onChange={v => setHall(h => ({ ...h, cornerFrontOffset: v }))} unit="mm" />
          </Field>
        </div>
        <div style={{ padding: "10px 14px", background: C.bgAlt, borderRadius: 8, display: "flex", gap: 20, flexWrap: "wrap", fontSize: 11, color: C.muted }}>
          <span>Overall plan: <strong style={{ color: C.heading }}>{(hall.hallWidth / 1000).toFixed(3)}m sq</strong></span>
          <span>Half-width: <strong style={{ color: C.heading }}>{(hall.hallWidth / 2).toLocaleString()}mm</strong></span>
          <span>Tile grid: <strong style={{ color: C.heading }}>{hall.tileGrid}mm</strong></span>
          <span>Dish slope: <strong style={{ color: C.gold }}>1:{Math.round(hall.row8Back / hall.dishRise)}</strong></span>
          <span>Rise/row ≈ <strong style={{ color: C.heading }}>{Math.round(hall.dishRise / hall.rows)}mm</strong></span>
          <span>Ceil @ row 1: <strong style={{ color: C.accent }}>{hall.ceilAtRow1Front}mm</strong></span>
          <span>Ceil @ row 8: <strong style={{ color: C.accent }}>{hall.ceilAtRow8Back}mm</strong></span>
          <span>Ceil @ corner: <strong style={{ color: (hall.ceilAtCornerBack - hall.earHeight - hall.dishRise) < 1200 ? C.warn : C.accent }}>{hall.ceilAtCornerBack}mm</strong></span>
        </div>
      </Panel>

      <Panel>
        <SectionHead>Section Diagram</SectionHead>
        <SectionDiagram hall={hall} speakers={SPEAKER_DEFAULTS} rowData={rowData} />
      </Panel>

      <Panel>
        <SectionHead sub="Flat ceiling at 4300mm — ear-to-ceiling decreases as floor rises toward perimeter">Row Geometry Table</SectionHead>
        <div style={{ overflowX: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 11 }}>
            <thead>
              <tr>{["Row", "Front Edge", "Ear Radius", "Floor Rise", "Ceiling", "Ear AFF", "Ear→Ceiling"].map(h => (
                <th key={h} style={{ padding: "6px 10px", textAlign: "left", color: C.muted, fontWeight: 600, borderBottom: `1px solid ${C.border}`, letterSpacing: 0.5, whiteSpace: "nowrap" }}>{h}</th>
              ))}</tr>
            </thead>
            <tbody>
              {rowData.map((r, i) => (
                <tr key={r.row} style={{ background: i % 2 === 0 ? C.panelAlt : "transparent" }}>
                  {[
                    r.isCorner ? "Corner" : `Row ${r.row}`,
                    r.frontEdge ? `${r.frontEdge.toLocaleString()}mm` : "—",
                    `${r.radius.toLocaleString()}mm`,
                    `+${r.floorRise}mm`,
                    `${r.ceilHeight.toLocaleString()}mm`,
                    `${r.earAFF.toLocaleString()}mm`,
                    `${r.earToCell.toLocaleString()}mm`,
                  ].map((v, j) => (
                    <td key={j} style={{ padding: "6px 10px", color: j === 0 ? C.gold : j === 5 ? (r.earToCell < 1500 ? C.warn : C.good) : C.text, fontFamily: j > 0 ? "monospace" : "inherit" }}>{v}</td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Panel>

      <Panel accent={C.warn}>
        <SectionHead sub="Flat ceiling + dished floor — flutter risk increases toward perimeter">Flutter Echo Analysis</SectionHead>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14, marginBottom: 14 }}>
          {[
            ["Row 1 ear→ceiling", `${flutter.centreClearMm.toLocaleString()}mm`, C.text],
            ["Centre flutter fund.", `${flutter.fundamentalCentre} Hz`, C.warn],
            ["Row 8 flutter fund.", `${flutter.fundamentalRow8} Hz`, C.danger],
          ].map(([lbl, val, col]) => (
            <div key={lbl} style={{ background: C.bgAlt, borderRadius: 8, padding: "12px 14px" }}>
              <div style={{ fontSize: 10, color: C.muted, marginBottom: 4, letterSpacing: 1, textTransform: "uppercase" }}>{lbl}</div>
              <div style={{ fontSize: 20, fontWeight: 700, color: col, fontFamily: "monospace" }}>{val}</div>
            </div>
          ))}
        </div>
        <div style={{ fontSize: 11, color: C.muted, lineHeight: 1.7 }}>
          Centre harmonics: {flutter.harmonics.map((f, i) => <Tag key={i} color={i === 0 ? C.warn : i < 3 ? C.gold : C.muted} size="sm">{f}Hz</Tag>).reduce((a, e) => [...a, " ", e], [])}<br />
          <span style={{ color: C.warn }}>⚠ Row 8 mid-bench ear-to-ceiling = {flutter.row8ClearMm}mm → flutter fundamental {flutter.fundamentalRow8}Hz. Harmonics: {flutter.harmonics[1]}Hz and {flutter.harmonics[2]}Hz land in the 100–300Hz critical speech band. Tile diffraction grating: {flutter.tileDiffraction}Hz (λ = {hall.tileGrid}mm).</span>
        </div>
      </Panel>
    </div>
  );
}

// ─── SPEAKER LAYOUT TAB ──────────────────────────────────────────────────────
function SpeakerTab({ hall, speakers, setSpeakers }) {
  const rowData = computeHallGeometry(hall);
  const outerRadius = hall.row1Radius + (hall.rows - 1) * hall.rowPitch;

  const RingEditor = ({ ringKey, color }) => {
    const spk = speakers[ringKey];
    const set = (k, v) => setSpeakers(s => ({ ...s, [ringKey]: { ...s[ringKey], [k]: v } }));
    const spkHeightAFF = ceilHeightAtRadius(spk.radius, hall) - spk.dropRod;

    return (
      <Panel accent={color} style={{ marginBottom: 10 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
          <div style={{ width: 10, height: 10, borderRadius: "50%", background: color }} />
          <h3 style={{ margin: 0, color: C.heading, fontSize: 14 }}>{spk.label}</h3>
          <label style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: C.muted, cursor: "pointer" }}>
            <input type="checkbox" checked={spk.enabled} onChange={e => set("enabled", e.target.checked)} style={{ accentColor: color }} />
            Enabled
          </label>
        </div>
        {spk.enabled && (
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
            <Field label="Count"><NumIn value={spk.count} onChange={v => set("count", v)} min={1} max={16} /></Field>
            <Field label="Radius from Centre" sub="plan position"><NumIn value={spk.radius} onChange={v => set("radius", v)} unit="mm" /></Field>
            <Field label="Drop Rod Length" sub="0 = flush with ceiling"><NumIn value={spk.dropRod} onChange={v => set("dropRod", Math.max(0, v))} unit="mm" /></Field>
            <Field label="Power per speaker"><NumIn value={spk.power} onChange={v => set("power", v)} step={0.5} unit="W" /></Field>
            <Field label="Sensitivity" sub="dB/1W/1m"><NumIn value={spk.sensitivity} onChange={v => set("sensitivity", v)} unit="dB" /></Field>
            <Field label="Phase">
              <select value={spk.phase} onChange={e => set("phase", +e.target.value)}
                style={{ ...numStyle }}>
                <option value={1}>Normal (+)</option>
                <option value={-1}>Anti-phase (−)</option>
              </select>
            </Field>
            <Field label="Speaker Acoustic Centre" sub={spk.dropRod === 0 ? "Flush ceiling ✓" : `${spk.dropRod}mm drop rod`}>
              <div style={{ padding: "7px 10px", background: C.bgAlt, borderRadius: 6, fontSize: 13, color: C.gold, fontFamily: "monospace" }}>
                {spkHeightAFF.toLocaleString()} mm
              </div>
            </Field>
            <Field label="Radial position" sub="nearest row">
              <div style={{ padding: "7px 10px", background: C.bgAlt, borderRadius: 6, fontSize: 12, color: C.text }}>
                {(() => {
                  const nearest = rowData.reduce((best, r) => Math.abs(r.radius - spk.radius) < Math.abs(best.radius - spk.radius) ? r : best, rowData[0]);
                  return `Row ${nearest.row} (r=${nearest.radius}mm)`;
                })()}
              </div>
            </Field>
            <Field label="Total power" sub="ring total">
              <div style={{ padding: "7px 10px", background: C.bgAlt, borderRadius: 6, fontSize: 13, color: C.text, fontFamily: "monospace" }}>
                {(spk.power * spk.count).toFixed(1)} W
              </div>
            </Field>
          </div>
        )}
      </Panel>
    );
  };

  const totalPower = Object.values(speakers).filter(s => s.enabled).reduce((sum, s) => sum + s.power * s.count, 0);

  return (
    <div>
      <Panel style={{ marginBottom: 10 }}>
        <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
          {[
            ["Total speakers", Object.values(speakers).filter(s => s.enabled).reduce((sum, s) => sum + s.count, 0) + " (flush)", C.accent],
            ["Total power", `${totalPower.toFixed(1)}W`, C.gold],
            ["Crossover", "MS6 / MR12 · 3kHz gap", C.good],
            ["Gap", "433Hz @ 3kHz", C.purple],
          ].map(([lbl, val, col]) => (
            <div key={lbl} style={{ background: C.bgAlt, borderRadius: 8, padding: "10px 16px", flex: 1, minWidth: 120 }}>
              <div style={{ fontSize: 10, color: C.muted, letterSpacing: 1, textTransform: "uppercase", marginBottom: 3 }}>{lbl}</div>
              <div style={{ fontSize: 16, fontWeight: 700, color: col }}>{val}</div>
            </div>
          ))}
        </div>
      </Panel>
      <RingEditor ringKey="centre" color={C.gold} />
      <RingEditor ringKey="inner" color={C.good} />
      <RingEditor ringKey="outer" color={C.purple} />
      <RingEditor ringKey="corner" color={C.accent} />
    </div>
  );
}

// ─── COVERAGE TAB ────────────────────────────────────────────────────────────
function CoverageTab({ hall, speakers }) {
  const rowData = computeHallGeometry(hall);
  const coverage = computeCoverage(hall, speakers, rowData);

  // Summary stats
  const allCells = coverage.flatMap(r => Object.values(r.speakers).filter(Boolean));
  const issues = allCells.filter(c => !c.inCoverage || c.haasStatus === "danger");
  const warnings = allCells.filter(c => c.haasStatus === "warn");

  return (
    <div>
      <Panel>
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginBottom: 4 }}>
          {[
            ["Coverage cells", allCells.length, C.accent],
            ["Issues", issues.length, issues.length > 0 ? C.danger : C.good],
            ["Warnings", warnings.length, warnings.length > 0 ? C.gold : C.good],
            ["Haas limit", "30ms", C.text],
            ["MS6 max off-axis", "55°", C.text],
          ].map(([lbl, val, col]) => (
            <div key={lbl} style={{ background: C.bgAlt, borderRadius: 8, padding: "10px 14px", flex: 1, minWidth: 100 }}>
              <div style={{ fontSize: 10, color: C.muted, letterSpacing: 1, textTransform: "uppercase", marginBottom: 3 }}>{lbl}</div>
              <div style={{ fontSize: 18, fontWeight: 700, color: col }}>{val}</div>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", gap: 8, marginTop: 10, flexWrap: "wrap" }}>
          {[["Primary source", C.good], ["OK (0–10ms)", C.accent], ["Warn (10–30ms)", C.gold], ["Echo (>30ms)", C.danger], ["Outside 55° cone", C.danger]].map(([lbl, col]) => (
            <Tag key={lbl} color={col}>{lbl}</Tag>
          ))}
        </div>
      </Panel>

      <Panel>
        <SectionHead sub="Slant distance · propagation delay · Haas status · off-axis angle · SPL at ear">Coverage Heatmap — All Rows × All Speaker Rings</SectionHead>
        <CoverageHeatmap coverage={coverage} speakers={speakers} />
      </Panel>

      <Panel>
        <SectionHead sub="Full data table">Per-Row Coverage Detail</SectionHead>
        <div style={{ overflowX: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 11 }}>
            <thead>
              <tr>
                {["Row", "Radius", "Ring", "Slant (m)", "Delay (ms)", "Haas +Δms", "Off-axis °", "SPL (dB)", "In cone", "Status"].map(h => (
                  <th key={h} style={{ padding: "6px 8px", textAlign: "left", color: C.muted, fontWeight: 600, borderBottom: `1px solid ${C.border}`, fontSize: 10, letterSpacing: 0.5, whiteSpace: "nowrap" }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {coverage.flatMap((row, ri) =>
                Object.entries(row.speakers).filter(([, d]) => d).map(([ring, d], si) => (
                  <tr key={`${ri}-${si}`} style={{ background: ri % 2 === 0 && si === 0 ? C.panelAlt : "transparent" }}>
                    <td style={{ padding: "5px 8px", color: C.gold }}>{row.row === "C" ? "Corner" : `Row ${row.row}`}</td>
                    <td style={{ padding: "5px 8px", color: C.muted, fontFamily: "monospace" }}>{(row.radius / 1000).toFixed(3)}m</td>
                    <td style={{ padding: "5px 8px", color: ring === "centre" ? C.gold : ring === "inner" ? C.good : ring === "outer" ? C.purple : C.accent }}>{speakers[ring].label}</td>
                    <td style={{ padding: "5px 8px", fontFamily: "monospace" }}>{d.slantM.toFixed(3)}</td>
                    <td style={{ padding: "5px 8px", fontFamily: "monospace", color: d.delay > 30 ? C.danger : C.text }}>{d.delay.toFixed(2)}</td>
                    <td style={{ padding: "5px 8px", fontFamily: "monospace", color: d.haasExcess > 30 ? C.danger : d.haasExcess > 10 ? C.gold : C.text }}>{d.haasExcess > 0 ? `+${d.haasExcess.toFixed(2)}` : "—"}</td>
                    <td style={{ padding: "5px 8px", fontFamily: "monospace", color: d.offAxisDeg > 55 ? C.danger : C.text }}>{d.offAxisDeg}°</td>
                    <td style={{ padding: "5px 8px", fontFamily: "monospace" }}>{d.splAtEar}</td>
                    <td style={{ padding: "5px 8px" }}><Dot color={d.inCoverage ? C.good : C.danger} /></td>
                    <td style={{ padding: "5px 8px" }}><Tag color={haasColor(d.haasStatus)}>{haasLabel(d.haasStatus)}</Tag></td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </Panel>
    </div>
  );
}

// ─── REW & ANALYSIS TAB ───────────────────────────────────────────────────────
function AnalysisTab({ hall, speakers, settings, addLog }) {
  const [rewStatus, setRewStatus] = useState("idle");
  const [rewData, setRewData] = useState(null);
  const [analysisState, setAnalysisState] = useState("idle");
  const [streamText, setStreamText] = useState("");
  const [analysis, setAnalysis] = useState(null);

  const rewBase = `${settings.rewHost}:${settings.rewPort}`;
  const rowData = computeHallGeometry(hall);
  const coverage = computeCoverage(hall, speakers, rowData);
  const flutter = computeFlutter(hall);

  async function connectREW() {
    setRewStatus("checking");
    addLog(`Connecting to REW at ${rewBase}…`);
    try {
      const r = await fetch(`${rewBase}/application`);
      if (!r.ok) throw new Error(`HTTP ${r.status}`);
      addLog("REW API connected ✓", "good");
      // Push room size
      await fetch(`${rewBase}/roomsim/room-size`, {
        method: "PUT", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ length: hall.hallWidth / 1000, width: hall.hallWidth / 1000, height: hall.ceilAtRow1Front / 1000 }),
      });
      addLog("Room dimensions pushed to REW ✓", "good");
      // Fetch frequency response
      const freqResp = await fetch(`${rewBase}/roomsim/frequency-response?micposition=Main&ppo=24`).then(r => r.json());
      addLog("Frequency response retrieved ✓", "good");
      const magnitudes = (() => {
        try {
          const bin = atob(freqResp.magnitudes || "");
          const buf = new Uint8Array(bin.length);
          for (let i = 0; i < bin.length; i++) buf[i] = bin.charCodeAt(i);
          const view = new DataView(buf.buffer);
          const out = [];
          for (let i = 0; i < buf.length; i += 4) out.push(view.getFloat32(i, false));
          return out;
        } catch { return []; }
      })();
      const startFreq = freqResp.startFreq || 20, ppo = freqResp.pointsPerOctave || 24;
      const freqPoints = magnitudes.map((mag, i) => ({ freq: Math.round(startFreq * Math.pow(2, i / ppo)), spl: Math.round(mag * 10) / 10 }));
      const bandData = [63, 125, 250, 500, 1000, 2000, 4000, 8000].map(f => {
        const near = freqPoints.reduce((b, p) => Math.abs(p.freq - f) < Math.abs(b.freq - f) ? p : b, freqPoints[0] || { freq: f, spl: 0 });
        return { freq: f, spl: near?.spl ?? 0 };
      });
      setRewData({ bandData, freqPoints: freqPoints.filter((_, i) => i % 4 === 0).slice(0, 80) });
      setRewStatus("connected");
      addLog("REW data ready ✓", "good");
    } catch (e) {
      setRewStatus("error");
      addLog(`REW error: ${e.message}`, "error");
    }
  }

  function buildPrompt() {
    const outerRadius = hall.row1Radius + (hall.rows - 1) * hall.rowPitch;
    const flutter = computeFlutter(hall);
    return `${settings.systemPrompt}

## Hall Specification (SK-303 Version B confirmed)
- Seating plan: ${hall.hallWidth}mm × ${hall.hallWidth}mm (${(hall.hallWidth/1000).toFixed(3)}m sq)
- Half-width centre to back wall: ${hall.hallWidth/2}mm
- Ceiling: SLOPED — ${hall.ceilAtRow1Front}mm at row 1 front → ${hall.ceilAtRow8Back}mm at row 8 back → ${hall.ceilAtCornerBack}mm behind last corner row · ${hall.tileGrid}mm tile grid
- Rows: ${hall.rows} circular rows + corner rows
- Row 1 front edge: ${hall.row1Radius}mm from centre
- Row pitch (FFL–FFL): ${hall.rowPitch}mm
- Row 8 back face: ${hall.row8Back}mm from centre (per drawing)
- Back aisle: ${hall.aisleWidth}mm (${hall.hallWidth/2} − ${hall.row8Back} = ${hall.hallWidth/2 - hall.row8Back}mm ✓)

## Dish Floor Geometry
- Centre floor: 0mm (lowest) | Row 8 floor: +${hall.dishRise}mm rise | Slope: 1:${Math.round(outerRadius / hall.dishRise)}
- Ceiling slope: ${hall.ceilAtRow1Front - hall.ceilAtRow8Back}mm drop over ${hall.row8Back - hall.row1Radius}mm (≈1:${Math.round((hall.row8Back-hall.row1Radius)/(hall.ceilAtRow1Front-hall.ceilAtRow8Back))})
- As floor rises toward perimeter, each row's seated ear moves closer to the flat ceiling

## Speaker System — MS6 (Visaton FRS8M + G20SC, MIDAS MR12 active crossover)
- All speakers FLUSH mounted in sloped ceiling (no drop rods) — height varies by position
- Crossover gap: 2792–3225Hz (433Hz gap, zero driver overlap — eliminates horizontal lobes)
- Max coverage: 55° off-axis (-3dB), near-circular polar response
- Sensitivity: 88dB/1W/1m
${Object.entries(speakers).filter(([,v])=>v.enabled).map(([k,v])=>`- ${v.label}: ${v.count}× at r=${v.radius}mm flush, ${v.power}W each (${(v.power*v.count).toFixed(1)}W total), phase ${v.phase > 0 ? "normal" : "anti-phase"}`).join("\n")}
- Total installed power: ${Object.values(speakers).filter(v=>v.enabled).reduce((s,v)=>s+v.power*v.count,0).toFixed(1)}W

## Coverage Analysis (per row)
${coverage.map(row => `Row ${row.row} (r=${row.radius}mm, ear ${row.earAFF}mm AFF, ceil ${row.ceilHeight}mm, ear→ceil ${row.earToCell}mm):\n${Object.entries(row.speakers).filter(([,d])=>d).map(([ring,d])=>`  ${speakers[ring].label}: ${d.slantM.toFixed(2)}m slant | ${d.delay.toFixed(1)}ms delay | +${d.haasExcess.toFixed(1)}ms Haas excess | ${d.offAxisDeg}° off-axis | ${d.splAtEar}dB SPL at ear | ${d.inCoverage ? "within 55° cone ✓" : "OUTSIDE 55° CONE ✗"} | ${haasLabel(d.haasStatus)}`).join("\n")}`).join("\n\n")}

## Flutter Echo Risk (flat ceiling + rising floor)
- Centre: ${flutter.centreClearMm}mm clearance → fundamental ${flutter.fundamentalCentre}Hz, harmonics: ${flutter.harmonics.join(", ")}Hz
- Row 8: ${flutter.row8ClearMm}mm clearance → fundamental ${flutter.fundamentalRow8}Hz
- 600mm tile grid → diffraction grating at ~571Hz

${rewData ? `## REW Frequency Response\n${rewData.bandData.map(b=>`- ${b.freq}Hz: ${b.spl}dB`).join("\n")}` : "## REW: Not connected (geometry analysis only)"}

---

Provide structured analysis:

### 🏛 Hall Assessment
Speech intelligibility assessment for 360° circular seating with dished floor.

### ⚠️ Coverage Issues
Rows outside 55° MS6 cone, Haas violations (>10ms excess = colouration, >30ms = echo), SPL variation across rows.

### 🔊 Speaker Position Optimisation
Recommended ring radii and drop rod lengths. Note: ceiling tile grid constrains positions to 600mm increments.

### ⏱ Delay & Haas Analysis
Identify which speaker combinations cause Haas window problems per row. Recommend DSP delay compensation values in ms.

### 🔇 Anti-Phasing
Assess viability given 8+8 speaker count and MS6 system. Reference Dudley Wilkin's 2010 analysis.

### 🎛 MR12 Acoustic EQ
Channel 1 TEQ/PEQ recommendations given hall geometry, including flutter frequencies to notch.

### 📐 REW / ARTA Measurement Protocol
Optimal measurement positions, mic height above dished floor, ARTA window size — ceiling reflection times: ${(2*(hall.ceilAtRow1Front-hall.earHeight)/1000/hall.speedOfSound*1000).toFixed(1)}ms at row 1, ${(2*(hall.ceilAtRow8Back-hall.earHeight)/1000/hall.speedOfSound*1000).toFixed(1)}ms at row 8 — limits usable ARTA window.`;
  }

  async function runAnalysis() {
    setAnalysisState("loading"); setAnalysis(null); setStreamText("");
    const prompt = buildPrompt();
    const { provider, ollamaHost, ollamaPort, ollamaModel, anthropicKey, anthropicModel, maxTokens, temperature } = settings;

    if (provider === "ollama") {
      const base = `${ollamaHost}:${ollamaPort}`;
      addLog(`Sending to Ollama (${ollamaModel})…`);
      try {
        const r = await fetch(`${base}/api/chat`, {
          method: "POST", headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ model: ollamaModel, stream: true, options: { temperature, num_predict: maxTokens }, messages: [{ role: "user", content: prompt }] }),
        });
        if (!r.ok) throw new Error(`Ollama ${r.status}`);
        const reader = r.body.getReader(); const dec = new TextDecoder(); let full = "";
        setAnalysisState("streaming");
        while (true) {
          const { done, value } = await reader.read(); if (done) break;
          for (const line of dec.decode(value).split("\n").filter(Boolean)) {
            try { const obj = JSON.parse(line); full += obj.message?.content || obj.response || ""; setStreamText(full); } catch { }
          }
        }
        setAnalysis(full); setAnalysisState("done"); addLog("Analysis complete ✓", "good");
      } catch (e) { setAnalysisState("error"); addLog(`Ollama error: ${e.message}`, "error"); }
    } else {
      if (!anthropicKey) { addLog("No API key — check Settings", "error"); setAnalysisState("error"); return; }
      addLog(`Sending to Claude (${anthropicModel})…`);
      try {
        const r = await fetch("https://api.anthropic.com/v1/messages", {
          method: "POST", headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ model: anthropicModel, max_tokens: maxTokens, messages: [{ role: "user", content: prompt }] }),
        });
        const data = await r.json();
        if (data.error) throw new Error(data.error.message);
        const text = data.content?.filter(b => b.type === "text").map(b => b.text).join("") || "";
        setAnalysis(text); setAnalysisState("done"); addLog("Analysis complete ✓", "good");
      } catch (e) { setAnalysisState("error"); addLog(`Claude error: ${e.message}`, "error"); }
    }
  }

  function renderMD(text) {
    return text.split("\n").map((line, i) => {
      if (line.startsWith("### ")) return <h3 key={i} style={{ color: C.accent, fontSize: 13, margin: "18px 0 6px", borderBottom: `1px solid ${C.border}`, paddingBottom: 4 }}>{line.slice(4)}</h3>;
      if (line.startsWith("## ")) return <h2 key={i} style={{ color: C.heading, fontSize: 15, margin: "20px 0 7px" }}>{line.slice(3)}</h2>;
      if (/^\d+\.\s\*\*/.test(line)) { const m = line.match(/^(\d+)\.\s\*\*(.+?)\*\*(.*)$/); if (m) return <div key={i} style={{ display: "flex", gap: 8, margin: "5px 0" }}><span style={{ color: C.accent, fontWeight: 700, minWidth: 16 }}>{m[1]}.</span><div><strong style={{ color: C.heading }}>{m[2]}</strong><span style={{ color: C.text }}>{m[3]}</span></div></div>; }
      if (line.startsWith("- ")) return <div key={i} style={{ display: "flex", gap: 8, margin: "3px 0" }}><span style={{ color: C.accentDim }}>▸</span><span style={{ color: C.text, fontSize: 13 }}>{line.slice(2)}</span></div>;
      if (!line.trim()) return <div key={i} style={{ height: 6 }} />;
      const parts = line.split(/(\*\*[^*]+\*\*)/g);
      return <p key={i} style={{ color: C.text, margin: "3px 0", lineHeight: 1.65, fontSize: 13 }}>{parts.map((p, j) => p.startsWith("**") ? <strong key={j} style={{ color: C.heading }}>{p.slice(2, -2)}</strong> : p)}</p>;
    });
  }

  const displayText = (analysisState === "streaming" ? streamText : analysis) || "";
  const providerLabel = settings.provider === "ollama" ? `🦙 ${settings.ollamaModel || "Ollama"}` : `✦ Claude`;

  return (
    <div>
      <Panel>
        <SectionHead sub="Optional — connect to REW for measured frequency data">REW Room Simulator</SectionHead>
        <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
          <Btn onClick={connectREW} disabled={rewStatus === "checking"} color={C.accentDim}>
            {rewStatus === "checking" ? "Connecting…" : "Connect to REW"}
          </Btn>
          {rewStatus !== "idle" && (
            <Tag color={rewStatus === "connected" ? C.good : rewStatus === "error" ? C.danger : C.accent}>
              {rewStatus === "connected" ? "REW connected ✓" : rewStatus === "error" ? "Connection failed" : "Connecting…"}
            </Tag>
          )}
          <span style={{ fontSize: 11, color: C.muted }}>REW at {rewBase} — configure in ⚙ Settings</span>
        </div>
        {rewData && (
          <div style={{ marginTop: 14 }}>
            <div style={{ fontSize: 11, color: C.muted, marginBottom: 8 }}>Octave band response from REW simulator:</div>
            <svg width="100%" viewBox="0 0 500 80" style={{ display: "block" }}>
              {rewData.bandData.map((b, i) => {
                const vals = rewData.bandData.map(d => d.spl);
                const mn = Math.min(...vals) - 3, mx = Math.max(...vals) + 3;
                const x = 30 + i * (440 / (rewData.bandData.length - 1));
                const y = 70 - ((b.spl - mn) / (mx - mn)) * 55;
                return <g key={i}><circle cx={x} cy={y} r={3} fill={C.accent} /><text x={x} y={78} textAnchor="middle" fontSize={8} fill={C.muted}>{b.freq >= 1000 ? `${b.freq / 1000}k` : b.freq}</text></g>;
              })}
              <polyline points={rewData.bandData.map((b, i) => { const vals = rewData.bandData.map(d => d.spl); const mn = Math.min(...vals) - 3, mx = Math.max(...vals) + 3; const x = 30 + i * (440 / (rewData.bandData.length - 1)); const y = 70 - ((b.spl - mn) / (mx - mn)) * 55; return `${x},${y}`; }).join(" ")} fill="none" stroke={C.accent} strokeWidth={2} />
            </svg>
          </div>
        )}
      </Panel>

      <Btn onClick={runAnalysis} disabled={analysisState === "loading" || analysisState === "streaming"}
        color={C.good} style={{ width: "100%", padding: 14, fontSize: 14, marginBottom: 14 }}>
        {(analysisState === "loading" || analysisState === "streaming") ? `Analysing with ${providerLabel}…` : `🧠 Run AI Acoustic Analysis — ${providerLabel}`}
      </Btn>

      {analysisState === "loading" && (
        <Panel><div style={{ textAlign: "center", padding: 30, color: C.muted }}>Sending geometry and coverage data to {providerLabel}…</div></Panel>
      )}

      {(analysisState === "streaming" || analysisState === "done") && displayText && (
        <Panel>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
            <SectionHead>Acoustic Analysis Report</SectionHead>
            <div style={{ display: "flex", gap: 8 }}>
              {analysisState === "streaming" && <Tag color={C.accent}>● Streaming</Tag>}
              <Tag color={settings.provider === "ollama" ? C.purple : C.accent}>{providerLabel}</Tag>
            </div>
          </div>
          <div>{renderMD(displayText)}</div>
        </Panel>
      )}

      {analysisState === "error" && (
        <Panel accent={C.danger}><div style={{ color: C.danger }}>⚠ Analysis failed — check Log tab</div></Panel>
      )}
    </div>
  );
}

// ─── SETTINGS TAB ────────────────────────────────────────────────────────────
function SettingsTab({ settings, setSettings, addLog }) {
  const [ollamaModels, setOllamaModels] = useState([]);
  const [ollamaStatus, setOllamaStatus] = useState("idle");
  const [rewTestStatus, setRewTestStatus] = useState("idle");
  const [flash, setFlash] = useState(false);
  const set = (k, v) => setSettings(p => ({ ...p, [k]: v }));
  const selectStyle = { ...numStyle };

  async function fetchModels() {
    setOllamaStatus("fetching");
    try {
      const r = await fetch(`${settings.ollamaHost}:${settings.ollamaPort}/api/tags`);
      const data = await r.json();
      const models = (data.models || []).map(m => m.name);
      setOllamaModels(models);
      setOllamaStatus("ok");
      if (models.length > 0 && !settings.ollamaModel) set("ollamaModel", models[0]);
      addLog(`Ollama: ${models.join(", ")}`, "good");
    } catch (e) { setOllamaStatus("error"); addLog(`Ollama: ${e.message}`, "error"); }
  }

  async function testREW() {
    setRewTestStatus("checking");
    try {
      await fetch(`${settings.rewHost}:${settings.rewPort}/application`);
      setRewTestStatus("connected"); addLog("REW reachable ✓", "good");
    } catch (e) { setRewTestStatus("error"); addLog(`REW: ${e.message}`, "error"); }
  }

  const ProvBtn = ({ id, icon, title, sub }) => (
    <button onClick={() => set("provider", id)} style={{
      flex: 1, padding: "14px 10px", borderRadius: 10, cursor: "pointer", fontFamily: "inherit",
      border: `2px solid ${settings.provider === id ? C.accent : C.border}`,
      background: settings.provider === id ? C.accentBg : C.panelAlt,
      color: settings.provider === id ? C.accent : C.muted, textAlign: "center", transition: "all 0.15s",
    }}>
      <div style={{ fontSize: 20, marginBottom: 4 }}>{icon}</div>
      <div style={{ fontWeight: 700, fontSize: 13 }}>{title}</div>
      <div style={{ fontSize: 10, opacity: 0.7, marginTop: 2 }}>{sub}</div>
    </button>
  );

  return (
    <div>
      <Panel>
        <SectionHead>LLM Provider</SectionHead>
        <div style={{ display: "flex", gap: 12, marginBottom: 18 }}>
          <ProvBtn id="ollama" icon="🦙" title="Ollama" sub="Local / Private" />
          <ProvBtn id="anthropic" icon="✦" title="Anthropic" sub="Claude API" />
        </div>
        {settings.provider === "ollama" && <>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 100px", gap: 10, marginBottom: 12 }}>
            <Field label="Ollama Host"><TxtIn value={settings.ollamaHost} onChange={v => set("ollamaHost", v)} placeholder="http://127.0.0.1" /></Field>
            <Field label="Port"><TxtIn value={settings.ollamaPort} onChange={v => set("ollamaPort", v)} /></Field>
          </div>
          <Field label="Model">
            <div style={{ display: "flex", gap: 10 }}>
              {ollamaModels.length > 0
                ? <select value={settings.ollamaModel} onChange={e => set("ollamaModel", e.target.value)} style={selectStyle}>{ollamaModels.map(m => <option key={m} value={m}>{m}</option>)}</select>
                : <TxtIn value={settings.ollamaModel} onChange={v => set("ollamaModel", v)} placeholder="e.g. llama3.2, mistral, qwen2.5…" />}
              <Btn onClick={fetchModels} disabled={ollamaStatus === "fetching"} color={C.accentDim}>
                {ollamaStatus === "fetching" ? "…" : "Fetch"}
              </Btn>
            </div>
          </Field>
          {ollamaStatus !== "idle" && <div style={{ fontSize: 11, color: ollamaStatus === "ok" ? C.good : ollamaStatus === "error" ? C.danger : C.accent, marginBottom: 8 }}>
            {ollamaStatus === "ok" ? `✓ ${ollamaModels.length} model(s)` : ollamaStatus === "error" ? "Cannot reach Ollama — OLLAMA_ORIGINS=* ollama serve" : "Fetching…"}
          </div>}
        </>}
        {settings.provider === "anthropic" && <>
          <Field label="API Key"><TxtIn value={settings.anthropicKey} onChange={v => set("anthropicKey", v)} type="password" placeholder="sk-ant-api03-…" /></Field>
          <Field label="Model">
            <select value={settings.anthropicModel} onChange={e => set("anthropicModel", e.target.value)} style={selectStyle}>
              {["claude-sonnet-4-20250514", "claude-opus-4-20250514", "claude-haiku-4-5-20251001"].map(m => <option key={m} value={m}>{m}</option>)}
            </select>
          </Field>
        </>}
      </Panel>

      <Panel>
        <SectionHead>REW API</SectionHead>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 100px", gap: 10, marginBottom: 10 }}>
          <Field label="REW Host"><TxtIn value={settings.rewHost} onChange={v => set("rewHost", v)} /></Field>
          <Field label="Port"><TxtIn value={settings.rewPort} onChange={v => set("rewPort", v)} /></Field>
        </div>
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <Btn onClick={testREW} disabled={rewTestStatus === "checking"} color={C.accentDim}>Test Connection</Btn>
          {rewTestStatus !== "idle" && <Tag color={rewTestStatus === "connected" ? C.good : rewTestStatus === "error" ? C.danger : C.accent}>
            {rewTestStatus === "connected" ? "REW reachable ✓" : rewTestStatus === "error" ? "Failed" : "Testing…"}
          </Tag>}
        </div>
      </Panel>

      <Panel>
        <SectionHead>LLM Behaviour</SectionHead>
        <Field label="System Prompt">
          <textarea value={settings.systemPrompt} onChange={e => set("systemPrompt", e.target.value)} rows={5}
            style={{ ...numStyle, resize: "vertical", lineHeight: 1.6, fontSize: 12 }} />
        </Field>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <Field label="Max Tokens"><NumIn value={settings.maxTokens} onChange={v => set("maxTokens", v)} min={256} max={8192} step={256} /></Field>
          <Field label="Temperature"><NumIn value={settings.temperature} onChange={v => set("temperature", Math.min(2, Math.max(0, v)))} step={0.05} /></Field>
        </div>
      </Panel>

      <Btn onClick={() => { setFlash(true); setTimeout(() => setFlash(false), 1600); }} color={flash ? C.good : C.accent} style={{ width: "100%", padding: 13, fontSize: 14 }}>
        {flash ? "✓ Settings Applied" : "Save Settings"}
      </Btn>
    </div>
  );
}

// ─── APP ─────────────────────────────────────────────────────────────────────
export default function App() {
  const [hall, setHall] = useState(HALL_DEFAULTS);
  const [speakers, setSpeakers] = useState(SPEAKER_DEFAULTS);
  const [settings, setSettings] = useState(SETTINGS_DEFAULTS);
  const [activeTab, setActiveTab] = useState("hall");
  const [log, setLog] = useState([]);
  const logRef = useRef([]);

  const addLog = useCallback((msg, type = "info") => {
    const entry = { msg, type, t: new Date().toLocaleTimeString() };
    logRef.current = [...logRef.current.slice(-99), entry];
    setLog([...logRef.current]);
  }, []);

  const TABS = [
    { id: "hall",     icon: "⬡", label: "Hall" },
    { id: "speakers", icon: "◎", label: "Speakers" },
    { id: "coverage", icon: "⊞", label: "Coverage" },
    { id: "analysis", icon: "◈", label: "Analysis" },
    { id: "settings", icon: "⚙", label: "Settings" },
    { id: "log",      icon: "▤", label: "Log" },
  ];

  const tabStyle = (active) => ({
    background: active ? C.accent : "transparent",
    color: active ? C.bg : C.muted,
    border: `1px solid ${active ? C.accent : C.border}`,
    borderRadius: 6, padding: "7px 14px", fontSize: 11, fontWeight: 700,
    letterSpacing: 0.8, textTransform: "uppercase", cursor: "pointer",
    fontFamily: "inherit", transition: "all 0.15s",
  });

  const provLabel = settings.provider === "ollama"
    ? `🦙 ${settings.ollamaModel || "Ollama"}`
    : `✦ Claude`;

  return (
    <div style={{ minHeight: "100vh", background: C.bg, color: C.text, fontFamily: "'IBM Plex Mono', 'Courier New', monospace", paddingBottom: 60 }}>
      {/* header */}
      <div style={{ borderBottom: `1px solid ${C.border}`, padding: "14px 24px", display: "flex", alignItems: "center", justifyContent: "space-between", background: C.bgAlt, position: "sticky", top: 0, zIndex: 10 }}>
        <div>
          <div style={{ fontSize: 9, letterSpacing: 2.5, color: C.accentDim, textTransform: "uppercase", marginBottom: 2, fontFamily: "inherit" }}>PBCC Universal Hall · MS6 Speaker System</div>
          <h1 style={{ margin: 0, fontSize: 16, color: C.heading, fontWeight: 700, letterSpacing: 0.5 }}>Church Acoustic Analysis Suite</h1>
        </div>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", justifyContent: "flex-end" }}>
          <Tag color={C.gold}>{hall.hallWidth / 1000}m × {hall.hallWidth / 1000}m</Tag>
          <Tag color={C.good}>{hall.rows} rows</Tag>
          <Tag color={settings.provider === "ollama" ? C.purple : C.accent}>{provLabel}</Tag>
        </div>
      </div>

      <div style={{ maxWidth: 900, margin: "0 auto", padding: "20px 16px" }}>
        {/* tabs */}
        <div style={{ display: "flex", gap: 6, marginBottom: 20, flexWrap: "wrap" }}>
          {TABS.map(t => <button key={t.id} style={tabStyle(activeTab === t.id)} onClick={() => setActiveTab(t.id)}>{t.icon} {t.label}</button>)}
        </div>

        {activeTab === "hall"     && <HallTab hall={hall} setHall={setHall} />}
        {activeTab === "speakers" && <SpeakerTab hall={hall} speakers={speakers} setSpeakers={setSpeakers} />}
        {activeTab === "coverage" && <CoverageTab hall={hall} speakers={speakers} />}
        {activeTab === "analysis" && <AnalysisTab hall={hall} speakers={speakers} settings={settings} addLog={addLog} />}
        {activeTab === "settings" && <SettingsTab settings={settings} setSettings={setSettings} addLog={addLog} />}
        {activeTab === "log" && (
          <Panel style={{ fontFamily: "inherit" }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12 }}>
              <span style={{ fontSize: 11, letterSpacing: 1.5, color: C.muted, textTransform: "uppercase" }}>Activity Log</span>
              <Btn onClick={() => { logRef.current = []; setLog([]); }} color={C.muted} outline style={{ padding: "3px 10px", fontSize: 10 }}>Clear</Btn>
            </div>
            {log.length === 0 && <div style={{ color: C.muted, fontSize: 11 }}>No activity yet.</div>}
            {[...log].reverse().map((e, i) => (
              <div key={i} style={{ display: "flex", gap: 10, marginBottom: 4, fontSize: 11, borderBottom: `1px solid ${C.border}22`, paddingBottom: 3 }}>
                <span style={{ color: C.muted, minWidth: 68, flexShrink: 0 }}>{e.t}</span>
                <span style={{ color: e.type === "error" ? C.danger : e.type === "good" ? C.good : e.type === "warn" ? C.gold : C.text }}>{e.msg}</span>
              </div>
            ))}
          </Panel>
        )}
      </div>
    </div>
  );
}