/* global React, Icon, UI, DATA, FlowStrip */
const { useState: usePOState } = React;

function ProjectOverview({ navigate, toast, params }) {
  const { Button, StatusBadge, CategoryChip, Tabs, Stat } = UI;
  const D = DATA;
  const p = D.projects.find((x) => x.id === params?.id) || D.projects[0];
  const [tab, setTab] = usePOState("overview");
  const [showJson, setShowJson] = usePOState(false);

  const execs = D.executions.filter((e) => e.project === p.id);
  const docs = D.documents.filter((dd) => dd.project === p.name);
  const arts = D.artifacts.filter((a) => a.project === p.name);
  const tmpls = D.templates.filter((t) => t.project === p.name);

  const flowSteps = [
    { type: "input", label: p.inputs[0] },
    { type: "processing", label: "Extract fields" },
    { type: "processing", label: "Generate CSV" },
    ...p.outputs.map((o) => ({ type: "output", label: o })),
  ];

  const tabs = [
    { id: "overview", label: "Overview" }, { id: "workflow", label: "Workflow" },
    { id: "executions", label: "Executions", count: execs.length }, { id: "documents", label: "Documents", count: docs.length },
    { id: "outputs", label: "Outputs", count: arts.length },
    { id: "connectors", label: "Connectors" }, { id: "settings", label: "Settings" },
  ];

  return (
    <div className="app-scroll"><div className="page fade-in">
      {/* header */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 24, marginBottom: 18, flexWrap: "wrap" }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
            <CategoryChip category={p.category} /><StatusBadge status={p.status} />
          </div>
          <h2 style={{ fontSize: 30 }}>{p.name}</h2>
          <p className="muted" style={{ fontSize: 14.5, marginTop: 8, maxWidth: 620 }}>{p.description}</p>
        </div>
        <div style={{ display: "flex", gap: 10, flexShrink: 0 }}>
          <Button variant="secondary" icon="git-branch" onClick={() => navigate("builder", { id: p.id })}>Edit workflow</Button>
          <Button variant="primary" icon="play" onClick={() => toast("Workflow run queued", "success")}>Run workflow</Button>
        </div>
      </div>

      <div style={{ marginBottom: 24 }}><Tabs tabs={tabs} active={tab} onChange={setTab} /></div>

      {tab === "overview" && (
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 22, alignItems: "start" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
            <div className="card card-pad">
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
                <h6 style={{ fontSize: 15 }}>Workflow</h6>
                <span className="link" style={{ fontSize: 12.5, fontWeight: 700, textDecoration: "none" }} onClick={() => navigate("builder", { id: p.id })}>Open builder</span>
              </div>
              <div style={{ fontWeight: 700, color: "var(--ef-fg-1)", marginBottom: 14 }}>{p.workflow}</div>
              <FlowStrip steps={flowSteps} />
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14 }}>
              <SummaryCard icon="inbox" label="Input source" lines={p.inputs} color="var(--ef-cobalt)" />
              <SummaryCard icon="sparkles" label="Processing" lines={["Extract fields", "Select fields", "Generate CSV"]} color="var(--ef-violet)" />
              <SummaryCard icon="send" label="Output" lines={p.outputs} color="var(--ef-success)" />
            </div>

            <div className="card">
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "15px 18px", borderBottom: "1px solid var(--ef-border)" }}>
                <h6 style={{ fontSize: 14.5 }}>Recent executions</h6>
                <span className="link" style={{ fontSize: 12.5, fontWeight: 700, textDecoration: "none" }} onClick={() => setTab("executions")}>View all</span>
              </div>
              <table className="tbl"><tbody>
                {execs.slice(0, 4).map((e) => (
                  <tr key={e.id} className="tbl-row" onClick={() => navigate("execution", { id: e.id })}>
                    <td className="mono" style={{ fontWeight: 600, color: "var(--ef-fg-1)", fontSize: 12.5 }}>{e.id}</td>
                    <td><StatusBadge status={e.status} /></td>
                    <td style={{ textAlign: "right" }} className="tabular muted">{e.files} files</td>
                    <td style={{ textAlign: "right", fontSize: 12 }} className="muted mono">{D.fmtAgo(e.started)}</td>
                  </tr>
                ))}
                {execs.length === 0 && <tr><td className="muted" style={{ padding: 24, textAlign: "center" }}>No executions yet.</td></tr>}
              </tbody></table>
            </div>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
            <div className="card card-pad">
              <div className="eyebrow" style={{ marginBottom: 14 }}>Last execution</div>
              {execs[0] ? (<>
                <StatusBadge status={execs[0].status} />
                <div style={{ marginTop: 12, fontSize: 13, color: "var(--ef-fg-2)", lineHeight: 1.9 }}>
                  <Row k="Run" v={<span className="mono">{execs[0].id}</span>} />
                  <Row k="Files processed" v={execs[0].files} />
                  <Row k="Outputs" v={execs[0].outputs} />
                  <Row k="Duration" v={execs[0].duration} />
                  <Row k="When" v={D.fmtAgo(execs[0].started)} />
                </div>
                <Button variant="secondary" size="sm" style={{ width: "100%", marginTop: 14 }} onClick={() => navigate("execution", { id: execs[0].id })}>View details</Button>
              </>) : <div className="muted" style={{ fontSize: 13 }}>This project hasn't run yet.</div>}
            </div>

            <div className="card card-pad">
              <div className="eyebrow" style={{ marginBottom: 12 }}>Active templates</div>
              {tmpls.length ? tmpls.map((t) => (
                <div key={t.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 0" }}>
                  <Icon name="layers" size={16} color="var(--ef-fg-3)" />
                  <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 700, color: "var(--ef-fg-1)" }}>{t.name}</div><div className="muted" style={{ fontSize: 11.5 }}>v{t.version} · {t.selected}/{t.fields} fields</div></div>
                  <StatusBadge status={t.status} size="sm" />
                </div>
              )) : <div className="muted" style={{ fontSize: 13 }}>No templates configured. <span className="link" onClick={() => navigate("template", { project: p.id })}>Set one up</span></div>}
            </div>

            <div className="card card-pad">
              <div className="eyebrow" style={{ marginBottom: 12 }}>Connected sources</div>
              {p.inputs.concat(p.outputs).filter((v, i, a) => a.indexOf(v) === i).map((c) => (
                <div key={c} style={{ display: "flex", alignItems: "center", gap: 10, padding: "7px 0" }}>
                  <span className="dot" style={{ background: c === "Google Drive" ? "var(--ef-danger)" : "var(--ef-success)" }} />
                  <span style={{ fontSize: 13, color: "var(--ef-fg-1)", fontWeight: 600, flex: 1 }}>{c}</span>
                  <span className="muted" style={{ fontSize: 11.5 }}>{c === "Google Drive" ? "Reauthorize" : "Connected"}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {tab === "workflow" && (
        <div>
          <div className="card card-pad" style={{ marginBottom: 18 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
              <div><div style={{ fontWeight: 700, color: "var(--ef-fg-1)", fontSize: 15 }}>{p.workflow}</div><div className="muted" style={{ fontSize: 12.5, marginTop: 2 }}>Version 1 · <StatusBadge status={p.status} size="sm" /></div></div>
              <div style={{ display: "flex", gap: 10 }}>
                <Button variant="secondary" size="sm" icon="file-json" onClick={() => setShowJson((v) => !v)}>{showJson ? "Hide" : "View"} JSON</Button>
                <Button variant="primary" size="sm" icon="git-branch" onClick={() => navigate("builder", { id: p.id })}>Open in builder</Button>
              </div>
            </div>
            <div style={{ padding: "20px 0" }}><FlowStrip steps={flowSteps} /></div>
          </div>
          {showJson && (
            <div className="card" style={{ background: "var(--ef-ink-950)", padding: 18, overflow: "auto" }}>
              <pre className="mono" style={{ margin: 0, fontSize: 12, lineHeight: 1.7, color: "var(--ef-ink-200)" }}>{JSON.stringify({
                workflow_id: "wf_" + p.id.replace("proj_", ""), project_id: p.id, name: p.workflow, version: 1, status: p.status,
                trigger: { type: p.trigger }, nodes: ["trigger", "input", "ocr", "field_extraction", "field_selection", "generate_csv", ...p.outputs.map(() => "output")],
                edges: "linear",
              }, null, 2)}</pre>
            </div>
          )}
        </div>
      )}

      {tab === "executions" && (
        <div className="card" style={{ overflow: "hidden" }}>
          <table className="tbl">
            <thead><tr><th>Execution</th><th>Trigger</th><th>Status</th><th style={{ textAlign: "right" }}>Files</th><th style={{ textAlign: "right" }}>Outputs</th><th style={{ textAlign: "right" }}>Duration</th><th style={{ textAlign: "right" }}>When</th></tr></thead>
            <tbody>{execs.map((e) => (
              <tr key={e.id} className="tbl-row" onClick={() => navigate("execution", { id: e.id })}>
                <td className="mono" style={{ fontWeight: 600, color: "var(--ef-fg-1)", fontSize: 12.5 }}>{e.id}</td>
                <td className="muted">{e.trigger.replace(/_/g, " ")}</td><td><StatusBadge status={e.status} /></td>
                <td style={{ textAlign: "right" }} className="tabular">{e.files}</td><td style={{ textAlign: "right" }} className="tabular">{e.outputs}</td>
                <td style={{ textAlign: "right", fontSize: 12 }} className="muted mono">{e.duration}</td><td style={{ textAlign: "right", fontSize: 12 }} className="muted mono">{D.fmtAgo(e.started)}</td>
              </tr>))}
              {execs.length === 0 && <tr><td colSpan="7" className="muted" style={{ padding: 40, textAlign: "center" }}>No executions yet.</td></tr>}
            </tbody>
          </table>
        </div>
      )}

      {tab === "documents" && <FileList items={docs} kind="document" empty="No documents processed yet." />}
      {tab === "outputs" && <FileList items={arts} kind="artifact" empty="No outputs generated yet." toast={toast} />}

      {tab === "connectors" && (
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          {D.connectorCatalog.filter((c) => [...p.inputs, ...p.outputs].some((x) => c.name.includes(x.split(" ")[0]))).map((c) => (
            <div key={c.id} className="card card-pad" style={{ display: "flex", gap: 14, alignItems: "center" }}>
              <Icon name={c.icon} size={22} color="var(--ef-fg-3)" />
              <div style={{ flex: 1 }}><div style={{ fontWeight: 700, color: "var(--ef-fg-1)" }}>{c.name}</div><div className="muted" style={{ fontSize: 12.5 }}>{c.provider}</div></div>
              <StatusBadge status={c.status} />
            </div>
          ))}
          <div className="card card-pad" style={{ display: "flex", gap: 14, alignItems: "center", justifyContent: "center", color: "var(--ef-fg-3)", cursor: "pointer" }} onClick={() => navigate("connectors")}>
            <Icon name="plus" size={18} /><span style={{ fontWeight: 700 }}>Manage connectors</span>
          </div>
        </div>
      )}

      {tab === "settings" && <ProjectSettings p={p} navigate={navigate} toast={toast} />}
    </div></div>
  );
}

function Row({ k, v }) { return <div style={{ display: "flex", justifyContent: "space-between" }}><span className="muted">{k}</span><span style={{ color: "var(--ef-fg-1)", fontWeight: 600 }}>{v}</span></div>; }

function SummaryCard({ icon, label, lines, color }) {
  return (
    <div className="card card-pad">
      <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 12 }}>
        <span style={{ width: 8, height: 8, borderRadius: 999, background: color }} />
        <Icon name={icon} size={16} color="var(--ef-fg-3)" /><span className="eyebrow">{label}</span>
      </div>
      {lines.map((l) => <div key={l} style={{ fontSize: 13.5, fontWeight: 600, color: "var(--ef-fg-1)", padding: "3px 0" }}>{l}</div>)}
    </div>
  );
}

function FileList({ items, kind, empty, toast }) {
  if (!items.length) return <div className="card"><UI.EmptyState icon="files" title={empty} body="Files appear here once the workflow runs." /></div>;
  return (
    <div className="card" style={{ overflow: "hidden" }}>
      <table className="tbl">
        <thead><tr><th>File</th><th>Type</th><th style={{ textAlign: "right" }}>Size</th>{kind === "document" ? <th style={{ textAlign: "right" }}>Pages</th> : <th>Source run</th>}<th style={{ textAlign: "right" }}>Created</th><th></th></tr></thead>
        <tbody>{items.map((f) => (
          <tr key={f.id} className="tbl-row">
            <td><div style={{ display: "flex", alignItems: "center", gap: 10 }}><Icon name={fileIcon(f.type)} size={17} color="var(--ef-fg-3)" /><span className="mono" style={{ fontWeight: 600, color: "var(--ef-fg-1)", fontSize: 12.5 }}>{f.name}</span>{f.count && <span className="badge" style={{ fontSize: 10 }}>{f.count} files</span>}</div></td>
            <td><span className="badge">{f.type}</span></td>
            <td style={{ textAlign: "right", fontSize: 12 }} className="muted mono">{f.size}</td>
            {kind === "document" ? <td style={{ textAlign: "right" }} className="tabular">{f.pages}</td> : <td className="mono" style={{ fontSize: 12, color: "var(--ef-fg-3)" }}>{f.exec}</td>}
            <td style={{ textAlign: "right", fontSize: 12 }} className="muted mono">{DATA.fmtAgo(f.created)}</td>
            <td><button className="btn btn-ghost btn-icon btn-sm" onClick={() => toast && toast("Download started", "success")}><Icon name="download" size={15} /></button></td>
          </tr>
        ))}</tbody>
      </table>
    </div>
  );
}
function fileIcon(t) { return ({ CSV: "file-spreadsheet", Excel: "file-spreadsheet", Word: "file-text", PDF: "file-text", Archive: "package", JSON: "file-json" })[t] || "file-text"; }

function TemplateCard({ t, navigate }) {
  return (
    <div className="card card-pad card-hover" onClick={() => navigate("template", { id: t.id })}>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}><Icon name="layers" size={18} color="var(--ef-fg-3)" /><span style={{ fontWeight: 700, color: "var(--ef-fg-1)" }}>{t.name}</span></div>
        <UI.StatusBadge status={t.status} size="sm" />
      </div>
      <div className="muted" style={{ fontSize: 12.5 }}>{t.docType} · v{t.version}</div>
      <div style={{ display: "flex", gap: 16, marginTop: 14 }}>
        <Mini label="Fields" v={t.fields} /><Mini label="Selected" v={t.selected} /><Mini label="Match threshold" v={Math.round(t.matchThreshold * 100) + "%"} />
      </div>
    </div>
  );
}
function Mini({ label, v }) { return <div><div style={{ fontSize: 18, fontWeight: 800, color: "var(--ef-fg-1)", letterSpacing: "-0.02em" }} className="tabular">{v}</div><div className="muted" style={{ fontSize: 11 }}>{label}</div></div>; }

