// GetContent — "Mijn opdrachten" (opdrachtgever): alle eigen opdrachten met status
// en reactie-teller. Klik → opdrachtdetail. Empty state voor de eerste keer.
function MyJobs({ onNav }) {
  const NS = window.GetContentDesignSystem_aa0f52;
  const { Button } = NS;
  const s = window.useStore();
  const [confirmJob, setConfirmJob] = React.useState(null);
  if (!s.auth) return null;
  const jobs = s.myJobs;
  const card = { background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)' };

  return (
    <window.AppPage
      eyebrow="Opdrachtgever"
      title="Mijn opdrachten"
      subtitle="Beheer je opdrachten en bekijk de reacties van creators."
      action={<Button variant="primary" size="lg" className="gc-cta-glow" onClick={() => onNav('post')} iconRight={<i data-lucide="plus"></i>}>Plaats opdracht</Button>}
    >
      {jobs.length === 0 ? (
        <window.EmptyState icon="clipboard-list" title="Nog geen opdrachten" text="Plaats je eerste opdracht en ontvang reacties van passende creators." cta="Plaats je eerste opdracht" onCta={() => onNav('post')} />
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {jobs.map((j) => (
            <div key={j.id} onClick={() => { window.GC_STORE.openJob(j.id, 'mine'); onNav('job'); }} style={Object.assign({}, card, { padding: 'clamp(18px, 2.5vw, 24px)', display: 'flex', alignItems: 'center', gap: 16, cursor: 'pointer' })}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6, flexWrap: 'wrap' }}>
                  <window.StatusBadge kind="job" status={j.status} />
                  <span style={{ fontSize: 12.5, color: 'var(--text-muted)' }}>{j.category} · {j.budget}{j.location ? ' · ' + j.location : ''}</span>
                </div>
                <div style={{ fontSize: 17, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>{j.title}</div>
              </div>
              <div style={{ textAlign: 'right', flex: 'none' }}>
                <div style={{ fontSize: 17, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>{j.reacties.length}</div>
                <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>reacties</div>
              </div>
              <button type="button" className="gc-jobdelete" aria-label={'Opdracht "' + j.title + '" verwijderen'} title="Opdracht verwijderen"
                onClick={(e) => { e.stopPropagation(); setConfirmJob(j); }}
                style={{ flex: 'none', display: 'inline-flex', alignItems: 'center', gap: 7, height: 38, padding: '0 14px', borderRadius: 'var(--radius-pill)', border: '1px solid var(--border-subtle)', background: 'transparent', color: 'var(--text-muted)', cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 13.5, fontWeight: 'var(--fw-semibold)' }}>
                <i data-lucide="trash-2" style={{ width: 15, height: 15 }}></i>
                <span className="gc-jobdelete-label">Verwijderen</span>
              </button>
              <i data-lucide="chevron-right" style={{ width: 18, height: 18, color: 'var(--text-faint)' }}></i>
            </div>
          ))}
        </div>
      )}

      <window.ConfirmModal
        open={!!confirmJob}
        danger
        title="Opdracht verwijderen?"
        body={confirmJob ? ('“' + confirmJob.title + '” wordt definitief verwijderd. Dit kan niet ongedaan worden gemaakt.') : ''}
        confirmLabel="Verwijderen"
        cancelLabel="Annuleren"
        onConfirm={() => { if (confirmJob) window.GC_STORE.deleteJob(confirmJob.id); setConfirmJob(null); }}
        onClose={() => setConfirmJob(null)}
      />
    </window.AppPage>
  );
}
window.MyJobs = MyJobs;