'use client'

import { useMemo, useState } from 'react'
import { useTranslations } from 'next-intl'
import {
  ArrowRight,
  BookOpen,
  ChevronDown,
  HelpCircle,
  Mail,
  MessageCircle,
  Phone,
} from 'lucide-react'
import { PageHero } from '@/components/page-hero'
import { Button } from '@/components/ui/button'
import { DataStates } from '@/components/api/data-states'
import { Link } from '@/i18n/navigation'
import { useFetchData } from '@/hooks/api'
import type { FaqCategory } from '@/lib/api/entities'
import { useSiteData } from '@/contexts/site-data-context'
import { phoneToTel } from '@/lib/site-config'
import { cn } from '@/lib/utils'

export function FAQsPageClient() {
  const { contact, site } = useSiteData()
  const t = useTranslations('information.faqs')
  const [openItems, setOpenItems] = useState<number[]>([])
  const [activeCategoryId, setActiveCategoryId] = useState<number | null>(null)

  const { items, isLoading, isError, isEmpty, error, refetch } = useFetchData<FaqCategory>({
    endpoint: 'faq-categories',
    params: { page_size: 50 },
  })

  const faqSections = items ?? []

  const totalQuestions = useMemo(
    () => faqSections.reduce((sum, section) => sum + (section.items?.length ?? 0), 0),
    [faqSections],
  )

  const visibleSections = useMemo(() => {
    if (!activeCategoryId) return faqSections
    return faqSections.filter((section) => section.id === activeCategoryId)
  }, [activeCategoryId, faqSections])

  const toggleItem = (faqId: number) => {
    setOpenItems((current) =>
      current.includes(faqId)
        ? current.filter((item) => item !== faqId)
        : [...current, faqId],
    )
  }

  return (
    <main>
      <PageHero
        eyebrow={t('hero.eyebrow')}
        title={t('hero.title')}
        description={t('hero.description', { name: site.shortName })}
      />

      <section className="section-padding">
        <div className="container-wide">
          <DataStates
            isLoading={isLoading}
            isError={isError}
            isEmpty={isEmpty}
            error={error}
            loadingMessage={t('loading')}
            emptyMessage={t('empty')}
            onRetry={refetch}
          >
            <div className="mb-12 grid grid-cols-3 gap-4">
              {[
                { label: t('stats.categories'), value: String(faqSections.length) },
                { label: t('stats.questions'), value: String(totalQuestions) },
                { label: t('stats.response'), value: '24h' },
              ].map(({ label, value }) => (
                <div
                  key={label}
                  className="rounded-[1.5rem] border border-primary/20 bg-card px-6 py-5 text-center shadow-sm"
                >
                  <p className="text-3xl font-bold text-primary sm:text-4xl">{value}</p>
                  <p className="mt-1.5 text-sm font-medium text-muted-foreground">{label}</p>
                </div>
              ))}
            </div>

            {faqSections.length > 1 && (
              <div className="mb-10">
                <p className="mb-3 text-xs font-semibold uppercase tracking-[0.2em] text-accent">
                  {t('browse')}
                </p>
                <div className="flex flex-wrap gap-2">
                  <button
                    type="button"
                    onClick={() => setActiveCategoryId(null)}
                    className={cn(
                      'rounded-full border px-4 py-2 text-sm font-semibold transition-colors',
                      activeCategoryId === null
                        ? 'border-primary bg-primary text-primary-foreground'
                        : 'border-primary/20 bg-card text-foreground hover:border-primary/30 hover:text-primary',
                    )}
                  >
                    {t('allTopics')}
                  </button>
                  {faqSections.map((section) => (
                    <button
                      key={section.id}
                      type="button"
                      onClick={() => setActiveCategoryId(section.id)}
                      className={cn(
                        'rounded-full border px-4 py-2 text-sm font-semibold transition-colors',
                        activeCategoryId === section.id
                          ? 'border-primary bg-primary text-primary-foreground'
                          : 'border-primary/20 bg-card text-foreground hover:border-primary/30 hover:text-primary',
                      )}
                    >
                      {section.name}
                    </button>
                  ))}
                </div>
              </div>
            )}

            <div className="mx-auto max-w-4xl space-y-12">
              {visibleSections.map((section) => {
                const count = (section.items ?? []).length
                return (
                  <div key={section.id}>
                    <div className="mb-5 flex items-center gap-3 border-b border-border/60 pb-4">
                      <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary/8 text-primary">
                        <HelpCircle className="h-4 w-4" />
                      </div>
                      <div>
                        <h2 className="text-xl font-bold text-foreground">{section.name}</h2>
                        <p className="text-xs text-muted-foreground">
                          {count === 1
                            ? t('questionCountOne', { count })
                            : t('questionCount', { count })}
                        </p>
                      </div>
                    </div>

                    <div className="space-y-2">
                      {(section.items ?? []).map((faq, idx) => {
                        const isOpen = openItems.includes(faq.id)
                        return (
                          <div
                            key={faq.id}
                            className={cn(
                              'overflow-hidden rounded-2xl border transition-all duration-200',
                              isOpen
                                ? 'border-primary/30 bg-card shadow-md'
                                : 'border-primary/20 bg-card hover:border-primary/20 hover:shadow-sm',
                            )}
                          >
                            <button
                              type="button"
                              className="flex w-full items-start justify-between gap-4 px-6 py-5 text-left"
                              onClick={() => toggleItem(faq.id)}
                              aria-expanded={isOpen}
                            >
                              <div className="flex items-start gap-4">
                                <span
                                  className={cn(
                                    'mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[11px] font-bold transition-colors',
                                    isOpen
                                      ? 'bg-primary text-primary-foreground'
                                      : 'bg-muted text-muted-foreground',
                                  )}
                                >
                                  {idx + 1}
                                </span>
                                <span
                                  className={cn(
                                    'text-base font-semibold leading-7 transition-colors',
                                    isOpen ? 'text-primary' : 'text-foreground',
                                  )}
                                >
                                  {faq.question}
                                </span>
                              </div>
                              <ChevronDown
                                className={cn(
                                  'mt-1 h-5 w-5 shrink-0 text-primary transition-transform duration-200',
                                  isOpen && 'rotate-180',
                                )}
                              />
                            </button>

                            {isOpen && (
                              <div className="border-t border-border/50 px-6 pb-6 pt-4">
                                <p className="pl-10 text-sm leading-7 text-muted-foreground sm:text-base">
                                  {faq.answer}
                                </p>
                              </div>
                            )}
                          </div>
                        )
                      })}
                    </div>
                  </div>
                )
              })}
            </div>
          </DataStates>
        </div>
      </section>

      <section className="section-padding bg-muted/40">
        <div className="container-wide">
          <div className="mx-auto max-w-4xl overflow-hidden rounded-[2rem] border border-primary/20 bg-card shadow-sm">
            <div className="grid gap-0 lg:grid-cols-2">
              <div className="p-8 sm:p-10">
                <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/8 text-primary">
                  <MessageCircle className="h-6 w-6" />
                </div>
                <h2 className="text-2xl font-bold text-foreground sm:text-3xl">
                  {t('cta.title')}
                </h2>
                <p className="mt-3 text-sm leading-7 text-muted-foreground">
                  {t('cta.description')}
                </p>
                <div className="mt-6 flex flex-col gap-3 sm:flex-row">
                  <Link href="/contact">
                    <Button size="lg" className="h-11 w-full px-6 font-semibold sm:w-auto">
                      <Mail className="mr-2 h-4 w-4" />
                      {t('cta.contact')}
                    </Button>
                  </Link>
                  <Link href="/services/upcoming-courses">
                    <Button
                      size="lg"
                      variant="outline"
                      className="h-11 w-full px-6 font-semibold sm:w-auto"
                    >
                      <BookOpen className="mr-2 h-4 w-4" />
                      {t('cta.browse')}
                    </Button>
                  </Link>
                </div>
              </div>

              <div className="flex flex-col justify-center gap-4 border-t border-border/60 bg-muted/30 p-8 sm:p-10 lg:border-l lg:border-t-0">
                <p className="text-xs font-semibold uppercase tracking-[0.2em] text-accent">
                  {t('cta.other')}
                </p>
                {[
                  {
                    icon: Phone,
                    label: t('cta.call'),
                    value: contact.phone,
                    href: phoneToTel(contact.phone),
                  },
                  {
                    icon: Mail,
                    label: t('cta.email'),
                    value: contact.email,
                    href: `mailto:${contact.email}`,
                  },
                  {
                    icon: ArrowRight,
                    label: t('cta.proposal'),
                    value: t('cta.proposalValue'),
                    href: '/contact?subject=proposal',
                  },
                ].map(({ icon: Icon, label, value, href }) => (
                  <a
                    key={label}
                    href={href}
                    className="group flex items-center gap-4 rounded-xl border border-primary/20 bg-card px-4 py-3 transition-all hover:border-primary/30 hover:shadow-sm"
                  >
                    <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/8 text-primary">
                      <Icon className="h-4 w-4" />
                    </div>
                    <div className="min-w-0">
                      <p className="text-xs font-semibold uppercase tracking-[0.12em] text-muted-foreground">
                        {label}
                      </p>
                      <p className="truncate text-sm font-semibold text-foreground">{value}</p>
                    </div>
                    <ArrowRight className="ml-auto h-4 w-4 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
                  </a>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  )
}