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

'use client';

import { FeaturesSectionProps, FeatureCard } from '@/lib/page-builder/types';
import { EditorProps } from '@/lib/page-builder/types';
import { useState } from 'react';

const availableIcons = [
  { value: 'FiShield', label: 'Shield' },
  { value: 'FiLayout', label: 'Layout' },
  { value: 'FiGauge', label: 'Gauge' },
  { value: 'FiCode', label: 'Code' },
  { value: 'FiBarChart', label: 'Bar Chart' },
  { value: 'FiDatabase', label: 'Database' },
  { value: 'FiServer', label: 'Server' },
  { value: 'FiZap', label: 'Zap' },
  { value: 'FiStar', label: 'Star' },
  { value: 'FiAward', label: 'Award' },
];

export default function FeaturesSectionEditor({ props, onUpdate }: EditorProps<FeaturesSectionProps>) {
  const [newFeature, setNewFeature] = useState<Omit<FeatureCard, 'id'>>({
    icon: 'FiShield',
    title: '',
    description: '',
    items: []
  });
  const [newItem, setNewItem] = useState('');

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

  const addFeature = () => {
    if (newFeature.title.trim() && newFeature.description.trim()) {
      const updatedFeatures = [...(props.features || []), { 
        ...newFeature, 
        id: Date.now().toString() 
      }];
      handleChange('features', updatedFeatures);
      setNewFeature({
        icon: 'FiShield',
        title: '',
        description: '',
        items: []
      });
    }
  };

  const updateFeature = (index: number, field: keyof FeatureCard, value: unknown) => {
    const updatedFeatures = [...(props.features || [])];
    updatedFeatures[index] = { ...updatedFeatures[index], [field]: value };
    handleChange('features', updatedFeatures);
  };

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

  const addFeatureItem = (featureIndex: number) => {
    if (newItem.trim()) {
      const updatedFeatures = [...(props.features || [])];
      const feature = updatedFeatures[featureIndex];
      feature.items = [...(feature.items || []), newItem];
      handleChange('features', updatedFeatures);
      setNewItem('');
    }
  };

  const removeFeatureItem = (featureIndex: number, itemIndex: number) => {
    const updatedFeatures = [...(props.features || [])];
    updatedFeatures[featureIndex].items = updatedFeatures[featureIndex].items?.filter((_, i) => i !== itemIndex);
    handleChange('features', updatedFeatures);
  };

  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">Features Section</h4>
      
      <div>
        <label className="block text-sm font-medium text-var-text mb-2">Section Title</label>
        <input
          type="text"
          value={props.title || ''}
          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"
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-var-text mb-2">Description</label>
        <textarea
          value={props.description || ''}
          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={3}
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-var-text mb-2">Columns</label>
        <select
          value={props.columns || 3}
          onChange={(e) => handleChange('columns', parseInt(e.target.value))}
          className="w-full p-2 bg-var-input border border-var-border rounded text-var-text focus:ring-2 focus:ring-var-primary focus:border-var-primary"
        >
          <option value={2}>2 Columns</option>
          <option value={3}>3 Columns</option>
        </select>
      </div>

      {/* Features */}
      <div className="space-y-4">
        <h5 className="font-semibold text-var-text">Features</h5>
        
        {/* Add New Feature */}
        <div className="border border-var-border rounded-lg p-4 space-y-3 bg-var-surface">
          <h6 className="font-medium text-var-text">Add New Feature</h6>
          
          <div>
            <label className="block text-xs font-medium text-var-text-muted mb-1">Icon</label>
            <select
              value={newFeature.icon}
              onChange={(e) => setNewFeature({...newFeature, 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"
            >
              {availableIcons.map((icon) => (
                <option key={icon.value} value={icon.value}>
                  {icon.label}
                </option>
              ))}
            </select>
          </div>

          <div>
            <label className="block text-xs font-medium text-var-text-muted mb-1">Title</label>
            <input
              type="text"
              value={newFeature.title}
              onChange={(e) => setNewFeature({...newFeature, 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 font-medium text-var-text-muted mb-1">Description</label>
            <textarea
              value={newFeature.description}
              onChange={(e) => setNewFeature({...newFeature, 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>

          <button
            onClick={addFeature}
            disabled={!newFeature.title.trim() || !newFeature.description.trim()}
            className="w-full bg-var-primary text-white py-2 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 Feature
          </button>
        </div>

        {/* Existing Features */}
        <div className="space-y-4">
          {props.features?.map((feature, index) => (
            <div key={feature.id} className="border border-var-border rounded-lg p-4 bg-var-surface">
              <div className="flex justify-between items-start mb-3">
                <h6 className="font-medium text-var-text">Feature {index + 1}: {feature.title}</h6>
                <button
                  onClick={() => removeFeature(index)}
                  className="text-var-danger text-sm hover:text-var-danger-hover"
                >
                  Remove
                </button>
              </div>
              
              <div className="space-y-3">
                <div>
                  <label className="block text-xs text-var-text-muted mb-1">Icon</label>
                  <select
                    value={feature.icon}
                    onChange={(e) => updateFeature(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"
                  >
                    {availableIcons.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">Title</label>
                  <input
                    type="text"
                    value={feature.title}
                    onChange={(e) => updateFeature(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={feature.description}
                    onChange={(e) => updateFeature(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>

                {/* Feature Items */}
                <div className="mt-3">
                  <label className="block text-xs font-medium text-var-text mb-2">Feature Bullet Points</label>
                  
                  <div className="flex gap-2 mb-2">
                    <input
                      type="text"
                      value={newItem}
                      onChange={(e) => setNewItem(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 a bullet point..."
                    />
                    <button
                      onClick={() => addFeatureItem(index)}
                      disabled={!newItem.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 className="space-y-2">
                    {feature.items?.map((item, itemIndex) => (
                      <div key={itemIndex} className="flex items-center justify-between bg-var-surface-hover p-2 rounded border border-var-border">
                        <span className="text-sm text-var-text">{item}</span>
                        <button
                          onClick={() => removeFeatureItem(index, itemIndex)}
                          className="text-var-danger text-xs hover:text-var-danger-hover"
                        >
                          Remove
                        </button>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}