/* Case dashboard — portfolio overview. Exposes window.Dashboard */

function StageMini({ stage }) {
  const { STAGES } = window.VVE;
  return (
    <div>
      <div className="stage-mini">
        {STAGES.map((s, i) => (
          <i key={i} className={i < stage ? "done" : i === stage ? "now" : ""}></i>
        ))}
      </div>
      <div className="stage-label">{STAGES[stage]}{stage < STAGES.length - 1 ? "" : ""}</div>
    </div>
  );
}

function RouteChips({ routes }) {
  const { ROUTES } = window.VVE;
  return (
    <div className="chips-col">
      {routes.map((r) => {
        const def = ROUTES[r];
        return (
          <span className="chip" key={r}>
            <span className="sq" style={{ background: def.color }}></span>{def.short}
          </span>
        );
      })}
    </div>
  );
}

function Deadline({ date, label }) {
  if (!date) return <span className="muted tiny">—</span>;
  const d = new Date(date + "T00:00:00");
  const today = new Date("2026-06-01T00:00:00");
  const days = Math.round((d - today) / 86400000);
  const soon = days <= 7;
  return (
    <div>
      <div className="row gap6" style={{ fontWeight: 600, fontSize: 13, whiteSpace: "nowrap" }}>
        <Icon name="calendar" size={14} style={{ color: soon ? "var(--st-err-fg)" : "var(--fg2)", flex: "0 0 auto" }} />
        {d.toLocaleDateString("nl-NL", { day: "numeric", month: "short" })}
      </div>
      <div className="tiny muted" style={{ marginTop: 4 }}>
        {soon ? <span style={{ color: "var(--st-err-fg)", fontWeight: 600 }}>over {days} d · </span> : null}
        {label}
      </div>
    </div>
  );
}

