/* ===== progress.jsx — Progress Map (2 layouts) ===== */

/* ---- shared: project filter chips ---- */
function ProjectFilter({ value, onChange }) {
  return (
    <div className="chiprow">
      <button className={"chip" + (value === null ? " on" : "")} onClick={() => onChange(null)}>
        Kõik projektid
      </button>
      {PROJECTS.map((p) => (
        <button key={p.id} className={"chip mono" + (value === p.id ? " on" : "")} onClick={() => onChange(p.id)}>
          {p.code}
        </button>
      ))}
    </div>
  );
}

/* ---- shared: real site-plan map (OpenStreetMap), pins coloured by stage ---- */
function SitePlanMap({ projectId }) {
  const items = BOREHOLE_ITEMS.filter((b) => !projectId || b.project === projectId);
  return (
    <div className="card-block">
      <div className="block-head">
        <div>
          <div className="block-title">Asendiplaan</div>
          <div className="block-sub">OpenStreetMap · {items.length} puurauku</div>
        </div>
        <span className="badge slate"><Icon name="pin" size={13} /> GPS</span>
      </div>
      <BhMap projectId={projectId} height={250} />
      <div className="maplegend">
        {STAGES.map((s) => (
          <span key={s.key} className="legend"><span className="legend-dot" style={{ background: s.hex }} />{s.short}</span>
        ))}
      </div>
    </div>
  );
}

/* ---- shared: completion ring ---- */
function Ring({ value, size = 96, stroke = 10, color = "var(--accent)" }) {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const off = c * (1 - value);
  return (
    <svg width={size} height={size} className="ring">
      <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--surface-3)" strokeWidth={stroke} />
      <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={color} strokeWidth={stroke}
        strokeDasharray={c} strokeDashoffset={off} strokeLinecap="round"
        transform={`rotate(-90 ${size / 2} ${size / 2})`} />
      <text x="50%" y="50%" className="ring-num" textAnchor="middle" dominantBaseline="central">
        {Math.round(value * 100)}%
      </text>
    </svg>
  );
}

