import type { NextPage } from 'next';
import { useState } from 'react';
import Seo from '../components/Seo';
import Breadcrumbs, { breadcrumbsJsonLd } from '../components/Breadcrumbs';
import { SITE_URL } from '../lib/seo';

interface FAQItem {
  id: number;
  question: string;
  answer: string;
  category: string;
}

interface Category {
  id: string;
  name: string;
}

const faqData: FAQItem[] = [
  {
    id: 1,
    question: 'DORUČUJETE I NA SLOVENSKO?',
    answer: 'Ano, zásilky doručujeme i na Slovensko a to v nejkratším možném čase.',
    category: 'doprava',
  },
  {
    id: 2,
    question: 'KOLIK STOJÍ DOPRAVA?',
    answer: 'Při nákupu zboží nad 1.000,- Kč doručení po ČR hradí prodávající. Pod tuto částku se cena řídí ceníkem dopravců.',
    category: 'doprava',
  },
  {
    id: 3,
    question: 'ZA JAK DLOUHO MI ZÁSILKA DORAZÍ?',
    answer: 'Dopravce garantuje doručení zásilky kamkoliv po ČR do 30 dnů. Cena dopravy se řídí dle ceníku dopravců.',
    category: 'doprava',
  },
  {
    id: 12,
    question: 'MOHU ZAPLATIT NA DOBÍRKU?',
    answer: 'Ne, platbu na dobírku nenabízíme. Objednávku prosím uhraďte předem některou z platebních metod dostupných v košíku.',
    category: 'doprava',
  },
  {
    id: 4,
    question: 'CO KDYŽ ZÁSILKU NEVYZVEDNU?',
    answer: 'Kupující je povinen zboží převzít. Nepřevezme-li kupující zboží, prodávající je oprávněn od kupní smlouvy odstoupit.',
    category: 'doprava',
  },
  {
    id: 5,
    question: 'CO KDYŽ ZÁSILKA DORAZILA POŠKOZENÁ?',
    answer: 'Při přebírání zboží od dopravce je kupující povinen zkontrolovat stav obalů a případné závady oznámit dopravci. Zboží se zjevně poškozeným obalem není kupující povinen od dopravce převzít.',
    category: 'doprava',
  },
  {
    id: 6,
    question: 'V JAKÝCH OBJEMECH PARFÉMY NABÍZÍTE?',
    answer: 'Nabízíme celé parfémy. Dostupné objemy celých flakonů najdete u každého produktu.',
    category: 'obecne',
  },
  {
    id: 7,
    question: 'JAK MOHU VRÁTIT ZBOŽÍ?',
    answer: 'Právo odstoupit od smlouvy máte do 14 dnů od doručení. Musíte odeslat e-mail na info@vystrikejto.cz se zákonným textem o ODSTOUPENÍ, kompletní nepoškozené zboží vrátit včetně příslušenství.',
    category: 'vraceni',
  },
  {
    id: 8,
    question: 'KDE NAJDU PŘEHLED MÝCH OBJEDNÁVEK?',
    answer: 'Přehled objednávek naleznete na svém zaregistrovaném účtu v sekci MOJE OBJEDNÁVKY.',
    category: 'klientska',
  },
  {
    id: 9,
    question: 'JAK MOHU UPLATIT SLEVOVÝ KÓD?',
    answer: 'Slevový kód obdržíte ke každé objednávce – kód v zásilce aktivujete jeho vložením do košíku při nákupu.',
    category: 'slevy',
  },
  {
    id: 10,
    question: 'JAK MOHU UPLATNIT DÁRKOVÝ POUKAZ?',
    answer: 'Unikátní kód na dárkovém poukazu aktivujete jeho vložením do košíku při nákupu.',
    category: 'slevy',
  },
  {
    id: 11,
    question: 'ZAPOMNĚL/A JSEM HESLO',
    answer: 'Vaše zapomenuté heslo jednoduše resetujete při přihlášení na odkazu – Zapomněl/a jsem heslo.',
    category: 'klientska',
  },
];

const categories: Category[] = [
  { id: 'vse', name: 'Všechny dotazy' },
  { id: 'obecne', name: 'Obecné' },
  { id: 'doprava', name: 'Doprava' },
  { id: 'vraceni', name: 'Vrácení' },
  { id: 'slevy', name: 'Slevy a akce' },
  { id: 'klientska', name: 'Klientská zóna' },
];

