'use client';

import { useState, useCallback } from 'react';
import Select, { StylesConfig, MultiValue } from 'react-select';
import dynamic from 'next/dynamic';
import { X, Plus } from 'lucide-react';
import type {
  Language,
  Tag,
  ProductData,
  ProductFaq,
  FaqTranslation,
  FormErrors,
  SelectOption,
} from '@/types/product.types';

const RichTextEditor = dynamic(
  () => import('@/components/admin/text-editor/RichTextEditor'),
  { ssr: false },
);

const INPUT_STYLE = {
  background: 'var(--color-surface-alt)',
  border: '1px solid var(--color-border)',
  color: 'var(--color-text)',
} as const;

const LABEL_STYLE = { color: 'var(--color-text-secondary)' } as const;

interface AdditionalInfoStepProps {
  formData: ProductData;
  updateFormData: <K extends keyof ProductData>(key: K, value: ProductData[K]) => void;
  tags: Tag[];
  languages: Language[];
  defaultLanguage: Language;
  errors: FormErrors;
}

export default function AdditionalInfoStep({
  formData,
  updateFormData,
  tags,
  languages,
  defaultLanguage
}: AdditionalInfoStepProps) {
  const [faqLang, setFaqLang] = useState<string>(
    defaultLanguage?.code ?? languages[0]?.code ?? 'en',
  );

  const tagOptions: SelectOption[] = tags.map((tag) => ({
    value: tag.id,
    label: tag.default_name || 'Unnamed Tag',
  }));

  const selectedTags = tagOptions.filter((opt) =>
    formData.tag_ids?.includes(opt.value),
  );

  const selectStyles: StylesConfig<SelectOption, true> = {
    control: (base, state) => ({
      ...base,
      background: 'var(--color-surface-alt)',
      border: `1px solid ${state.isFocused ? 'var(--color-cta)' : 'var(--color-border)'}`,
      borderRadius: '0.5rem',
      boxShadow: state.isFocused
        ? '0 0 0 2px color-mix(in srgb, var(--color-cta) 20%, transparent)'
        : 'none',
      minHeight: '42px',
    }),
    valueContainer: (base) => ({ ...base, padding: '2px 12px' }),
    multiValue: (base) => ({
      ...base,
      background: 'var(--color-cta-light)',
      borderRadius: '0.375rem',
    }),
    multiValueLabel: (base) => ({
      ...base,
      color: 'var(--color-cta)',
      fontSize: '0.875rem',
      padding: '2px 6px',
    }),
    multiValueRemove: (base) => ({
      ...base,
      color: 'var(--color-cta)',
      cursor: 'pointer',
      '&:hover': {
        background: 'var(--color-danger)',
        color: 'white',
        borderRadius: '0 0.375rem 0.375rem 0',
      },
    }),
    placeholder: (base) => ({
      ...base,
      color: 'var(--color-text-tertiary)',
      fontSize: '0.875rem',
    }),
    menu: (base) => ({
      ...base,
      background: 'var(--color-surface)',
      border: '1px solid var(--color-border)',
      borderRadius: '0.5rem',
      boxShadow: 'var(--shadow-card-md)',
      zIndex: 50,
    }),
    menuList: (base) => ({ ...base, padding: '4px' }),
    option: (base, state) => ({
      ...base,
      background: state.isSelected
        ? 'var(--color-cta)'
        : state.isFocused
        ? 'color-mix(in srgb, var(--color-cta) 10%, transparent)'
        : 'transparent',
      color: state.isSelected ? 'white' : 'var(--color-text)',
      fontSize: '0.875rem',
      borderRadius: '0.375rem',
      cursor: 'pointer',
      padding: '8px 12px',
    }),
    indicatorSeparator: (base) => ({ ...base, background: 'var(--color-border)' }),
    noOptionsMessage: (base) => ({
      ...base,
      color: 'var(--color-text-secondary)',
      fontSize: '0.875rem',
    }),
  };

  const faqs: ProductFaq[] = formData.faqs ?? [];

  // ─── FAQ helpers ──────────────────────────────────────────────────────────

  const blankFaqTranslations = useCallback((): FaqTranslation[] =>
    languages.map((lang) => ({
      language_code: lang.code,
      question: '',
      answer: '',
    })), [languages]);

  const addFaq = useCallback(() => {
    const newFaq: ProductFaq = {
      position: faqs.length,
      is_active: true,
      translations: blankFaqTranslations(),
    };
    updateFormData('faqs', [...faqs, newFaq]);
  }, [faqs, blankFaqTranslations, updateFormData]);

  const removeFaq = useCallback(
    (index: number) => {
      updateFormData(
        'faqs',
        faqs.filter((_, i) => i !== index),
      );
    },
    [faqs, updateFormData],
  );

  const updateFaqField = useCallback(
    (index: number, field: keyof ProductFaq, value: ProductFaq[keyof ProductFaq]) => {
      const updated = [...faqs];
      updated[index] = { ...updated[index], [field]: value };
      updateFormData('faqs', updated);
    },
    [faqs, updateFormData],
  );

  const updateFaqTranslation = useCallback(
    (
      faqIndex: number,
      languageCode: string,
      field: keyof FaqTranslation,
      value: string,
    ) => {
      const updated = faqs.map((faq, i) => {
        if (i !== faqIndex) return faq;

        const translations = [...faq.translations];
        const tIdx = translations.findIndex((t) => t.language_code === languageCode);

        if (tIdx >= 0) {
          translations[tIdx] = { ...translations[tIdx], [field]: value };
        } else {
          translations.push({ language_code: languageCode, question: '', answer: '', [field]: value });
        }

        return { ...faq, translations };
      });

      updateFormData('faqs', updated);
    },
    [faqs, updateFormData],
  );

  const getFaqTranslation = (
    faq: ProductFaq,
    languageCode: string,
  ): FaqTranslation | undefined =>
    faq.translations.find((t) => t.language_code === languageCode);

  // Active language object for RTL check
  const activeFaqLang = languages.find((l) => l.code === faqLang);
  const faqDir = activeFaqLang?.is_rtl ? 'rtl' : 'ltr';

  // ─── Render ───────────────────────────────────────────────────────────────

  return (
    <div className="space-y-6">
      <h2 className="text-lg font-semibold" style={{ color: 'var(--color-text)' }}>
        Additional Information
      </h2>

      {/* Tags */}
      <div>
        <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
          Tags
        </label>
        <Select<SelectOption, true>
          instanceId="tag-select"
          options={tagOptions}
          value={selectedTags}
          onChange={(selected: MultiValue<SelectOption>) =>
            updateFormData('tag_ids', selected.map((opt) => opt.value))
          }
          placeholder="Search or select tags…"
          isMulti
          isSearchable
          styles={selectStyles}
          noOptionsMessage={() => 'No tags found'}
        />
        <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
          Tags help customers find products. Manage tags in the Tags section.
        </p>
      </div>

      {/* FAQs */}
      <div>
        <div className="flex justify-between items-center mb-4">
          <label className="block text-sm font-medium" style={LABEL_STYLE}>
            FAQs ({faqs.length})
          </label>
          <button
            type="button"
            onClick={addFaq}
            className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg text-sm font-medium transition-all hover:opacity-90"
            style={{ background: 'var(--color-cta)', color: 'white' }}
          >
            <Plus size={16} />
            Add FAQ
          </button>
        </div>

        {faqs.length > 0 && (
          <div className="space-y-4">
            {/* Language tabs */}
            {languages.length > 1 && (
              <div
                className="flex flex-wrap gap-1 border-b"
                style={{ borderColor: 'var(--color-border)' }}
              >
                {languages.map((lang) => {
                  const isActive = faqLang === lang.code;
                  return (
                    <button
                      key={lang.code}
                      type="button"
                      onClick={() => setFaqLang(lang.code)}
                      className="px-3 py-1.5 text-xs font-medium transition-all border-b-2"
                      style={{
                        color: isActive
                          ? 'var(--color-cta)'
                          : 'var(--color-text-secondary)',
                        borderColor: isActive ? 'var(--color-cta)' : 'transparent',
                      }}
                    >
                      {lang.name_native} ({lang.code})
                    </button>
                  );
                })}
              </div>
            )}

            {/* FAQ items */}
            {faqs.map((faq, index) => {
              const translation = getFaqTranslation(faq, faqLang);
              return (
                <div
                  key={index}
                  className="p-4 rounded-lg border"
                  style={{
                    borderColor: 'var(--color-border)',
                    background: 'var(--color-surface-alt)',
                  }}
                >
                  <div className="flex justify-between items-start">
                    <div className="flex-1 space-y-3" dir={faqDir}>
                      <div>
                        <label
                          className="block text-xs font-medium mb-1"
                          style={LABEL_STYLE}
                        >
                          Question
                        </label>
                        <input
                          type="text"
                          value={translation?.question ?? ''}
                          onChange={(e) =>
                            updateFaqTranslation(index, faqLang, 'question', e.target.value)
                          }
                          placeholder="Enter question"
                          className="w-full px-3 py-2 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20"
                          style={{ ...INPUT_STYLE, direction: faqDir }}
                        />
                      </div>
                      <div>
                        <label
                          className="block text-xs font-medium mb-1"
                          style={LABEL_STYLE}
                        >
                          Answer
                        </label>
                        <RichTextEditor
                          content={translation?.answer ?? ''}
                          onChange={(html) =>
                            updateFaqTranslation(index, faqLang, 'answer', html)
                          }
                          isRTL={activeFaqLang?.is_rtl ?? false}
                        />
                      </div>
                    </div>

                    <button
                      type="button"
                      onClick={() => removeFaq(index)}
                      className="ml-3 p-1 rounded hover:opacity-70 transition-opacity shrink-0"
                      style={{ color: 'var(--color-danger)' }}
                      title="Remove FAQ"
                    >
                      <X size={16} />
                    </button>
                  </div>

                  <div className="mt-3 flex items-center gap-4">
                    <div className="flex items-center gap-2">
                      <input
                        type="checkbox"
                        id={`faq-active-${index}`}
                        checked={faq.is_active}
                        onChange={(e) => updateFaqField(index, 'is_active', e.target.checked)}
                        className="w-3.5 h-3.5 rounded focus:ring-2 focus:ring-cta/20"
                        style={{ accentColor: 'var(--color-cta)' }}
                      />
                      <label
                        htmlFor={`faq-active-${index}`}
                        className="text-xs"
                        style={LABEL_STYLE}
                      >
                        Active
                      </label>
                    </div>
                    <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
                      Position: {faq.position + 1}
                    </span>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}