// Employer dashboard — the "home" view

const EmployerDashboard = ({ onNavigate, onOpenRun, toast }) => {
  const emps = LS_employees;
  const period = LS_currentPeriod;
  const lastRun = LS_runs[0];
  const [plannedAt, setPlannedAt] = React.useState(() => localStorage.getItem("ls_planned_at") || "2026-04-25");
  const runDay = Number(plannedAt.slice(8, 10)) || 25;
  const today = 20;
  const daysUntil = Math.max(0, runDay - today);
  const [rescheduleOpen, setRescheduleOpen] = React.useState(false);
  const [addOpen, setAddOpen] = React.useState(false);
  const [adminEmailOpen, setAdminEmailOpen] = React.useState(false);
  const [mfaOpen, setMfaOpen] = React.useState(false);
  const [, forceRender] = React.useReducer(x => x + 1, 0);
  const dbOk = window.LS_store?.dbOk !== false;

  // Totals preview for current period
  const totals = emps.reduce((acc, e) => {
    const p = LS_computePayslip(e);
    acc.bruto += p.bruto; acc.heffing += p.loonheffing; acc.zvw += p.zvw; acc.net += p.net;
    return acc;
  }, { bruto: 0, heffing: 0, zvw: 0, net: 0 });

  const plannedLabel = React.useMemo(() => {
    const d = new Date(plannedAt);
    if (isNaN(d)) return plannedAt;
    const dn = ["zondag","maandag","dinsdag","woensdag","donderdag","vrijdag","zaterdag"][d.getDay()];
    return `${dn} ${d.getDate()} ${LS_fmt.monthNL(d.getMonth() + 1)}`;
  }, [plannedAt]);

  return (
    <div style={{ padding: "28px 32px 48px", maxWidth: 1280, margin: "0 auto" }}>

      {!dbOk && (
        <div style={{
          marginBottom: 18, padding: "12px 14px",
          background: "var(--danger-2)", color: "var(--danger)",
          border: "1px solid oklch(85% 0.08 28)", borderRadius: 8, fontSize: 13,
        }}>
          <strong>Database niet bereikbaar.</strong> Er wordt tijdelijk demo-data getoond. Controleer <span className="num">DATABASE_URL</span> in <span className="num">.env</span> en herstart de server.
        </div>
      )}

      {/* Page header */}
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 22 }}>
        <div>
          <div style={{ fontSize: 12.5, color: "var(--ink-3)", fontWeight: 500, letterSpacing: 0.5, textTransform: "uppercase", marginBottom: 6 }}>Werkgeversportal</div>
          <h1 style={{ fontSize: 30, letterSpacing: "-0.02em" }}>Goedemorgen, Erik</h1>
          <div style={{ color: "var(--ink-2)", marginTop: 4, fontSize: 14 }}>Hier staat alles voor de loonrun van <b style={{ color: "var(--ink)" }}>{period.label}</b>.</div>
        </div>
        <Row style={{ gap: 10 }}>
          <button style={periodSelectorStyle}>
            <Icon name="calendar" size={14} /> {period.label}
            <Icon name="chevron" size={14} />
          </button>
        </Row>
      </div>

      {/* Hero: next run */}
      <Card pad={0} style={{ overflow: "hidden", marginBottom: 22, borderColor: "var(--ink)", background: "var(--ink)", color: "#fff" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 0 }}>
          <div style={{ padding: "26px 28px" }}>
            <Pill tone="ink" dot>
              <span style={{ color: "oklch(85% 0.12 148)" }}>●</span>
              Volgende loonrun in {daysUntil} dagen
            </Pill>
            <h2 style={{ fontSize: 30, marginTop: 14, letterSpacing: "-0.02em", color: "#fff" }}>Loonrun {period.label}</h2>
            <div style={{ marginTop: 8, color: "oklch(78% 0.01 85)", fontSize: 14, lineHeight: 1.5 }}>
              Gepland voor {plannedLabel}. Regels v2026.1 • {emps.length} actieve medewerkers • 0 mutaties deze maand.
            </div>
            <Row style={{ marginTop: 20, gap: 10 }}>
              <Btn variant="accent" size="lg" icon="play" onClick={() => onOpenRun(period)}>Draai nu</Btn>
              <Btn variant="ghost" size="lg" style={{ color: "#fff", borderColor: "oklch(100% 0 0 / 0.15)" }} icon="calendar" onClick={() => setRescheduleOpen(true)}>Herplannen</Btn>
            </Row>
          </div>
          <div style={{
            padding: "26px 28px",
            background: "oklch(26% 0.01 85)",
            borderLeft: "1px solid oklch(100% 0 0 / 0.08)",
            display: "flex", flexDirection: "column", justifyContent: "center",
          }}>
            <div style={{ fontSize: 11.5, textTransform: "uppercase", letterSpacing: 0.8, color: "oklch(70% 0.01 85)", marginBottom: 14 }}>Verwachte totalen</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", rowGap: 14, columnGap: 20 }}>
              <Stat dark label="Bruto" value={LS_fmt.eurSigned(totals.bruto)} />
              <Stat dark label="Netto" value={LS_fmt.eurSigned(totals.net)} />
              <Stat dark label="Af te dragen BD" value={LS_fmt.eurSigned(Math.abs(totals.heffing))} />
              <Stat dark label="Bijdrage ZVW" value={LS_fmt.eurSigned(Math.abs(totals.zvw))} />
            </div>
          </div>
        </div>
      </Card>

      {/* Row of stats */}
      <Row style={{ gap: 14, marginBottom: 22, alignItems: "stretch" }}>
        <KPI
          label="Actieve medewerkers"
          value={emps.length}
          sub="1 in dienst dit kwartaal"
        />
        <KPI
          label="Laatste run"
          value={lastRun.label.split(" ")[0]}
          sub={<>Verzonden <span className="num">{LS_fmt.date(lastRun.confirmed_at)}</span> · <button onClick={() => onNavigate("documents")} style={{
            background: "none", border: "none", padding: 0, cursor: "pointer",
            color: "var(--accent)", fontWeight: 500, fontFamily: "inherit", fontSize: "inherit",
          }}>Openen →</button></>}
        />
        <KPI
          label="Openstaand bij BD"
          value={<span className="num">{LS_fmt.eurPlain(1241)}</span>}
          sub={<>Aangifte mrt · betalen vóór <span className="num">30 apr</span></>}
        />
        <KPI
          label="Rekenregels"
          value={<span style={{ fontSize: 22 }}>v2026.1</span>}
          sub="Bijgewerkt 15 jan 2026"
        />
      </Row>

      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 22 }}>

        {/* Employees list */}
        <Section
          title="Medewerkers"
          action={
            <Row style={{ gap: 6 }}>
              <Btn size="sm" variant="ghost" icon="search" />
              <Btn size="sm" variant="secondary" icon="plus" onClick={() => setAddOpen(true)}>Toevoegen</Btn>
            </Row>
          }
        >
          <div>
            {emps.map((e, i) => {
              const p = LS_computePayslip(e);
              return (
                <button key={e.id} onClick={() => onNavigate("employee", e.id)}
                  style={employeeRowStyle(i === emps.length - 1)}
                  onMouseEnter={(ev) => ev.currentTarget.style.background = "var(--bg-2)"}
                  onMouseLeave={(ev) => ev.currentTarget.style.background = "transparent"}
                >
                  <Avatar emp={e} />
                  <div style={{ flex: 1, minWidth: 0, textAlign: "left" }}>
                    <div style={{ fontWeight: 500, color: "var(--ink)", fontSize: 13.5 }}>{e.last_name}, {e.first_name}</div>
                    <div style={{ fontSize: 12, color: "var(--ink-3)", display: "flex", gap: 8, marginTop: 2 }}>
                      <span>{e.function}</span>
                      <span style={{ color: "var(--line-2)" }}>·</span>
                      <span>{e.parttime}%</span>
                      <span style={{ color: "var(--line-2)" }}>·</span>
                      <span className="num">#{e.number}</span>
                    </div>
                  </div>
                  <div style={{ textAlign: "right", minWidth: 120 }}>
                    <div className="num" style={{ fontWeight: 500, fontSize: 13.5 }}>{LS_fmt.eurSigned(p.bruto)}</div>
                    <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>bruto / mnd</div>
                  </div>
                  <Icon name="chevronr" size={14} style={{ color: "var(--ink-3)" }} />
                </button>
              );
            })}
          </div>
        </Section>

        {/* Right column */}
        <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>

          <Section title="Afgelopen runs" action={<Btn size="sm" variant="ghost" iconRight="arrow-r" onClick={() => onNavigate("documents")}>Alle</Btn>}>
            {LS_runs.map((r, i) => (
              <div key={r.id} style={{
                display: "flex", alignItems: "center", gap: 12,
                padding: "12px 18px",
                borderTop: i === 0 ? "none" : "1px solid var(--line)",
              }}>
                <div style={{ width: 34, height: 34, borderRadius: 7, background: "var(--accent-2)", color: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name="check" size={16} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 500 }}>Loonrun {r.label}</div>
                  <div style={{ fontSize: 12, color: "var(--ink-3)" }}>
                  {r.employees} stroken · {r.confirmed_at
                    ? <>verzonden <span className="num">{LS_fmt.date(r.confirmed_at)}</span></>
                    : <span style={{ color: "var(--warn)" }}>concept · nog niet bevestigd</span>}
                </div>
                </div>
                <Btn size="sm" variant="ghost" icon="pdf" onClick={() => window.open(`/api/runs/${r.id}/pdf`, "_blank")} />
              </div>
            ))}
          </Section>

          <Section title="Snelle taken">
            {[
              { icon: "upload", label: "UWV Whk-beschikking uploaden", sub: "Jaarlijks · laatst 12 jan 2026", action: () => onNavigate("settings") },
              { icon: "mail", label: "Administratie-e-mail wijzigen", sub: LS_employer?.admin_email || "administratie@ehold.nl", action: () => setAdminEmailOpen(true) },
              { icon: "shield", label: "Gebruikers & MFA beheren", sub: "2 admins · MFA verplicht", action: () => setMfaOpen(true) },
            ].map((q, i) => (
              <button key={i} onClick={q.action}
                style={{
                  display: "flex", alignItems: "center", gap: 12, width: "100%",
                  padding: "12px 18px", background: "transparent",
                  border: "none", borderTop: i === 0 ? "none" : "1px solid var(--line)",
                  cursor: "pointer", textAlign: "left",
                }}
                onMouseEnter={(ev) => ev.currentTarget.style.background = "var(--bg-2)"}
                onMouseLeave={(ev) => ev.currentTarget.style.background = "transparent"}
              >
                <div style={{ width: 32, height: 32, borderRadius: 7, background: "var(--bg-3)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--ink-2)" }}>
                  <Icon name={q.icon} size={15} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 500 }}>{q.label}</div>
                  <div style={{ fontSize: 12, color: "var(--ink-3)" }}>{q.sub}</div>
                </div>
                <Icon name="chevronr" size={14} style={{ color: "var(--ink-3)" }} />
              </button>
            ))}
          </Section>

        </div>
      </div>

      <EmployeeEditModal open={addOpen} onClose={() => setAddOpen(false)} toast={toast} onSaved={() => forceRender()} />
      <AdminEmailModal open={adminEmailOpen} onClose={() => setAdminEmailOpen(false)} toast={toast} onSaved={() => forceRender()} />
      <UsersMfaModal open={mfaOpen} onClose={() => setMfaOpen(false)} toast={toast} />
      <ReschedulePopover open={rescheduleOpen} onClose={() => setRescheduleOpen(false)} currentDate={plannedAt}
        toast={toast} onSaved={(d) => { setPlannedAt(d); localStorage.setItem("ls_planned_at", d); }} />
    </div>
  );
};

const Stat = ({ label, value, dark }) => (
  <div>
    <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: 0.6, color: dark ? "oklch(68% 0.01 85)" : "var(--ink-3)", marginBottom: 4 }}>{label}</div>
    <div className="num" style={{ fontSize: 18, fontWeight: 500, color: dark ? "#fff" : "var(--ink)", letterSpacing: "-0.01em" }}>{value}</div>
  </div>
);

const periodSelectorStyle = {
  display: "inline-flex", alignItems: "center", gap: 8,
  padding: "8px 14px", background: "var(--surface)",
  border: "1px solid var(--line-2)", borderRadius: 8,
  fontSize: 13, color: "var(--ink)", cursor: "pointer",
  fontFamily: "inherit",
};

const employeeRowStyle = (last) => ({
  display: "flex", alignItems: "center", gap: 14,
  padding: "12px 18px", width: "100%",
  background: "transparent",
  border: "none",
  borderTop: "1px solid var(--line)",
  borderBottomLeftRadius: last ? 12 : 0,
  borderBottomRightRadius: last ? 12 : 0,
  cursor: "pointer",
  transition: "background 120ms",
});

Object.assign(window, { EmployerDashboard });