/* Deep-edit split-studio overlay — opens per artifact from Room 5.
   Left panel: every input that fed this artifact, editable.
   Right panel: the live preview, also editable.
   "Regenerate" pulses when an input changes; user clicks to re-run the
   Copy Agent for THIS artifact only.
*/

const { useState: dUseState, useEffect: dUseEffect, useMemo: dUseMemo, useRef: dUseRef } = React;

function DeepEditOverlay({
  format,
  artifact,
  intake,
  strategy,
  onClose,
  onUpdateIntake,
  onUpdateStrategy,
  onUpdateArtifact,
  onRegenerate,
  onRefine,
  onVariants
}) {
  const B = window.VENTUM_BRAND;
  const [dirty, setDirty] = dUseState(false);   // inputs changed since last gen
  const [genStatus, setGenStatus] = dUseState(null); // null | live | done | error
  const [refineField, setRefineField] = dUseState('headline');
  const [refineInput, setRefineInput] = dUseState('');
  const [variants, setVariants] = dUseState(null);
  const [variantKey, setVariantKey] = dUseState(null);

  const markDirty = () => setDirty(true);

  const updateIntake = (patch) => {
    onUpdateIntake({ ...intake, ...patch });
    markDirty();
  };
  const updateStrategy = (patch) => {
    onUpdateStrategy({ ...strategy, ...patch });
    markDirty();
  };

  const regenerate = async () => {
    setGenStatus('live');
    try {
      await onRegenerate();
      setDirty(false);
      setGenStatus('done');
      setTimeout(() => setGenStatus(null), 1200);
    } catch (e) {
      console.error(e);
      setGenStatus('error');
    }
  };

  const fieldOptions = artifact ? Object.keys(artifact).filter(k => typeof artifact[k] === 'string' || Array.isArray(artifact[k])) : [];

  const doRefine = async () => {
    if (!refineInput.trim()) return;
    try {
      const newVal = await onRefine(refineField, artifact[refineField], refineInput.trim());
      onUpdateArtifact({ ...artifact, [refineField]: newVal });
      setRefineInput('');
    } catch (e) {
      window.__toast && window.__toast('Refine failed: ' + e.message);
    }
  };

  const doVariants = async () => {
    try {
      const vs = await onVariants(artifact);
      const key = artifact.hook !== undefined ? 'hook' :
                  artifact.headline !== undefined ? 'headline' :
                  artifact.subject !== undefined ? 'subject' : null;
      setVariantKey(key);
      setVariants(vs);
    } catch (e) {
      window.__toast && window.__toast('Variants failed: ' + e.message);
    }
  };

  const applyVariant = (text) => {
    if (!variantKey) return;
    onUpdateArtifact({ ...artifact, [variantKey]: text });
  };

  // Esc to close
  dUseEffect(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [onClose]);

  const formatName = B.formats[format]?.name || format;

  return (
    <div className="deep-mask" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="deep-modal">
        {/* HEADER */}
        <div className="deep-header">
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <span className="mono" style={{ fontSize: 10, color: 'var(--ink-40)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>Deep edit</span>
            <span style={{ fontSize: 16, fontWeight: 500, letterSpacing: '-0.01em' }}>{formatName}</span>
            {dirty && (
              <span className="mono pulse-tag" style={{ fontSize: 10, color: 'var(--signal)', letterSpacing: '0.14em' }}>
                <span className="pulse-dot" /> INPUTS CHANGED — REGENERATE
              </span>
            )}
            {genStatus === 'live' && (
              <span style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--ink-60)' }}>
                <span className="spinner" /> Regenerating…
              </span>
            )}
            {genStatus === 'done' && (
              <span className="mono" style={{ fontSize: 10, color: 'var(--efficacy)', letterSpacing: '0.14em' }}>✓ REGENERATED</span>
            )}
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <button className="btn-primary" onClick={regenerate} disabled={genStatus === 'live'} style={{ padding: '9px 14px', fontSize: 12 }}>
              ↻ Regenerate this artifact
            </button>
            <button className="drawer-close" onClick={onClose} aria-label="Close">×</button>
          </div>
        </div>

        {/* SPLIT BODY */}
        <div className="deep-body">
          {/* LEFT — inputs */}
          <div className="deep-inputs">
            <SectionBlock title="Audience & framing">
              <Field label="Vertical">
                <select className="select" value={intake.vertical || ''} onChange={(e) => updateIntake({ vertical: e.target.value })}>
                  {Object.entries(B.verticals).map(([k,v]) => <option key={k} value={k}>{v.name}</option>)}
                </select>
              </Field>
              <Field label="Audience type">
                <select className="select" value={intake.audience_type || ''} onChange={(e) => updateIntake({ audience_type: e.target.value })}>
                  {Object.entries(B.audience_types).map(([k,v]) => <option key={k} value={k}>{v.name}</option>)}
                </select>
              </Field>
              <Field label="Persona">
                <input className="input" value={intake.persona || ''} onChange={(e) => updateIntake({ persona: e.target.value })} />
              </Field>
              <Field label="Products">
                <div className="chip-row">
                  {Object.entries(B.products).map(([k, v]) => {
                    const selected = (intake.products || []).includes(k)
                      || (!intake.products && intake.product === k);
                    return (
                      <button
                        key={k}
                        type="button"
                        className={"chip" + (selected ? " selected" : "")}
                        onClick={() => {
                          const base = Array.isArray(intake.products)
                            ? intake.products
                            : (intake.product ? [intake.product] : []);
                          const next = base.includes(k) ? base.filter(x => x !== k) : [...base, k];
                          updateIntake({ products: next, product: next[0] || '' });
                        }}
                        title={v.name}
                      >
                        {v.name}
                      </button>
                    );
                  })}
                </div>
              </Field>
              <Field label="Account name">
                <input className="input" value={intake.account_name || ''} onChange={(e) => updateIntake({ account_name: e.target.value })} />
              </Field>
              <Field label="Account domain">
                <input className="input" value={intake.account_domain || ''} onChange={(e) => updateIntake({ account_domain: e.target.value.trim() })} placeholder="example.com" />
              </Field>
            </SectionBlock>

            <SectionBlock title="Intel">
              <Field label="Current practice">
                <textarea className="textarea" rows={3} value={intake.current_practice || ''} onChange={(e) => updateIntake({ current_practice: e.target.value })} />
              </Field>
              <Field label="Facility layout">
                <textarea className="textarea" rows={2} value={intake.facility_layout || ''} onChange={(e) => updateIntake({ facility_layout: e.target.value })} />
              </Field>
              <Field label="Usage volume">
                <textarea className="textarea" rows={2} value={intake.usage_volume || ''} onChange={(e) => updateIntake({ usage_volume: e.target.value })} />
              </Field>
              <Field label="Protocol gaps">
                <textarea className="textarea" rows={2} value={intake.protocol_gaps || ''} onChange={(e) => updateIntake({ protocol_gaps: e.target.value })} />
              </Field>
              <Field label="Competitors">
                <textarea className="textarea" rows={2} value={(intake.competitors || []).join(', ')} onChange={(e) => updateIntake({ competitors: e.target.value.split(',').map(s => s.trim()).filter(Boolean) })} />
              </Field>
              <Field label="Notes">
                <textarea className="textarea" rows={2} value={intake.notes || ''} onChange={(e) => updateIntake({ notes: e.target.value })} />
              </Field>
            </SectionBlock>

            <SectionBlock title="Strategy">
              <Field label="Angle">
                <textarea className="textarea" rows={2} value={strategy?.angle || ''} onChange={(e) => updateStrategy({ angle: e.target.value })} />
              </Field>
              <Field label="Lead pillar">
                <select className="select" value={strategy?.pillar || ''} onChange={(e) => updateStrategy({ pillar: e.target.value })}>
                  {Object.entries(B.pillars).map(([k,v]) => <option key={k} value={k}>{v.name}</option>)}
                </select>
              </Field>
              <Field label="Proof points">
                <div className="chip-row">
                  {Object.keys(B.proof_points).map(k => {
                    const on = (strategy?.proof_points || []).includes(k);
                    return (
                      <button
                        key={k}
                        className={"chip" + (on ? " selected" : "")}
                        onClick={() => {
                          const cur = strategy?.proof_points || [];
                          updateStrategy({ proof_points: on ? cur.filter(x => x !== k) : [...cur, k] });
                        }}
                      >{k}</button>
                    );
                  })}
                </div>
              </Field>
              <Field label="Tension">
                <textarea className="textarea" rows={2} value={strategy?.tension || ''} onChange={(e) => updateStrategy({ tension: e.target.value })} />
              </Field>
              <Field label="Tone notes">
                <input className="input" value={strategy?.tone_notes || ''} onChange={(e) => updateStrategy({ tone_notes: e.target.value })} />
              </Field>
              <Field label="Recommended CTA">
                <select className="select" value={strategy?.recommended_cta || ''} onChange={(e) => updateStrategy({ recommended_cta: e.target.value })}>
                  {Object.entries(B.cta_pool).map(([k,v]) => <option key={k} value={k}>{v}</option>)}
                </select>
              </Field>
            </SectionBlock>

            <SectionBlock title="Variants & refine">
              <button className="btn-ghost" style={{ width: '100%', fontSize: 12 }} onClick={doVariants}>
                Generate 2 alternate {variantKey || 'hook/headline'}s
              </button>
              {variants && (
                <div className="variant-stack" style={{ marginTop: 8 }}>
                  <div className="variant-row" onClick={() => applyVariant(artifact[variantKey])}>
                    <div className="mono" style={{ fontSize: 9, color: 'var(--ink-40)', letterSpacing: '0.14em', marginBottom: 4 }}>ORIGINAL</div>
                    {artifact[variantKey]}
                  </div>
                  {variants.map((v, i) => (
                    <div key={i} className="variant-row" onClick={() => applyVariant(v)}>
                      <div className="mono" style={{ fontSize: 9, color: 'var(--ink-40)', letterSpacing: '0.14em', marginBottom: 4 }}>V{i+1}</div>
                      {v}
                    </div>
                  ))}
                </div>
              )}

              <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--ink-10)' }}>
                <div className="mono" style={{ fontSize: 9, color: 'var(--ink-40)', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 8 }}>Field refine</div>
                <select className="select" style={{ marginBottom: 8 }} value={refineField} onChange={(e) => setRefineField(e.target.value)}>
                  {fieldOptions.map(f => <option key={f} value={f}>{f}</option>)}
                </select>
                <textarea
                  className="textarea"
                  rows={2}
                  placeholder='e.g. "make it shorter and lead with the stat"'
                  value={refineInput}
                  onChange={(e) => setRefineInput(e.target.value)}
                />
                <button className="btn-primary" style={{ width: '100%', marginTop: 6, fontSize: 12 }} onClick={doRefine}>
                  Refine {refineField}
                </button>
              </div>
            </SectionBlock>
          </div>

          {/* RIGHT — preview */}
          <div className="deep-preview">
            <div className="deep-preview-inner">
              {genStatus === 'live' ? (
                <div style={{ padding: 60, textAlign: 'center', color: 'var(--ink-60)' }}>
                  <span className="spinner" /> <span style={{ marginLeft: 10 }}>Regenerating…</span>
                </div>
              ) : (
                <window.ArtifactRender format={format} artifact={artifact} onPatch={onUpdateArtifact} intake={intake} editableLogo />
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function SectionBlock({ title, children }) {
  return (
    <div className="deep-section">
      <h4>{title}</h4>
      {children}
    </div>
  );
}

function Field({ label, children }) {
  return (
    <div className="deep-field">
      <label>{label}</label>
      {children}
    </div>
  );
}

window.DeepEditOverlay = DeepEditOverlay;