// OPT-QC-13 · QC history per batch
const QcHistory = ({ t, go }) => {
  const { Btn, Pill } = window.Op;
  const Ic = window.Icons, QD = window.QD;
  const state = t.history; // default | noResults | loading | empty
  const loading = state === "loading";
  const events = (state === "noResults" || state === "empty") ? [] : QD.HISTORY;

  const decIcon = { approved: Ic.Check, breach: Ic.Check, rejected: Ic.X, hold: Ic.Clock };
  const decTone = { approved: "approved", breach: "approved", rejected: "rejected", hold: "pending" };
  const decLabel = { approved: "Approved", breach: "Approved · breach", rejected: "Rejected", hold: "Held" };

  const [filter, setFilter] = useState("All");

  return (
    <div className="op-body">
      <div className="op-pad">
        <div className="op-sec" style={{ marginBottom: 14 }}>
          <div><div style={{ fontSize: 18, fontWeight: 700, letterSpacing: "-0.015em" }}>QC history</div><div className="op-muted" style={{ fontSize: 13, marginTop: 2 }}>Traceability · dispute resolution · supplier conversations</div></div>
          <Btn variant="outline" size="sm" icon={Ic.Download}>Export</Btn>
        </div>

        {/* Filter strip */}
        <div style={{ display: "flex", gap: 10, marginBottom: 16, alignItems: "center" }}>
          <div className="op-search sm" style={{ flex: 1, maxWidth: 320 }}><Ic.Search size={16} className="op-search-ic"/><input className="op-input" placeholder="Search GPN, batch or farmer…"/></div>
          <div className="op-chips">
            {["All", "Approved", "Rejected", "Held"].map(f => <button key={f} className={`op-chip ${filter === f ? "on" : ""}`} onClick={() => setFilter(f)}>{f}</button>)}
          </div>
          <div className="op-ab-spacer" style={{ flex: 1 }}/>
          <button className="op-chip"><Ic.Calendar size={15}/> Last 30 days <Ic.ChevronDown size={14}/></button>
        </div>

        {loading ? (
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {Array.from({ length: 4 }).map((_, i) => <div key={i} className="op-card op-card-pad"><div className="op-skel" style={{ height: 16, width: "40%" }}/><div className="op-skel" style={{ height: 12, width: "70%", marginTop: 10 }}/></div>)}
          </div>
        ) : events.length === 0 ? (
          <div className="op-empty" style={{ padding: "64px 36px" }}>
            <div className="op-empty-art"><Ic.Clock size={40}/></div>
            <div className="op-empty-title">{state === "noResults" ? "No events match these filters" : "No QC history yet"}</div>
            <div className="op-empty-desc">{state === "noResults" ? "Try widening the date range or clearing filters." : "Completed QC events will appear here as a searchable timeline."}</div>
          </div>
        ) : (
          <div className="op-timeline">
            {events.map((e, i) => {
              const DI = decIcon[e.decision];
              return (
                <div className="op-tl-item" key={i}>
                  <div className="op-tl-rail">
                    <span className={`op-tl-dot ${e.decision === "rejected" ? "danger" : e.decision === "hold" ? "warning" : ""}`}><DI size={16}/></span>
                    {i < events.length - 1 && <span className="op-tl-line"/>}
                  </div>
                  <div className="op-tl-body" style={{ paddingBottom: 6 }}>
                    <button className="op-card op-card-pad" style={{ width: "100%", textAlign: "left", cursor: "pointer", display: "block" }} onClick={() => go("analytics")}>
                      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                        <Pill tone={decTone[e.decision]} dot>{decLabel[e.decision]}</Pill>
                        <span className="op-gpn" style={{ fontSize: 13 }}>{e.gpn}</span>
                        <span className="op-muted" style={{ fontSize: 12 }}>· {e.batch} · {e.variety} · {QD.KG(e.net)}</span>
                        <div className="op-ab-spacer" style={{ flex: 1 }}/>
                        <span className="op-muted" style={{ fontSize: 12 }}>{e.at}</span>
                      </div>
                      <div style={{ display: "flex", alignItems: "center", gap: 18, marginTop: 12 }}>
                        <div style={{ display: "flex", alignItems: "center", gap: 7 }}><Ic.Thermometer size={14} style={{ color: "var(--muted-foreground)" }}/><span style={{ fontSize: 13 }}>DM <b style={{ color: e.dm < 21 ? "var(--destructive)" : "var(--foreground)" }}>{e.dm.toFixed(2)}%</b></span></div>
                        <div style={{ display: "flex", alignItems: "center", gap: 7 }}><Ic.Drop size={14} style={{ color: "var(--muted-foreground)" }}/><span style={{ fontSize: 13 }}>FFA <b>{e.ffa.toFixed(2)}%</b></span></div>
                        <div style={{ display: "flex", alignItems: "center", gap: 7 }}><Ic.User size={14} style={{ color: "var(--muted-foreground)" }}/><span style={{ fontSize: 13 }} className="op-muted">{e.inspector}</span></div>
                        {e.sup && <span className="badge badge-pending" style={{ fontSize: 10 }}>Override · {e.sup}</span>}
                        {e.linked && <span className="badge badge-soil" style={{ fontSize: 10 }}><Ic.ArrowRight size={10}/> Corrected → {e.link.replace("GPN-2026", "…")}</span>}
                        <div className="op-ab-spacer" style={{ flex: 1 }}/>
                        <span className="op-sec-link" style={{ fontSize: 12.5 }}>View details →</span>
                      </div>
                    </button>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
};

window.OptPages = Object.assign(window.OptPages || {}, {
  history: { chrome: "tabs", tab: "History", render: (ctx) => <QcHistory {...ctx}/> },
});