// GetContent — opdrachtdetail. Spil van beide flows.
// Opdrachtgever (eigen opdracht): beheren, reacties bekijken, creator kiezen, afronden.
// Creator (open opdracht): bekijken en reageren.
function JobDetail({ onNav }) {
  const NS = window.GetContentDesignSystem_aa0f52;
  const { Button } = NS;
  const s = window.useStore();
  const auth = s.auth;
  const [msg, setMsg] = React.useState('');
  const [confirmDel, setConfirmDel] = React.useState(false);
  if (!auth) return null;

  const ui = s.ui || {};
  const isMine = ui.jobSource === 'mine';
  let job;
  if (isMine) {
    job = s.myJobs.find((j) => j.id === ui.jobId);
  } else {
    const i = parseInt(String(ui.jobId || 'market-0').split('-')[1], 10) || 0;
    job = Object.assign({ id: ui.jobId || 'market-0' }, (window.GC_DATA.jobs || [])[i] || {});
  }

  if (!job) {
    return (
      <window.AppPage title="Opdracht niet gevonden" back={{ to: isMine ? 'my-jobs' : 'browse', label: 'Terug' }} onNav={onNav}>
        <window.EmptyState icon="search-x" title="Deze opdracht bestaat niet meer" text="Ga terug en kies een andere opdracht." cta="Terug naar overzicht" onCta={() => onNav(isMine ? 'my-jobs' : 'browse')} />
      </window.AppPage>
    );
  }

  const card = { background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)' };
  const Meta = () => (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px 22px', color: 'var(--text-body)', fontSize: 14.5, fontWeight: 'var(--fw-medium)' }}>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><i data-lucide="tag" style={{ width: 15, height: 15, color: 'var(--accent)' }}></i>{job.category}</span>
      {job.location && <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><i data-lucide="map-pin" style={{ width: 15, height: 15, color: 'var(--accent)' }}></i>{job.location}</span>}
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><i data-lucide="wallet" style={{ width: 15, height: 15, color: 'var(--accent)' }}></i>{job.budget}</span>
      {(job.deadline || job.deliverable) && <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><i data-lucide="calendar" style={{ width: 15, height: 15, color: 'var(--accent)' }}></i>{job.deadline || job.deliverable}</span>}
    </div>
  );

  // ===================== OPDRACHTGEVER =====================
  if (isMine) {
    const reacties = job.reacties || [];
    const chosen = reacties.find((r) => r.status === 'geselecteerd');
    const creators = window.GC_DATA.creators || [];

    return (
      <window.AppPage back={{ to: 'my-jobs', label: 'Mijn opdrachten' }} onNav={onNav}
        eyebrow={null}
        title={job.title}
        action={job.status === 'gekozen' ? <Button variant="primary" size="lg" onClick={() => window.GC_STORE.completeJob(job.id)} iconRight={<i data-lucide="check"></i>}>Opdracht afronden</Button> : null}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: -8, marginBottom: 22 }}>
          <window.StatusBadge kind="job" status={job.status} />
          <span style={{ fontSize: 13.5, color: 'var(--text-muted)' }}>{reacties.length} {reacties.length === 1 ? 'reactie' : 'reacties'}</span>
        </div>

        <div style={Object.assign({}, card, { padding: 'clamp(20px, 3vw, 28px)', marginBottom: 28 })}>
          <Meta />
          {job.description && <p style={{ marginTop: 16, fontSize: 15.5, lineHeight: 1.65, color: 'var(--text-body)' }}>{job.description}</p>}
        </div>

        {chosen && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '16px 20px', borderRadius: 'var(--radius-lg)', background: 'var(--accent-tint)', border: '1px solid var(--accent-light)', marginBottom: 28 }}>
            <span style={{ display: 'inline-flex', width: 40, height: 40, flex: 'none', borderRadius: '50%', alignItems: 'center', justifyContent: 'center', background: 'var(--accent)', color: 'var(--on-accent)' }}><i data-lucide="sparkles" style={{ width: 20, height: 20 }}></i></span>
            <div>
              <div style={{ fontSize: 15, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>Match gemaakt met {creators[chosen.creatorId] && creators[chosen.creatorId].name}</div>
              <div style={{ fontSize: 13.5, color: 'var(--text-body)' }}>{job.status === 'afgerond' ? 'Deze opdracht is afgerond.' : 'Neem contact op en start de opdracht.'}</div>
            </div>
          </div>
        )}

        <h2 style={{ fontSize: 18, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', margin: '4px 0 16px' }}>Reacties van creators</h2>
        {reacties.length === 0 ? (
          <window.EmptyState icon="users" title="Nog geen reacties" text="Zodra creators reageren op je opdracht verschijnen ze hier. Meestal binnen een dag." />
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {reacties.map((r) => {
              const c = creators[r.creatorId] || {};
              return (
                <div key={r.id} style={Object.assign({}, card, { padding: 'clamp(18px, 2.5vw, 24px)' })}>
                  <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
                    <img src={c.avatar} alt="" style={{ width: 52, height: 52, flex: 'none', borderRadius: '50%', objectFit: 'cover' }} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                        <span style={{ fontSize: 16, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>{c.name}</span>
                        {c.verified && <i data-lucide="badge-check" style={{ width: 16, height: 16, color: 'var(--accent)' }}></i>}
                        {r.status !== 'verstuurd' && <window.StatusBadge kind="reactie" status={r.status} />}
                      </div>
                      <div style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 2 }}>{c.role} · {c.location} · ★ {c.rating}</div>
                      <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--text-body)', margin: '12px 0 0' }}>{r.message}</p>
                    </div>
                  </div>
                  <div style={{ display: 'flex', gap: 10, marginTop: 16, flexWrap: 'wrap' }}>
                    <Button variant="ghost" onClick={() => { window.GC_STORE.openCreator(r.creatorId); onNav('creator'); }}>Bekijk profiel</Button>
                    {job.status === 'open' && <Button variant="primary" onClick={() => window.GC_STORE.selectCreator(job.id, r.id)} iconRight={<i data-lucide="check"></i>}>Selecteer creator</Button>}
                  </div>
                </div>
              );
            })}
          </div>
        )}

        {/* Opdracht verwijderen — alleen zichtbaar bij een eigen opdracht */}
        <div style={{ marginTop: 'clamp(2rem, 5vw, 3rem)', paddingTop: 22, borderTop: '1px solid var(--border-subtle)' }}>
          <button type="button" className="gc-jobdelete" aria-label="Opdracht verwijderen" title="Opdracht verwijderen"
            onClick={() => setConfirmDel(true)}
            style={{ display: 'inline-flex', alignItems: 'center', gap: 8, height: 44, padding: '0 18px', borderRadius: 'var(--radius-pill)', border: '1px solid var(--border-subtle)', background: 'transparent', color: 'var(--text-muted)', cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 'var(--fw-semibold)' }}>
            <i data-lucide="trash-2" style={{ width: 16, height: 16 }}></i>
            Opdracht verwijderen
          </button>
        </div>

        <window.ConfirmModal
          open={confirmDel}
          danger
          title="Opdracht verwijderen?"
          body={'“' + job.title + '” wordt definitief verwijderd. Dit kan niet ongedaan worden gemaakt.'}
          confirmLabel="Verwijderen"
          cancelLabel="Annuleren"
          onConfirm={() => { setConfirmDel(false); window.GC_STORE.deleteJob(job.id); onNav('my-jobs'); }}
          onClose={() => setConfirmDel(false)}
        />
      </window.AppPage>
    );
  }

  // ===================== CREATOR =====================
  const responded = window.GC_STORE.hasResponded(job.id);
  return (
    <window.AppPage back={{ to: 'browse', label: 'Bekijk opdrachten' }} onNav={onNav} title={job.title} maxWidth="760px">
      {job.company && <div style={{ marginTop: -8, marginBottom: 20, fontSize: 15, color: 'var(--text-muted)' }}>{job.company}</div>}
      <div style={Object.assign({}, card, { padding: 'clamp(20px, 3vw, 28px)', marginBottom: 24 })}>
        <Meta />
        <p style={{ marginTop: 16, fontSize: 15.5, lineHeight: 1.65, color: 'var(--text-body)' }}>
          {job.deliverable ? ('Gevraagd: ' + job.deliverable + '. ') : ''}Het budget is door de opdrachtgever bepaald. Wil je deze opdracht doen? Reageer met een korte motivatie. De opdrachtgever kiest daarna een creator.
        </p>
      </div>

      {responded ? (
        <div style={{ textAlign: 'center', padding: 'clamp(2rem, 5vw, 3.5rem)', borderRadius: 'var(--radius-lg)', background: 'var(--accent-tint)', border: '1px solid var(--accent-light)' }}>
          <span style={{ display: 'inline-flex', width: 52, height: 52, borderRadius: '50%', alignItems: 'center', justifyContent: 'center', background: 'var(--accent)', color: 'var(--on-accent)', marginBottom: 16 }}><i data-lucide="check" style={{ width: 26, height: 26 }}></i></span>
          <h3 style={{ fontSize: 19, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', marginBottom: 8 }}>Je hebt gereageerd</h3>
          <p style={{ fontSize: 15, color: 'var(--text-body)', maxWidth: 380, margin: '0 auto 22px', lineHeight: 1.6 }}>De opdrachtgever bekijkt je reactie. Je ziet de status terug bij Mijn reacties.</p>
          <Button variant="primary" onClick={() => onNav('my-responses')} iconRight={<i data-lucide="arrow-right"></i>}>Naar mijn reacties</Button>
        </div>
      ) : (
        <form onSubmit={(e) => { e.preventDefault(); window.GC_STORE.addResponse(job, msg.trim()); onNav('my-responses'); }} style={Object.assign({}, card, { padding: 'clamp(20px, 3vw, 28px)', display: 'flex', flexDirection: 'column', gap: 18 })}>
          <h3 style={{ fontSize: 18, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>Reageer op deze opdracht</h3>
          <label style={{ display: 'block' }}>
            <span style={{ display: 'block', fontSize: 13, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', marginBottom: 8 }}>Korte motivatie <span style={{ color: 'var(--text-muted)', fontWeight: 'var(--fw-medium)' }}>(optioneel)</span></span>
            <textarea rows="4" value={msg} onChange={(e) => setMsg(e.target.value)} placeholder="Vertel kort waarom jij past en hoe je dit aanpakt." style={{ width: '100%', resize: 'vertical', border: '1.5px solid var(--border-strong)', borderRadius: 'var(--radius-sm)', background: 'var(--surface-inset)', padding: '12px 16px', fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 'var(--fw-medium)', color: 'var(--text-strong)', lineHeight: 1.5, outline: 'none' }}
              onFocus={(e) => { e.target.style.borderColor = 'var(--accent)'; e.target.style.boxShadow = '0 0 0 4px var(--gc-coral-100)'; }}
              onBlur={(e) => { e.target.style.borderColor = 'var(--border-strong)'; e.target.style.boxShadow = 'none'; }} />
          </label>
          <Button type="submit" variant="primary" size="lg" fullWidth iconRight={<i data-lucide="arrow-right"></i>}>Ik wil deze opdracht doen</Button>
        </form>
      )}
    </window.AppPage>
  );
}
window.JobDetail = JobDetail;