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

'use client';

import { ContactSectionProps, ContactStat } from '@/lib/page-builder/types';
import { EditorProps } from '@/lib/page-builder/types';

const iconOptions = [
  { value: 'Users', label: 'Users' },
  { value: 'Star', label: 'Star' },
  { value: 'Rocket', label: 'Rocket' },
  { value: 'CheckCircle', label: 'Check Circle' }
];

export default function ContactSectionEditor({ props, onUpdate }: EditorProps<ContactSectionProps>) {

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

  const updateStat = (index: number, field: keyof ContactStat, value: unknown) => {
    const updatedStats = [...(props.stats || [])];
    updatedStats[index] = { ...updatedStats[index], [field]: value };
    handleChange('stats', updatedStats);
  };

  const addStat = () => {
    const newStat: ContactStat = {
      icon: 'Star',
      number: '100+',
      label: 'New Stat'
    };
    const updatedStats = [...(props.stats || []), newStat];
    handleChange('stats', updatedStats);
  };

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

  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">Contact 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 || 'Start Your'}
            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 Your"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Highlighted Text</label>
          <input
            type="text"
            value={props.highlightedText || 'Success Story'}
            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="Success Story"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Description</label>
          <textarea
            value={props.description || 'Get featured on premium websites and watch your authority grow.'}
            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 || 'Ready to Get Started?'}
            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>

      {/* Form Settings */}
      <div className="space-y-4 border-t border-var-border pt-4">
        <h5 className="font-semibold text-var-text">Form Settings</h5>
        
        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Form Title</label>
          <input
            type="text"
            value={props.formTitle || 'Get Your Free Strategy Session'}
            onChange={(e) => handleChange('formTitle', 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">Form Description</label>
          <textarea
            value={props.formDescription || 'Fill out the form below and our expert will contact you within 2 hours to discuss your guest posting strategy.'}
            onChange={(e) => handleChange('formDescription', 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">Submit Button Text</label>
          <input
            type="text"
            value={props.submitButtonText || 'Get Free Strategy Session'}
            onChange={(e) => handleChange('submitButtonText', 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">Submitting Text</label>
          <input
            type="text"
            value={props.submittingText || 'Sending...'}
            onChange={(e) => handleChange('submittingText', 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">Privacy Text</label>
          <input
            type="text"
            value={props.privacyText || 'No spam, ever. We respect your privacy and will never share your information.'}
            onChange={(e) => handleChange('privacyText', 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">API Endpoint</label>
          <input
            type="text"
            value={props.apiEndpoint || '/api/contact'}
            onChange={(e) => handleChange('apiEndpoint', 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>

      {/* Contact Methods */}
      <div className="space-y-4 border-t border-var-border pt-4">
        <h5 className="font-semibold text-var-text">Contact Methods</h5>
        
        <label className="flex items-center cursor-pointer">
          <input
            type="checkbox"
            checked={props.showContactMethods !== false}
            onChange={(e) => handleChange('showContactMethods', e.target.checked)}
            className="mr-2 text-var-primary focus:ring-var-primary rounded"
          />
          <span className="text-sm font-medium text-var-text">Show Contact Methods</span>
        </label>

        {props.showContactMethods !== false && (
          <>
            <div>
              <label className="block text-sm font-medium text-var-text mb-2">Contact Email</label>
              <input
                type="email"
                value={props.contactEmail || 'hello@example.com'}
                onChange={(e) => handleChange('contactEmail', 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">Email Response Text</label>
              <input
                type="text"
                value={props.contactEmailResponse || 'Average response: 2 hours'}
                onChange={(e) => handleChange('contactEmailResponse', 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">Contact Phone</label>
              <input
                type="text"
                value={props.contactPhone || '+1 (123) 456-7890'}
                onChange={(e) => handleChange('contactPhone', 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">Phone Hours</label>
              <input
                type="text"
                value={props.contactPhoneHours || 'Mon-Fri, 9AM-6PM EST'}
                onChange={(e) => handleChange('contactPhoneHours', 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>

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

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

        {props.showStats !== false && (
          <div className="space-y-4">
            {props.stats?.map((stat, index) => (
              <div key={index} 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-sm text-var-text">Stat {index + 1}</h6>
                  <button
                    onClick={() => removeStat(index)}
                    className="text-var-danger text-sm hover:text-var-danger-hover"
                  >
                    Remove
                  </button>
                </div>

                <div>
                  <label className="block text-xs text-var-text-muted mb-1">Icon</label>
                  <select
                    value={stat.icon}
                    onChange={(e) => updateStat(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"
                  >
                    {iconOptions.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">Number</label>
                  <input
                    type="text"
                    value={stat.number}
                    onChange={(e) => updateStat(index, 'number', 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">Label</label>
                  <input
                    type="text"
                    value={stat.label}
                    onChange={(e) => updateStat(index, 'label', 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>

      {/* Guarantee */}
      <div className="space-y-4 border-t border-var-border pt-4">
        <h5 className="font-semibold text-var-text">Guarantee Section</h5>
        
        <label className="flex items-center cursor-pointer">
          <input
            type="checkbox"
            checked={props.showGuarantee !== false}
            onChange={(e) => handleChange('showGuarantee', e.target.checked)}
            className="mr-2 text-var-primary focus:ring-var-primary rounded"
          />
          <span className="text-sm font-medium text-var-text">Show Guarantee</span>
        </label>

        {props.showGuarantee !== false && (
          <>
            <div>
              <label className="block text-sm font-medium text-var-text mb-2">Guarantee Title</label>
              <input
                type="text"
                value={props.guaranteeTitle || '100% Satisfaction Guarantee'}
                onChange={(e) => handleChange('guaranteeTitle', 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">Guarantee Description</label>
              <textarea
                value={props.guaranteeDescription || 'If we don\'t deliver quality backlinks from premium websites, you don\'t pay. Your success is our priority.'}
                onChange={(e) => handleChange('guaranteeDescription', 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>

      {/* 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">• Stats count: {props.stats?.length || 0}</p>
        <p className="text-var-text-muted">• Show stats: {props.showStats !== false ? 'Yes' : 'No'}</p>
        <p className="text-var-text-muted">• Show contact methods: {props.showContactMethods !== false ? 'Yes' : 'No'}</p>
        <p className="text-var-text-muted">• Show guarantee: {props.showGuarantee !== false ? 'Yes' : 'No'}</p>
        <p className="text-var-text-muted">• API endpoint: {props.apiEndpoint || '/api/contact'}</p>
      </div>
    </div>
  );
}