// MissionChef — Personalakte Drawer + Hire Modal

function PersonnelDrawer({ user, onClose }) {
  const [tab, setTab] = React.useState('profile');
  const [noteText, setNoteText] = React.useState('');
  const [editMode, setEditMode] = React.useState(false);
  const store = useStore();
  const u = store.staff.find(x => x.id === user.id) || user;

  const tabs = [
    { id: 'profile', label: 'Profil' },
    { id: 'contract', label: 'Vertrag' },
    { id: 'certs', label: 'Zertifikate' },
    { id: 'docs', label: 'Dokumente' },
    { id: 'vacation', label: 'Urlaub' },
    { id: 'notes', label: 'Notizen' },
  ];

  const addNote = () => {
    if (!noteText.trim()) return;
    mcApi.post(`/staff/${u.id}/notes`, { author: mcStore.session.name, text: noteText });
    setNoteText('');
  };

  const startOffboarding = () => {
    const lastDay = prompt('Letzter Arbeitstag (JJJJ-MM-TT)?', new Date(Date.now()+30*86400000).toISOString().slice(0,10));
    if (!lastDay) return;
    const reason = prompt('Grund (optional)?') || '';
    mcApi.post(`/staff/${u.id}/offboard`, { lastDay, reason });
    onClose();
  };

  return (
    <div onClick={onClose} style={{
      position: 'absolute', inset: 0, background: 'rgba(27,27,23,.55)', zIndex: 500,
      display: 'flex', justifyContent: 'flex-end',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: 680, background: 'var(--mc-bg)', height: '100%', overflow: 'auto',
        display: 'flex', flexDirection: 'column',
        boxShadow: '-20px 0 50px rgba(0,0,0,.2)',
      }}>
        {/* Header */}
        <div style={{ padding: 24, borderBottom: '1px solid var(--mc-rule)', background: 'var(--mc-surface)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
            <div className="mc-eyebrow">Personalakte</div>
            <button onClick={onClose} className="mc-btn ghost sm">Schließen ×</button>
          </div>
          <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
            <Avatar u={u} size={64} />
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em' }}>{u.name}</div>
                <StatusPill status={u.status} />
              </div>
              <div style={{ fontSize: 13, color: 'var(--mc-ink-dim)', marginTop: 4 }}>{u.role} · {u.area} · {u.employmentType} · Personalnr. {u.id.toUpperCase()}</div>
            </div>
            {u.status === 'active' && (
              <button onClick={startOffboarding} className="mc-btn ghost sm" style={{ color: 'var(--mc-ember-700)' }}>
                Austritt einleiten →
              </button>
            )}
          </div>
        </div>

        {/* Tabs */}
        <div style={{ borderBottom: '1px solid var(--mc-rule)', background: 'var(--mc-surface)', padding: '0 24px', display: 'flex', gap: 0, flexShrink: 0 }}>
          {tabs.map(t => (
            <button key={t.id} onClick={() => setTab(t.id)} style={{
              padding: '12px 14px', background: 'transparent', border: 'none',
              borderBottom: tab === t.id ? '2px solid var(--mc-leaf)' : '2px solid transparent',
              color: tab === t.id ? 'var(--mc-ink)' : 'var(--mc-ink-muted)',
              fontSize: 12, fontWeight: tab === t.id ? 500 : 400, cursor: 'pointer',
              fontFamily: "'Space Grotesk', sans-serif",
            }}>
              {t.label}
            </button>
          ))}
        </div>

        {/* Content */}
        <div style={{ flex: 1, overflow: 'auto', padding: 24 }}>
          {tab === 'profile' && <ProfileTab u={u} editMode={editMode} setEditMode={setEditMode} />}
          {tab === 'contract' && <ContractTab u={u} />}
          {tab === 'certs' && <CertsTab u={u} />}
          {tab === 'docs' && <DocsTab u={u} />}
          {tab === 'vacation' && <VacationTab u={u} />}
          {tab === 'notes' && (
            <NotesTab u={u} noteText={noteText} setNoteText={setNoteText} addNote={addNote} />
          )}
        </div>
      </div>
    </div>
  );
}

function ProfileTab({ u, editMode, setEditMode }) {
  const [form, setForm] = React.useState({ ...u });
  React.useEffect(() => setForm({ ...u }), [u.id]);

  const save = () => {
    mcApi.patch('/staff/' + u.id, {
      name: form.name, email: form.email, phone: form.phone, address: form.address,
    });
    setEditMode(false);
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      <SectionHead title="Kontaktdaten" action={
        editMode
          ? <div style={{ display: 'flex', gap: 6 }}>
              <button onClick={() => setEditMode(false)} className="mc-btn ghost sm">Abbrechen</button>
              <button onClick={save} className="mc-btn leaf sm">Speichern</button>
            </div>
          : <button onClick={() => setEditMode(true)} className="mc-btn ghost sm">Bearbeiten</button>
      } />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <Field label="Name">
          {editMode
            ? <input value={form.name} onChange={e => setForm({...form, name: e.target.value})} style={fieldInput} />
            : <div style={fieldVal}>{u.name}</div>}
        </Field>
        <Field label="Geburtsdatum"><div style={fieldVal}>{fmtDate(u.birthday)}</div></Field>
        <Field label="E-Mail">
          {editMode
            ? <input value={form.email} onChange={e => setForm({...form, email: e.target.value})} style={fieldInput} />
            : <div style={fieldVal}>{u.email}</div>}
        </Field>
        <Field label="Telefon">
          {editMode
            ? <input value={form.phone} onChange={e => setForm({...form, phone: e.target.value})} style={fieldInput} />
            : <div style={fieldVal}>{u.phone}</div>}
        </Field>
        <Field label="Adresse" wide>
          {editMode
            ? <input value={form.address} onChange={e => setForm({...form, address: e.target.value})} style={fieldInput} />
            : <div style={fieldVal}>{u.address}</div>}
        </Field>
      </div>

      <SectionHead title="Notfallkontakt" />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
        <Field label="Name"><div style={fieldVal}>{u.emergency?.name || '—'}</div></Field>
        <Field label="Verhältnis"><div style={fieldVal}>{u.emergency?.relation || '—'}</div></Field>
        <Field label="Telefon"><div style={fieldVal}>{u.emergency?.phone || '—'}</div></Field>
      </div>

      <SectionHead title="Sozialversicherung & Bank" />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <Field label="Steuer-ID"><div style={fieldVal} className="mc-mono">{u.taxId}</div></Field>
        <Field label="Sozialvers.-Nr."><div style={fieldVal} className="mc-mono">{u.ssn}</div></Field>
        <Field label="IBAN" wide><div style={fieldVal} className="mc-mono">{u.iban}</div></Field>
      </div>
    </div>
  );
}

function ContractTab({ u }) {
  const tenure = daysSince(u.hiredAt);
  const tenureLabel = tenure < 365 ? `${Math.floor(tenure/30)} Monate` : `${(tenure/365).toFixed(1)} Jahre`;
  const annualGross = u.contractHours * 4.33 * u.wage * 12;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      <SectionHead title="Arbeitsverhältnis" />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
        <Field label="Position"><div style={fieldVal}>{u.role}</div></Field>
        <Field label="Bereich"><div style={fieldVal}>{u.area}</div></Field>
        <Field label="Beschäftigung"><div style={fieldVal}>{u.employmentType}</div></Field>
        <Field label="Wochenstunden"><div style={fieldVal} className="mc-num">{u.contractHours}h</div></Field>
        <Field label="Stundensatz"><div style={fieldVal} className="mc-num">{fmtEUR(u.wage)}</div></Field>
        <Field label="Brutto (Monat)"><div style={fieldVal} className="mc-num">{fmtEUR(u.contractHours * 4.33 * u.wage)}</div></Field>
        <Field label="Eingestellt am"><div style={fieldVal}>{fmtDate(u.hiredAt)}</div></Field>
        <Field label="Betriebszugehörigkeit"><div style={fieldVal}>{tenureLabel}</div></Field>
        <Field label="Brutto p.a. (gerundet)"><div style={fieldVal} className="mc-num">{fmtEUR(annualGross)}</div></Field>
      </div>

      <SectionHead title="Onboarding-Status" />
      {u.onboarding ? (
        <div className="mc-card" style={{ padding: 18 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
            <div>
              <div style={{ fontSize: 14, fontWeight: 500 }}>
                {u.onboarding.status === 'complete' ? 'Abgeschlossen' : 'In Bearbeitung'}
              </div>
              <div style={{ fontSize: 12, color: 'var(--mc-ink-dim)' }}>
                Start: {fmtDate(u.onboarding.startedAt)}
                {u.onboarding.completedAt && ' · Fertig: ' + fmtDate(u.onboarding.completedAt)}
              </div>
            </div>
            <Pill tone={u.onboarding.status === 'complete' ? 'leaf' : 'info'}>
              {u.onboarding.steps.filter(s=>s.done).length}/{u.onboarding.steps.length}
            </Pill>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginTop: 10 }}>
            {u.onboarding.steps.map(s => (
              <label key={s.id} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, padding: 6, cursor: 'pointer' }}>
                <input type="checkbox" checked={s.done} onChange={e => mcApi.patch(`/staff/${u.id}/onboarding/${s.id}`, { done: e.target.checked })} style={{ accentColor: 'var(--mc-leaf-700)' }} />
                <span style={{ textDecoration: s.done ? 'line-through' : 'none', color: s.done ? 'var(--mc-ink-dim)' : 'var(--mc-ink)' }}>{s.label}</span>
              </label>
            ))}
          </div>
        </div>
      ) : <div style={{ fontSize: 12, color: 'var(--mc-ink-dim)' }}>Kein Onboarding-Prozess vorhanden.</div>}

      {u.offboarding && (
        <>
          <SectionHead title="Offboarding-Status" />
          <div className="mc-card" style={{ padding: 18, borderColor: 'var(--mc-ember)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>Letzter Tag: {fmtDate(u.offboarding.lastDay)}</div>
                <div style={{ fontSize: 12, color: 'var(--mc-ink-dim)' }}>{u.offboarding.reason}</div>
              </div>
              <Pill tone="ember">{u.offboarding.steps.filter(s=>s.done).length}/{u.offboarding.steps.length}</Pill>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginTop: 10 }}>
              {u.offboarding.steps.map(s => (
                <label key={s.id} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, padding: 6, cursor: 'pointer' }}>
                  <input type="checkbox" checked={s.done} onChange={e => mcApi.patch(`/staff/${u.id}/offboarding/${s.id}`, { done: e.target.checked })} style={{ accentColor: 'var(--mc-ember-700)' }} />
                  <span style={{ textDecoration: s.done ? 'line-through' : 'none', color: s.done ? 'var(--mc-ink-dim)' : 'var(--mc-ink)' }}>{s.label}</span>
                </label>
              ))}
            </div>
          </div>
        </>
      )}
    </div>
  );
}

