import { useState, useEffect } from 'react';
import ProUpsell from '../UI/ProUpsell';
import SequenceBuilder from './SequenceBuilder';
import SequenceList from './SequenceList';

const HIGHLIGHTS = [
  { icon: '🔗', title: 'Visual Step Builder', desc: 'Drag-and-drop email steps with delays (hours, days, weeks)' },
  { icon: '🧪', title: 'A/B Testing', desc: 'Split-test subject lines and copy automatically' },
  { icon: '📈', title: 'Analytics', desc: 'Open rates, click rates, and revenue attribution per sequence' },
  { icon: '⚡', title: 'Auto-Trigger', desc: 'Fires automatically when a lead abandons your form' },
];

export default function Sequences({ isPro }) {
  const [sequences, setSequences] = useState([]);
  const [loading, setLoading] = useState(true);
  const [view, setView] = useState('list');
  const [editingSequence, setEditingSequence] = useState(null);
  const [error, setError] = useState(null);

  const apiBase = window.rescueFill?.apiUrl || '/wp-json/rescue/v1';
  const nonce   = window.rescueFill?.nonce || '';

  // Show upsell if not Pro
  if (!isPro) {
    return (
      <ProUpsell
        feature="Multi-Step Sequences"
        description="Build unlimited automated drip email sequences with a visual step editor, configurable delays, and automatic firing when leads abandon your forms."
        highlights={HIGHLIGHTS}
      />
    );
  }

  // Pro: functional sequence manager (rendered by Pro addon JS)
  const fetchSequences = async () => {
    setLoading(true); setError(null);
    try {
      const res = await fetch(`${apiBase}/sequences`, { headers: { 'X-WP-Nonce': nonce } });
      const data = await res.json();
      if (data.success) setSequences(data.data || []);
      else setError('Failed to load sequences.');
    } catch (e) {
      setError('Network error loading sequences.');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => { fetchSequences(); }, []);

  const handleCreate = () => { setEditingSequence(null); setView('builder'); };
  const handleEdit   = (seq) => { setEditingSequence(seq); setView('builder'); };
  const handleDelete = async (id) => {
    if (!window.confirm('Delete this sequence?')) return;
    try { await fetch(`${apiBase}/sequences/${id}`, { method: 'DELETE', headers: { 'X-WP-Nonce': nonce } }); fetchSequences(); }
    catch (e) { alert('Failed to delete.'); }
  };
  const handleSave = async (data) => {
    const method = editingSequence ? 'PUT' : 'POST';
    const url    = editingSequence ? `${apiBase}/sequences/${editingSequence.id}` : `${apiBase}/sequences`;
    try {
      const res  = await fetch(url, { method, headers: { 'Content-Type': 'application/json', 'X-WP-Nonce': nonce }, body: JSON.stringify(data) });
      const resp = await res.json();
      if (resp.success) { setView('list'); fetchSequences(); }
      else alert('Failed to save sequence.');
    } catch (e) { alert('Network error.'); }
  };

  if (view === 'builder') {
    return <SequenceBuilder sequence={editingSequence} onSave={handleSave} onCancel={() => setView('list')} />;
  }

  return (
    <SequenceList sequences={sequences} loading={loading} error={error}
      onCreate={handleCreate} onEdit={handleEdit} onDelete={handleDelete} onRefresh={fetchSequences} />
  );
}