// src/app/components/admin/editors/ProcessSectionEditor.tsx

'use client';

import { useState } from 'react';
import { ProcessSectionProps, ProcessStep, ProcessStat } from '@/lib/page-builder/types';
import { EditorProps } from '@/lib/page-builder/types';

const iconOptions = [
  { value: 'ClipboardList', label: 'Clipboard List' },
  { value: 'FileCheck', label: 'File Check' },
  { value: 'CheckCircle', label: 'Check Circle' },
  { value: 'Rocket', label: 'Rocket' },
  { value: 'Clock', label: 'Clock' },
  { value: 'Users', label: 'Users' },
  { value: 'Shield', label: 'Shield' },
  { value: 'Zap', label: 'Zap' }
];

const colorOptions = [
  { value: 'from-blue-500 to-cyan-500', label: 'Blue to Cyan' },
  { value: 'from-purple-500 to-pink-500', label: 'Purple to Pink' },
  { value: 'from-green-500 to-emerald-500', label: 'Green to Emerald' },
  { value: 'from-orange-500 to-red-500', label: 'Orange to Red' }
];

export default function ProcessSectionEditor({ props, onUpdate }: EditorProps<ProcessSectionProps>) {
  const [newFeature, setNewFeature] = useState('');

  const handleChange = (field: keyof ProcessSectionProps, value: unknown) => {
    onUpdate({ ...props, [field]: value });
  };

  const addStep = () => {
    const newStep: ProcessStep = {
      number: String((props.steps?.length || 0) + 1).padStart(2, '0'),
      title: 'New Step',
      description: 'Step description goes here',
      icon: 'ClipboardList',
      color: 'from-blue-500 to-cyan-500',
      bgColor: 'bg-blue-50',
      borderColor: 'border-blue-200',
      features: ['Feature 1', 'Feature 2', 'Feature 3'],
      duration: '24 hours'
    };
    
    const updatedSteps = [...(props.steps || []), newStep];
    handleChange('steps', updatedSteps);
  };

  const updateStep = (index: number, field: keyof ProcessStep, value: unknown) => {
    const updatedSteps = [...(props.steps || [])];
    updatedSteps[index] = { ...updatedSteps[index], [field]: value };
    handleChange('steps', updatedSteps);
  };

  const removeStep = (index: number) => {
    const updatedSteps = props.steps?.filter((_, i) => i !== index) || [];
    handleChange('steps', updatedSteps);
  };

  const addFeature = (stepIndex: number) => {
    if (newFeature.trim()) {
      const updatedSteps = [...(props.steps || [])];
      updatedSteps[stepIndex].features = [...updatedSteps[stepIndex].features, newFeature.trim()];
      handleChange('steps', updatedSteps);
      setNewFeature('');
    }
  };

  const removeFeature = (stepIndex: number, featureIndex: number) => {
    const updatedSteps = [...(props.steps || [])];
    updatedSteps[stepIndex].features = updatedSteps[stepIndex].features.filter((_, i) => i !== featureIndex);
    handleChange('steps', updatedSteps);
  };

  const updateStat = (index: number, field: keyof ProcessStat, value: unknown) => {
    const updatedStats = [...(props.stats || [])];
    updatedStats[index] = { ...updatedStats[index], [field]: value };
    handleChange('stats', updatedStats);
  };

  return (
    <div className="space-y-6 max-h-[70vh] overflow-y-auto p-1">
      <h4 className="font-semibold text-lg text-var-text border-b border-var-border pb-2">Process Section Configuration</h4>
      
      {/* Basic Settings */}
      <div className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Section Title</label>
          <input
            type="text"
            value={props.title || 'How It Works'}
            onChange={(e) => handleChange('title', e.target.value)}
            className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
            placeholder="How It Works"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Description</label>
          <textarea
            value={props.description || 'Get featured on premium websites with our streamlined 4-step process.'}
            onChange={(e) => handleChange('description', e.target.value)}
            className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
            rows={2}
            placeholder="Section description..."
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Badge Text</label>
          <input
            type="text"
            value={props.badgeText || 'Streamlined Publishing Process'}
            onChange={(e) => handleChange('badgeText', e.target.value)}
            className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
            placeholder="Streamlined Publishing Process"
          />
        </div>
      </div>

      {/* Visibility Toggles */}
      <div className="space-y-3 border-t border-var-border pt-4">
        <label className="flex items-center cursor-pointer">
          <input
            type="checkbox"
            checked={props.showBadge !== false}
            onChange={(e) => handleChange('showBadge', e.target.checked)}
            className="mr-2 text-var-primary focus:ring-var-primary rounded"
          />
          <span className="text-sm font-medium text-var-text">Show Badge</span>
        </label>

        <label className="flex items-center cursor-pointer">
          <input
            type="checkbox"
            checked={props.showStats !== false}
            onChange={(e) => handleChange('showStats', e.target.checked)}
            className="mr-2 text-var-primary focus:ring-var-primary rounded"
          />
          <span className="text-sm font-medium text-var-text">Show Stats Bar</span>
        </label>

        <label className="flex items-center cursor-pointer">
          <input
            type="checkbox"
            checked={props.showCTA !== false}
            onChange={(e) => handleChange('showCTA', e.target.checked)}
            className="mr-2 text-var-primary focus:ring-var-primary rounded"
          />
          <span className="text-sm font-medium text-var-text">Show CTA Section</span>
        </label>
      </div>

      {/* Stats Editor */}
      {props.showStats !== false && (
        <div className="space-y-4 border-t border-var-border pt-4">
          <div className="flex justify-between items-center">
            <h5 className="font-semibold text-var-text">Stats</h5>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {props.stats?.map((stat, index) => (
              <div key={index} className="border border-var-border rounded-lg p-4 space-y-3 bg-var-surface">
                <h6 className="font-medium text-sm text-var-text">Stat {index + 1}</h6>
                <div>
                  <label className="block text-xs text-var-text-muted mb-1">Icon</label>
                  <select
                    value={stat.icon}
                    onChange={(e) => updateStat(index, 'icon', e.target.value)}
                    className="w-full p-2 bg-var-input border border-var-border rounded text-sm text-var-text focus:ring-2 focus:ring-var-primary focus:border-var-primary"
                  >
                    {iconOptions.map(icon => (
                      <option key={icon.value} value={icon.value}>{icon.label}</option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-xs text-var-text-muted mb-1">Number</label>
                  <input
                    type="text"
                    value={stat.number}
                    onChange={(e) => updateStat(index, 'number', e.target.value)}
                    className="w-full p-2 bg-var-input border border-var-border rounded text-sm text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
                  />
                </div>
                <div>
                  <label className="block text-xs text-var-text-muted mb-1">Label</label>
                  <input
                    type="text"
                    value={stat.label}
                    onChange={(e) => updateStat(index, 'label', e.target.value)}
                    className="w-full p-2 bg-var-input border border-var-border rounded text-sm text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
                  />
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Steps Editor */}
      <div className="space-y-4 border-t border-var-border pt-4">
        <div className="flex justify-between items-center">
          <h5 className="font-semibold text-var-text">Process Steps</h5>
          <button
            onClick={addStep}
            className="px-3 py-1 bg-var-primary text-white rounded text-sm hover:bg-var-primary-hover transition-colors"
          >
            Add Step
          </button>
        </div>

        <div className="space-y-6">
          {props.steps?.map((step, index) => (
            <div key={index} className="border border-var-border rounded-lg p-4 space-y-3 bg-var-surface">
              <div className="flex justify-between items-start">
                <h6 className="font-medium text-var-text">Step {step.number}</h6>
                <button
                  onClick={() => removeStep(index)}
                  className="text-var-danger text-sm hover:text-var-danger-hover"
                >
                  Remove
                </button>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-xs text-var-text-muted mb-1">Step Number</label>
                  <input
                    type="text"
                    value={step.number}
                    onChange={(e) => updateStep(index, 'number', e.target.value)}
                    className="w-full p-2 bg-var-input border border-var-border rounded text-sm text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
                  />
                </div>
                <div>
                  <label className="block text-xs text-var-text-muted mb-1">Duration</label>
                  <input
                    type="text"
                    value={step.duration}
                    onChange={(e) => updateStep(index, 'duration', e.target.value)}
                    className="w-full p-2 bg-var-input border border-var-border rounded text-sm text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
                  />
                </div>
              </div>

              <div>
                <label className="block text-xs text-var-text-muted mb-1">Title</label>
                <input
                  type="text"
                  value={step.title}
                  onChange={(e) => updateStep(index, 'title', e.target.value)}
                  className="w-full p-2 bg-var-input border border-var-border rounded text-sm text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
                />
              </div>

              <div>
                <label className="block text-xs text-var-text-muted mb-1">Description</label>
                <textarea
                  value={step.description}
                  onChange={(e) => updateStep(index, 'description', e.target.value)}
                  className="w-full p-2 bg-var-input border border-var-border rounded text-sm text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
                  rows={2}
                />
              </div>

              <div className="grid grid-cols-3 gap-3">
                <div>
                  <label className="block text-xs text-var-text-muted mb-1">Icon</label>
                  <select
                    value={step.icon}
                    onChange={(e) => updateStep(index, 'icon', e.target.value)}
                    className="w-full p-2 bg-var-input border border-var-border rounded text-sm text-var-text focus:ring-2 focus:ring-var-primary focus:border-var-primary"
                  >
                    {iconOptions.map(icon => (
                      <option key={icon.value} value={icon.value}>{icon.label}</option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-xs text-var-text-muted mb-1">Color</label>
                  <select
                    value={step.color}
                    onChange={(e) => updateStep(index, 'color', e.target.value)}
                    className="w-full p-2 bg-var-input border border-var-border rounded text-sm text-var-text focus:ring-2 focus:ring-var-primary focus:border-var-primary"
                  >
                    {colorOptions.map(color => (
                      <option key={color.value} value={color.value}>{color.label}</option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-xs text-var-text-muted mb-1">Background Color</label>
                  <select
                    value={step.bgColor}
                    onChange={(e) => updateStep(index, 'bgColor', e.target.value)}
                    className="w-full p-2 bg-var-input border border-var-border rounded text-sm text-var-text focus:ring-2 focus:ring-var-primary focus:border-var-primary"
                  >
                    <option value="bg-blue-50">Blue</option>
                    <option value="bg-purple-50">Purple</option>
                    <option value="bg-green-50">Green</option>
                    <option value="bg-orange-50">Orange</option>
                  </select>
                </div>
              </div>

              {/* Features */}
              <div>
                <label className="block text-xs font-medium text-var-text mb-2">Features</label>
                <div className="space-y-2">
                  {step.features.map((feature, featureIndex) => (
                    <div key={featureIndex} className="flex items-center justify-between bg-var-surface-hover p-2 rounded border border-var-border">
                      <span className="text-sm text-var-text">{feature}</span>
                      <button
                        onClick={() => removeFeature(index, featureIndex)}
                        className="text-var-danger text-xs hover:text-var-danger-hover"
                      >
                        Remove
                      </button>
                    </div>
                  ))}
                  <div className="flex gap-2">
                    <input
                      type="text"
                      value={newFeature}
                      onChange={(e) => setNewFeature(e.target.value)}
                      className="flex-1 p-2 bg-var-input border border-var-border rounded text-sm text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
                      placeholder="Add feature..."
                    />
                    <button
                      onClick={() => addFeature(index)}
                      disabled={!newFeature.trim()}
                      className="px-3 bg-var-primary text-white rounded text-sm hover:bg-var-primary-hover disabled:bg-var-surface-hover disabled:text-var-text-muted disabled:cursor-not-allowed transition-colors"
                    >
                      Add
                    </button>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* CTA Settings */}
      {props.showCTA !== false && (
        <div className="space-y-4 border-t border-var-border pt-4">
          <h5 className="font-semibold text-var-text">CTA Section</h5>
          
          <div>
            <label className="block text-sm font-medium text-var-text mb-2">CTA Title</label>
            <input
              type="text"
              value={props.ctaTitle || 'Ready to Boost Your Authority?'}
              onChange={(e) => handleChange('ctaTitle', e.target.value)}
              className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-var-text mb-2">CTA Description</label>
            <textarea
              value={props.ctaDescription || 'Join thousands of successful brands that have transformed their online presence through our premium publishing network.'}
              onChange={(e) => handleChange('ctaDescription', e.target.value)}
              className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
              rows={2}
            />
          </div>

          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-sm font-medium text-var-text mb-2">Primary Button Text</label>
              <input
                type="text"
                value={props.ctaButtonText || 'Browse Premium Websites'}
                onChange={(e) => handleChange('ctaButtonText', e.target.value)}
                className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-var-text mb-2">Primary Button Link</label>
              <input
                type="text"
                value={props.ctaButtonLink || '/websites'}
                onChange={(e) => handleChange('ctaButtonLink', e.target.value)}
                className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
              />
            </div>
          </div>

          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-sm font-medium text-var-text mb-2">Secondary Button Text</label>
              <input
                type="text"
                value={props.ctaSecondaryButtonText || 'Get Free Strategy Session'}
                onChange={(e) => handleChange('ctaSecondaryButtonText', e.target.value)}
                className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-var-text mb-2">Secondary Button Link</label>
              <input
                type="text"
                value={props.ctaSecondaryButtonLink || '/consultation'}
                onChange={(e) => handleChange('ctaSecondaryButtonLink', e.target.value)}
                className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
              />
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-var-text mb-2">Footer Text</label>
            <input
              type="text"
              value={props.footerText || '⚡ Average turnaround: 3-7 days • 🛡️ 100% satisfaction guaranteed • 📈 98% success rate'}
              onChange={(e) => handleChange('footerText', e.target.value)}
              className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
            />
          </div>
        </div>
      )}

      {/* Preview Info */}
      <div className="bg-var-surface-hover border border-var-border rounded-lg p-4 text-sm">
        <p className="font-medium mb-1 text-var-text">Preview Info:</p>
        <p className="text-var-text-muted">• Steps: {props.steps?.length || 4}</p>
        <p className="text-var-text-muted">• Stats: {props.stats?.length || 4}</p>
        <p className="text-var-text-muted">• Show badge: {props.showBadge !== false ? 'Yes' : 'No'}</p>
        <p className="text-var-text-muted">• Show stats: {props.showStats !== false ? 'Yes' : 'No'}</p>
        <p className="text-var-text-muted">• Show CTA: {props.showCTA !== false ? 'Yes' : 'No'}</p>
      </div>
    </div>
  );
}