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

'use client';

import { TestimonialsSectionProps, Testimonial } from '@/lib/page-builder/types';
import { EditorProps } from '@/lib/page-builder/types';

export default function TestimonialsSectionEditor({ props, onUpdate }: EditorProps<TestimonialsSectionProps>) {

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

  const addTestimonial = () => {
    const newTestimonial: Testimonial = {
      id: Date.now(),
      name: 'New Client',
      company: 'Company Name',
      role: 'Position',
      image: '/api/placeholder/80/80',
      content: 'Testimonial content goes here...',
      rating: 5,
      before: { traffic: '0K', keywords: '0', authority: '0' },
      after: { traffic: '0K', keywords: '0', authority: '0' }
    };
    const updatedTestimonials = [...(props.testimonials || []), newTestimonial];
    handleChange('testimonials', updatedTestimonials);
  };

  const updateTestimonial = (index: number, field: keyof Testimonial, value: unknown) => {
    const updatedTestimonials = [...(props.testimonials || [])];
    updatedTestimonials[index] = { ...updatedTestimonials[index], [field]: value };
    handleChange('testimonials', updatedTestimonials);
  };

  const updateSEOData = (index: number, type: 'before' | 'after', field: keyof Testimonial['before'], value: string) => {
    const updatedTestimonials = [...(props.testimonials || [])];
    updatedTestimonials[index][type] = { ...updatedTestimonials[index][type], [field]: value };
    handleChange('testimonials', updatedTestimonials);
  };

  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 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 || 'Real'}
            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="Real"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Highlighted Text</label>
          <input
            type="text"
            value={props.highlightedText || 'Results'}
            onChange={(e) => handleChange('highlightedText', 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="Results"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Description</label>
          <textarea
            value={props.description || "Don't just take our word for it. See what our clients have to say about their"}
            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}
          />
        </div>

        <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-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
          />
        </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.showSEOStats !== false}
            onChange={(e) => handleChange('showSEOStats', e.target.checked)}
            className="mr-2 text-var-primary focus:ring-var-primary rounded"
          />
          <span className="text-sm font-medium text-var-text">Show SEO Stats</span>
        </label>

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

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

      {/* Auto-rotate Settings */}
      {props.autoRotate !== false && (
        <div className="border-t border-var-border pt-4">
          <label className="block text-sm font-medium text-var-text mb-2">Auto-rotate Interval (ms)</label>
          <input
            type="number"
            min={2000}
            max={10000}
            step={500}
            value={props.autoRotateInterval || 5000}
            onChange={(e) => handleChange('autoRotateInterval', parseInt(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>
      )}

      {/* SEO Stats Labels */}
      {props.showSEOStats !== false && (
        <div className="space-y-4 border-t border-var-border pt-4">
          <h5 className="font-semibold text-var-text">SEO Stats Labels</h5>
          
          <div>
            <label className="block text-sm font-medium text-var-text mb-2">SEO Improvement Title</label>
            <input
              type="text"
              value={props.seoImprovementTitle || 'SEO Transformation'}
              onChange={(e) => handleChange('seoImprovementTitle', 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 className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-xs text-var-text-muted mb-1">Traffic Increase Label</label>
              <input
                type="text"
                value={props.seoStats?.trafficIncrease || '+240%'}
                onChange={(e) => handleChange('seoStats', { ...props.seoStats, trafficIncrease: 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">Keywords Increase Label</label>
              <input
                type="text"
                value={props.seoStats?.keywordsIncrease || '+275%'}
                onChange={(e) => handleChange('seoStats', { ...props.seoStats, keywordsIncrease: 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 className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-xs text-var-text-muted mb-1">Authority Increase Label</label>
              <input
                type="text"
                value={props.seoStats?.authorityIncrease || '+122%'}
                onChange={(e) => handleChange('seoStats', { ...props.seoStats, authorityIncrease: 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">Progress Bar Label</label>
              <input
                type="text"
                value={props.seoImprovementLabel || 'Overall SEO Improvement'}
                onChange={(e) => handleChange('seoImprovementLabel', 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">Progress Bar Percentage</label>
            <input
              type="number"
              min={0}
              max={100}
              value={props.seoImprovementPercentage || 85}
              onChange={(e) => handleChange('seoImprovementPercentage', parseInt(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>
      )}

      {/* Testimonials 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">Testimonials</h5>
          <button
            onClick={addTestimonial}
            className="px-3 py-1 bg-var-primary text-white rounded text-sm hover:bg-var-primary-hover transition-colors"
          >
            Add Testimonial
          </button>
        </div>

        <div className="space-y-6">
          {props.testimonials?.map((testimonial, index) => (
            <div key={testimonial.id} 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">Testimonial {index + 1}</h6>
                <button
                  onClick={() => removeTestimonial(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">Name</label>
                  <input
                    type="text"
                    value={testimonial.name}
                    onChange={(e) => updateTestimonial(index, 'name', 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">Company</label>
                  <input
                    type="text"
                    value={testimonial.company}
                    onChange={(e) => updateTestimonial(index, 'company', 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 className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-xs text-var-text-muted mb-1">Role</label>
                  <input
                    type="text"
                    value={testimonial.role}
                    onChange={(e) => updateTestimonial(index, 'role', 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">Rating (1-5)</label>
                  <select
                    value={testimonial.rating}
                    onChange={(e) => updateTestimonial(index, 'rating', parseInt(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={5}>5 Stars</option>
                    <option value={4}>4 Stars</option>
                    <option value={3}>3 Stars</option>
                    <option value={2}>2 Stars</option>
                    <option value={1}>1 Star</option>
                  </select>
                </div>
              </div>

              <div>
                <label className="block text-xs text-var-text-muted mb-1">Content</label>
                <textarea
                  value={testimonial.content}
                  onChange={(e) => updateTestimonial(index, 'content', 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={3}
                />
              </div>

              <div className="border-t border-var-border pt-3">
                <p className="text-xs font-semibold text-var-text mb-2">SEO Data</p>
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className="block text-xs text-var-text-muted mb-1">Before Traffic</label>
                    <input
                      type="text"
                      value={testimonial.before.traffic}
                      onChange={(e) => updateSEOData(index, 'before', 'traffic', 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">After Traffic</label>
                    <input
                      type="text"
                      value={testimonial.after.traffic}
                      onChange={(e) => updateSEOData(index, 'after', 'traffic', 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 className="grid grid-cols-2 gap-3 mt-2">
                  <div>
                    <label className="block text-xs text-var-text-muted mb-1">Before Keywords</label>
                    <input
                      type="text"
                      value={testimonial.before.keywords}
                      onChange={(e) => updateSEOData(index, 'before', 'keywords', 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">After Keywords</label>
                    <input
                      type="text"
                      value={testimonial.after.keywords}
                      onChange={(e) => updateSEOData(index, 'after', 'keywords', 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 className="grid grid-cols-2 gap-3 mt-2">
                  <div>
                    <label className="block text-xs text-var-text-muted mb-1">Before Authority</label>
                    <input
                      type="text"
                      value={testimonial.before.authority}
                      onChange={(e) => updateSEOData(index, 'before', 'authority', 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">After Authority</label>
                    <input
                      type="text"
                      value={testimonial.after.authority}
                      onChange={(e) => updateSEOData(index, 'after', 'authority', 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>
          ))}

          {(!props.testimonials || props.testimonials.length === 0) && (
            <div className="text-center py-8 text-var-text-muted">
              No testimonials added. Click Add Testimonial to get started.
            </div>
          )}
        </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">• Testimonials count: {props.testimonials?.length || 0}</p>
        <p className="text-var-text-muted">• Show badge: {props.showBadge !== false ? 'Yes' : 'No'}</p>
        <p className="text-var-text-muted">• Show SEO stats: {props.showSEOStats !== false ? 'Yes' : 'No'}</p>
        <p className="text-var-text-muted">• Auto-rotate: {props.autoRotate !== false ? `Yes (${props.autoRotateInterval || 5000}ms)` : 'No'}</p>
      </div>
    </div>
  );
}