/* ===== LAYOUT A — Töövoog (pipeline + board) ===== */
function ProgressPipeline({ projectId }) {
  const totals = stageTotals(projectId);
  const max = Math.max(1, ...totals);
  return (
    <div className="card-block">
      <div className="block-head">
        <div><div className="block-title">Töövoog</div><div className="block-sub">Puuraugud etappide kaupa</div></div>
      </div>
      <div className="funnel">
        {STAGES.map((s, i) => (
          <div className="funnel-col" key={s.key}>
            <div className="funnel-bar-wrap">
              <div className="funnel-bar" style={{ height: (12 + (totals[i] / max) * 84) + "px", background: s.hex }}>
                <span className="funnel-count">{totals[i]}</span>
              </div>
            </div>
            <span className="funnel-lbl">{s.short}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function StageBoard({ projectId, onOpen }) {
  const items = BOREHOLE_ITEMS.filter((b) => !projectId || b.project === projectId);
  return (
    <div className="board">
      {STAGES.map((s, i) => {
        const col = items.filter((b) => b.stage === i);
        return (
          <div className="board-col" key={s.key}>
            <div className="board-colhead">
              <span className="board-dot" style={{ background: s.hex }} />
              <span className="board-name">{s.name}</span>
              <span className="board-count">{col.length}</span>
            </div>
            {col.length === 0
              ? <div className="board-empty">—</div>
              : <div className="board-chips">
                  {col.map((b) => (
                    <button key={b.project + b.id} className="bhchip" onClick={() => onOpen && onOpen(b)}
                      style={{ "--c": s.hex }} title={b.projectCode + " · " + b.id}>
                      <span className={"bhchip-kind" + (b.type === "TP" ? " tp" : "")}>{b.type}</span>
                      <span className="mono">{b.id}</span>
                    </button>
                  ))}
                </div>}
          </div>
        );
      })}
    </div>
  );
}

/* ===== LAYOUT B — Ülevaade (dashboard) ===== */
function ProgressDashboard({ projectId }) {
  const totals = stageTotals(projectId);
  const total = totals.reduce((a, b) => a + b, 0);
  const field = totals[0] + totals[1];
  const lab = totals[2] + totals[3];
  const analysis = totals[4];
  const done = totals[5];
  const tiles = [
    { n: field, label: "Väljal", sub: "Field", hex: "#2563eb" },
    { n: lab, label: "Laboris", sub: "Lab", hex: "#7c3aed" },
    { n: analysis, label: "Analüüsis", sub: "Analysis", hex: "#d97706" },
    { n: done, label: "Valmis", sub: "Done", hex: "#15803d" },
  ];
  return (
    <div className="card-block">
      <div className="dash-hero">
        <Ring value={overallProgress(projectId)} />
        <div className="dash-hero-txt">
          <div className="dash-hero-big mono">{total}</div>
          <div className="dash-hero-lbl">puurauku kokku</div>
          <div className="dash-hero-note">Keskmine valmidus aruandeni</div>
        </div>
      </div>
      <div className="tiles">
        {tiles.map((t) => (
          <div className="tile" key={t.label} style={{ "--c": t.hex }}>
            <div className="tile-n mono">{t.n}</div>
            <div className="tile-l">{t.label}</div>
            <div className="tile-s">{t.sub}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function ProjectBars({ projectId, onOpen }) {
  const list = PROJECTS.filter((p) => !projectId || p.id === projectId);
  return (
    <div className="card-block">
      <div className="block-head">
        <div><div className="block-title">Projektid</div><div className="block-sub">Edenemine etappide kaupa</div></div>
      </div>
      <div className="pbars">
        {list.map((p) => {
          const t = stageTotals(p.id);
          const tot = t.reduce((a, b) => a + b, 0) || 1;
          const pct = Math.round(overallProgress(p.id) * 100);
          return (
            <button className="pbar" key={p.id} onClick={() => onOpen && onOpen(p)}>
              <div className="pbar-top">
                <span className="pbar-name">{p.name}</span>
                <span className="pbar-pct mono">{pct}%</span>
              </div>
              <div className="pbar-track">
                {t.map((c, i) => c > 0 && (
                  <span key={i} className="pbar-seg" style={{ width: (c / tot * 100) + "%", background: STAGES[i].hex }}
                    title={STAGES[i].name + ": " + c} />
                ))}
              </div>
              <div className="pbar-foot mono">{tot} puurauku · {p.code}</div>
            </button>
          );
        })}
      </div>
    </div>
  );
}

/* ===== screen shell ===== */
function ProgressMapScreen({ layout, onOpenProject }) {
  const [pf, setPf] = useState(null);
  return (
    <div className="screen fade-in">
      <div className="appbar">
        <RPLogo height={28} />
        <div className="grow">
          <h1>Edenemine</h1>
          <div className="sub">{layout === "dashboard" ? "ÜLEVAADE" : "TÖÖVOOG"} · {totalHoles(pf)} PUURAUKU</div>
        </div>
      </div>
      <div className="scroll pad" style={{ paddingBottom: 88 }}>
        <ProjectFilter value={pf} onChange={setPf} />
        {layout === "dashboard" ? (
          <React.Fragment>
            <ProgressDashboard projectId={pf} />
            <ProjectBars projectId={pf} onOpen={onOpenProject} />
            <SitePlanMap projectId={pf} />
          </React.Fragment>
        ) : (
          <React.Fragment>
            <ProgressPipeline projectId={pf} />
            <StageBoard projectId={pf} onOpen={(b) => onOpenProject(PROJECTS.find((p) => p.id === b.project))} />
            <SitePlanMap projectId={pf} />
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { ProgressMapScreen });