// GetContent — "Mijn reacties" (creator): alle verstuurde reacties met status
// (verstuurd / geselecteerd / niet geselecteerd). Empty state voor de eerste keer.
function MyResponses({ onNav }) {
  const NS = window.GetContentDesignSystem_aa0f52;
  const { Button } = NS;
  const s = window.useStore();
  if (!s.auth) return null;
  const responses = s.myResponses;
  const card = { background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)' };

  return (
    <window.AppPage
      eyebrow="Creator"
      title="Mijn reacties"
      subtitle="Volg de status van de opdrachten waarop je hebt gereageerd."
      action={<Button variant="primary" size="lg" className="gc-cta-glow" onClick={() => onNav('browse')} iconRight={<i data-lucide="arrow-right"></i>}>Bekijk opdrachten</Button>}
    >
      {responses.length === 0 ? (
        <window.EmptyState icon="send" title="Nog geen reacties" text="Bekijk de open opdrachten en reageer op wat bij jou past. Je reacties verschijnen hier met hun status." cta="Bekijk opdrachten" onCta={() => onNav('browse')} />
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {responses.map((r) => (
            <div key={r.id} style={Object.assign({}, card, { padding: 'clamp(18px, 2.5vw, 24px)' })}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16 }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ marginBottom: 8 }}><window.StatusBadge kind="reactie" status={r.status} /></div>
                  <div style={{ fontSize: 17, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>{r.jobTitle}</div>
                  <div style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 3 }}>{r.company}{r.category ? ' · ' + r.category : ''}</div>
                  {r.message && <p style={{ fontSize: 14, color: 'var(--text-body)', lineHeight: 1.55, margin: '12px 0 0' }}>{r.message}</p>}
                </div>
                {r.budget && (
                  <div style={{ textAlign: 'right', flex: 'none' }}>
                    <div style={{ fontSize: 17, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>{r.budget}</div>
                    <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>budget</div>
                  </div>
                )}
              </div>
              {r.status === 'geselecteerd' && (
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 16, padding: '12px 16px', borderRadius: 'var(--radius-sm)', background: 'var(--accent-tint)', color: 'var(--accent-press)', fontSize: 14, fontWeight: 'var(--fw-semibold)' }}>
                  <i data-lucide="sparkles" style={{ width: 17, height: 17 }}></i> Je bent geselecteerd! De opdrachtgever neemt contact op.
                </div>
              )}
            </div>
          ))}
        </div>
      )}
    </window.AppPage>
  );
}
window.MyResponses = MyResponses;