'use client'

import { useState } from 'react'
import { useAuthStore } from '@/store/authStore'
import { useTranslations } from 'next-intl'
import Navbar from './Navbar'
import Footer from './Footer'
import SearchSection, { ScrapeResult } from './SearchSection'
import SearchResults from './SearchResults'

const FAQ_KEYS = [
  'notReturning',
  'differentPrice',
  'multiCountry',
  'platformsSupported',
  'changePlan',
  'stuckSearch',
] as const

const FEATURE_KEYS = [
  'compareCountries',
  'allPlatforms',
  'desktopVsMobile',
  'realPrices',
  'searchHistory',
  'private',
] as const

const FEATURE_ICONS: Record<string, string> = {
  compareCountries:
    'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 004 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064',
  allPlatforms: 'M4 6h16M4 10h16M4 14h16M4 18h16',
  desktopVsMobile:
    'M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z',
  realPrices: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
  searchHistory: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z',
  private:
    'M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z',
}

export default function HomeAuthGate() {
  const [results, setResults] = useState<ScrapeResult[]>([])
  const [openFaq, setOpenFaq] = useState<number | null>(null)
  const { isAuthenticated, hasHydrated } = useAuthStore()
  const th = useTranslations('pages.home')
  const thero = useTranslations('hero')

  if (!isAuthenticated || !hasHydrated) return null

  return (
    <div className="fixed inset-0 z-50 bg-white overflow-auto flex flex-col">
      <Navbar />
      <main className="flex-1 pt-[57px]">
        {/* Compact hero */}
        <div className="max-w-6xl mx-auto px-4 sm:px-6 pt-8 md:pt-20 pb-2">
          <h1 className="text-3xl font-bold text-gray-900 leading-tight mb-3">
            {thero('headingPrefix')}{' '}
            <span className="gradient-text">{thero('headingSpan')}</span>
          </h1>
          <p className="text-gray-500 text-base leading-relaxed max-w-2xl">
            {thero.rich('loggedInSubheading', {
              highlight: () => (
                <span className="text-brand-purple font-medium">
                  {thero('loggedInSubheadingHighlight')}
                </span>
              ),
            })}
          </p>
        </div>

        <SearchSection onResults={setResults} results={results} compact />
        <SearchResults results={results} />

        {/* Why CahooTravel */}
        <section className="py-16 bg-gray-50 border-t border-gray-100">
          <div className="max-w-6xl mx-auto px-4 sm:px-6">
            <h2 className="text-2xl font-bold text-gray-900 mb-2">{th('whyCahooHeading')}</h2>
            <p className="text-gray-500 text-sm mb-10 max-w-xl">{th('whyCahooSubheading')}</p>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {FEATURE_KEYS.map(key => (
                <div
                  key={key}
                  className="bg-white rounded-2xl border border-gray-100 p-6 flex flex-col gap-3"
                >
                  <div className="w-10 h-10 rounded-xl bg-purple-50 flex items-center justify-center">
                    <svg
                      className="w-5 h-5 text-brand-purple"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      strokeWidth={1.8}
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        d={FEATURE_ICONS[key]}
                      />
                    </svg>
                  </div>
                  <h3 className="text-sm font-semibold text-gray-900">
                    {th(`features.${key}.title` as Parameters<typeof th>[0])}
                  </h3>
                  <p className="text-sm text-gray-500 leading-relaxed">
                    {th(`features.${key}.body` as Parameters<typeof th>[0])}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* FAQ */}
        <section className="py-16 bg-white border-t border-gray-100">
          <div className="max-w-3xl mx-auto px-6">
            <h2 className="text-2xl font-bold text-gray-900 mb-2">{th('faqHeading')}</h2>
            <p className="text-gray-500 text-sm mb-8">
              {th('faqSupport')}{' '}
              <a href="/support" className="text-brand-purple hover:underline">
                {th('faqSupportLink')}
              </a>
            </p>
            <div className="flex flex-col divide-y divide-gray-100">
              {FAQ_KEYS.map((key, i) => (
                <div key={key} className="py-4">
                  <button
                    onClick={() => setOpenFaq(openFaq === i ? null : i)}
                    className="w-full flex items-center justify-between gap-4 text-left group"
                  >
                    <span className="text-sm font-medium text-gray-900 group-hover:text-brand-purple transition-colors">
                      {th(`faqs.${key}.q` as Parameters<typeof th>[0])}
                    </span>
                    <svg
                      className={`w-4 h-4 text-gray-400 shrink-0 transition-transform ${openFaq === i ? 'rotate-180' : ''}`}
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      strokeWidth={2}
                    >
                      <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
                    </svg>
                  </button>
                  {openFaq === i && (
                    <p className="mt-3 text-sm text-gray-500 leading-relaxed pr-4 sm:pr-8">
                      {th(`faqs.${key}.a` as Parameters<typeof th>[0])}
                    </p>
                  )}
                </div>
              ))}
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  )
}