const FAQ: NextPage = () => {
  const [activeCategory, setActiveCategory] = useState('vse');
  const [expandedId, setExpandedId] = useState<number | null>(null);

  const filteredItems = activeCategory === 'vse'
    ? faqData
    : faqData.filter((item) => item.category === activeCategory);
  const activeCategoryName = categories.find((category) => category.id === activeCategory)?.name;

  const getCategoryCount = (categoryId: string) => (
    categoryId === 'vse'
      ? faqData.length
      : faqData.filter((item) => item.category === categoryId).length
  );

  return (
    <>
      <Seo
        title="Často kladené otázky | Celé parfémy | Vystříkejto.cz"
        description="Odpovědi na otázky o celých parfémech, dopravě, vracení zboží, slevových kódech a dárkových poukazech."
        canonical={`${SITE_URL}/faq`}
        jsonLd={[
          breadcrumbsJsonLd([
            { name: 'Domů', href: '/' },
            { name: 'Často kladené otázky' },
          ]),
          {
            '@context': 'https://schema.org',
            '@type': 'FAQPage',
            mainEntity: faqData.map((item) => ({
              '@type': 'Question',
              name: item.question,
              acceptedAnswer: {
                '@type': 'Answer',
                text: item.answer,
              },
            })),
          },
        ]}
      />

      <main className="min-h-screen bg-luxury-dark text-luxury-light">
        <section className="px-4 pb-20 pt-28 sm:px-6 sm:pb-24 sm:pt-32 lg:px-[5vw] lg:pb-28 lg:pt-40">
          <div className="mx-auto max-w-[1400px]">
            <Breadcrumbs items={[{ name: 'Domů', href: '/' }, { name: 'Často kladené otázky' }]} />

            <div className="mt-14 max-w-5xl sm:mt-20 lg:mt-24">
              <p className="text-xs font-bold uppercase tracking-[0.2em] text-luxury-gold">Pomoc a informace</p>
              <h1 className="mt-5 text-5xl font-black leading-[0.98] tracking-[-0.045em] text-luxury-light sm:text-6xl lg:text-8xl">
                Nejčastější dotazy.
              </h1>
              <p className="mt-7 max-w-2xl text-base leading-relaxed text-luxury-light/65 sm:text-lg lg:text-xl">
                Vše důležité o celých parfémech, dopravě, vrácení zboží, slevách a vašem účtu.
              </p>
            </div>
          </div>
        </section>

        <section className="px-4 sm:px-6 lg:px-[5vw]">
          <div className="mx-auto grid max-w-[1400px] gap-12 border-t border-luxury-gold/20 py-16 sm:py-20 lg:grid-cols-[260px_minmax(0,1fr)] lg:gap-24 lg:py-24">
            <nav aria-label="Kategorie dotazů">
              <p className="mb-6 text-xs font-bold uppercase tracking-[0.2em] text-luxury-gold">Kategorie</p>
              <div className="flex flex-wrap gap-x-6 gap-y-3 lg:flex-col lg:gap-0">
                {categories.map((category) => {
                  const isActive = category.id === activeCategory;

                  return (
                    <button
                      key={category.id}
                      type="button"
                      onClick={() => {
                        setActiveCategory(category.id);
                        setExpandedId(null);
                      }}
                      aria-current={isActive ? 'true' : undefined}
                      className={`group flex items-center gap-2 py-2 text-left text-sm font-bold transition-colors lg:w-full lg:justify-between lg:border-b lg:border-luxury-gold/15 lg:py-4 ${
                        isActive ? 'text-luxury-gold' : 'text-luxury-light/55 hover:text-luxury-light'
                      }`}
                    >
                      <span>{category.name}</span>
                      <span className={`text-xs ${isActive ? 'text-luxury-gold/70' : 'text-luxury-light/25 group-hover:text-luxury-light/45'}`}>
                        {String(getCategoryCount(category.id)).padStart(2, '0')}
                      </span>
                    </button>
                  );
                })}
              </div>
            </nav>

            <div>
              <div className="mb-8 flex items-end justify-between gap-6">
                <div>
                  <p className="text-xs font-bold uppercase tracking-[0.2em] text-luxury-gold">{activeCategoryName}</p>
                  <h2 className="mt-3 text-3xl font-black tracking-[-0.03em] text-luxury-light sm:text-4xl">
                    Odpovědi bez hledání.
                  </h2>
                </div>
                <p className="hidden text-sm text-luxury-light/40 sm:block">
                  {filteredItems.length} {filteredItems.length === 1 ? 'dotaz' : filteredItems.length < 5 ? 'dotazy' : 'dotazů'}
                </p>
              </div>

              <div className="border-t border-luxury-gold/20">
                {filteredItems.map((item) => {
                  const isExpanded = expandedId === item.id;
                  const answerId = `faq-answer-${item.id}`;

                  return (
                    <article key={item.id} className="border-b border-luxury-gold/20">
                      <button
                        type="button"
                        onClick={() => setExpandedId(isExpanded ? null : item.id)}
                        aria-expanded={isExpanded}
                        aria-controls={answerId}
                        className="group flex w-full items-start justify-between gap-6 py-6 text-left sm:py-8"
                      >
                        <span className={`max-w-3xl text-sm font-black leading-relaxed tracking-[0.015em] transition-colors sm:text-base ${
                          isExpanded ? 'text-luxury-gold' : 'text-luxury-light group-hover:text-luxury-gold'
                        }`}>
                          {item.question}
                        </span>
                        <span aria-hidden="true" className="mt-[-0.1em] shrink-0 text-2xl font-light leading-none text-luxury-gold">
                          {isExpanded ? '−' : '+'}
                        </span>
                      </button>

                      {isExpanded && (
                        <div id={answerId} className="max-w-3xl pb-8 pr-10 sm:pb-10">
                          <p className="text-sm leading-[1.8] text-luxury-light/60 sm:text-base">
                            {item.answer}
                          </p>
                        </div>
                      )}
                    </article>
                  );
                })}
              </div>
            </div>
          </div>
        </section>

        <section className="px-4 pb-20 sm:px-6 sm:pb-24 lg:px-[5vw] lg:pb-32">
          <div className="mx-auto flex max-w-[1400px] flex-col gap-8 border-t border-luxury-gold/20 pt-12 sm:flex-row sm:items-center sm:justify-between sm:pt-16">
            <div>
              <p className="text-xs font-bold uppercase tracking-[0.2em] text-luxury-gold">Jsme tu pro vás</p>
              <h2 className="mt-3 text-3xl font-black tracking-[-0.03em] text-luxury-light sm:text-4xl">
                Nenašli jste odpověď?
              </h2>
            </div>
            <a
              href="mailto:info@vystrikejto.cz"
              className="inline-flex min-h-12 items-center justify-center self-start border border-luxury-gold px-7 py-3 text-sm font-black uppercase tracking-[0.08em] text-luxury-gold transition-colors hover:bg-luxury-gold hover:text-luxury-dark sm:self-auto"
            >
              Napište nám&nbsp;&nbsp;→
            </a>
          </div>
        </section>
      </main>
    </>
  );
};

export default FAQ;
