import { useState } from 'react';

const DEFAULT_STEP = {
  id: Date.now(),
  delay_value: 1,
  delay_unit: 'hours',
  subject: '',
  body: '',
  enabled: true,
};

const DELAY_UNITS = ['minutes', 'hours', 'days', 'weeks'];

const DEFAULT_TAGS = [
  '{name}', '{email}', '{form_name}', '{site_name}', '{recovery_link}', '{date}',
];

export default function SequenceBuilder({ sequence, onSave, onCancel }) {
  const [name, setName] = useState(sequence?.name || '');
  const [description, setDescription] = useState(sequence?.description || '');
  const [triggerDelay, setTriggerDelay] = useState(sequence?.trigger_delay || 30);
  const [status, setStatus] = useState(sequence?.status || 'active');
  const [steps, setSteps] = useState(() => {
    if (sequence?.steps) {
      // Steps are already parsed from JSON in REST API
      const parsed = Array.isArray(sequence.steps) ? sequence.steps : [];
      return parsed.length > 0 ? parsed : [{ ...DEFAULT_STEP, id: Date.now() }];
    }
    // Default 3-step sequence: 1h, 24h, 3 days
    return [
      { id: 1, delay_value: 1, delay_unit: 'hours', subject: 'You left something behind...', body: "Hi {name},\n\nWe noticed you started filling out our form but didn't finish.\n\n{recovery_link}\n\nBest,\n{site_name}", enabled: true },
      { id: 2, delay_value: 24, delay_unit: 'hours', subject: 'Still thinking it over?', body: "Hi {name},\n\nJust following up — we'd love to help.\n\n{recovery_link}\n\nBest,\n{site_name}", enabled: true },
      { id: 3, delay_value: 3, delay_unit: 'days', subject: 'Last chance to connect', body: "Hi {name},\n\nThis is our final follow-up. If you're still interested, we're here.\n\n{recovery_link}\n\nBest,\n{site_name}", enabled: true },
    ];
  });
  const [activeStep, setActiveStep] = useState(0);
  const [saving, setSaving] = useState(false);
  const [errors, setErrors] = useState({});

  const validate = () => {
    const errs = {};
    if (!name.trim()) errs.name = 'Sequence name is required.';
    steps.forEach((step, i) => {
      if (!step.subject.trim()) errs[`step_${i}_subject`] = 'Subject is required.';
      if (!step.body.trim()) errs[`step_${i}_body`] = 'Body is required.';
    });
    setErrors(errs);
    return Object.keys(errs).length === 0;
  };

  const handleSave = async () => {
    if (!validate()) return;
    setSaving(true);
    await onSave({ name, description, trigger_delay: triggerDelay, status, steps });
    setSaving(false);
  };

  const addStep = () => {
    const newStep = { ...DEFAULT_STEP, id: Date.now() };
    setSteps([...steps, newStep]);
    setActiveStep(steps.length);
  };

  const removeStep = (index) => {
    if (steps.length <= 1) return;
    const updated = steps.filter((_, i) => i !== index);
    setSteps(updated);
    setActiveStep(Math.min(activeStep, updated.length - 1));
  };

  const updateStep = (index, field, value) => {
    setSteps(steps.map((s, i) => i === index ? { ...s, [field]: value } : s));
  };

  const insertTag = (tag, field) => {
    const textarea = document.getElementById(`step-${field}-${activeStep}`);
    if (!textarea) return;
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const current = steps[activeStep][field] || '';
    const updated = current.slice(0, start) + tag + current.slice(end);
    updateStep(activeStep, field, updated);
    setTimeout(() => {
      textarea.focus();
      textarea.setSelectionRange(start + tag.length, start + tag.length);
    }, 0);
  };

  const currentStep = steps[activeStep];

  return (
    <div className="space-y-6 max-w-5xl">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold text-slate-900">
            {sequence ? 'Edit Sequence' : 'New Sequence'}
          </h2>
          <p className="text-slate-500 text-sm mt-1">Build your automated recovery email sequence</p>
        </div>
        <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 Sequence'}
          </button>
        </div>
      </div>

      {/* Sequence Settings */}
      <div className="bg-white border border-slate-200 rounded-xl p-6 space-y-4">
        <h3 className="font-semibold text-slate-800">Sequence Settings</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">
              Sequence Name <span className="text-red-500">*</span>
            </label>
            <input
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="e.g. Default Recovery Sequence"
              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 ${errors.name ? 'border-red-400' : 'border-slate-300'}`}
            />
            {errors.name && <p className="text-red-500 text-xs mt-1">{errors.name}</p>}
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Status</label>
            <select
              value={status}
              onChange={(e) => setStatus(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="active">Active</option>
              <option value="paused">Paused</option>
              <option value="draft">Draft</option>
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">
              Trigger Delay (minutes after abandonment)
            </label>
            <input
              type="number"
              min="1"
              max="1440"
              value={triggerDelay}
              onChange={(e) => setTriggerDelay(parseInt(e.target.value, 10))}
              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"
            />
            <p className="text-xs text-slate-400 mt-1">How long after inactivity to start this sequence</p>
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Description</label>
            <input
              type="text"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="Optional description..."
              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"
            />
          </div>
        </div>
      </div>

      {/* Step Builder */}
      <div className="flex gap-6">
        {/* Step List */}
        <div className="w-56 flex-shrink-0 space-y-2">
          <div className="flex items-center justify-between mb-1">
            <span className="text-sm font-semibold text-slate-700">Steps ({steps.length})</span>
            <button
              onClick={addStep}
              className="text-xs bg-indigo-100 text-indigo-700 hover:bg-indigo-200 font-semibold px-2 py-1 rounded transition-colors"
            >
              + Add
            </button>
          </div>
          {steps.map((step, i) => (
            <button
              key={step.id || i}
              onClick={() => setActiveStep(i)}
              className={`w-full flex items-center gap-3 px-3 py-3 rounded-lg border text-left transition-all ${
                activeStep === i
                  ? 'border-indigo-400 bg-indigo-50 shadow-sm'
                  : 'border-slate-200 bg-white hover:border-slate-300'
              }`}
            >
              <div className={`w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 ${
                activeStep === i ? 'bg-indigo-600 text-white' : 'bg-slate-100 text-slate-600'
              }`}>
                {i + 1}
              </div>
              <div className="min-w-0 flex-1">
                <p className="text-xs font-semibold text-slate-800 truncate">
                  {step.subject || 'No subject'}
                </p>
                <p className="text-[11px] text-slate-400">
                  After {step.delay_value} {step.delay_unit}
                </p>
              </div>
            </button>
          ))}
        </div>

        {/* Step Editor */}
        {currentStep && (
          <div className="flex-1 bg-white border border-slate-200 rounded-xl p-6 space-y-4">
            <div className="flex items-center justify-between">
              <h3 className="font-semibold text-slate-800">Step {activeStep + 1}</h3>
              <div className="flex items-center gap-3">
                <label className="flex items-center gap-2 text-sm text-slate-600 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={currentStep.enabled}
                    onChange={(e) => updateStep(activeStep, 'enabled', e.target.checked)}
                    className="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"
                  />
                  Enabled
                </label>
                {steps.length > 1 && (
                  <button
                    onClick={() => removeStep(activeStep)}
                    className="text-xs text-red-500 hover:text-red-700 font-medium px-2 py-1 rounded hover:bg-red-50 transition-colors"
                  >
                    Remove Step
                  </button>
                )}
              </div>
            </div>

            {/* Delay */}
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Send Delay</label>
              <div className="flex gap-2">
                <input
                  type="number"
                  min="1"
                  value={currentStep.delay_value}
                  onChange={(e) => updateStep(activeStep, 'delay_value', parseInt(e.target.value, 10))}
                  className="w-24 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"
                />
                <select
                  value={currentStep.delay_unit}
                  onChange={(e) => updateStep(activeStep, 'delay_unit', e.target.value)}
                  className="flex-1 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"
                >
                  {DELAY_UNITS.map((u) => (
                    <option key={u} value={u}>{u}</option>
                  ))}
                </select>
              </div>
              <p className="text-xs text-slate-400 mt-1">
                Time after the previous step (or abandonment for step 1)
              </p>
            </div>

            {/* Subject */}
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">
                Email Subject <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                id={`step-subject-${activeStep}`}
                value={currentStep.subject}
                onChange={(e) => updateStep(activeStep, 'subject', e.target.value)}
                placeholder="You left something behind..."
                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 ${errors[`step_${activeStep}_subject`] ? 'border-red-400' : 'border-slate-300'}`}
              />
              {errors[`step_${activeStep}_subject`] && (
                <p className="text-red-500 text-xs mt-1">{errors[`step_${activeStep}_subject`]}</p>
              )}
            </div>

            {/* Dynamic Tags */}
            <div>
              <p className="text-xs font-medium text-slate-500 mb-2">Insert Tag:</p>
              <div className="flex flex-wrap gap-1.5">
                {DEFAULT_TAGS.map((tag) => (
                  <button
                    key={tag}
                    onClick={() => insertTag(tag, 'body')}
                    className="text-xs bg-slate-100 hover:bg-slate-200 text-slate-700 font-mono px-2 py-1 rounded transition-colors"
                  >
                    {tag}
                  </button>
                ))}
              </div>
            </div>

            {/* Body */}
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">
                Email Body <span className="text-red-500">*</span>
              </label>
              <textarea
                id={`step-body-${activeStep}`}
                value={currentStep.body}
                onChange={(e) => updateStep(activeStep, 'body', 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 ${errors[`step_${activeStep}_body`] ? 'border-red-400' : 'border-slate-300'}`}
              />
              {errors[`step_${activeStep}_body`] && (
                <p className="text-red-500 text-xs mt-1">{errors[`step_${activeStep}_body`]}</p>
              )}
              <p className="text-xs text-slate-400 mt-1">
                Plain text. HTML will be wrapped automatically. Use tags above for personalization.
              </p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}