function CertsTab({ u }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <SectionHead title="Qualifikationen & Nachweise" action={<button className="mc-btn leaf sm"><McIcon2 name="plus" size={12} />Hinzufügen</button>} />
      {u.certifications.length === 0 && <div style={{ fontSize: 12, color: 'var(--mc-ink-dim)' }}>Keine Zertifikate hinterlegt.</div>}
      {u.certifications.map(c => (
        <div key={c.id} className="mc-card" style={{ padding: 18, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 500 }}>{c.name}</div>
            <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)', marginTop: 3 }}>
              Ausgestellt: {fmtDate(c.issued)}
              {c.expires && ' · Gültig bis: ' + fmtDate(c.expires)}
            </div>
          </div>
          <Pill tone={c.status === 'valid' ? 'leaf' : c.status === 'expiring' ? 'ember' : 'default'}>
            {c.status === 'valid' ? 'Gültig' : c.status === 'expiring' ? 'Läuft ab' : 'Abgelaufen'}
          </Pill>
        </div>
      ))}
    </div>
  );
}

function DocsTab({ u }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      <SectionHead title="Dokumente" action={<button className="mc-btn leaf sm"><McIcon2 name="plus" size={12} />Hochladen</button>} />
      {u.documents.length === 0 && <div style={{ fontSize: 12, color: 'var(--mc-ink-dim)' }}>Keine Dokumente hinterlegt.</div>}
      {u.documents.map(d => (
        <div key={d.id} className="mc-card" style={{ padding: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <div style={{ width: 36, height: 44, background: 'var(--mc-surface-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 500, color: 'var(--mc-ink-dim)', border: '1px solid var(--mc-rule)' }}>PDF</div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 500 }}>{d.name}</div>
              <div style={{ fontSize: 10, color: 'var(--mc-ink-dim)', marginTop: 2 }}>{d.kind} · {d.size} · {fmtDate(d.uploaded)}</div>
            </div>
          </div>
          <button className="mc-btn ghost sm">↓</button>
        </div>
      ))}
    </div>
  );
}

function VacationTab({ u }) {
  const remaining = u.vacation.entitled - u.vacation.taken - u.vacation.pending;
  const pct = Math.round((u.vacation.taken / u.vacation.entitled) * 100);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      <SectionHead title={`Urlaub ${new Date().getFullYear()}`} action={<button className="mc-btn leaf sm"><McIcon2 name="plus" size={12} />Antrag erfassen</button>} />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
        <Kpi label="Anspruch" value={u.vacation.entitled + 'T'} />
        <Kpi label="Genommen" value={u.vacation.taken + 'T'} sub={pct + '%'} />
        <Kpi label="Beantragt" value={u.vacation.pending + 'T'} tone="ember" />
        <Kpi label="Verbleibend" value={remaining + 'T'} tone="leaf" />
      </div>

      <div>
        <div className="mc-eyebrow" style={{ marginBottom: 10 }}>Jahresverlauf</div>
        <div style={{ height: 10, background: 'var(--mc-rule)', display: 'flex', overflow: 'hidden' }}>
          <div style={{ width: (u.vacation.taken/u.vacation.entitled*100) + '%', background: 'var(--mc-leaf)' }} />
          <div style={{ width: (u.vacation.pending/u.vacation.entitled*100) + '%', background: 'var(--mc-ember)' }} />
        </div>
      </div>

      <SectionHead title="Krankheitstage" />
      <div style={{ fontSize: 13 }}>{u.sickDays} Tage in diesem Jahr</div>
    </div>
  );
}

function NotesTab({ u, noteText, setNoteText, addNote }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <SectionHead title="Gesprächsnotizen & Vorkommnisse" />
      <div className="mc-card" style={{ padding: 14 }}>
        <textarea
          value={noteText}
          onChange={e => setNoteText(e.target.value)}
          placeholder="Notiz verfassen… (z.B. Jahresgespräch, Feedback, Vorfall)"
          style={{
            width: '100%', minHeight: 70, resize: 'vertical', border: '1px solid var(--mc-rule)',
            padding: 10, fontFamily: "'Space Grotesk', sans-serif", fontSize: 13,
            background: 'var(--mc-surface)', color: 'var(--mc-ink)',
          }}
        />
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 10 }}>
          <button onClick={addNote} className="mc-btn leaf sm">Notiz speichern</button>
        </div>
      </div>

      {u.notes.length === 0 && <div style={{ fontSize: 12, color: 'var(--mc-ink-dim)', textAlign: 'center', padding: 20 }}>Noch keine Notizen.</div>}
      {u.notes.map(n => (
        <div key={n.id} className="mc-card" style={{ padding: 16 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
            <div style={{ fontSize: 12, fontWeight: 500 }}>{n.author}</div>
            <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)' }}>{fmtDate(n.at)}</div>
          </div>
          <div style={{ fontSize: 13, lineHeight: 1.5 }}>{n.text}</div>
        </div>
      ))}
    </div>
  );
}

