// ============================================================
// FUNNEL ACTION MODALS
// Optimize · Audit · Duplicate · Split Test · Pause/Resume
// ============================================================

// Generic modal shell ----------------------------------------
function Modal({ open, onClose, title, subtitle, wide, children, footer }) {
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div className="dmg-modal-scrim" onClick={onClose}>
      <div className={`dmg-modal ${wide ? 'wide' : ''}`} onClick={e => e.stopPropagation()}>
        <span className="br-tl"></span><span className="br-tr"></span>
        <span className="br-bl"></span><span className="br-br"></span>
        <div className="dmg-modal-hd">
          <div>
            <div className="dmg-modal-title">{title}</div>
            {subtitle && <div className="dmg-modal-sub">{subtitle}</div>}
          </div>
          <button className="dmg-modal-close" onClick={onClose} aria-label="Close">✕</button>
        </div>
        <div className="dmg-modal-body">{children}</div>
        {footer && <div className="dmg-modal-foot">{footer}</div>}
      </div>
    </div>
  );
}

// Drawer shell -----------------------------------------------
function Drawer({ open, onClose, title, subtitle, children, footer }) {
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div className="dmg-drawer-scrim" onClick={onClose}>
      <div className={`dmg-drawer ${open ? 'open' : ''}`} onClick={e => e.stopPropagation()}>
        <span className="br-bl"></span><span className="br-br"></span>
        <div className="dmg-modal-hd">
          <div>
            <div className="dmg-modal-title">{title}</div>
            {subtitle && <div className="dmg-modal-sub">{subtitle}</div>}
          </div>
          <button className="dmg-modal-close" onClick={onClose} aria-label="Close">✕</button>
        </div>
        <div className="dmg-modal-body">{children}</div>
        {footer && <div className="dmg-modal-foot">{footer}</div>}
      </div>
    </div>
  );
}

