import { useState, useEffect } from 'react';

export default function CampaignBuilder({ campaign, onSave, onCancel }) {
  const [name, setName] = useState(campaign?.name || '');
  const [subject, setSubject] = useState(campaign?.subject || '');
  const [body, setBody] = useState(campaign?.body || '');
  const [listId, setListId] = useState(campaign?.list_id || '');
  const [lists, setLists] = useState([]);
  const [saving, setSaving] = useState(false);
  
  const apiBase = window.rescueFill?.apiUrl || '/wp-json/rescue/v1';
  const nonce = window.rescueFill?.nonce || '';

  useEffect(() => {
    // Fetch lists to populate the dropdown
    const fetchLists = async () => {
      try {
        const res = await fetch(`${apiBase}/lists`, { headers: { 'X-WP-Nonce': nonce } });
        const data = await res.json();
        if (data.success) {
          setLists(data.data || []);
        }
      } catch (e) {
        console.error("Failed to fetch lists", e);
      }
    };
    fetchLists();
  }, []);

  const handleSave = async () => {
    setSaving(true);
    await onSave({ name, subject, body, list_id: listId });
    setSaving(false);
  };

  return (
    <div className="space-y-6 max-w-4xl mx-auto">
      <div className="flex items-center justify-between">
        <h2 className="text-2xl font-bold text-slate-900">
          {campaign ? 'Edit Campaign' : 'New Campaign'}
        </h2>
        <div className="flex gap-3">
          <button onClick={onCancel} className="px-4 py-2 border border-slate-300 text-slate-700 font-medium rounded-lg hover:bg-slate-50 transition-colors text-sm">
            Cancel
          </button>
          <button
            onClick={handleSave}
            disabled={saving}
            className="px-5 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-60 text-white font-semibold rounded-lg transition-colors text-sm shadow-sm"
          >
            {saving ? 'Saving...' : 'Save Campaign'}
          </button>
        </div>
      </div>

      <div className="bg-white border border-slate-200 rounded-xl p-6 space-y-4">
        <h3 className="font-semibold text-slate-800">Campaign Details</h3>
        <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Campaign Name</label>
            <input
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="e.g. Black Friday Sale"
              className="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
            />
        </div>
        <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Audience List</label>
            <select
              value={listId}
              onChange={(e) => setListId(e.target.value)}
              className="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
            >
              <option value="">Select a list</option>
              {lists.map(list => (
                <option key={list.id} value={list.id}>{list.name}</option>
              ))}
            </select>
        </div>
      </div>
      
      <div className="bg-white border border-slate-200 rounded-xl p-6 space-y-4">
          <h3 className="font-semibold text-slate-800">Email Content</h3>
           <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Subject</label>
              <input
                type="text"
                value={subject}
                onChange={(e) => setSubject(e.target.value)}
                placeholder="An exciting offer for you!"
                className="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
              />
          </div>
          <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Body</label>
              <textarea
                value={body}
                onChange={(e) => setBody(e.target.value)}
                rows={10}
                placeholder="Hi {name}, ..."
                className="w-full border rounded-lg px-3 py-2 text-sm font-mono focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition resize-y"
              />
          </div>
      </div>

    </div>
  );
}