// Document Expiration Dashboard — stacked bar timeline of docs expiring
// this week / month / quarter. Click a bucket → list view → trigger re-KYC.

function DocumentExpiration({ buckets, auditorMode }) {
  const order = ["0-7", "8-30", "31-90", "91-180"];
  const labels = {
    "0-7":    { lbl: "This week",   sub: "≤ 7 days",         tone: "red"   },
    "8-30":   { lbl: "This month",  sub: "8–30 days",        tone: "amber" },
    "31-90":  { lbl: "This quarter",sub: "31–90 days",       tone: "fg-3"  },
    "91-180": { lbl: "Next quarter",sub: "91–180 days",      tone: "fg-3"  },
  };
  const counts = order.map(k => (buckets[k] || []).length);
  const max = Math.max(...counts, 1);

  // Stack composition for each bucket: how docs split by type (mocked)
  const typeSplit = (docs) => {
    const groups = { Passport: 0, "Address Proof": 0, "Risk Declaration": 0, Other: 0 };
    docs.forEach(d => {
      if (d.doc === "Passport") groups.Passport++;
      else if (d.doc.includes("Address") || d.doc.includes("DNI") || d.doc.includes("Cédula") || d.doc.includes("CPF") || d.doc.includes("ID") || d.doc.includes("Personalausweis")) groups["Address Proof"]++;
      else if (d.doc.includes("Risk")) groups["Risk Declaration"]++;
      else groups.Other++;
    });
    return groups;
  };
  const colors = {
    "Passport":         { red: "var(--red)",   amber: "var(--amber)", "fg-3": "var(--fg-3)" },
    "Address Proof":    { red: "var(--red-fg)",amber: "var(--amber-fg)", "fg-3": "var(--fg-4)" },
    "Risk Declaration": { red: "#fb7185",      amber: "#fcd34d", "fg-3": "var(--fg-5)" },
    "Other":            { red: "#fda4af",      amber: "#fde68a", "fg-3": "var(--line-strong)" },
  };

  const [selected, setSelected] = React.useState("0-7");

  const list = (buckets[selected] || []);

  return (
    <>
      <div className="app-subheader">
        <div className="subheader-title">Document Expiration</div>
        <div className="subheader-meta">Pulls from <Mono dim>kyc_profile.last_approved_date</Mono>, <Mono dim>compliance_risk_declaration.valid_until</Mono>, Sumsub <Mono dim>expirationDate</Mono></div>
        <div className="subheader-spacer" />
        <Btn variant="outlined" icon={IDownload}>Export</Btn>
        <Btn variant="filled" tone="accent" icon={ISend} disabled={auditorMode}>Send bulk re-<Term id="KYC">KYC</Term></Btn>
      </div>

      <div className="docs-layout">
        <div className="docs-main">
          {/* Stacked timeline */}
          <div className="docs-stack">
            {order.map((k) => {
              const items = buckets[k] || [];
              const groups = typeSplit(items);
              const total = items.length;
              const colorTone = labels[k].tone === "red" ? "red" : labels[k].tone === "amber" ? "amber" : "fg-3";
              const height = (total / max) * 100;
              return (
                <div key={k}
                  className={`docs-stack-col ${selected === k ? "is-active" : ""} docs-stack-tone-${labels[k].tone}`}
                  onClick={() => setSelected(k)}>
                  <div className="docs-stack-meta">
                    <span className="lbl">{labels[k].lbl}</span>
                    <span className="num">{total}</span>
                    <span className="lbl">{labels[k].sub}</span>
                  </div>
                  <div className="docs-stack-bar" style={{ position: "relative" }}>
                    <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column-reverse" }}>
                      {Object.entries(groups).map(([t, c]) => c === 0 ? null : (
                        <div key={t}
                          className="docs-stack-seg"
                          style={{
                            height: `${(c / total) * height}%`,
                            background: colors[t][colorTone],
                            borderBottom: "1px solid var(--bg-elev)",
                          }}
                          title={`${t}: ${c}`}
                        />
                      ))}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>

          {/* Legend */}
          <div className="row" style={{ paddingLeft: 4, gap: 16, color: "var(--fg-3)", fontSize: 11.5 }}>
            <span className="row" style={{ gap: 6 }}><span style={{ width: 10, height: 10, background: "var(--red)", borderRadius: 2 }} /> Passport</span>
            <span className="row" style={{ gap: 6 }}><span style={{ width: 10, height: 10, background: "var(--red-fg)", borderRadius: 2 }} /> ID / Address proof</span>
            <span className="row" style={{ gap: 6 }}><span style={{ width: 10, height: 10, background: "#fb7185", borderRadius: 2 }} /> Risk declaration</span>
            <span className="row" style={{ gap: 6 }}><span style={{ width: 10, height: 10, background: "#fda4af", borderRadius: 2 }} /> Other</span>
          </div>

          {/* Drill-down list */}
          <Card title={`${labels[selected].lbl} — ${labels[selected].sub}`}
            hint={`${list.length} document${list.length === 1 ? "" : "s"}`}
            actions={<><Btn variant="outlined" size="xs" icon={IFilter}>Filter</Btn><Btn variant="outlined" size="xs" icon={IDownload}>Export</Btn></>}
            className="docs-list-card">
            <div>
              {list.map((d, i) => {
                const tone = d.days <= 7 ? "is-urgent" : d.days <= 30 ? "is-soon" : "";
                return (
                  <div key={i} className={`doc-row ${tone}`}>
                    <Flag code={d.country} />
                    <span className="doc-name">{d.name}</span>
                    <span className="doc-type">{d.doc}</span>
                    <span className="doc-days">{d.days}d</span>
                    <div className="row-actions" style={{opacity: 1, justifyContent:"flex-end"}}>
                      <ActionIcon icon={ISend} label="Send re-KYC email" />
                    </div>
                  </div>
                );
              })}
              {list.length === 0 && <Empty title="Nothing expiring in this window" hint="Move to a wider bucket to see more." />}
            </div>
          </Card>
        </div>

        <aside className="docs-side col" style={{gap:14}}>
          <Card className="docs-side" title="Summary">
            <div className="docs-side-summary">
              <span className="docs-summary-num">{Object.values(buckets).flat().length}</span>
              <span className="docs-summary-lbl">documents expiring in next 180 days</span>
            </div>
            <div className="docs-bulk">
              <div className="docs-bulk-row"><span>≤ 7 days</span><b className="mono" style={{color:"var(--red-fg)"}}>{(buckets["0-7"]||[]).length}</b></div>
              <div className="docs-bulk-row"><span>8–30 days</span><b className="mono" style={{color:"var(--amber-fg)"}}>{(buckets["8-30"]||[]).length}</b></div>
              <div className="docs-bulk-row"><span>31–90 days</span><b className="mono">{(buckets["31-90"]||[]).length}</b></div>
              <div className="docs-bulk-row"><span>91–180 days</span><b className="mono">{(buckets["91-180"]||[]).length}</b></div>
            </div>
          </Card>

          <Card title="Bulk actions">
            <div className="col" style={{gap:8}}>
              <Btn variant="outlined" icon={ISend} disabled={auditorMode}>Send re-KYC email · ≤7d ({(buckets["0-7"]||[]).length})</Btn>
              <Btn variant="outlined" icon={ISend} disabled={auditorMode}>Send re-KYC email · ≤30d ({((buckets["0-7"]||[]).length + (buckets["8-30"]||[]).length)})</Btn>
              <Btn variant="outlined" icon={IDownload}>Export upcoming (CSV)</Btn>
              <Btn variant="outlined" icon={ICalendar}>Schedule auto-reminder</Btn>
            </div>
            <div className="fg-4" style={{fontSize:11, marginTop:10, padding:"8px 10px", background:"var(--bg-sunk)", borderRadius:6, border:"1px solid var(--line-soft)"}}>
              Re-<Term id="KYC">KYC</Term> emails are sent from <Mono dim>compliance@agio.bs</Mono>. Cadence per applicant is set in Settings → Re-KYC Cadence.
            </div>
          </Card>
        </aside>
      </div>
    </>
  );
}

Object.assign(window, { DocumentExpiration });