function HireModal({ onClose }) {
  const [form, setForm] = React.useState({
    name: '', role: 'Kellner', area: 'Service', employmentType: 'Teilzeit',
    contractHours: 20, wage: 14, email: '', phone: '', hiredAt: new Date().toISOString().slice(0,10),
  });
  const hire = () => {
    if (!form.name) return;
    mcApi.post('/staff', { ...form, color: '#8A8178', birthday: '', address: '', iban: '', taxId: '', ssn: '', emergency: {} });
    onClose();
  };
  return (
    <div onClick={onClose} style={{
      position: 'absolute', inset: 0, background: 'rgba(27,27,23,.55)', zIndex: 500,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: 560, background: 'var(--mc-bg)', padding: 28,
        boxShadow: '0 20px 50px rgba(0,0,0,.25)',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
          <div>
            <div className="mc-eyebrow">Neuer Mitarbeiter</div>
            <div style={{ fontSize: 20, fontWeight: 500, marginTop: 4 }}>Einstellung starten</div>
            <div style={{ fontSize: 12, color: 'var(--mc-ink-dim)', marginTop: 2 }}>Basisdaten jetzt — Details & Dokumente im Onboarding-Prozess.</div>
          </div>
          <button onClick={onClose} className="mc-btn ghost sm">×</button>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <Field label="Name" wide>
            <input value={form.name} onChange={e => setForm({...form, name: e.target.value})} style={fieldInput} placeholder="Vor- und Nachname" autoFocus />
          </Field>
          <Field label="Position">
            <input value={form.role} onChange={e => setForm({...form, role: e.target.value})} style={fieldInput} />
          </Field>
          <Field label="Bereich">
            <select value={form.area} onChange={e => setForm({...form, area: e.target.value})} style={fieldInput}>
              <option>Küche</option><option>Service</option><option>Management</option>
            </select>
          </Field>
          <Field label="Beschäftigung">
            <select value={form.employmentType} onChange={e => setForm({...form, employmentType: e.target.value})} style={fieldInput}>
              <option>Vollzeit</option><option>Teilzeit</option><option>Minijob</option><option>Aushilfe</option>
            </select>
          </Field>
          <Field label="Wochenstunden">
            <input type="number" value={form.contractHours} onChange={e => setForm({...form, contractHours: parseInt(e.target.value)||0})} style={fieldInput} />
          </Field>
          <Field label="Stundensatz (€)">
            <input type="number" step="0.5" value={form.wage} onChange={e => setForm({...form, wage: parseFloat(e.target.value)||0})} style={fieldInput} />
          </Field>
          <Field label="Eintritt">
            <input type="date" value={form.hiredAt} onChange={e => setForm({...form, hiredAt: e.target.value})} style={fieldInput} />
          </Field>
          <Field label="E-Mail" wide>
            <input type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})} style={fieldInput} />
          </Field>
          <Field label="Telefon" wide>
            <input value={form.phone} onChange={e => setForm({...form, phone: e.target.value})} style={fieldInput} />
          </Field>
        </div>

        <div style={{ marginTop: 22, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)' }}>
            Nach dem Speichern startet automatisch der 10-Schritte Onboarding-Prozess.
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button onClick={onClose} className="mc-btn ghost">Abbrechen</button>
            <button onClick={hire} className="mc-btn leaf" disabled={!form.name}>Einstellen & Onboarding starten</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Small shared UI ──────────────────────────────────────────────────────────
function SectionHead({ title, action }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <div className="mc-eyebrow">{title}</div>
      {action}
    </div>
  );
}
function Field({ label, wide, children }) {
  return (
    <div style={{ gridColumn: wide ? '1 / -1' : 'auto' }}>
      <div className="mc-eyebrow" style={{ marginBottom: 6 }}>{label}</div>
      {children}
    </div>
  );
}
const fieldVal = { fontSize: 13, padding: '8px 0', color: 'var(--mc-ink)' };
const fieldInput = {
  width: '100%', padding: '8px 10px', border: '1px solid var(--mc-rule)',
  background: 'var(--mc-surface)', color: 'var(--mc-ink)',
  fontFamily: "'Space Grotesk', sans-serif", fontSize: 13,
};

Object.assign(window, { PersonnelDrawer, HireModal });