function ProjectSettings({ p, navigate, toast }) {
  const [name, setName] = usePOState(p.name);
  const [desc, setDesc] = usePOState(p.description);
  const [retention, setRetention] = usePOState("90");
  const [notify, setNotify] = usePOState(true);
  return (
    <div style={{ maxWidth: 680 }}>
      <div className="card card-pad" style={{ marginBottom: 18 }}>
        <h6 style={{ fontSize: 15, marginBottom: 18 }}>General</h6>
        <UI.Field label="Project name"><input className="input" value={name} onChange={(e) => setName(e.target.value)} /></UI.Field>
        <UI.Field label="Description"><textarea className="textarea" value={desc} onChange={(e) => setDesc(e.target.value)} /></UI.Field>
        <UI.Field label="Owner"><select className="select" style={{ maxWidth: 280 }}>{DATA.team.filter((t) => t.status === "active").map((t) => <option key={t.id}>{t.name}</option>)}</select></UI.Field>
      </div>
      <div className="card card-pad" style={{ marginBottom: 18 }}>
        <h6 style={{ fontSize: 15, marginBottom: 18 }}>Data & notifications</h6>
        <UI.Field label="Document retention" help="How long processed documents and outputs are stored before secure deletion.">
          <select className="select" value={retention} onChange={(e) => setRetention(e.target.value)} style={{ maxWidth: 240 }}><option value="30">30 days</option><option value="90">90 days</option><option value="365">1 year</option><option value="forever">Keep indefinitely</option></select>
        </UI.Field>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "10px 0" }}>
          <div><div style={{ fontSize: 13.5, fontWeight: 600, color: "var(--ef-fg-1)" }}>Email me on failed executions</div><div className="muted" style={{ fontSize: 12.5 }}>Get notified when a run fails or needs review.</div></div>
          <UI.Toggle checked={notify} onChange={setNotify} />
        </div>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ display: "flex", gap: 10 }}>
          <UI.Button variant="secondary" icon="package">Archive project</UI.Button>
          <UI.Button variant="danger" icon="trash-2">Delete project</UI.Button>
        </div>
        <UI.Button variant="primary" icon="save" onClick={() => toast("Settings saved", "success")}>Save changes</UI.Button>
      </div>
    </div>
  );
}

window.ProjectOverview = ProjectOverview;