'use client';

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

export default function AboutTestimonialsSectionEditor({ props, onUpdate }: EditorProps<AboutTestimonialsSectionProps>) {
  const [newTestimonial, setNewTestimonial] = useState<Omit<AboutTestimonial, 'id'>>({
    name: '',
    company: '',
    role: '',
    image: '',
    content: '',
    rating: 5,
    before: { traffic: '', keywords: '', authority: '' },
    after: { traffic: '', keywords: '', authority: '' }
  });

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

  const addTestimonial = () => {
    if (newTestimonial.name.trim() && newTestimonial.content.trim()) {
      const updatedTestimonials = [...(props.testimonials || []), { 
        ...newTestimonial, 
        id: Date.now().toString(),
        before: newTestimonial.before || { traffic: '', keywords: '', authority: '' },
        after: newTestimonial.after || { traffic: '', keywords: '', authority: '' }
      }];
      handleChange('testimonials', updatedTestimonials);
      setNewTestimonial({
        name: '',
        company: '',
        role: '',
        image: '',
        content: '',
        rating: 5,
        before: { traffic: '', keywords: '', authority: '' },
        after: { traffic: '', keywords: '', authority: '' }
      });
    }
  };

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

  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">
        ⭐ Testimonials Section (Client Reviews)
      </h4>

      {/* Help Tip */}
      <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 text-sm text-blue-800">
        <strong>💡 Tip:</strong> Client reviews section. Aap grid ya carousel layout choose kar sakte hain. SEO stats bhi dikha sakte hain!
      </div>

      {/* Badge Settings */}
      <div>
        <label className="block text-sm font-medium text-var-text mb-2">Badge Text</label>
        <input
          type="text"
          value={props.badgeText || 'Client Success Stories'}
          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., Client Success Stories"
        />
      </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 || 'What Our Clients Say'}
          onChange={(e) => handleChange('title', e.target.value)}
          className="w-full p-2 bg-var-input border border-var-border rounded text-var-text"
        />
      </div>

      {/* Highlighted Text */}
      <div>
        <label className="block text-sm font-medium text-var-text mb-2">Highlighted Word (Gradient)</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., Clients Say, Success"
        />
      </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}
        />
      </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' | 'carousel')}
            className="w-full p-2 bg-var-input border border-var-border rounded text-var-text"
          >
            <option value="grid">Grid (Cards)</option>
            <option value="carousel">Carousel (Slider)</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 === 'carousel'}
          >
            <option value={2}>2 Columns</option>
            <option value={3}>3 Columns</option>
            <option value={4}>4 Columns</option>
          </select>
        </div>
      </div>

      {/* Carousel Settings */}
      {props.layout === 'carousel' && (
        <div className="border border-var-border rounded-lg p-4 bg-var-surface">
          <h5 className="font-semibold text-var-text mb-3">🎠 Carousel Settings</h5>
          
          <div className="flex items-center gap-2 mb-3">
            <input
              type="checkbox"
              id="autoRotate"
              checked={props.autoRotate !== false}
              onChange={(e) => handleChange('autoRotate', e.target.checked)}
              className="w-4 h-4 text-var-primary rounded"
            />
            <label htmlFor="autoRotate" className="text-sm font-medium text-var-text">Auto Rotate Slides</label>
          </div>

          {props.autoRotate !== false && (
            <div>
              <label className="block text-sm font-medium text-var-text mb-2">
                Auto Rotate Interval: {props.autoRotateInterval || 5000}ms
              </label>
              <input
                type="range"
                min="2000"
                max="10000"
                step="500"
                value={props.autoRotateInterval || 5000}
                onChange={(e) => handleChange('autoRotateInterval', parseInt(e.target.value))}
                className="w-full"
              />
            </div>
          )}
        </div>
      )}

      {/* Display Options */}
      <div className="border border-var-border rounded-lg p-4 bg-var-surface">
        <h5 className="font-semibold text-var-text mb-3">🎨 Display Options</h5>
        
        <div className="space-y-2">
          <label className="flex items-center gap-2">
            <input
              type="checkbox"
              checked={props.showStars !== false}
              onChange={(e) => handleChange('showStars', e.target.checked)}
              className="w-4 h-4 text-var-primary rounded"
            />
            <span className="text-sm text-var-text">Show Star Ratings</span>
          </label>
          
          <label className="flex items-center gap-2">
            <input
              type="checkbox"
              checked={props.showQuotes !== false}
              onChange={(e) => handleChange('showQuotes', e.target.checked)}
              className="w-4 h-4 text-var-primary rounded"
            />
            <span className="text-sm text-var-text">Show Quote Icon</span>
          </label>
        </div>
      </div>

      {/* SEO Stats */}
      <div className="border border-var-border rounded-lg p-4 bg-var-surface">
        <h5 className="font-semibold text-var-text mb-3">📊 SEO Statistics</h5>
        
        <div className="flex items-center gap-2 mb-4">
          <input
            type="checkbox"
            id="showSEOStats"
            checked={props.showSEOStats !== false}
            onChange={(e) => handleChange('showSEOStats', e.target.checked)}
            className="w-4 h-4 text-var-primary rounded"
          />
          <label htmlFor="showSEOStats" className="text-sm font-medium text-var-text">Show SEO Stats Section</label>
        </div>

        {props.showSEOStats !== false && (
          <div className="space-y-3">
            <div className="grid grid-cols-3 gap-2">
              <div>
                <label className="block text-xs text-var-text-muted">Traffic Increase</label>
                <input
                  type="text"
                  value={props.seoStats?.trafficIncrease || '+240%'}
                  onChange={(e) => handleChange('seoStats', { ...props.seoStats, trafficIncrease: 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">Keywords Increase</label>
                <input
                  type="text"
                  value={props.seoStats?.keywordsIncrease || '+275%'}
                  onChange={(e) => handleChange('seoStats', { ...props.seoStats, keywordsIncrease: 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">Authority Increase</label>
                <input
                  type="text"
                  value={props.seoStats?.authorityIncrease || '+122%'}
                  onChange={(e) => handleChange('seoStats', { ...props.seoStats, authorityIncrease: e.target.value })}
                  className="w-full p-1.5 bg-var-input border border-var-border rounded text-sm"
                />
              </div>
            </div>

            <div>
              <label className="block text-xs text-var-text-muted">SEO Improvement Title</label>
              <input
                type="text"
                value={props.seoImprovementTitle || 'SEO Transformation'}
                onChange={(e) => handleChange('seoImprovementTitle', e.target.value)}
                className="w-full p-1.5 bg-var-input border border-var-border rounded text-sm mb-2"
              />
            </div>

            <div>
              <label className="block text-xs text-var-text-muted mb-1">
                SEO Improvement: {props.seoImprovementPercentage || 85}%
              </label>
              <input
                type="range"
                min="0"
                max="100"
                value={props.seoImprovementPercentage || 85}
                onChange={(e) => handleChange('seoImprovementPercentage', parseInt(e.target.value))}
                className="w-full"
              />
            </div>
          </div>
        )}
      </div>

      {/* Testimonials List */}
      <div className="space-y-4">
        <h5 className="font-semibold text-var-text border-t border-var-border pt-4">
          📝 Client Testimonials
        </h5>
        
        {/* Add New Testimonial */}
        <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 Testimonial</h6>
          
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-xs font-medium text-var-text-muted">Client Name</label>
              <input
                type="text"
                value={newTestimonial.name}
                onChange={(e) => setNewTestimonial({...newTestimonial, name: e.target.value})}
                className="w-full p-2 bg-var-input border border-var-border rounded text-sm"
                placeholder="Sarah Johnson"
              />
            </div>
            <div>
              <label className="block text-xs font-medium text-var-text-muted">Company</label>
              <input
                type="text"
                value={newTestimonial.company}
                onChange={(e) => setNewTestimonial({...newTestimonial, company: e.target.value})}
                className="w-full p-2 bg-var-input border border-var-border rounded text-sm"
                placeholder="TechStart Inc."
              />
            </div>
          </div>

          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-xs font-medium text-var-text-muted">Role</label>
              <input
                type="text"
                value={newTestimonial.role}
                onChange={(e) => setNewTestimonial({...newTestimonial, role: e.target.value})}
                className="w-full p-2 bg-var-input border border-var-border rounded text-sm"
                placeholder="Marketing Director"
              />
            </div>
            <div>
              <label className="block text-xs font-medium text-var-text-muted">Rating (1-5)</label>
              <select
                value={newTestimonial.rating}
                onChange={(e) => setNewTestimonial({...newTestimonial, rating: parseInt(e.target.value)})}
                className="w-full p-2 bg-var-input border border-var-border rounded text-sm"
              >
                <option value={5}>⭐⭐⭐⭐⭐ (5)</option>
                <option value={4}>⭐⭐⭐⭐ (4)</option>
                <option value={3}>⭐⭐⭐ (3)</option>
                <option value={2}>⭐⭐ (2)</option>
                <option value={1}>⭐ (1)</option>
              </select>
            </div>
          </div>

          <div>
            <label className="block text-xs font-medium text-var-text-muted">Testimonial Content</label>
            <textarea
              value={newTestimonial.content}
              onChange={(e) => setNewTestimonial({...newTestimonial, content: e.target.value})}
              className="w-full p-2 bg-var-input border border-var-border rounded text-sm"
              rows={3}
              placeholder="The guest posting service exceeded our expectations..."
            />
          </div>

          <div>
            <label className="block text-xs font-medium text-var-text-muted">Image URL (Optional)</label>
            <input
              type="text"
              value={newTestimonial.image}
              onChange={(e) => setNewTestimonial({...newTestimonial, image: e.target.value})}
              className="w-full p-2 bg-var-input border border-var-border rounded text-sm"
              placeholder="https://example.com/avatar.jpg"
            />
          </div>

          <button
            onClick={addTestimonial}
            disabled={!newTestimonial.name.trim() || !newTestimonial.content.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 Testimonial
          </button>
        </div>

        {/* Existing Testimonials */}
        {props.testimonials && props.testimonials.length > 0 ? (
          <div className="space-y-3">
            {props.testimonials.map((testimonial, index) => (
              <div key={testimonial.id} className="border border-var-border rounded-lg p-3 bg-var-surface">
                <div className="flex justify-between items-start mb-3">
                  <div>
                    <span className="font-medium text-var-text">{testimonial.name}</span>
                    <div className="text-xs text-var-text-muted">{testimonial.company}</div>
                  </div>
                  <button
                    onClick={() => removeTestimonial(index)}
                    className="px-2 py-1 text-xs bg-red-100 text-red-600 rounded hover:bg-red-200"
                  >
                    Remove
                  </button>
                </div>
                
                <div className="text-sm text-var-text-muted mb-2 line-clamp-2">
                  `{testimonial.content}`
                </div>
                
                <div className="flex items-center gap-2">
                  <div className="flex">
                    {[...Array(5)].map((_, i) => (
                      <span key={i} className={`text-sm ${i < testimonial.rating ? 'text-yellow-400' : 'text-gray-300'}`}>★</span>
                    ))}
                  </div>
                  <span className="text-xs text-var-text-muted">{testimonial.role}</span>
                </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 testimonials added yet.</p>
            <p className="text-xs text-var-text-muted">Click `Add Testimonial` to get started</p>
          </div>
        )}
      </div>

      {/* Example Testimonials */}
      <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 Testimonials:</div>
        <ul className="space-y-2 text-var-text-muted text-xs">
          <li>• <strong>Sarah Johnson</strong> - TechStart Inc. <br/> `Our organic traffic increased by 150% in just 3 months!`</li>
          <li>• <strong>Michael Chen</strong> - EcomGrowth <br/> `Professional team, quality websites, and real results.`</li>
          <li>• <strong>Emily Rodriguez</strong> - DigitalEdge <br/> `Best investment we made for our online presence.`</li>
        </ul>
      </div>
    </div>
  );
}