"use client"

import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { ChevronDown, ChevronUp } from 'lucide-react'

interface FAQItem {
  question: string
  answer: string
}

const faqData: FAQItem[] = [
  {
    question: "Is the password generator 100% client-side?",
    answer: "Yes, all password generation processes run exclusively in your browser using the Web Crypto API. No data is ever sent to our servers. PassMaster uses window.crypto.getRandomValues() for cryptographically secure random numbers - the same technology used by banks and security applications."
  },
  {
    question: "Does the generator work offline as a PWA?",
    answer: "Yes, through Service Worker and Manifest, PassMaster works completely offline. After installation as a Progressive Web App, you can generate passwords without an internet connection. All security features remain available offline - no server contact needed."
  },
  {
    question: "Can similar characters be excluded?",
    answer: "Yes, the 'Exclude Similar Characters' function removes confusing characters like 'l', 'I', '1', '0', 'O' for better readability. This prevents confusion when manually entering passwords without significantly compromising security."
  },
  {
    question: "Is the generator GDPR compliant?",
    answer: "Yes, PassMaster is fully GDPR compliant. No data storage or transmission occurs. All processes run locally in your browser. You can optionally activate 'Local-only Mode' for maximum security. No cookies, no tracking, no server-side data processing."
  },
  {
    question: "How is password security ensured?",
    answer: "PassMaster uses exclusively window.crypto.getRandomValues() - never Math.random(). This meets BSI and NIST standards for cryptographic security. Entropy is strictly verified and meets banking-level security standards. The code is fully auditable and transparent."
  },
  {
    question: "What does 'Web Crypto API' mean for security?",
    answer: "The Web Crypto API provides cryptographically secure random numbers generated by your device's hardware. This is the same standard used by financial institutions. Unlike Math.random(), this is NIST SP 800-63B compliant and provides true cryptographic quality."
  },
  {
    question: "How can I verify the security myself?",
    answer: "The entire code is transparent and auditable. You can verify the data flow yourself: no network requests, no external dependencies for password generation. Use browser developer tools to verify that no data is transmitted."
  },
  {
    question: "Why is local generation safer than online tools?",
    answer: "Client-side generation eliminates the risk of man-in-the-middle attacks, server bypasses, or data leaks. Your passwords exist only in your browser and are never transmitted over the internet. This meets the highest security standard for sensitive data."
  },
  {
    question: "Does PassMaster support Diceware passphrases?",
    answer: "Currently, PassMaster focuses on random character combinations with configurable parameters. For different use cases, you can choose between different lengths and character sets. The entropy calculation helps in selecting the optimal password strength."
  }
]

export function FAQ() {
  const [openItems, setOpenItems] = useState<Set<number>>(new Set())

  const toggleItem = (index: number) => {
    const newOpenItems = new Set(openItems)
    const isOpening = !newOpenItems.has(index)
    
    if (newOpenItems.has(index)) {
      newOpenItems.delete(index)
    } else {
      newOpenItems.add(index)
    }
    setOpenItems(newOpenItems)
  }

  return (
    <div className="space-y-4">
      {faqData.map((item, index) => (
        <motion.div
          key={index}
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: index * 0.1 }}
          viewport={{ once: true }}
          className="card"
        >
          <button
            onClick={() => toggleItem(index)}
            className="w-full flex items-center justify-between text-left focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded-lg p-4"
            aria-expanded={openItems.has(index)}
            aria-controls={`faq-answer-${index}`}
          >
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white pr-4">
              {item.question}
            </h3>
            <div className="flex-shrink-0">
              {openItems.has(index) ? (
                <ChevronUp className="h-5 w-5 text-gray-500" />
              ) : (
                <ChevronDown className="h-5 w-5 text-gray-500" />
              )}
            </div>
          </button>
          
          <AnimatePresence>
            {openItems.has(index) && (
              <motion.div
                id={`faq-answer-${index}`}
                initial={{ height: 0, opacity: 0 }}
                animate={{ height: 'auto', opacity: 1 }}
                exit={{ height: 0, opacity: 0 }}
                transition={{ duration: 0.3, ease: 'easeInOut' }}
                className="overflow-hidden"
              >
                <div className="px-4 pb-4">
                  <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
                    {item.answer}
                  </p>
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </motion.div>
      ))}

      {/* JSON-LD Schema for FAQ */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "FAQPage",
            "mainEntity": faqData.map((item, index) => ({
              "@type": "Question",
              "name": item.question,
              "acceptedAnswer": {
                "@type": "Answer",
                "text": item.answer
              }
            }))
          })
        }}
      />
    </div>
  )
}
