// components/sections/FAQ.tsx
// Accordion FAQ with 3 theme variants: default, minimal, boxed
'use client';

import React, { useState } from 'react';
import { ChevronDown } from 'lucide-react';

interface FAQItem {
  question: string;
  answer: string;
}

type ThemeKey = 'default' | 'minimal' | 'boxed' | 'ocean' | 'forest';

interface ThemeStyles {
  wrapper: string;
  questionBg: string;
  questionHover: string;
  questionText: string;
  questionLabel: string;
  answerBg: string;
  answerBorder: string;
  answerLabel: string;
  chevronColor: string;
}

const THEMES: Record<ThemeKey, ThemeStyles> = {
  default: {
    wrapper: 'border border-soft-gray-border/20 rounded-xl overflow-hidden bg-white shadow-sm',
    questionBg: 'bg-[#F9FAFB]',
    questionHover: 'hover:bg-[#FFEFEF]',
    questionText: 'text-white',
    questionLabel: 'text-crimson-red',
    answerBg: 'bg-white',
    answerBorder: 'border-t border-soft-gray-border/20',
    answerLabel: 'text-crimson-red',
    chevronColor: 'text-text-light-gray',
  },
  minimal: {
    wrapper: 'border-b border-slate-200 last:border-0',
    questionBg: 'bg-transparent',
    questionHover: 'hover:bg-slate-50',
    questionText: 'text-slate-800',
    questionLabel: 'text-slate-400',
    answerBg: 'bg-transparent',
    answerBorder: '',
    answerLabel: 'text-slate-400',
    chevronColor: 'text-slate-400',
  },
  boxed: {
    wrapper: 'rounded-xl overflow-hidden shadow-sm',
    questionBg: 'bg-gradient-to-r from-orange-50 to-red-50',
    questionHover: 'hover:from-orange-100 hover:to-red-100',
    questionText: 'text-slate-800',
    questionLabel: 'text-orange-500',
    answerBg: 'bg-white border border-orange-100',
    answerBorder: '',
    answerLabel: 'text-orange-500',
    chevronColor: 'text-orange-400',
  },
  ocean: {
    wrapper: 'rounded-xl overflow-hidden shadow-sm',
    questionBg: 'bg-gradient-to-r from-blue-50 to-indigo-50',
    questionHover: 'hover:from-blue-100 hover:to-indigo-100',
    questionText: 'text-slate-800',
    questionLabel: 'text-blue-500',
    answerBg: 'bg-white border border-blue-100',
    answerBorder: '',
    answerLabel: 'text-blue-500',
    chevronColor: 'text-blue-400',
  },
  forest: {
    wrapper: 'rounded-xl overflow-hidden shadow-sm',
    questionBg: 'bg-gradient-to-r from-emerald-50 to-teal-50',
    questionHover: 'hover:from-emerald-100 hover:to-teal-100',
    questionText: 'text-slate-800',
    questionLabel: 'text-emerald-500',
    answerBg: 'bg-white border border-emerald-100',
    answerBorder: '',
    answerLabel: 'text-emerald-500',
    chevronColor: 'text-emerald-400',
  },
};

interface FAQProps {
  title?: string;
  items?: FAQItem[];
  theme?: ThemeKey;
}

const DEFAULT_ITEMS: FAQItem[] = [
  { question: 'よくある質問のサンプル', answer: 'こちらは回答のサンプルです。' },
];

export function FAQ({ title = 'よくある質問', items = DEFAULT_ITEMS, theme = 'default' }: FAQProps) {
  const [openIndex, setOpenIndex] = useState<number | null>(null);
  const t = THEMES[theme] || THEMES.default;

  return (
    <section className="w-full py-12">
      <div className="container max-w-4xl mx-auto px-4">
        {title && (
          <h2 className="text-2xl font-bold text-white mb-8 text-center">{title}</h2>
        )}
        <div className={theme === 'minimal' ? 'divide-y-0' : 'space-y-4'}>
          {items.map((item, idx) => (
            <div key={idx} className={t.wrapper}>
              <button
                onClick={() => setOpenIndex(openIndex === idx ? null : idx)}
                className={`w-full flex items-center justify-between p-5 ${t.questionBg} ${t.questionHover} transition-colors text-left`}
              >
                <span className={`font-semibold ${t.questionText}`}>
                  <span className={`font-bold mr-2 ${t.questionLabel}`}>Q.</span>
                  {item.question}
                </span>
                <ChevronDown className={`w-5 h-5 ${t.chevronColor} transition-transform duration-300 ${openIndex === idx ? 'rotate-180' : ''}`} />
              </button>
              {openIndex === idx && (
                <div className={`p-5 ${t.answerBorder} ${t.answerBg}`}>
                  <span className={`font-bold mr-2 ${t.answerLabel}`}>A.</span>
                  <span className="text-white leading-relaxed">{item.answer}</span>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
