/* ===== process.jsx — interactive investigation workflow (from the process diagram) ===== */

/* cumulative: how many holes have REACHED a given stage index (funnel down the process) */
function reachedCount(stageIdx, projectId) {
  const t = stageTotals(projectId);
  let s = 0; for (let i = stageIdx; i < t.length; i++) s += t[i];
  return s;
}

const PROCESS_NODES = [
  { key: "plan",     name: "Uuringukava",            en: "Investigation plan",  icon: "folder",   metric: "projects", note: "Tellija lähteülesanne ja uuringukava koostamine." },
  { key: "field",    name: "Välitööd",               en: "Field work",          icon: "drill",    stage: 0, note: "Puurimine ja välitööd objektil.", tags: ["Puurmasin", "GPS"] },
  { key: "insitu",   name: "Üksikkatsed",            en: "In-situ tests",       icon: "activity", stage: 0, note: "SPT, välikatsed ja proovivõtt; andmed kolmel kujul.", branches: ["Fotod", "Paberil", "Elektroonsed"] },
  { key: "db",       name: "Keskne andmebaas",       en: "Central database",    icon: "layers",   stage: 1, note: "Kõik väliandmed ühtses, automaatselt loetavas AGS-vormingus.", highlight: true, ags: true },
  { key: "lab",      name: "Labor",                  en: "Laboratory",          icon: "flask",    stage: 2, note: "Proovide laborikatsed; tulemused liiguvad andmebaasi.", side: true },
  { key: "format",   name: "Tulemuste vormistamine", en: "Format results",      icon: "ruler",    stage: 2, note: "Üksikkatsete ja labori tulemuste vormistamine analüüsiks." },
  { key: "analysis", name: "Analüüs",                en: "Analysis",            icon: "activity", stage: 4, note: "Insener määrab igale kihile täpse materjali.", inputs: ["Kaardiandmed", "Arhiiv", "Rakenduslik"] },
  { key: "report",   name: "Aruanne",                en: "Report & outputs",    icon: "check",    stage: 5, note: "Asendiplaan, geotehnilised läbilõiked ja lõpparuanne.", highlight: true, branches: ["Asendiplaan", "Läbilõiked", "Graafiline osa"] },
];

function NodeMetric({ node }) {
  if (node.metric === "projects") {
    return <span className="pnode-count"><b className="mono">{PROJECTS.length}</b> projekti</span>;
  }
  const n = reachedCount(node.stage);
  return <span className="pnode-count"><b className="mono">{n}</b> puurauku</span>;
}

function ProcessNode({ node, idx, selected, onSelect }) {
  const isSel = selected === node.key;
  return (
    <div className={"pnode" + (node.highlight ? " hl" : "") + (node.side ? " side" : "") + (isSel ? " sel" : "")}>
      <div className="pnode-rail">
        <span className="pnode-dot"><Icon name={node.icon} size={15} /></span>
      </div>
      <button className="pnode-card" onClick={() => onSelect(isSel ? null : node.key)}>
        <div className="pnode-head">
          <div className="pnode-titles">
            <div className="pnode-name">{node.name}{node.ags && <span className="agschip">AGS</span>}</div>
            <div className="pnode-en">{node.en}</div>
          </div>
          <NodeMetric node={node} />
        </div>
        {node.branches && (
          <div className="pnode-branches">
            {node.branches.map((b) => <span key={b} className="branchpill">{b}</span>)}
          </div>
        )}
        {node.tags && (
          <div className="pnode-branches">
            {node.tags.map((b) => <span key={b} className="branchpill ghost">{b}</span>)}
          </div>
        )}
        {node.inputs && (
          <div className="pnode-inputs">
            <Icon name="chevron" size={12} />
            {node.inputs.map((b) => <span key={b} className="branchpill in">{b}</span>)}
          </div>
        )}
        {isSel && (
          <div className="pnode-detail">
            <p className="pnode-note">{node.note}</p>
            {node.metric !== "projects" && (
              <div className="pnode-byproj">
                {PROJECTS.map((p) => {
                  const c = reachedCount(node.stage, p.id);
                  const tot = totalHoles(p.id) || 1;
                  return (
                    <div className="byproj" key={p.id}>
                      <span className="byproj-code mono">{p.code}</span>
                      <span className="byproj-track"><span className="byproj-fill" style={{ width: (c / tot * 100) + "%" }} /></span>
                      <span className="byproj-n mono">{c}</span>
                    </div>
                  );
                })}
              </div>
            )}
            {node.metric === "projects" && <p className="pnode-note muted">Aktiivseid projekte: {PROJECTS.filter(p => p.status === "Active").length}.</p>}
          </div>
        )}
        {!isSel && <p className="pnode-note clamp">{node.note}</p>}
      </button>
    </div>
  );
}

function ProcessMapScreen() {
  const [sel, setSel] = useState("db");
  return (
    <div className="screen fade-in">
      <div className="appbar">
        <RPLogo height={28} />
        <div className="grow">
          <h1>Protsess</h1>
          <div className="sub">UURINGU TÖÖVOOG · AGS</div>
        </div>
      </div>
      <div className="scroll pad" style={{ paddingBottom: 88 }}>
        <div className="proc-intro">
          <Icon name="activity" size={15} />
          <span>Geotehnilise uuringu töövoog väliandmetest lõpparuandeni. Vajuta etapil, et näha hetkeseisu.</span>
        </div>
        <div className="proc-flow">
          {PROCESS_NODES.map((n, i) => (
            <ProcessNode key={n.key} node={n} idx={i} selected={sel} onSelect={setSel} />
          ))}
          <div className="proc-end">
            <span className="pnode-dot done"><Icon name="check" size={16} stroke={3} /></span>
            <div>
              <div className="pnode-name">Lõpparuanne</div>
              <div className="pnode-en">Final report · {reachedCount(5)} puurauku valmis</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ProcessMapScreen, reachedCount, PROCESS_NODES });