// GetContent — dashboard: startpunt na inloggen. Rol-afhankelijk voor
// opdrachtgever (eigen opdrachten) en creator (eigen reacties + open opdrachten).
function Dashboard({ onNav }) {
  const NS = window.GetContentDesignSystem_aa0f52;
  const { Button } = NS;
  const s = window.useStore();
  const auth = s.auth;
  if (!auth) return null; // guard: App stuurt niet-ingelogden naar login
  const role = auth.role;
  const first = auth.name.split(' ')[0];

  const cardStyle = { background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)' };

  const Tiles = ({ tiles }) => (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: 16, marginBottom: 'clamp(1.75rem, 4vw, 2.5rem)' }}>
      {tiles.map((t, i) => (
        <div key={i} style={Object.assign({}, cardStyle, { padding: '20px 22px' })}>
          <div style={{ fontSize: 30, fontWeight: 'var(--fw-semibold)', letterSpacing: '-0.02em', color: 'var(--text-strong)', lineHeight: 1 }}>{t.value}</div>
          <div style={{ marginTop: 8, fontSize: 13.5, color: 'var(--text-muted)' }}>{t.label}</div>
        </div>
      ))}
    </div>
  );

  const SectionTitle = ({ children, action }) => (
    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 16, margin: '8px 0 16px' }}>
      <h2 style={{ fontSize: 18, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>{children}</h2>
      {action}
    </div>
  );

  // ---- OPDRACHTGEVER ----
  if (role === 'opdrachtgever') {
    const jobs = s.myJobs;
    const reactieCount = jobs.reduce((n, j) => n + (j.reacties ? j.reacties.length : 0), 0);
    const matches = jobs.filter((j) => j.status === 'gekozen' || j.status === 'afgerond').length;

    return (
      <window.AppPage
        eyebrow="Opdrachtgever"
        title={'Welkom terug, ' + first}
        subtitle="Beheer je opdrachten, bekijk reacties van creators en maak je match."
        action={<Button variant="primary" size="lg" className="gc-cta-glow" onClick={() => onNav('post')} iconRight={<i data-lucide="plus"></i>}>Plaats opdracht</Button>}
      >
        <Tiles tiles={[
          { value: jobs.length, label: jobs.length === 1 ? 'Opdracht' : 'Opdrachten' },
          { value: reactieCount, label: 'Reacties ontvangen' },
          { value: matches, label: 'Matches' },
        ]} />

        <SectionTitle action={jobs.length ? <a onClick={() => onNav('my-jobs')} style={{ cursor: 'pointer', fontSize: 14, fontWeight: 'var(--fw-semibold)', color: 'var(--accent)' }}>Alle opdrachten</a> : null}>Je opdrachten</SectionTitle>

        {jobs.length === 0 ? (
          <window.EmptyState icon="clipboard-list" title="Nog geen opdrachten" text="Plaats je eerste opdracht en ontvang binnen no-time reacties van passende creators." cta="Plaats je eerste opdracht" onCta={() => onNav('post')} />
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {jobs.slice(0, 4).map((j) => (
              <div key={j.id} onClick={() => { window.GC_STORE.openJob(j.id, 'mine'); onNav('job'); }} style={Object.assign({}, cardStyle, { padding: '18px 20px', display: 'flex', alignItems: 'center', gap: 16, cursor: 'pointer' })}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
                    <window.StatusBadge kind="job" status={j.status} />
                    <span style={{ fontSize: 12.5, color: 'var(--text-muted)' }}>{j.category} · {j.budget}</span>
                  </div>
                  <div style={{ fontSize: 16, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>{j.title}</div>
                </div>
                <div style={{ textAlign: 'right', flex: 'none' }}>
                  <div style={{ fontSize: 15, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>{j.reacties.length}</div>
                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>reacties</div>
                </div>
                <i data-lucide="chevron-right" style={{ width: 18, height: 18, color: 'var(--text-faint)' }}></i>
              </div>
            ))}
          </div>
        )}
      </window.AppPage>
    );
  }

  // ---- CREATOR ----
  const responses = s.myResponses;
  const selected = responses.filter((r) => r.status === 'geselecteerd').length;
  const openJobs = (window.GC_DATA.jobs || []).slice(0, 3);

  return (
    <window.AppPage
      eyebrow="Creator"
      title={'Welkom terug, ' + first}
      subtitle="Bekijk open opdrachten, reageer en volg de status van je reacties."
      action={<Button variant="primary" size="lg" className="gc-cta-glow" onClick={() => onNav('browse')} iconRight={<i data-lucide="arrow-right"></i>}>Bekijk opdrachten</Button>}
    >
      <Tiles tiles={[
        { value: responses.length, label: 'Reacties' },
        { value: selected, label: 'Geselecteerd' },
        { value: openJobs.length + '+', label: 'Open opdrachten' },
      ]} />

      <SectionTitle action={responses.length ? <a onClick={() => onNav('my-responses')} style={{ cursor: 'pointer', fontSize: 14, fontWeight: 'var(--fw-semibold)', color: 'var(--accent)' }}>Alle reacties</a> : null}>Je reacties</SectionTitle>

      {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." cta="Bekijk opdrachten" onCta={() => onNav('browse')} />
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {responses.slice(0, 3).map((r) => (
            <div key={r.id} onClick={() => onNav('my-responses')} style={Object.assign({}, cardStyle, { padding: '18px 20px', display: 'flex', alignItems: 'center', gap: 16, cursor: 'pointer' })}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ marginBottom: 4 }}><window.StatusBadge kind="reactie" status={r.status} /></div>
                <div style={{ fontSize: 16, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>{r.jobTitle}</div>
                <div style={{ fontSize: 12.5, color: 'var(--text-muted)', marginTop: 2 }}>{r.company}{r.budget ? ' · budget ' + r.budget : ''}</div>
              </div>
              <i data-lucide="chevron-right" style={{ width: 18, height: 18, color: 'var(--text-faint)' }}></i>
            </div>
          ))}
        </div>
      )}

      <div style={{ marginTop: 'clamp(2rem, 4vw, 3rem)' }}>
        <SectionTitle action={<a onClick={() => onNav('browse')} style={{ cursor: 'pointer', fontSize: 14, fontWeight: 'var(--fw-semibold)', color: 'var(--accent)' }}>Alle opdrachten</a>}>Open opdrachten voor jou</SectionTitle>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {openJobs.map((j, i) => (
            <div key={i} onClick={() => { window.GC_STORE.openJob('market-' + i, 'market'); onNav('job'); }} style={Object.assign({}, cardStyle, { padding: '18px 20px', display: 'flex', alignItems: 'center', gap: 16, cursor: 'pointer' })}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12.5, color: 'var(--text-muted)', marginBottom: 4 }}>{j.category} · {j.location}</div>
                <div style={{ fontSize: 16, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>{j.title}</div>
              </div>
              <div style={{ fontSize: 15, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', flex: 'none' }}>{j.budget}</div>
              <i data-lucide="chevron-right" style={{ width: 18, height: 18, color: 'var(--text-faint)' }}></i>
            </div>
          ))}
        </div>
      </div>
    </window.AppPage>
  );
}
window.Dashboard = Dashboard;