"use client"

import { useState } from "react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { motion } from "framer-motion"
import { Search, Plus, Minus, ArrowRight, Mail } from "lucide-react"
import { useInView } from "react-intersection-observer"
import Link from "next/link"

export default function FAQPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [openCategories, setOpenCategories] = useState<string[]>(["shopping"])
  const [openQuestions, setOpenQuestions] = useState<string[]>([])
  const [ref1, inView1] = useInView({ triggerOnce: true, threshold: 0.2 })
  const [ref2, inView2] = useInView({ triggerOnce: true, threshold: 0.2 })

  // FAQ data structure
  const faqCategories = [
    {
      id: "shopping",
      title: "Покупки и заказы",
      icon: "💳",
      questions: [
        {
          id: "q1",
          question: "Как оформить заказ на сайте?",
          answer:
            "Чтобы оформить заказ, выберите понравившиеся товары, добавьте их в корзину, перейдите в корзину, нажмите кнопку 'Оформить заказ' и следуйте инструкциям. Вам потребуется указать контактную информацию, адрес доставки и выбрать способ оплаты.",
        },
        {
          id: "q2",
          question: "Какие способы оплаты доступны?",
          answer:
            "Мы принимаем различные способы оплаты: банковские карты (Visa, MasterCard, МИР), онлайн-платежи через системы ЮMoney, QIWI, СБП, а также наличными при получении (для некоторых способов доставки).",
        },
        {
          id: "q3",
          question: "Могу ли я изменить или отменить заказ после его оформления?",
          answer:
            "Да, вы можете изменить или отменить заказ, если он еще не был отправлен. Для этого свяжитесь с нашей службой поддержки клиентов по телефону или электронной почте как можно скорее.",
        },
      ],
    },
    {
      id: "delivery",
      title: "Доставка",
      icon: "🚚",
      questions: [
        {
          id: "q4",
          question: "Какие способы доставки вы предлагаете?",
          answer:
            "Мы предлагаем несколько способов доставки: курьерская доставка, доставка в пункты выдачи заказов и доставка Почтой России. Доступные способы доставки могут различаться в зависимости от вашего региона.",
        },
        {
          id: "q5",
          question: "Сколько стоит доставка?",
          answer:
            "Стоимость доставки зависит от выбранного способа доставки и региона. Курьерская доставка по Москве стоит 500 рублей, доставка в пункты выдачи — 300 рублей, доставка Почтой России — 400 рублей. При заказе на сумму от 5000 рублей доставка бесплатная.",
        },
        {
          id: "q6",
          question: "Как долго осуществляется доставка?",
          answer:
            "Сроки доставки зависят от выбранного способа доставки и вашего региона. Курьерская доставка по Москве осуществляется в течение 1-2 дней, доставка в пункты выдачи — 2-3 дня, доставка Почтой России — 5-14 дней в зависимости от региона.",
        },
      ],
    },
    {
      id: "returns",
      title: "Возврат и обмен",
      icon: "↩️",
      questions: [
        {
          id: "q7",
          question: "Какие условия возврата товара?",
          answer:
            "Вы можете вернуть товар надлежащего качества в течение 14 дней с момента получения. Товар должен быть в неношеном состоянии, с сохранением всех бирок и упаковки. Для возврата товара ненадлежащего качества срок составляет 30 дней.",
        },
        {
          id: "q8",
          question: "Как оформить возврат?",
          answer:
            "Для оформления возврата свяжитесь с нашей службой поддержки клиентов, заполните заявление на возврат и отправьте товар обратно. После получения и проверки товара мы вернем вам деньги тем же способом, которым была произведена оплата.",
        },
        {
          id: "q9",
          question: "Могу ли я обменять товар на другой размер или модель?",
          answer:
            "Да, вы можете обменять товар на другой размер или модель в течение 14 дней с момента получения. Для этого свяжитесь с нашей службой поддержки клиентов и следуйте инструкциям по обмену.",
        },
      ],
    },
    {
      id: "products",
      title: "Товары и размеры",
      icon: "👕",
      questions: [
        {
          id: "q10",
          question: "Как подобрать правильный размер?",
          answer:
            "Для подбора правильного размера воспользуйтесь нашей таблицей размеров, которая доступна на странице каждого товара и в разделе 'Таблица размеров'. Вы также можете воспользоваться нашим калькулятором размеров, который поможет подобрать идеальный размер на основе ваших измерений.",
        },
        {
          id: "q11",
          question: "Из каких материалов изготовлена ваша одежда?",
          answer:
            "Мы используем только высококачественные материалы для нашей одежды, включая натуральные ткани (хлопок, лен, шелк, шерсть) и современные синтетические материалы. Подробная информация о составе каждого изделия указана на странице товара.",
        },
        {
          id: "q12",
          question: "Как ухаживать за приобретенной одеждой?",
          answer:
            "Рекомендации по уходу зависят от типа изделия и используемых материалов. Общие рекомендации: стирать при температуре, указанной на этикетке, использовать мягкие моющие средства, не отбеливать, сушить в расправленном виде, гладить при температуре, соответствующей типу ткани.",
        },
      ],
    },
    {
      id: "account",
      title: "Личный кабинет",
      icon: "👤",
      questions: [
        {
          id: "q13",
          question: "Как зарегистрироваться на сайте?",
          answer:
            "Для регистрации на сайте нажмите на иконку профиля в верхнем правом углу, выберите 'Регистрация', заполните необходимые поля (имя, email, пароль) и нажмите кнопку 'Зарегистрироваться'.",
        },
        {
          id: "q14",
          question: "Что делать, если я забыл пароль?",
          answer:
            "Если вы забыли пароль, нажмите на ссылку 'Забыли пароль?' на странице входа, введите email, указанный при регистрации, и следуйте инструкциям, которые будут отправлены на вашу почту.",
        },
        {
          id: "q15",
          question: "Как отслеживать статус заказа в личном кабинете?",
          answer:
            "Для отслеживания статуса заказа войдите в личный кабинет, перейдите в раздел 'Мои заказы', выберите интересующий вас заказ и просмотрите информацию о его текущем статусе.",
        },
      ],
    },
  ]

  const toggleCategory = (categoryId: string) => {
    setOpenCategories((prev) =>
      prev.includes(categoryId) ? prev.filter((id) => id !== categoryId) : [...prev, categoryId],
    )
  }

  const toggleQuestion = (questionId: string) => {
    setOpenQuestions((prev) =>
      prev.includes(questionId) ? prev.filter((id) => id !== questionId) : [...prev, questionId],
    )
  }

  // Filter FAQ based on search query
  const filteredFAQ = faqCategories
    .map((category) => ({
      ...category,
      questions: category.questions.filter(
        (q) =>
          q.question.toLowerCase().includes(searchQuery.toLowerCase()) ||
          q.answer.toLowerCase().includes(searchQuery.toLowerCase()),
      ),
    }))
    .filter((category) => category.questions.length > 0)

  return (
    <div className="bg-white">
      {/* Hero Section */}
      <section className="relative h-[40vh] min-h-[300px] md:min-h-[400px]">
        <div
          className="absolute inset-0 bg-cover bg-center"
          style={{ backgroundImage: "url('/placeholder.svg?height=800&width=1920')" }}
        >
          <div className="absolute inset-0 bg-gradient-to-r from-primary/80 to-primary/40"></div>
        </div>

        <div className="relative h-full container mx-auto px-4 flex flex-col justify-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="max-w-2xl text-white"
          >
            <h1 className="text-3xl md:text-4xl lg:text-5xl font-light mb-4 tracking-tight">Часто задаваемые вопросы</h1>
            <p className="text-lg md:text-xl opacity-90 font-light">
              Найдите ответы на самые распространенные вопросы о нашем магазине, товарах и услугах
            </p>
          </motion.div>
        </div>
      </section>

      <section className="py-12 md:py-20">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto">
            {/* Search */}
            <motion.div 
              ref={ref1}
              initial={{ opacity: 0, y: 20 }}
              animate={inView1 ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.8 }}
              className="mb-10 md:mb-12"
            >
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
                <Input
                  type="text"
                  placeholder="Поиск по вопросам..."
                  className="pl-10 py-3 md:py-6 text-base md:text-lg border-gray-200 focus:border-primary focus:ring-primary rounded-none"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
            </motion.div>

            {/* FAQ Categories */}
            <motion.div
              ref={ref2}
              initial={{ opacity: 0 }}
              animate={inView2 ? { opacity: 1 } : {}}
              transition={{ duration: 0.8 }}
              className="space-y-6 md:space-y-8"
            >
              {filteredFAQ.length > 0 ? (
                filteredFAQ.map((category, categoryIndex) => (
                  <motion.div
                    key={category.id}
                    initial={{ opacity: 0, y: 20 }}
                    animate={inView2 ? { opacity: 1, y: 0 } : {}}
                    transition={{ duration: 0.5, delay: categoryIndex * 0.1 }}
                    className="border border-gray-100 overflow-hidden"
                  >
                    <button
                      className={`w-full flex items-center justify-between p-4 md:p-6 text-left ${
                        openCategories.includes(category.id) ? "bg-primary/5" : "bg-white"
                      }`}
                      onClick={() => toggleCategory(category.id)}
                    >
                      <div className="flex items-center">
                        <span className="text-2xl mr-3">{category.icon}</span>
                        <h2 className="text-lg md:text-xl font-medium text-primary">{category.title}</h2>
                      </div>
                      {openCategories.includes(category.id) ? (
                        <Minus className="h-5 w-5 text-primary" />
                      ) : (
                        <Plus className="h-5 w-5 text-primary" />
                      )}
                    </button>

                    {openCategories.includes(category.id) && (
                      <div className="border-t border-gray-100">
                        {category.questions.map((question, questionIndex) => (
                          <div key={question.id} className="border-b border-gray-100 last:border-b-0">
                            <button
                              className={`w-full flex items-center justify-between p-4 md:p-6 text-left ${
                                openQuestions.includes(question.id) ? "bg-tertiary/5" : "bg-white"
                              }`}
                              onClick={() => toggleQuestion(question.id)}
                            >
                              <h3 className="text-base md:text-lg font-medium text-gray-800 pr-8">{question.question}</h3>
                              {openQuestions.includes(question.id) ? (
                                <Minus className="h-4 w-4 flex-shrink-0 text-primary" />
                              ) : (
                                <Plus className="h-4 w-4 flex-shrink-0 text-primary" />
                              )}
                            </button>
                            {openQuestions.includes(question.id) && (
                              <div className="p-4 md:p-6 pt-0 md:pt-0 text-gray-600 text-sm md:text-base">
                                <p>{question.answer}</p>
                              </div>
                            )}
                          </div>
                        ))}
                      </div>
                    )}
                  </motion.div>
                ))
              ) : (
                <div className="text-center py-12 bg-gray-50 border border-gray-100">
                  <p className="text-gray-500 mb-4">По вашему запросу ничего не найдено</p>
                  <Button 
                    variant="outline" 
                    className="border-primary/30 text-primary hover:bg-primary/5 rounded-none"
                    onClick={() => setSearchQuery("")}
                  >
                    Сбросить поиск
                  </Button>
                </div>
              )}
            </motion.div>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section className="py-12 md:py-20 bg-tertiary/10">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center">
            <h2 className="text-2xl md:text-3xl font-light text-primary mb-4 tracking-tight">Не нашли ответ на свой вопрос?</h2>
            <p className="text-gray-600 mb-8 text-base md:text-lg">
              Свяжитесь с нашей службой поддержки, и мы с радостью поможем вам решить любой вопрос
            </p>
            <div className="flex flex-wrap justify-center gap-4">
              <Button 
                className="bg-primary hover:bg-primary/90 text-white rounded-none min-w-[160px]"
                asChild
              >
                <Link href="/contact">
                  Связаться с нами
                  <Mail className="ml-2 h-4 w-4" />
                </Link>
              </Button>
              <Button 
                variant="outline" 
                className="border-primary/30 text-primary hover:bg-primary/5 rounded-none min-w-[160px]"
                asChild
              >
                <Link href="/catalog">
                  Перейти в каталог
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}

