// assets/prompts_generate.jsx — B. AI Skill Generator
function PromptGenerate({ agent, active, onSaveDraft }) {
  const [mode, setMode] = React.useState('describe'); // describe | refine
  const [description, setDescription] = React.useState('');
  const [model, setModel] = React.useState('sonnet-4.5');
  const [multiVariant, setMultiVariant] = React.useState(false);
  const [useContext, setUseContext] = React.useState(true);
  const [selectedFb, setSelectedFb] = React.useState(new Set());
  const [status, setStatus] = React.useState('idle'); // idle | running | done
  const [variants, setVariants] = React.useState([]);
  const [chosen, setChosen] = React.useState(0);

  // recent negative feedback for this agent as context candidates
  const recentNeg = React.useMemo(() =>
    PROMPT_FEEDBACK.filter(f => f.agent === agent && f.rating === 'down').slice(0, 8), [agent]);

  React.useEffect(() => {
    // preselect a couple of feedback items
    setSelectedFb(new Set(recentNeg.slice(0, 3).map(f => f.id)));
  }, [agent]);

  const run = () => {
    setStatus('running');
    setVariants([]);
    setTimeout(() => {
      const count = multiVariant ? 3 : 1;
      const base = mode === 'refine' ? active.content : null;
      const vs = Array.from({ length: count }, (_, i) => {
        if (mode === 'refine') {
          // simulate refine: append/adjust based on context
          let c = base;
          if (i === 0) c = base.replace('## Forbidden', '## Anti-patterns observed in feedback\n\n- Do not emit arbitrary Tailwind values — they cause hook FP loops.\n- Keep hero copy under 2 sentences unless the brief says otherwise.\n\n## Forbidden');
          else if (i === 1) c = base.replace(/## Output[\s\S]*$/, '## Self-check before writing\n\n- Re-read the brief tone descriptor; match it.\n- Confirm every `<img>` has `alt` and every button is a `<button>`.\n\n## Output\n\nWrite components to `src/components/` and the page entry. Reuse shared components.');
          else c = base + '\n\n## Token budget\n\nKeep total generated prompt context under 6k tokens; prefer references to shared rules over repetition.';
          return { content: c, label: ['conservative', 'a11y-focused', 'token-lean'][i] };
        }
        return { content: generatePrompt(agent, description, i), label: ['variant A', 'variant B', 'variant C'][i] };
      });
      setVariants(vs);
      setChosen(0);
      setStatus('done');
    }, 1400);
  };

  const toggleFb = (id) => { const n = new Set(selectedFb); n.has(id) ? n.delete(id) : n.add(id); setSelectedFb(n); };
  const modelMeta = GEN_MODELS.find(m => m.id === model);

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '360px 1fr', gap: 12, flex: 1, minHeight: 0 }}>
      {/* Controls */}
      <div className="card" style={{ display: 'flex', flexDirection: 'column', minHeight: 0 }}>
        <div className="card-head"><h3>AI prompt generator</h3><Badge kind="accent">always → draft</Badge></div>
        <div style={{ flex: 1, overflowY: 'auto', padding: 14, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div>
            <label className="fs-11 dim2" style={{ display: 'block', marginBottom: 6, fontWeight: 500, textTransform: 'uppercase', letterSpacing: '.04em' }}>Mode</label>
            <div className="segmented" style={{ width: '100%' }}>
              <button className={mode === 'describe' ? 'active' : ''} style={{ flex: 1 }} onClick={() => setMode('describe')}>Generate from description</button>
              <button className={mode === 'refine' ? 'active' : ''} style={{ flex: 1 }} onClick={() => setMode('refine')}>Refine v{active.v}</button>
            </div>
          </div>

          <div>
            <label className="fs-11 dim2" style={{ display: 'block', marginBottom: 6, fontWeight: 500, textTransform: 'uppercase', letterSpacing: '.04em' }}>
              {mode === 'describe' ? 'Describe the agent behavior' : 'What should change?'}
            </label>
            <textarea className="input" rows={5} value={description} onChange={e => setDescription(e.target.value)}
              placeholder={mode === 'describe'
                ? 'e.g. A landing page agent for cosmetics merchants — playful tone, strong hero with one CTA, social proof from reviews, mobile-first.'
                : 'e.g. Stop emitting arbitrary Tailwind values; add a self-check step before writing; trim hero verbosity.'}
              style={{ resize: 'vertical', fontFamily: 'var(--font-sans)' }} />
          </div>

          <div>
            <label className="fs-11 dim2" style={{ display: 'block', marginBottom: 6, fontWeight: 500, textTransform: 'uppercase', letterSpacing: '.04em' }}>Model</label>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {GEN_MODELS.map(m => (
                <div key={m.id} onClick={() => setModel(m.id)}
                  style={{ padding: '8px 10px', border: '1px solid', borderColor: model === m.id ? 'var(--accent)' : 'var(--border-default)', borderRadius: 'var(--radius)', cursor: 'pointer', background: model === m.id ? 'var(--accent-muted)' : 'transparent' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span className={`checkbox ${model === m.id ? 'checked' : ''}`} style={{ borderRadius: '50%' }}>{model === m.id && <Icon name="check" size={9} />}</span>
                    <Mono>{m.name}</Mono>
                  </div>
                  <div className="dim fs-11" style={{ marginLeft: 22 }}>{m.note}</div>
                </div>
              ))}
            </div>
          </div>

          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
              <span className={`toggle ${useContext ? 'on' : ''}`} onClick={() => setUseContext(c => !c)} />
              <label className="fs-12" style={{ fontWeight: 500 }}>Feed recent feedback as context</label>
            </div>
            {useContext && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4, maxHeight: 180, overflowY: 'auto', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius)', padding: 6 }}>
                {recentNeg.map(f => (
                  <div key={f.id} className="filter-chip" onClick={() => toggleFb(f.id)} style={{ alignItems: 'flex-start' }}>
                    <span className={`checkbox ${selectedFb.has(f.id) ? 'checked' : ''}`} style={{ marginTop: 2 }}>{selectedFb.has(f.id) && <Icon name="check" size={10} />}</span>
                    <span style={{ fontSize: 11.5, lineHeight: 1.4 }}>
                      <span className="text-danger">▼</span> {f.reason}
                      {f.tags.map(tg => <Badge key={tg} kind="neutral" style={{ marginLeft: 4 }}>{tg}</Badge>)}
                    </span>
                  </div>
                ))}
              </div>
            )}
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span className={`toggle ${multiVariant ? 'on' : ''}`} onClick={() => setMultiVariant(c => !c)} />
            <label className="fs-12" style={{ fontWeight: 500 }}>Generate 3 variants to compare</label>
          </div>
        </div>
        <div style={{ padding: 12, borderTop: '1px solid var(--border-subtle)' }}>
          <button className="btn primary" style={{ width: '100%', justifyContent: 'center' }} onClick={run} disabled={status === 'running'}>
            {status === 'running' ? <><Icon name="spinner" size={13} className="spin" /> Generating with {modelMeta.name}…</> : <><Icon name="zap" size={13} /> {status === 'done' ? 'Regenerate' : 'Generate'}</>}
          </button>
        </div>
      </div>

      {/* Output */}
      <div className="card" style={{ display: 'flex', flexDirection: 'column', minHeight: 0 }}>
        {status === 'idle' && (
          <div className="empty-state" style={{ margin: 'auto', maxWidth: 420 }}>
            <Icon name="zap" size={28} className="dim" /><br /><br />
            <div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>The generator writes a prompt and saves it as a <Badge kind="warning">draft</Badge> — never auto-active. A human reviews and activates from the Versions tab.</div>
          </div>
        )}
        {status === 'running' && (
          <div className="empty-state" style={{ margin: 'auto' }}>
            <Icon name="spinner" size={24} className="spin text-accent" /><br /><br />
            {modelMeta.name} is drafting{multiVariant ? ' 3 variants' : ''}…
            {useContext && <div className="dim fs-11" style={{ marginTop: 6 }}>with {selectedFb.size} feedback items as context</div>}
          </div>
        )}
        {status === 'done' && (
          <>
            <div className="card-head">
              <h3>{mode === 'refine' ? `Refined from v${active.v}` : 'Generated draft'}</h3>
              <span className="sub">{modelMeta.name}{useContext ? ` · ${selectedFb.size} feedback ctx` : ''}</span>
              {variants.length > 1 && (
                <div className="segmented" style={{ marginLeft: 'auto' }}>
                  {variants.map((v, i) => <button key={i} className={chosen === i ? 'active' : ''} onClick={() => setChosen(i)}>{v.label}</button>)}
                </div>
              )}
              <div className="actions" style={{ display: 'flex', gap: 6 }}>
                <CopyButton text={variants[chosen]?.content || ''} />
                <button className="btn primary sm" onClick={() => onSaveDraft(variants[chosen].content, `AI ${mode === 'refine' ? 'refine of v' + active.v : 'generated'} (${modelMeta.name}${variants.length > 1 ? ', ' + variants[chosen].label : ''})`)}>
                  <Icon name="plus" size={11} /> Save as draft
                </button>
              </div>
            </div>
            <div style={{ flex: 1, overflow: 'auto' }}>
              {mode === 'refine'
                ? <DiffView a={active.content} b={variants[chosen].content} />
                : <div style={{ padding: '14px 24px' }}><MarkdownPreview text={variants[chosen].content} /></div>}
            </div>
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { PromptGenerate });