// GetContent — Browse screen (creators / assignments) and Post-assignment screen.

function BrowseScreen({ onNav }) {
  const NS = window.GetContentDesignSystem_aa0f52;
  const { JobCard, Tag } = NS;
  const s = window.useStore();
  const isCreator = s.auth && s.auth.role === 'creator';
  const [cat, setCat] = React.useState('Alles');
  const cats = ['Alles', ...window.GC_DATA.categories];

  return (
    <main style={{ background: 'var(--surface-page)', minHeight: '100vh' }}>
      <PageHero
        compact
        eyebrow="Opdrachten"
        title="Open opdrachten"
        lead="Kies opdrachten die matchen met jouw skills."
        onNav={onNav}
      />

      {/* filters + grid */}
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'var(--section-pad-y-sm) var(--gutter) 80px' }}>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 28 }}>
          {cats.map((c) => (
            <Tag key={c} tone={cat === c ? 'accent' : 'neutral'} onClick={() => setCat(c)} style={{ cursor: 'pointer' }}>{c}</Tag>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 22 }} className="gc-cards-2 gc-stagger">
          {window.GC_DATA.jobs.map((j, i) => {
            if (!(cat === 'Alles' || j.category === cat)) return null;
            return <JobCard key={i} {...j} applicantsLabel="reacties"
              ctaLabel={isCreator ? 'Bekijk & reageer' : 'Meld je aan om te reageren'}
              onApply={() => { if (isCreator) { window.GC_STORE.openJob('market-' + i, 'market'); onNav('job'); } else { onNav('signup'); } }} />;
          })}
        </div>
      </div>
    </main>
  );
}