function Dashboard({ onOpen, search = "" }) {
  const { CASES, STAGES } = window.VVE;
  const [filter, setFilter] = React.useState("actief");
  const [routeFilter, setRouteFilter] = React.useState("alle");

  const active = CASES.filter((c) => c.stage < 7);
  const kpiReviews = CASES.reduce((s, c) => s + c.reviews, 0);
  const kpiBlockers = CASES.reduce((s, c) => s + c.blockers, 0);
  const kpiDeadlines = CASES.filter((c) => {
    if (!c.deadline) return false;
    const days = Math.round((new Date(c.deadline + "T00:00:00") - new Date("2026-06-01T00:00:00")) / 86400000);
    return days <= 10;
  }).length;

  let shown = CASES;
  if (filter === "actief") shown = CASES.filter((c) => c.stage < 7);
  else if (filter === "review") shown = CASES.filter((c) => c.reviews > 0 || c.blockers > 0);
  else if (filter === "afgerond") shown = CASES.filter((c) => c.stage >= 7);
  else if (filter === "deadline") shown = CASES.filter((c) => {
    if (!c.deadline) return false;
    const days = Math.round((new Date(c.deadline + "T00:00:00") - new Date("2026-06-01T00:00:00")) / 86400000);
    return days <= 10;
  });
  if (routeFilter !== "alle") shown = shown.filter((c) => c.routes.includes(routeFilter));
  const q = search.trim().toLowerCase();
  if (q) {
    shown = shown.filter((c) => [c.id, c.vve, c.gemeente, c.provincie, c.type].join(" ").toLowerCase().includes(q));
  }

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="eyebrow">Portefeuille</div>
          <h1 className="page-title">Dossiers</h1>
          <p className="page-sub">Van rommelige VvE-input naar een controleerbaar, route-specifiek financieringsdossier — jij houdt de regie.</p>
        </div>
        <button className="btn primary" onClick={() => window.openNewCase && window.openNewCase()}><Icon name="plus" size={16} />Nieuwe case</button>
      </div>

      <div className="kpis">
        <div className="kpi" onClick={() => setFilter("actief")}>
          <div className="lbl"><Icon name="folder" size={15} />Actieve dossiers</div>
          <div className="num"><CountUp to={active.length} /></div>
          <div className="foot"><Icon name="dot" size={10} fill style={{ color: "var(--tge-emerald)" }} />in behandeling</div>
        </div>
        <div className="kpi accent" onClick={() => setFilter("review")}>
          <div className="lbl"><Icon name="inbox" size={15} />Wacht op jouw review</div>
          <div className="num"><em><CountUp to={kpiReviews} /></em></div>
          <div className="foot">red flags & lage confidence</div>
        </div>
        <div className="kpi" onClick={() => setFilter("review")}>
          <div className="lbl"><Icon name="flag" size={15} />Open blockers</div>
          <div className="num"><CountUp to={kpiBlockers} /></div>
          <div className="foot"><Icon name="lock" size={12} />export geblokkeerd</div>
        </div>
        <div className="kpi" onClick={() => setFilter("deadline")}>
          <div className="lbl"><Icon name="clock" size={15} />Deadlines ≤ 10 dagen</div>
          <div className="num"><CountUp to={kpiDeadlines} /></div>
          <div className="foot">subsidie- & ALV-timing</div>
        </div>
      </div>

      <div className="filters">
        <div className="seg">
          {[["actief", "Actief"], ["alle", "Alle"], ["review", "Wacht op review"], ["deadline", "Deadline ≤ 10d"], ["afgerond", "Afgerond"]].map(([k, l]) => (
            <button key={k} className={filter === k ? "on" : ""} onClick={() => setFilter(k)}>{l}</button>
          ))}
        </div>
        <div className="select">
          <Icon name="route" size={14} />
          <select value={routeFilter} onChange={(e) => setRouteFilter(e.target.value)}
                  style={{ border: 0, background: "none", font: "inherit", color: "inherit", cursor: "pointer", outline: "none" }}>
            <option value="alle">Alle routes</option>
            {Object.values(window.VVE.ROUTES).map((r) => <option key={r.key} value={r.key}>{r.short}</option>)}
          </select>
        </div>
        <div className="select"><Icon name="filter" size={14} />Eigenaar · JK</div>
        <div className="pull tiny muted">{shown.length} van {CASES.length} dossiers{q ? " · zoekterm actief" : ""}</div>
      </div>

      <div className="card">
        <table className="tbl">
          <thead>
            <tr>
              <th style={{ width: "27%" }}>VvE</th>
              <th style={{ width: "15%" }}>Routes</th>
              <th style={{ width: "19%" }}>Voortgang</th>
              <th style={{ width: "13%" }}>Open</th>
              <th style={{ width: "16%" }}>Deadline</th>
              <th style={{ width: "10%" }}>Activiteit</th>
            </tr>
          </thead>
          <tbody>
            {shown.map((c) => (
              <tr className="row" key={c.id} onClick={() => onOpen(c.id)}>
                <td>
                  <div className="vve-name">{c.vve}</div>
                  <div className="vve-meta">
                    <span className="mono" style={{ fontSize: 11 }}>{c.id}</span>
                    <span>·</span>
                    <span className="mp"><Icon name="mapPin" size={12} />{c.gemeente}</span>
                    <span>·</span><span>{c.units} eh.</span>
                  </div>
                </td>
                <td><RouteChips routes={c.routes} /></td>
                <td><StageMini stage={c.stage} /></td>
                <td>
                  <div className="row gap6 wrap" style={{ flexDirection: "column", alignItems: "flex-start" }}>
                    {c.blockers > 0 && <Badge tone="err" sm dot>{c.blockers} blocker</Badge>}
                    {c.reviews > 0 && <Badge tone="warn" sm>{c.reviews} review</Badge>}
                    {c.blockers === 0 && c.reviews === 0 && c.openTasks > 0 && <span className="tiny muted">{c.openTasks} taken</span>}
                    {c.stage >= 7 && <Badge tone="ok" sm dot>Afgerond</Badge>}
                  </div>
                </td>
                <td><Deadline date={c.deadline} label={c.deadlineLabel} /></td>
                <td><span className="tiny muted">{c.lastAct}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <p className="tiny muted" style={{ marginTop: 16, display: "flex", alignItems: "center", gap: 8 }}>
        <Icon name="shield" size={13} />
        Route-statussen zijn objectieve kandidaten op basis van versioned bronregels — geen persoonlijk financieel advies.
      </p>
    </div>
  );
}

window.Dashboard = Dashboard;