// =============== OPTIMIZE FUNNEL ===============
function FunnelOptimizeModal({ funnel, onClose, onPushToast }) {
  const [phase, setPhase] = React.useState('scanning'); // scanning · results
  React.useEffect(() => {
    const t = setTimeout(() => setPhase('results'), 2200);
    return () => clearTimeout(t);
  }, []);

  const recs = [
    { p: 'high', text: 'Shorten form on mobile to 4 fields',           impact: '+42 booked / mo', detail: 'Mobile form abandonment 62% — single-page variant projected to recover ~£12k.' },
    { p: 'high', text: 'Trigger AI call within 90 seconds of submit',  impact: '+£14k / mo',      detail: 'Currently fires at 8 minutes. Speed-to-lead under 90s lifts close rate 18pp.' },
    { p: 'med',  text: 'Add social-proof video at qualification step', impact: '+8.4% pass',      detail: 'Tested cohort showed +6pp lift on trust-anchored content at decision points.' }
  ];

  return (
    <Modal
      open
      onClose={onClose}
      title={`AI Funnel Optimisation`}
      subtitle={`${funnel.name} · scanning stages, traffic, drop-off, leakage`}
      wide
      footer={
        <>
          <button className="btn ghost" onClick={onClose}>Close</button>
          {phase === 'results' && (
            <button className="btn primary" onClick={() => { onPushToast('All recommendations queued for review'); onClose(); }}>
              <Icon.Sparkles className="icon"/>Apply all recommendations
            </button>
          )}
        </>
      }
    >
      {phase === 'scanning' && (
        <div className="dmg-scan">
          <div className="dmg-scan-orb">
            <svg viewBox="0 0 80 80" width="64" height="64">
              <defs>
                <radialGradient id="dmg-scan-grad" cx="40%" cy="40%">
                  <stop offset="0%" stopColor="#fff"/>
                  <stop offset="50%" stopColor="#c8a8ff"/>
                  <stop offset="100%" stopColor="#1e1455"/>
                </radialGradient>
              </defs>
              <circle cx="40" cy="40" r="28" fill="url(#dmg-scan-grad)"/>
              <circle cx="40" cy="40" r="32" fill="none" stroke="#4be8ff" strokeWidth="1.2" strokeDasharray="6 4">
                <animateTransform attributeName="transform" type="rotate" from="0 40 40" to="360 40 40" dur="3.6s" repeatCount="indefinite"/>
              </circle>
              <circle cx="40" cy="40" r="38" fill="none" stroke="#e8c98a" strokeWidth="0.6" opacity="0.5" strokeDasharray="2 6">
                <animateTransform attributeName="transform" type="rotate" from="360 40 40" to="0 40 40" dur="6s" repeatCount="indefinite"/>
              </circle>
            </svg>
          </div>
          <div className="dmg-scan-title">Demiurge Intelligence is auditing this funnel…</div>
          <div className="dmg-scan-steps">
            {['Scanning traffic sources', 'Reviewing stage conversion', 'Inspecting drop-off patterns', 'Identifying revenue leakage', 'Composing recommendations'].map((s, i) => (
              <div key={i} className="dmg-scan-step">
                <span className="dmg-scan-dot" style={{animationDelay: `${i * 0.3}s`}}/>
                <span>{s}</span>
              </div>
            ))}
          </div>
        </div>
      )}
      {phase === 'results' && (
        <div className="dmg-recs">
          <div className="dmg-recs-hd">
            <span className="mono" style={{fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--brass-bright, #e8c98a)'}}>
              / 3 recommendations · est. recovery £64k / mo
            </span>
          </div>
          {recs.map((r, i) => (
            <div key={i} className="dmg-rec">
              <span className={`dmg-rec-p p-${r.p}`}>{r.p.toUpperCase()}</span>
              <div style={{flex: 1, minWidth: 0}}>
                <div style={{fontSize: 14, color: 'var(--text)'}}>{r.text}</div>
                <div style={{fontSize: 12.5, color: 'var(--text-dim)', marginTop: 4, lineHeight: 1.5}}>{r.detail}</div>
              </div>
              <span className="mono" style={{fontSize: 11, color: 'var(--good)'}}>{r.impact}</span>
              <div style={{display: 'flex', gap: 4, flexShrink: 0}}>
                <button className="btn ghost sm" onClick={() => onPushToast(`Simulating impact · ${r.text.slice(0, 28)}…`)}>Simulate</button>
                <button className="btn ghost sm" onClick={() => onPushToast(`Assigned to operator · ${r.text.slice(0, 28)}…`)}>Assign</button>
                <button className="btn primary sm" onClick={() => onPushToast(`Applied · ${r.text.slice(0, 28)}…`)}>Apply</button>
              </div>
            </div>
          ))}
        </div>
      )}
    </Modal>
  );
}

// =============== RUN AI AUDIT ===============
function FunnelAuditDrawer({ funnel, onClose, onPushToast }) {
  const STEPS = [
    'Checking traffic sources',
    'Reviewing landing page conversion',
    'Inspecting form abandonment',
    'Checking automation handoff',
    'Reviewing booking conversion'
  ];
  const [progress, setProgress] = React.useState(0);
  React.useEffect(() => {
    if (progress >= STEPS.length) return;
    const t = setTimeout(() => setProgress(p => p + 1), 700);
    return () => clearTimeout(t);
  }, [progress]);

  const complete = progress >= STEPS.length;
  const issues = [
    { sev: 'high', area: 'Form abandonment',   note: 'Mobile drop 62% · field count too high' },
    { sev: 'med',  area: 'Automation handoff', note: 'AI call delay 8 min · should be 90s' },
    { sev: 'low',  area: 'Booking confirmation', note: 'No SMS confirmation on bookings' }
  ];

  return (
    <Drawer
      open
      onClose={onClose}
      title="AI Funnel Audit"
      subtitle={`${funnel.name} · 14-check sweep`}
      footer={complete && (
        <>
          <button className="btn ghost" onClick={onClose}>Close</button>
          <button className="btn primary" onClick={() => { onPushToast('Audit report exported · PDF + JSON'); onClose(); }}>Export report</button>
        </>
      )}
    >
      <div className="dmg-audit-steps">
        {STEPS.map((s, i) => {
          const state = i < progress ? 'done' : i === progress ? 'live' : 'queued';
          return (
            <div key={i} className={`dmg-audit-step ${state}`}>
              <span className="dmg-audit-icon">
                {state === 'done' ? '✓' : state === 'live' ? <span className="dmg-audit-spinner"/> : '○'}
              </span>
              <span style={{flex: 1, fontSize: 13}}>{s}</span>
              <span className="mono faint" style={{fontSize: 10}}>
                {state === 'done' ? 'pass' : state === 'live' ? 'running…' : 'queued'}
              </span>
            </div>
          );
        })}
      </div>

      {complete && (
        <>
          <div className="dmg-audit-score">
            <div>
              <div className="mono faint" style={{fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase'}}>Audit score</div>
              <div className="dmg-audit-score-v">7.4<span style={{fontSize: 18, color: 'var(--text-dim)'}}> / 10</span></div>
              <div className="mono faint" style={{fontSize: 10, marginTop: 4}}>3 issues found · 11 checks passed</div>
            </div>
          </div>
          <div style={{marginTop: 16}}>
            <div className="mono" style={{fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--brass-bright, #e8c98a)', marginBottom: 10}}>/ Issues found</div>
            <div style={{display: 'flex', flexDirection: 'column', gap: 6}}>
              {issues.map((iss, i) => (
                <div key={i} className="dmg-audit-issue">
                  <span className={`dmg-rec-p p-${iss.sev}`}>{iss.sev.toUpperCase()}</span>
                  <div style={{flex: 1}}>
                    <div style={{fontSize: 13.5, color: 'var(--text)'}}>{iss.area}</div>
                    <div style={{fontSize: 12, color: 'var(--text-dim)', marginTop: 2}}>{iss.note}</div>
                  </div>
                  <button className="btn primary sm" onClick={() => onPushToast(`Fix queued · ${iss.area}`)}>Fix</button>
                </div>
              ))}
            </div>
          </div>
        </>
      )}
    </Drawer>
  );
}

// =============== DUPLICATE ===============
function FunnelDuplicateModal({ funnel, onClose, onPushToast }) {
  const [name, setName] = React.useState(`${funnel.name} · Copy`);
  return (
    <Modal
      open
      onClose={onClose}
      title="Duplicate funnel"
      subtitle="A new draft funnel will be created with the same stages, automations, and traffic config."
      footer={
        <>
          <button className="btn ghost" onClick={onClose}>Cancel</button>
          <button className="btn primary" onClick={() => { onPushToast(`Funnel duplicated · "${name}"`); onClose(); }}>
            <Icon.Plus className="icon"/>Create duplicate
          </button>
        </>
      }
    >
      <div className="dmg-form">
        <div className="dmg-form-row">
          <label>New funnel name</label>
          <input value={name} onChange={e => setName(e.target.value)}/>
        </div>
        <div className="dmg-form-row">
          <label>What to copy</label>
          <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
            {['Stages and content', 'Automations and triggers', 'Traffic sources and budgets', 'Performance baselines'].map(o => (
              <label key={o} className="dmg-check">
                <input type="checkbox" defaultChecked/>
                <span>{o}</span>
              </label>
            ))}
          </div>
        </div>
      </div>
    </Modal>
  );
}

// =============== SPLIT TEST ===============
function FunnelSplitTestModal({ funnel, onClose, onPushToast }) {
  const [type, setType] = React.useState('headline');
  const [variant, setVariant] = React.useState('');
  const [split, setSplit] = React.useState(20);

  return (
    <Modal
      open
      onClose={onClose}
      title="Launch split test"
      subtitle={`${funnel.name} · A/B/C builder`}
      wide
      footer={
        <>
          <button className="btn ghost" onClick={() => { onPushToast('Split test saved as draft'); onClose(); }}>Save draft</button>
          <button className="btn primary" onClick={() => { onPushToast('Split test launched · funnel marked TESTING'); onClose(); }}>
            <Icon.Bolt className="icon"/>Launch test
          </button>
        </>
      }
    >
      <div className="dmg-form">
        <div className="dmg-form-row">
          <label>Test type</label>
          <div className="segmented" style={{display: 'inline-flex', flexWrap: 'wrap'}}>
            {[
              ['headline',  'Headline'],
              ['cta',       'CTA'],
              ['landing',   'Landing page'],
              ['form',      'Form length'],
              ['offer',     'Offer']
            ].map(([k, l]) => (
              <button key={k} className={type === k ? 'active' : ''} onClick={() => setType(k)}>{l}</button>
            ))}
          </div>
        </div>
        <div className="dmg-form-row">
          <label>Variant B</label>
          <textarea
            rows={3}
            value={variant}
            onChange={e => setVariant(e.target.value)}
            placeholder={`Write your "${type}" variant here. Calliope can generate one for you.`}
          />
          <button className="btn sm" style={{alignSelf: 'flex-start', marginTop: 6}} onClick={() => setVariant(`AI-generated ${type} variant for ${funnel.name}.`)}>
            <Icon.Sparkles className="icon"/>Generate with AI
          </button>
        </div>
        <div className="dmg-form-row">
          <label>Traffic split to variant B</label>
          <div style={{display: 'flex', alignItems: 'center', gap: 14}}>
            <input type="range" min="5" max="50" value={split} onChange={e => setSplit(+e.target.value)} className="ccc-slider" style={{flex: 1}}/>
            <span className="mono" style={{minWidth: 80, textAlign: 'right'}}>
              {100 - split}% A / <span style={{color: 'var(--cyan)'}}>{split}% B</span>
            </span>
          </div>
        </div>
      </div>
    </Modal>
  );
}

window.Modal = Modal;
window.Drawer = Drawer;
window.FunnelOptimizeModal = FunnelOptimizeModal;
window.FunnelAuditDrawer = FunnelAuditDrawer;
window.FunnelDuplicateModal = FunnelDuplicateModal;
window.FunnelSplitTestModal = FunnelSplitTestModal;