'use client';

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

const backgroundOptions = [
  { value: 'gradient', label: 'Gradient (Blue to Purple)' },
  { value: 'primary', label: 'Solid Blue' },
  { value: 'secondary', label: 'Dark Gray' }
];

export default function CTASectionEditor({ props, onUpdate }: EditorProps<CTASectionProps>) {
  const [newGuarantee, setNewGuarantee] = useState('');

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

  const addGuarantee = () => {
    if (newGuarantee.trim()) {
      handleChange('guarantees', [...(props.guarantees || []), newGuarantee]);
      setNewGuarantee('');
    }
  };

  const updateGuarantee = (index: number, value: string) => {
    const updatedGuarantees = [...(props.guarantees || [])];
    updatedGuarantees[index] = value;
    handleChange('guarantees', updatedGuarantees);
  };

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

  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">Call to Action Section</h4>
      
      <div>
        <label className="block text-sm font-medium text-var-text mb-2">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"
          placeholder="Start Building Today"
        />
      </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}
          placeholder="Get the complete starter kit and launch your next project in hours, not weeks."
        />
      </div>

      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Primary CTA Text</label>
          <input
            type="text"
            value={props.primaryCtaText || ''}
            onChange={(e) => handleChange('primaryCtaText', 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="Get Started Now"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Primary CTA Link</label>
          <input
            type="text"
            value={props.primaryCtaLink || ''}
            onChange={(e) => handleChange('primaryCtaLink', 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="/register"
          />
        </div>
      </div>

      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Secondary CTA Text</label>
          <input
            type="text"
            value={props.secondaryCtaText || ''}
            onChange={(e) => handleChange('secondaryCtaText', 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="Live Demo"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Secondary CTA Link</label>
          <input
            type="text"
            value={props.secondaryCtaLink || ''}
            onChange={(e) => handleChange('secondaryCtaLink', 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="/demo"
          />
        </div>
      </div>

      <div>
        <label className="block text-sm font-medium text-var-text mb-2">Background Style</label>
        <select
          value={props.background || 'gradient'}
          onChange={(e) => handleChange('background', e.target.value as 'gradient' | 'primary' | 'secondary')}
          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"
        >
          {backgroundOptions.map(option => (
            <option key={option.value} value={option.value}>{option.label}</option>
          ))}
        </select>
      </div>

      {/* Guarantees */}
      <div className="space-y-4">
        <h5 className="font-semibold text-var-text">Guarantee Badges</h5>
        
        {/* Add New Guarantee */}
        <div className="flex gap-2">
          <input
            type="text"
            value={newGuarantee}
            onChange={(e) => setNewGuarantee(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="Instant access"
          />
          <button
            onClick={addGuarantee}
            disabled={!newGuarantee.trim()}
            className="px-4 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>

        {/* Existing Guarantees */}
        <div className="space-y-2">
          {props.guarantees?.map((guarantee, index) => (
            <div key={index} className="flex items-center gap-2">
              <input
                type="text"
                value={guarantee}
                onChange={(e) => updateGuarantee(index, 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"
              />
              <button
                onClick={() => removeGuarantee(index)}
                className="text-var-danger text-sm px-2 hover:text-var-danger-hover transition-colors"
              >
                Remove
              </button>
            </div>
          ))}
        </div>

        {/* Preview */}
        {props.guarantees && props.guarantees.length > 0 && (
          <div className="mt-4 p-4 bg-var-surface-hover rounded-lg border border-var-border">
            <p className="text-xs font-medium text-var-text mb-2">Preview:</p>
            <div className="flex gap-4 text-xs text-var-text-muted">
              {props.guarantees.map((g, i) => (
                <div key={i} className="flex items-center gap-1">
                  <span className="text-var-success">✓</span>
                  <span>{g}</span>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}