function PostScreen({ onNav }) {
  const NS = window.GetContentDesignSystem_aa0f52;
  const { Input, Select, Button, Switch, BudgetLabel } = NS;
  const [budget, setBudget] = React.useState('');
  const [anyLocation, setAnyLocation] = React.useState(false);
  const [title, setTitle] = React.useState('');
  const [category, setCategory] = React.useState('UGC video');
  const [desc, setDesc] = React.useState('');
  const [location, setLocation] = React.useState('');

  const submitJob = () => {
    // Niet ingelogd → eerst naar het inlog-/aanmeldscherm (opdracht plaatsen
    // vereist een account). De 'post'-view is ook afgeschermd in App.jsx.
    if (!window.GC_STORE.isAuthed()) { onNav('login'); return; }
    window.GC_STORE.addJob({
      title: title.trim() || 'Nieuwe opdracht',
      category: category,
      budget: '€' + (budget || '0'),
      location: anyLocation ? 'Heel Nederland / op afstand' : (location.trim() || 'Amsterdam'),
      description: desc.trim(),
    });
    onNav('my-jobs');
  };

  const categories = ['Video', 'Fotografie', 'Paid social', 'UGC video', 'Reels & shorts', 'Design', 'Anders'];

  const labelStyle = { display: 'block', fontSize: 13, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', marginBottom: 8 };
  const hintStyle = { display: 'block', fontSize: 12.5, color: 'var(--text-muted)', marginTop: 7 };

  return (
    <main style={{ background: 'var(--surface-sunken)', minHeight: '100vh' }}>
      <PageHero
        compact
        eyebrow="Nieuwe opdracht"
        title="Plaats je opdracht"
        lead="Plaatsen is gratis. Je betaalt pas als de klus geklaard is."
        onNav={onNav}
      />
      <div style={{ maxWidth: 720, margin: '0 auto', padding: 'var(--section-pad-y-sm) var(--gutter) 96px' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* 1. De opdracht */}
          <section style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 'clamp(20px, 3vw, 28px)', boxShadow: 'var(--shadow-sm)', display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 30, height: 30, flex: 'none', borderRadius: 'var(--radius-pill)', background: 'var(--gc-ink-800)', color: 'var(--text-on-dark)', fontSize: 13, fontWeight: 'var(--fw-extra)' }}>1</span>
              <h2 style={{ fontSize: 18, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>De opdracht</h2>
            </div>
            <Input label="Titel" placeholder="bijv. 3 UGC-video’s voor een skincare-launch" size="lg" value={title} onChange={(e) => setTitle(e.target.value)} />
            <div className="gc-form-2" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 18 }}>
              <Select label="Categorie" value={category} onChange={(e) => setCategory(e.target.value)}>
                {categories.map((c) => <option key={c}>{c}</option>)}
              </Select>
              <Input label="Aantal (optioneel)" type="number" min="1" placeholder="bijv. 3" hint="Aantal video’s, foto’s of items." />
            </div>
            <div>
              <label style={labelStyle} htmlFor="gc-omschrijving">Omschrijving</label>
              <textarea id="gc-omschrijving" rows="4" placeholder="Vertel kort wat je nodig hebt: stijl, sfeer, doel en waar de content voor gebruikt wordt." value={desc} onChange={(e) => setDesc(e.target.value)}
                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'; }} />
              <span style={hintStyle}>Hoe duidelijker je omschrijving, hoe beter de reacties.</span>
            </div>
          </section>

          {/* 2. Waar & wanneer */}
          <section style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 'clamp(20px, 3vw, 28px)', boxShadow: 'var(--shadow-sm)', display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 30, height: 30, flex: 'none', borderRadius: 'var(--radius-pill)', background: 'var(--gc-ink-800)', color: 'var(--text-on-dark)', fontSize: 13, fontWeight: 'var(--fw-extra)' }}>2</span>
              <h2 style={{ fontSize: 18, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>Waar &amp; wanneer</h2>
            </div>
            <div className="gc-form-2" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 18 }}>
              <Input label="Locatie" placeholder={anyLocation ? 'Heel Nederland / op afstand' : 'bijv. Amsterdam'} icon={<i data-lucide="map-pin"></i>} disabled={anyLocation} value={anyLocation ? '' : location} onChange={(e) => setLocation(e.target.value)} />
              <Input label="Deadline" type="date" hint="Wanneer wil je de content hebben?" />
            </div>
            {/* locatie-keuze, verplaatst vanuit de losse switch */}
            <label style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer', padding: '12px 14px', borderRadius: 'var(--radius-sm)', background: anyLocation ? 'var(--accent-tint)' : 'var(--surface-sunken)', border: `1px solid ${anyLocation ? 'var(--gc-coral-300)' : 'var(--border-subtle)'}`, transition: 'background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out)' }}>
              <Switch checked={anyLocation} onChange={setAnyLocation} />
              <span>
                <span style={{ display: 'block', fontSize: 15, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>Locatie is niet van belang</span>
                <span style={{ display: 'block', fontSize: 13, color: 'var(--text-muted)' }}>De opdracht kan op afstand of overal in Nederland.</span>
              </span>
            </label>
          </section>

          {/* 3. Budget */}
          <section style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 'clamp(20px, 3vw, 28px)', boxShadow: 'var(--shadow-sm)', display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 30, height: 30, flex: 'none', borderRadius: 'var(--radius-pill)', background: 'var(--gc-ink-800)', color: 'var(--text-on-dark)', fontSize: 13, fontWeight: 'var(--fw-extra)' }}>3</span>
              <h2 style={{ fontSize: 18, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>Prijs</h2>
            </div>
            <div>
              <span style={{ display: 'block', fontSize: 13, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', marginBottom: 8 }}>Prijs voor deze opdracht</span>
              <div style={{ display: 'flex', alignItems: 'center', height: 56, padding: '0 18px', gap: 10, background: 'var(--surface-inset)', border: '1.5px solid var(--border-strong)', borderRadius: 'var(--radius-sm)' }}
                onFocus={(e) => { e.currentTarget.style.borderColor = 'var(--accent)'; e.currentTarget.style.boxShadow = '0 0 0 4px var(--gc-coral-100)'; }}
                onBlur={(e) => { e.currentTarget.style.borderColor = 'var(--border-strong)'; e.currentTarget.style.boxShadow = 'none'; }}>
                <span style={{ fontSize: 20, fontWeight: 'var(--fw-extra)', color: 'var(--text-strong)' }}>€</span>
                <input type="number" inputMode="numeric" value={budget} onChange={(e) => setBudget(e.target.value)} placeholder="350"
                  style={{ flex: 1, minWidth: 0, border: 'none', outline: 'none', background: 'transparent', fontFamily: 'var(--font-sans)', fontSize: 18, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }} />
              </div>
              <span style={{ display: 'block', fontSize: 12.5, color: 'var(--text-muted)', marginTop: 7 }}>Jij bepaalt vooraf de prijs. Creators zien dit bedrag en kiezen of ze reageren.</span>
            </div>
          </section>

          {/* acties */}
          <div style={{ display: 'flex', gap: 12, marginTop: 6, flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" onClick={submitJob} iconRight={<i data-lucide="arrow-right"></i>}>Opdracht plaatsen</Button>
            <Button variant="ghost" size="lg" onClick={() => onNav('home')}>Annuleren</Button>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, marginLeft: 'auto', fontSize: 13, color: 'var(--text-muted)' }}>
              <i data-lucide="lock" style={{ width: 15, height: 15 }}></i> Gratis &amp; vrijblijvend
            </span>
          </div>
        </div>
      </div>
    </main>
  );
}

Object.assign(window, { BrowseScreen, PostScreen });