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

'use client';

import { useState } from 'react';
import { FAQSectionProps, FAQItem, FAQCategory } from '@/lib/page-builder/types';
import { EditorProps } from '@/lib/page-builder/types';

const iconOptions = [
  { value: 'HelpCircle', label: 'Help Circle' },
  { value: 'MessageCircle', label: 'Message Circle' },
  { value: 'FileText', label: 'File Text' },
  { value: 'Users', label: 'Users' },
  { value: 'Globe', label: 'Globe' },
  { value: 'Target', label: 'Target' },
  { value: 'Clock', label: 'Clock' },
  { value: 'CheckCircle', label: 'Check Circle' }
];

export default function FAQSectionEditor({ props, onUpdate }: EditorProps<FAQSectionProps>) {
  const [newQuestion, setNewQuestion] = useState('');
  const [newAnswer, setNewAnswer] = useState('');

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

  const addCategory = () => {
    const newCategory: FAQCategory = {
      id: (props.categories?.length || 0),
      icon: 'HelpCircle',
      title: 'New Category',
      count: 0
    };
    const updatedCategories = [...(props.categories || []), newCategory];
    handleChange('categories', updatedCategories);
  };

  const updateCategory = (index: number, field: keyof FAQCategory, value: unknown) => {
    const updatedCategories = [...(props.categories || [])];
    updatedCategories[index] = { ...updatedCategories[index], [field]: value };
    handleChange('categories', updatedCategories);
  };

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

  const addFAQ = () => {
    if (newQuestion.trim() && newAnswer.trim()) {
      const newFaq: FAQItem = {
        id: Date.now().toString(),
        category: props.categories?.[0]?.id || 0,
        question: newQuestion,
        answer: newAnswer,
        icon: 'HelpCircle'
      };
      const updatedFaqs = [...(props.faqs || []), newFaq];
      handleChange('faqs', updatedFaqs);
      setNewQuestion('');
      setNewAnswer('');
    }
  };

  const updateFAQ = (index: number, field: keyof FAQItem, value: unknown) => {
    const updatedFaqs = [...(props.faqs || [])];
    updatedFaqs[index] = { ...updatedFaqs[index], [field]: value };
    handleChange('faqs', updatedFaqs);
  };

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

  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">FAQ 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 || 'Your Questions'}
            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="Your Questions"
          />
        </div>

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

        <div>
          <label className="block text-sm font-medium text-var-text mb-2">Description</label>
          <textarea
            value={props.description || 'Everything you need to know about our guest posting service.'}
            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 || 'Frequently Asked Questions'}
            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.showCategories !== false}
            onChange={(e) => handleChange('showCategories', e.target.checked)}
            className="mr-2 text-var-primary focus:ring-var-primary rounded"
          />
          <span className="text-sm font-medium text-var-text">Show Categories</span>
        </label>

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

      {/* Categories Editor */}
      {props.showCategories !== false && (
        <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">Categories</h5>
            <button
              onClick={addCategory}
              className="px-3 py-1 bg-var-primary text-white rounded text-sm hover:bg-var-primary-hover transition-colors"
            >
              Add Category
            </button>
          </div>

          <div className="space-y-4">
            {props.categories?.map((category, index) => (
              <div key={category.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">Category {index + 1}</h6>
                  <button
                    onClick={() => removeCategory(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">Icon</label>
                    <select
                      value={category.icon}
                      onChange={(e) => updateCategory(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">Title</label>
                    <input
                      type="text"
                      value={category.title}
                      onChange={(e) => updateCategory(index, 'title', 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">Count</label>
                  <input
                    type="number"
                    value={category.count}
                    onChange={(e) => updateCategory(index, 'count', 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>
            ))}
          </div>
        </div>
      )}

      {/* FAQs 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">FAQ Items</h5>
          <button
            onClick={addFAQ}
            disabled={!newQuestion.trim() || !newAnswer.trim()}
            className="px-3 py-1 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 FAQ
          </button>
        </div>

        <div className="grid grid-cols-2 gap-3 mb-4">
          <input
            type="text"
            value={newQuestion}
            onChange={(e) => setNewQuestion(e.target.value)}
            placeholder="Question"
            className="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"
          />
          <textarea
            value={newAnswer}
            onChange={(e) => setNewAnswer(e.target.value)}
            placeholder="Answer"
            rows={2}
            className="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 className="space-y-4">
          {props.faqs?.map((faq, index) => (
            <div key={faq.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">FAQ {index + 1}</h6>
                <button
                  onClick={() => removeFAQ(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">Category ID</label>
                  <input
                    type="number"
                    value={faq.category}
                    onChange={(e) => updateFAQ(index, 'category', 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>
                  <label className="block text-xs text-var-text-muted mb-1">Icon</label>
                  <select
                    value={faq.icon}
                    onChange={(e) => updateFAQ(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>

              <div>
                <label className="block text-xs text-var-text-muted mb-1">Question</label>
                <input
                  type="text"
                  value={faq.question}
                  onChange={(e) => updateFAQ(index, 'question', 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">Answer</label>
                <textarea
                  value={faq.answer}
                  onChange={(e) => updateFAQ(index, 'answer', 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>
          ))}
        </div>
      </div>

      {/* CTA Settings */}
      {props.showCTA !== false && (
        <div className="space-y-4 border-t border-var-border pt-4">
          <h5 className="font-semibold text-var-text">CTA Section</h5>
          
          <div>
            <label className="block text-sm font-medium text-var-text mb-2">CTA Title</label>
            <input
              type="text"
              value={props.ctaTitle || 'Still Have Questions?'}
              onChange={(e) => handleChange('ctaTitle', 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">CTA Description</label>
            <textarea
              value={props.ctaDescription || 'Our support team is here to help you get the answers you need.'}
              onChange={(e) => handleChange('ctaDescription', 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 className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-sm font-medium text-var-text mb-2">Primary Button Text</label>
              <input
                type="text"
                value={props.ctaButtonText || 'Contact Support'}
                onChange={(e) => handleChange('ctaButtonText', 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">Primary Button Link</label>
              <input
                type="text"
                value={props.ctaButtonLink || '/contact'}
                onChange={(e) => handleChange('ctaButtonLink', 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>

          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-sm font-medium text-var-text mb-2">Secondary Button Text</label>
              <input
                type="text"
                value={props.ctaSecondaryButtonText || 'Schedule a Call'}
                onChange={(e) => handleChange('ctaSecondaryButtonText', 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">Secondary Button Link</label>
              <input
                type="text"
                value={props.ctaSecondaryButtonLink || '/schedule'}
                onChange={(e) => handleChange('ctaSecondaryButtonLink', 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>

          <div>
            <label className="block text-sm font-medium text-var-text mb-2">Footer Text</label>
            <input
              type="text"
              value={props.footerText || 'Average response time: 2 hours • 24/7 support available'}
              onChange={(e) => handleChange('footerText', 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>
      )}

      {/* 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">• Categories: {props.categories?.length || 0}</p>
        <p className="text-var-text-muted">• FAQs: {props.faqs?.length || 0}</p>
        <p className="text-var-text-muted">• Show categories: {props.showCategories !== false ? 'Yes' : 'No'}</p>
        <p className="text-var-text-muted">• Show CTA: {props.showCTA !== false ? 'Yes' : 'No'}</p>
      </div>
    </div>
  );
}