'use client';

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

const availableIcons = [
  { value: 'Shield', label: '🛡️ Shield - Quality/Guarantee' },
  { value: 'Zap', label: '⚡ Zap - Speed/Fast' },
  { value: 'Clock', label: '⏰ Clock - Time/Support' },
  { value: 'Award', label: '🏆 Award - Excellence/Experts' },
  { value: 'Users', label: '👥 Users - Clients/Team' },
  { value: 'TrendingUp', label: '📈 TrendingUp - Growth/Results' },
  { value: 'CheckCircle', label: '✅ CheckCircle - Reliability' },
  { value: 'Star', label: '⭐ Star - Premium/Best' },
  { value: 'Heart', label: '❤️ Heart - Care/Service' },
  { value: 'ThumbsUp', label: '👍 ThumbsUp - Satisfaction' },
  { value: 'Lock', label: '🔒 Lock - Security/Safe' },
  { value: 'Globe', label: '🌍 Globe - Global/Worldwide' },
];

export default function WhyChooseUsSectionEditor({ props, onUpdate }: EditorProps<WhyChooseUsSectionProps>) {
  const [newPoint, setNewPoint] = useState<Omit<WhyChooseUsPoint, 'id'>>({
    icon: 'CheckCircle',
    title: '',
    description: '',
    highlight: false
  });

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

  const addPoint = () => {
    if (newPoint.title.trim() && newPoint.description.trim()) {
      const updatedPoints = [...(props.points || []), { 
        ...newPoint, 
        id: Date.now().toString() 
      }];
      handleChange('points', updatedPoints);
      setNewPoint({
        icon: 'CheckCircle',
        title: '',
        description: '',
        highlight: false
      });
    }
  };

  const updatePoint = (index: number, field: keyof WhyChooseUsPoint, value: unknown) => {
    const updatedPoints = [...(props.points || [])];
    updatedPoints[index] = { ...updatedPoints[index], [field]: value };
    handleChange('points', updatedPoints);
  };

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

  const movePoint = (index: number, direction: 'up' | 'down') => {
    if (!props.points) return;
    const updatedPoints = [...props.points];
    if (direction === 'up' && index > 0) {
      [updatedPoints[index], updatedPoints[index - 1]] = [updatedPoints[index - 1], updatedPoints[index]];
    } else if (direction === 'down' && index < updatedPoints.length - 1) {
      [updatedPoints[index], updatedPoints[index + 1]] = [updatedPoints[index + 1], updatedPoints[index]];
    }
    handleChange('points', updatedPoints);
  };

  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">
        ⭐ Why Choose Us Section
      </h4>

      {/* Help Tip */}
      <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 text-sm text-blue-800">
        <strong>💡 Tip:</strong> Yeh section aapke unique selling points (USPs) highlight karta hai. Aik card ko `Highlight` kar sakte hain jo different color mein dikhe ga!
      </div>

      {/* Section Header */}
      <div>
        <label className="block text-sm font-medium text-var-text mb-2">Badge Text (Optional)</label>
        <input
          type="text"
          value={props.badgeText || 'Our Advantages'}
          onChange={(e) => handleChange('badgeText', e.target.value)}
          className="w-full p-2 bg-var-input border border-var-border rounded text-var-text"
          placeholder="e.g., Our Advantages, Why Us, What Makes Us Different"
        />
      </div>

      <div className="flex items-center gap-2 py-2">
        <input
          type="checkbox"
          id="showBadge"
          checked={props.showBadge !== false}
          onChange={(e) => handleChange('showBadge', e.target.checked)}
          className="w-4 h-4 text-var-primary rounded"
        />
        <label htmlFor="showBadge" className="text-sm font-medium text-var-text">
          Show Badge
        </label>
      </div>

      {/* Title */}
      <div>
        <label className="block text-sm font-medium text-var-text mb-2">Section Title</label>
        <input
          type="text"
          value={props.title || 'Why Choose Us'}
          onChange={(e) => handleChange('title', e.target.value)}
          className="w-full p-2 bg-var-input border border-var-border rounded text-var-text"
          placeholder="e.g., Why Choose Us"
        />
      </div>

      {/* Highlighted Text */}
      <div>
        <label className="block text-sm font-medium text-var-text mb-2">
          🌈 Highlighted Word (Gradient Mein Dikhe Ga)
        </label>
        <input
          type="text"
          value={props.highlightedText || ''}
          onChange={(e) => handleChange('highlightedText', e.target.value)}
          className="w-full p-2 bg-var-input border border-var-border rounded text-var-text"
          placeholder="e.g., Choose Us, Different, Best"
        />
        <p className="text-xs text-var-text-muted mt-1">
          Example: Title `Why Choose Us` mein `Choose Us` likhne se sirf `Choose Us` gradient mein aayega
        </p>
      </div>

      {/* Description */}
      <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"
          rows={2}
          placeholder="e.g., What makes us different from the competition"
        />
      </div>

      {/* Layout Settings */}
      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Layout Style</label>
          <select
            value={props.layout || 'grid'}
            onChange={(e) => handleChange('layout', e.target.value as 'grid' | 'list')}
            className="w-full p-2 bg-var-input border border-var-border rounded text-var-text"
          >
            <option value="grid">Grid (Cards)</option>
            <option value="list">List (Vertical)</option>
          </select>
        </div>

        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Columns (Grid only)</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"
            disabled={props.layout === 'list'}
          >
            <option value={2}>2 Columns</option>
            <option value={3}>3 Columns</option>
            <option value={4}>4 Columns</option>
          </select>
        </div>
      </div>

      {/* Highlight Card Settings */}
      <div className="border border-var-border rounded-lg p-4 bg-var-surface">
        <h5 className="font-semibold text-var-text mb-3">🌟 Highlight Card (Feature Card)</h5>
        
        <div className="flex items-center gap-2 mb-3">
          <input
            type="checkbox"
            id="showHighlightCard"
            checked={props.showHighlightCard !== false}
            onChange={(e) => handleChange('showHighlightCard', e.target.checked)}
            className="w-4 h-4 text-var-primary rounded"
          />
          <label htmlFor="showHighlightCard" className="text-sm font-medium text-var-text">
            Show Highlight Card (Different Color)
          </label>
        </div>

        {props.showHighlightCard !== false && (
          <div>
            <label className="block text-sm font-medium text-var-text mb-2">Highlight Card Position</label>
            <select
              value={props.highlightCardPosition || 'first'}
              onChange={(e) => handleChange('highlightCardPosition', e.target.value as 'first' | 'center' | 'last')}
              className="w-full p-2 bg-var-input border border-var-border rounded text-var-text"
            >
              <option value="first">First Position (Start)</option>
              <option value="center">Center Position (Middle)</option>
              <option value="last">Last Position (End)</option>
            </select>
            <p className="text-xs text-var-text-muted mt-1">
              `Highlight` wala card kis position pe dikhe ga. Iske liye kisi ek point ko `Highlight` karna hoga.
            </p>
          </div>
        )}
      </div>

      {/* CTA Settings */}
      <div className="border border-var-border rounded-lg p-4 bg-var-surface">
        <h5 className="font-semibold text-var-text mb-3">🚀 Call to Action</h5>
        
        <div className="flex items-center gap-2 mb-3">
          <input
            type="checkbox"
            id="showCTA"
            checked={props.showCTA !== false}
            onChange={(e) => handleChange('showCTA', e.target.checked)}
            className="w-4 h-4 text-var-primary rounded"
          />
          <label htmlFor="showCTA" className="text-sm font-medium text-var-text">
            Show CTA Button
          </label>
        </div>

        {props.showCTA !== false && (
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-xs font-medium text-var-text-muted mb-1">Button Text</label>
              <input
                type="text"
                value={props.ctaText || 'Start Growing Today'}
                onChange={(e) => handleChange('ctaText', e.target.value)}
                className="w-full p-2 bg-var-input border border-var-border rounded text-sm text-var-text"
              />
            </div>
            <div>
              <label className="block text-xs font-medium text-var-text-muted mb-1">Button Link</label>
              <input
                type="text"
                value={props.ctaLink || '/contact'}
                onChange={(e) => handleChange('ctaLink', e.target.value)}
                className="w-full p-2 bg-var-input border border-var-border rounded text-sm text-var-text"
                placeholder="/contact or https://..."
              />
            </div>
          </div>
        )}
      </div>

      {/* Points List */}
      <div className="space-y-4">
        <h5 className="font-semibold text-var-text border-t border-var-border pt-4">
          ✨ Why Choose Us Points
        </h5>
        
        {/* Add New Point */}
        <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 Point</h6>
          
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-xs font-medium text-var-text-muted mb-1">Icon</label>
              <select
                value={newPoint.icon}
                onChange={(e) => setNewPoint({...newPoint, icon: e.target.value})}
                className="w-full p-2 bg-var-input border border-var-border rounded text-sm"
              >
                {availableIcons.map((icon) => (
                  <option key={icon.value} value={icon.value}>{icon.label}</option>
                ))}
              </select>
            </div>

            <div className="flex items-end">
              <div className="flex items-center gap-2">
                <input
                  type="checkbox"
                  id="highlight"
                  checked={newPoint.highlight}
                  onChange={(e) => setNewPoint({...newPoint, highlight: e.target.checked})}
                  className="w-4 h-4 text-var-primary rounded"
                />
                <label htmlFor="highlight" className="text-xs font-medium text-var-text">
                  🌟 Make Highlight Card
                </label>
              </div>
            </div>
          </div>

          <div>
            <label className="block text-xs font-medium text-var-text-muted mb-1">Title</label>
            <input
              type="text"
              value={newPoint.title}
              onChange={(e) => setNewPoint({...newPoint, title: e.target.value})}
              className="w-full p-2 bg-var-input border border-var-border rounded text-sm"
              placeholder="e.g., Premium Quality Guaranteed"
            />
          </div>

          <div>
            <label className="block text-xs font-medium text-var-text-muted mb-1">Description</label>
            <textarea
              value={newPoint.description}
              onChange={(e) => setNewPoint({...newPoint, description: e.target.value})}
              className="w-full p-2 bg-var-input border border-var-border rounded text-sm"
              rows={2}
              placeholder="Describe this unique selling point..."
            />
          </div>

          <button
            onClick={addPoint}
            disabled={!newPoint.title.trim() || !newPoint.description.trim()}
            className="w-full bg-var-primary text-white py-2 rounded text-sm hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed"
          >
            Add Point
          </button>
        </div>

        {/* Existing Points */}
        {props.points && props.points.length > 0 ? (
          <div className="space-y-3">
            <div className="flex justify-between items-center">
              <label className="text-sm font-medium text-var-text">Existing Points ({props.points.length})</label>
              <button
                onClick={() => handleChange('points', [])}
                className="text-xs text-red-500 hover:text-red-700"
              >
                Clear All
              </button>
            </div>
            
            {props.points.map((point, index) => (
              <div key={point.id} className={`border rounded-lg p-3 ${point.highlight ? 'border-blue-300 bg-blue-50' : 'border-var-border bg-var-surface'}`}>
                <div className="flex justify-between items-start mb-3">
                  <div className="flex items-center gap-2">
                    <span className="font-medium text-var-text text-sm">
                      #{index + 1} {point.title}
                    </span>
                    {point.highlight && (
                      <span className="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">Highlight</span>
                    )}
                  </div>
                  <div className="flex gap-1">
                    <button
                      onClick={() => movePoint(index, 'up')}
                      disabled={index === 0}
                      className="px-2 py-1 text-xs bg-gray-100 rounded hover:bg-gray-200 disabled:opacity-50"
                    >
                      ↑
                    </button>
                    <button
                      onClick={() => movePoint(index, 'down')}
                      disabled={index === (props.points?.length || 0) - 1}
                      className="px-2 py-1 text-xs bg-gray-100 rounded hover:bg-gray-200 disabled:opacity-50"
                    >
                      ↓
                    </button>
                    <button
                      onClick={() => removePoint(index)}
                      className="px-2 py-1 text-xs bg-red-100 text-red-600 rounded hover:bg-red-200"
                    >
                      ✕
                    </button>
                  </div>
                </div>
                
                <div className="grid grid-cols-2 gap-2 text-sm mb-2">
                  <div>
                    <label className="block text-xs text-var-text-muted">Icon</label>
                    <select
                      value={point.icon}
                      onChange={(e) => updatePoint(index, 'icon', e.target.value)}
                      className="w-full p-1.5 bg-var-input border border-var-border rounded text-sm"
                    >
                      {availableIcons.map((icon) => (
                        <option key={icon.value} value={icon.value}>{icon.label}</option>
                      ))}
                    </select>
                  </div>
                  <div className="flex items-end">
                    <div className="flex items-center gap-2">
                      <input
                        type="checkbox"
                        id={`highlight-${index}`}
                        checked={point.highlight === true}
                        onChange={(e) => updatePoint(index, 'highlight', e.target.checked)}
                        className="w-4 h-4 text-var-primary rounded"
                      />
                      <label htmlFor={`highlight-${index}`} className="text-xs text-var-text">
                        Highlight Card
                      </label>
                    </div>
                  </div>
                </div>
                
                <div className="mb-2">
                  <label className="block text-xs text-var-text-muted">Title</label>
                  <input
                    type="text"
                    value={point.title}
                    onChange={(e) => updatePoint(index, 'title', e.target.value)}
                    className="w-full p-1.5 bg-var-input border border-var-border rounded text-sm"
                  />
                </div>
                
                <div>
                  <label className="block text-xs text-var-text-muted">Description</label>
                  <textarea
                    value={point.description}
                    onChange={(e) => updatePoint(index, 'description', e.target.value)}
                    className="w-full p-1.5 bg-var-input border border-var-border rounded text-sm"
                    rows={2}
                  />
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="text-center py-8 bg-gray-50 rounded-lg border border-dashed border-gray-300">
            <p className="text-var-text-muted">No points added yet.</p>
            <p className="text-xs text-var-text-muted mt-1">Click `Add Point` to get started</p>
          </div>
        )}
      </div>

      {/* Example Points */}
      <div className="bg-gray-50 border border-gray-200 rounded-lg p-3 text-sm">
        <div className="font-medium text-var-text mb-2">📋 Example Points (Guest Posting Agency):</div>
        <ul className="space-y-1 text-var-text-muted text-xs">
          <li>• <strong>🛡️ Premium Quality Guaranteed</strong> - DA 50+ websites with guaranteed indexing</li>
          <li>• <strong>⚡ Fast Turnaround Time</strong> - 3-5 business days delivery</li>
          <li>• <strong>🏆 Industry Experts</strong> - 10+ years of SEO experience</li>
          <li>• <strong>👥 500+ Happy Clients</strong> - Trusted by businesses worldwide</li>
          <li>• <strong>⏰ 24/7 Support</strong> - Dedicated account manager</li>
          <li>• <strong>📈 Measurable Results</strong> - Detailed SEO reports</li>
        </ul>
      </div>
    </div>
  );
}