// Employer — Employee detail view (tabs)

const EmployeeDetail = ({ empId, onBack, toast }) => {
  const emp = LS_employees.find(e => e.id === empId);
  const [tab, setTab] = React.useState("persoonlijk");
  const [showBsn, setShowBsn] = React.useState(false);
  const [editOpen, setEditOpen] = React.useState(false);
  const [, forceRender] = React.useReducer(x => x + 1, 0);
  if (!emp) {
    return (
      <div style={{ padding: 32 }}>
        <Btn variant="ghost" size="sm" icon="arrow-l" onClick={onBack}>Medewerkers</Btn>
        <div style={{ marginTop: 20, color: "var(--ink-3)" }}>Medewerker niet gevonden.</div>
      </div>
    );
  }
  const p = LS_computePayslip(emp);

  const terminate = async () => {
    if (!window.confirm(`Weet je zeker dat ${emp.first_name} ${emp.last_name} uit dienst moet?`)) return;
    try {
      await fetch(`/api/employees/${emp.id}`, { method: "DELETE" });
      await window.LS_store?.refreshEmployees?.();
      toast && toast("Medewerker uit dienst");
      onBack && onBack();
    } catch (e) { toast && toast("Fout: " + e.message); }
  };

  const tabs = ["persoonlijk", "contract", "salaris", "historie", "documenten"];

  return (
    <div style={{ padding: "20px 32px 48px", maxWidth: 1080, margin: "0 auto" }}>
      <Row style={{ justifyContent: "space-between", marginBottom: 18 }}>
        <Btn variant="ghost" size="sm" icon="arrow-l" onClick={onBack}>Medewerkers</Btn>
        <Row style={{ gap: 8 }}>
          <Btn size="sm" variant="secondary" icon="edit" onClick={() => setEditOpen(true)}>Bewerken</Btn>
          <Btn size="sm" variant="danger" icon="logout" onClick={terminate}>Uit dienst</Btn>
        </Row>
      </Row>

      {/* Profile header */}
      <Card style={{ marginBottom: 20 }}>
        <Row style={{ gap: 18 }}>
          <Avatar emp={emp} size={64} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: 0.6 }}>Medewerker #{emp.number}</div>
            <h1 style={{ fontSize: 26, marginTop: 2 }}>{emp.first_name} {emp.last_name}</h1>
            <Row style={{ gap: 8, marginTop: 8 }}>
              <Pill tone="success" dot>{emp.status}</Pill>
              <Pill tone="neutral">{emp.function}</Pill>
              <Pill tone="neutral">{emp.parttime}% · {emp.hours.toLocaleString("nl-NL", { minimumFractionDigits: 2 })} uur/mnd</Pill>
              <Pill tone="neutral">In dienst sinds {LS_fmt.date(emp.hired_at)}</Pill>
            </Row>
          </div>
          <div style={{ textAlign: "right" }}>
            <div style={{ fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: 0.6 }}>Bruto / maand</div>
            <div className="num" style={{ fontSize: 26, fontWeight: 600, letterSpacing: "-0.01em", marginTop: 2 }}>{LS_fmt.eurSigned(emp.base_salary)}</div>
            <div style={{ fontSize: 12, color: "var(--ink-3)" }}>Netto ± <span className="num">{LS_fmt.eurSigned(p.net)}</span></div>
          </div>
        </Row>
      </Card>

      {/* Tabs */}
      <Row style={{ gap: 2, marginBottom: 18, borderBottom: "1px solid var(--line)" }}>
        {tabs.map(t => (
          <button key={t} onClick={() => setTab(t)} style={{
            background: "transparent", border: "none", cursor: "pointer",
            padding: "10px 16px",
            fontSize: 13.5, fontWeight: tab === t ? 600 : 500,
            color: tab === t ? "var(--ink)" : "var(--ink-3)",
            borderBottom: tab === t ? "2px solid var(--ink)" : "2px solid transparent",
            marginBottom: -1,
            textTransform: "capitalize",
            fontFamily: "inherit",
          }}>{t}</button>
        ))}
      </Row>

      {tab === "persoonlijk" && (
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
          <Section title="Persoonsgegevens">
            <Field label="Voornaam" value={emp.first_name} />
            <Field label="Achternaam" value={emp.last_name} />
            <Field label="E-mail" value={emp.email} mono />
            <Field label="Geboortedatum" value={LS_fmt.date(emp.dob)} />
            <Field label="BSN" value={showBsn ? emp.bsn : "●●●●●●●●●"} mono
              action={<button onClick={() => setShowBsn(s => !s)} style={linkBtn}>{showBsn ? "verberg" : "toon"}</button>} />
          </Section>
          <Section title="Adres & betaling">
            <Field label="Adres" value={emp.address} />
            <Field label="Postcode" value={emp.postcode} mono />
            <Field label="Plaats" value={emp.city} />
            <Field label="IBAN" value={emp.iban} mono />
          </Section>
        </div>
      )}

      {tab === "contract" && (
        <Section title="Contract & arbeidsvoorwaarden">
          <Field label="Functie" value={emp.function} />
          <Field label="In dienst sinds" value={LS_fmt.date(emp.hired_at)} />
          <Field label="Contract" value="Onbepaalde tijd · schriftelijk" />
          <Field label="Uren / periode" value={`${emp.hours.toLocaleString("nl-NL", { minimumFractionDigits: 2 })} (${emp.parttime}%)`} mono />
          <Field label="Oproepovereenkomst" value="Nee" />
          <Field label="Bedrijfsauto" value="Nee" />
        </Section>
      )}

      {tab === "salaris" && (
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
          <Section title="Beloning">
            <Field label="Bruto / periode" value={<span className="num">{LS_fmt.eurSigned(emp.base_salary)}</span>} mono />
            <Field label="Basisuurloon" value={<span className="num">{LS_fmt.eurSigned(emp.base_salary / emp.hours)}</span>} mono />
            <Field label="Parttime %" value={`${emp.parttime}%`} />
          </Section>
          <Section title="Loonheffing">
            <Field label="LH-tabel" value={
              <Row style={{ gap: 6 }}>
                <span style={{ width: 10, height: 10, borderRadius: 2, background: "#fff", border: "1px solid var(--ink-2)" }} />
                {emp.lh_table}
              </Row>
            } />
            <Field label="Heffingskorting" value={<Pill tone={emp.heffingskorting ? "success" : "neutral"} dot>{emp.heffingskorting ? "Ja" : "Nee"}</Pill>} />
            <Field label="BT-percentage" value={<span className="num">{LS_fmt.pct(emp.bt_pct)}</span>} mono />
            <Field label="Jaarloon BT" value={<span className="num">{LS_fmt.eurSigned(emp.jaarloon_bt)}</span>} mono />
          </Section>
        </div>
      )}

      {tab === "historie" && (
        <Section title="Loonstroken">
          {LS_runs.map((r, i) => (
            <Row key={r.id} style={{ justifyContent: "space-between", padding: "14px 18px", borderTop: i === 0 ? "none" : "1px solid var(--line)" }}>
              <Row style={{ gap: 12 }}>
                <div style={{ width: 32, height: 32, borderRadius: 7, background: "var(--accent-2)", color: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="pdf" size={14} /></div>
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: 500, textTransform: "capitalize" }}>{r.label}</div>
                  <div style={{ fontSize: 12, color: "var(--ink-3)" }}>Verzonden {LS_fmt.date(r.confirmed_at)}</div>
                </div>
              </Row>
              <Row style={{ gap: 14 }}>
                <span className="num" style={{ fontSize: 13.5 }}>{LS_fmt.eurSigned(p.net)}</span>
                <Btn size="sm" variant="ghost" icon="download" onClick={() => window.open(`/api/runs/${r.id}/pdf`, "_blank")} />
              </Row>
            </Row>
          ))}
        </Section>
      )}

      {tab === "documenten" && (
        <Section title="Persoonlijke documenten" action={<Btn size="sm" variant="secondary" icon="upload">Upload</Btn>}>
          <div style={{ padding: 28, textAlign: "center", color: "var(--ink-3)", fontSize: 13 }}>
            Geen documenten geüpload. Hier komen arbeidscontract, ID-kopie en UWV-ziekmeldingen.
          </div>
        </Section>
      )}

      <EmployeeEditModal open={editOpen} onClose={() => setEditOpen(false)} employee={emp} toast={toast}
        onSaved={() => forceRender()} />
    </div>
  );
};

const Field = ({ label, value, mono, action }) => (
  <Row style={{ padding: "12px 18px", borderTop: "1px solid var(--line)", justifyContent: "space-between" }}>
    <span style={{ fontSize: 13, color: "var(--ink-3)", width: 180, flexShrink: 0 }}>{label}</span>
    <Row style={{ gap: 8, flex: 1, justifyContent: "flex-end" }}>
      <span style={{ fontSize: 13.5, fontFamily: mono ? "'JetBrains Mono', monospace" : "inherit", fontWeight: 500, textAlign: "right" }}>{value}</span>
      {action}
    </Row>
  </Row>
);

const linkBtn = {
  background: "none", border: "none", cursor: "pointer",
  color: "var(--accent)", fontSize: 12, fontWeight: 500,
  padding: "2px 6px", borderRadius: 4, fontFamily: "inherit",
};

Object.assign(window, { EmployeeDetail });