'use client'

import { motion, AnimatePresence } from 'motion/react'
import {
  ArrowRight, Check, BrainCircuit,
  Network, GraduationCap, Bot, KeyRound
} from 'lucide-react'
import Link from 'next/link'
import Image from 'next/image'
import { useLanguage } from '@/lib/i18n'
import { SUBSCRIPTION_TRIAL_DAYS } from '@/lib/billing/trial-constants'
import { useEffect, useState, type ReactNode } from 'react'
import { useQuery } from '@tanstack/react-query'
import { PublicSiteChrome } from '@/components/public-site-chrome'
import {
  DEFAULT_PRICES,
  annualDiscountPercent,
} from '@/lib/billing/price-catalog'

const ECHO_LINES = ['echo0', 'echo1', 'echo2'] as const

export function LandingPage() {
  const { t } = useLanguage()
  const [billingInterval, setBillingInterval] = useState<'monthly' | 'annual'>('monthly')
  const [echoIndex, setEchoIndex] = useState(0)
  const { data: byokCatalog } = useQuery({
    queryKey: ['public', 'byok-catalog'],
    queryFn: async () => {
      const res = await fetch('/api/public/byok-catalog')
      if (!res.ok) throw new Error('catalog')
      return res.json() as Promise<{ providers: { id: string; name: string }[] }>
    },
    staleTime: 60_000,
  })
  const byokProviders = byokCatalog?.providers ?? []

  useEffect(() => {
    const id = setInterval(() => setEchoIndex((i) => (i + 1) % ECHO_LINES.length), 3200)
    return () => clearInterval(id)
  }, [])

  const trialDays = SUBSCRIPTION_TRIAL_DAYS
  const annualSavePercent = annualDiscountPercent(
    DEFAULT_PRICES.PRO.month.amount,
    DEFAULT_PRICES.PRO.year.amount,
  )
  const PLANS = [
    { key: 'basic', popular: false, hasTrial: false, price: t('landing.pricing.basicPrice'), period: '' },
    {
      key: 'pro',
      popular: true,
      hasTrial: true,
      price: billingInterval === 'monthly' ? t('landing.pricing.proMonthly') : t('landing.pricing.proAnnualMonthly'),
      period: billingInterval === 'monthly' ? t('landing.pricing.perMonth') : t('landing.pricing.perMonthAnnual'),
    },
    {
      key: 'business',
      popular: false,
      hasTrial: true,
      price: billingInterval === 'monthly' ? t('landing.pricing.businessMonthly') : t('landing.pricing.businessAnnualMonthly'),
      period: billingInterval === 'monthly' ? t('landing.pricing.perMonth') : t('landing.pricing.perMonthAnnual'),
    },
    {
      key: 'enterprise',
      popular: false,
      hasTrial: false,
      price: t('landing.pricing.enterprisePrice'),
      period: '',
    },
  ]

  const scrollPublicHash = (hash: string) => {
    const id = hash.replace(/^#/, '')
    const target = document.getElementById(id)
    const root = document.querySelector<HTMLElement>('[data-public-scroll-root]')
    if (!target || !root) return
    const top = target.getBoundingClientRect().top - root.getBoundingClientRect().top + root.scrollTop - 88
    root.scrollTo({ top, behavior: 'smooth' })
  }

  useEffect(() => {
    const hash = window.location.hash
    if (!hash) return
    const id = window.requestAnimationFrame(() => scrollPublicHash(hash))
    return () => window.cancelAnimationFrame(id)
  }, [])

  return (
    <PublicSiteChrome currentPage="home" onHashNavigate={scrollPublicHash}>
      {/* ── HERO ── */}
      <section className="relative min-h-[100dvh] flex flex-col justify-center pt-28 pb-16 px-5 sm:px-8 overflow-hidden">
        {/* Atmosphere — warm, not purple neon */}
        <div className="pointer-events-none absolute inset-0">
          <div className="absolute -top-32 left-1/2 -translate-x-1/2 w-[900px] h-[500px] bg-[#D4A373]/15 blur-[120px] rounded-full" />
          <div className="absolute bottom-0 right-0 w-[500px] h-[400px] bg-[#A47148]/10 blur-[100px] rounded-full" />
          <div
            className="absolute inset-0 opacity-[0.07]"
            style={{
              backgroundImage: 'radial-gradient(circle at 1px 1px, #F4F1EA 1px, transparent 0)',
              backgroundSize: '28px 28px',
            }}
          />
        </div>

        <div className="relative z-10 max-w-5xl mx-auto w-full text-center">
          <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full border border-[#D4A373]/35 bg-[#D4A373]/10 mb-7">
            <BrainCircuit size={14} className="text-[#D4A373]" />
            <span className="text-[12px] tracking-[0.18em] uppercase text-[#D4A373] font-semibold">
              {t('landing.hero.badge')}
            </span>
          </div>

          <p className="text-[13px] tracking-[0.12em] uppercase text-white/70 mb-5 font-medium">
            {t('landing.hero.eyebrow')}
          </p>

          <h1 className="font-serif text-[clamp(2.5rem,7.5vw,5.4rem)] font-medium tracking-tight leading-[1.05] text-[#F4F1EA] mb-6">
            {t('landing.hero.headline')}
            <br />
            <span className="italic text-[#D4A373]">{t('landing.hero.headlineAccent')}</span>
          </h1>

          <p className="max-w-xl mx-auto text-[17px] sm:text-lg text-white/75 leading-relaxed mb-10">
            {t('landing.hero.subtitle')}
          </p>

          <div className="flex flex-col items-center gap-3">
            <Link
              href="/register"
              className="group inline-flex items-center justify-center gap-3 px-9 py-4 rounded-full bg-[#F4F1EA] text-[#0B0A09] text-[15px] font-semibold hover:bg-white transition-all hover:scale-[1.02] shadow-[0_0_40px_-8px_rgba(212,163,115,0.45)]"
            >
              {t('landing.hero.cta')}
              <ArrowRight size={18} className="transition-transform group-hover:translate-x-0.5" />
            </Link>
            <p className="text-[12px] text-white/60">{t('landing.hero.ctaHint')}</p>
          </div>
        </div>

        {/* Product stage */}
        <div className="relative z-10 mt-14 sm:mt-20 max-w-5xl mx-auto w-full">
          <div className="relative rounded-[20px] sm:rounded-[28px] overflow-hidden border border-white/10 shadow-[0_40px_100px_-20px_rgba(0,0,0,0.7)]">
            <div className="absolute inset-0 bg-gradient-to-t from-[#0B0A09] via-transparent to-transparent z-10 pointer-events-none" />
            <Image
              src="/images/workspace-hero.jpg"
              alt={t('landing.hero.imageAlt')}
              width={2000}
              height={1200}
              priority
              className="w-full h-auto object-cover aspect-[16/10] opacity-90"
            />
            {/* Live Memory Echo chip */}
            <div className="absolute bottom-5 left-5 right-5 sm:bottom-8 sm:left-8 sm:right-auto sm:max-w-md z-20">
              <div className="rounded-2xl border border-white/15 bg-[#0B0A09]/85 backdrop-blur-xl p-4 sm:p-5 text-left shadow-2xl">
                <div className="flex items-center gap-2 mb-2">
                  <span className="relative flex h-2 w-2">
                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#D4A373] opacity-60" />
                    <span className="relative inline-flex rounded-full h-2 w-2 bg-[#D4A373]" />
                  </span>
                  <span className="text-[11px] font-semibold uppercase tracking-[0.2em] text-[#D4A373]">
                    {t('landing.hero.echoLive')}
                  </span>
                </div>
                <AnimatePresence mode="wait">
                  <motion.p
                    key={ECHO_LINES[echoIndex]}
                    initial={{ opacity: 0, y: 8 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -8 }}
                    transition={{ duration: 0.35 }}
                    className="text-sm sm:text-[15px] font-serif italic text-[#F4F1EA]/90 leading-relaxed"
                  >
                    {t(`landing.hero.${ECHO_LINES[echoIndex]}`)}
                  </motion.p>
                </AnimatePresence>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Trust strip */}
      <section className="px-5 sm:px-8 py-10 border-y border-white/[0.06]">
        <div className="max-w-5xl mx-auto flex flex-wrap items-center justify-center gap-x-10 gap-y-4 text-[12px] sm:text-[13px] text-white/70 tracking-wide">
          {['trust0', 'trust1', 'trust2', 'trust3'].map((k) => (
            <span key={k} className="flex items-center gap-2">
              <Check size={14} className="text-[#D4A373]" />
              {t(`landing.trust.${k}`)}
            </span>
          ))}
        </div>
      </section>

      {/* Pain → Promise */}
      <section className="px-5 sm:px-8 py-24 sm:py-32">
        <div className="max-w-3xl mx-auto text-center">
          <p className="text-[12px] uppercase tracking-[0.25em] text-[#D4A373] mb-5 font-medium">{t('landing.pain.label')}</p>
          <h2 className="font-serif text-3xl sm:text-5xl tracking-tight leading-[1.15] mb-6">
            {t('landing.pain.title')}
          </h2>
          <p className="text-lg text-white/70 leading-relaxed mb-8">{t('landing.pain.desc')}</p>
          <p className="text-base sm:text-lg font-serif italic text-[#D4A373]/90 leading-relaxed">
            {t('landing.pain.secondBrain')}
          </p>
        </div>
      </section>

      {/* Product moments — large narrative blocks, not wireframe cards */}
      <section id="product" className="px-5 sm:px-8 pb-8">
        <div className="max-w-6xl mx-auto space-y-4">
          <ProductMoment
            id="echo"
            eyebrow={t('landing.moments.echo.eyebrow')}
            title={t('landing.moments.echo.title')}
            desc={t('landing.moments.echo.desc')}
            dark
          >
            <div className="space-y-3 p-2">
              {[0, 1, 2].map((i) => (
                <div
                  key={i}
                  className={`rounded-xl border p-4 ${i === 0 ? 'border-[#D4A373]/40 bg-[#D4A373]/10' : 'border-white/10 bg-white/[0.03]'}`}
                >
                  <p className="text-[11px] uppercase tracking-wider text-[#D4A373] mb-1">
                    {t(`landing.moments.echo.card${i}Label`)}
                  </p>
                  <p className="text-sm text-white/75 font-serif italic leading-relaxed">
                    {t(`landing.moments.echo.card${i}`)}
                  </p>
                </div>
              ))}
            </div>
          </ProductMoment>

          <ProductMoment
            eyebrow={t('landing.moments.dashboard.eyebrow')}
            title={t('landing.moments.dashboard.title')}
            desc={t('landing.moments.dashboard.desc')}
          >
            <div className="grid grid-cols-2 gap-2 p-2">
              {['w0', 'w1', 'w2', 'w3'].map((w) => (
                <div key={w} className="rounded-xl bg-[#0B0A09]/40 border border-black/10 p-4 min-h-[88px]">
                  <p className="text-[13px] font-medium text-[#A47148] mb-2">{t(`landing.moments.dashboard.${w}Label`)}</p>
                  <p className="text-sm font-medium text-[#0B0A09]/80">{t(`landing.moments.dashboard.${w}`)}</p>
                </div>
              ))}
            </div>
          </ProductMoment>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <ProductMoment
              compact
              eyebrow={t('landing.moments.insights.eyebrow')}
              title={t('landing.moments.insights.title')}
              desc={t('landing.moments.insights.desc')}
              dark
            >
              <div className="relative h-36 flex items-center justify-center">
                <Network className="text-[#D4A373]/80" size={48} strokeWidth={1.25} />
                <p className="absolute bottom-2 left-4 text-[13px] font-medium text-white/75">
                  {t('landing.moments.insights.chip')}
                </p>
              </div>
            </ProductMoment>
            <ProductMoment
              compact
              eyebrow={t('landing.moments.revision.eyebrow')}
              title={t('landing.moments.revision.title')}
              desc={t('landing.moments.revision.desc')}
            >
              <div className="rounded-xl bg-white border border-black/5 p-5 mx-2 mb-2">
                <GraduationCap className="text-[#A47148] mb-3" size={22} />
                <p className="font-serif text-[#0B0A09] text-base mb-3">{t('landing.moments.revision.card')}</p>
                <div className="flex gap-2">
                  <span className="flex-1 py-2 rounded-lg bg-[#0B0A09]/5 text-center text-[11px] font-semibold text-[#0B0A09]/50">?</span>
                  <span className="flex-1 py-2 rounded-lg bg-[#0B0A09] text-center text-[13px] font-semibold text-[#F4F1EA]">{t('landing.moments.revision.badge')}</span>
                </div>
              </div>
            </ProductMoment>
          </div>
        </div>
      </section>

      {/* How it works */}
      <section className="px-5 sm:px-8 py-28">
        <div className="max-w-5xl mx-auto">
          <h2 className="font-serif text-3xl sm:text-4xl tracking-tight text-center mb-16">
            {t('landing.how.title')}
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-6">
            {['s0', 's1', 's2'].map((s, i) => (
              <div key={s} className="relative text-center md:text-left">
                <div className="text-[13px] font-semibold text-[#D4A373] mb-4 tracking-widest">0{i + 1}</div>
                <h3 className="font-serif text-xl mb-3">{t(`landing.how.${s}.title`)}</h3>
                <p className="text-sm text-white/70 leading-relaxed">{t(`landing.how.${s}.desc`)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Agents */}
      <section id="agents" className="px-5 sm:px-8 py-28 border-t border-white/[0.06]">
        <div className="max-w-5xl mx-auto">
          <div className="max-w-2xl mb-14">
            <p className="text-[12px] uppercase tracking-[0.25em] text-[#D4A373] mb-4 font-medium">{t('landing.agents.label')}</p>
            <h2 className="font-serif text-3xl sm:text-5xl tracking-tight mb-5">{t('landing.agents.title')}</h2>
            <p className="text-white/70 text-lg leading-relaxed">{t('landing.agents.desc')}</p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
            {(['scraper', 'researcher', 'slideGen', 'monitor', 'diagramGen', 'custom'] as const).map((key) => (
              <div key={key} className="p-6 rounded-2xl border border-white/[0.08] bg-white/[0.03] hover:bg-white/[0.06] transition-colors">
                <Bot size={18} className="text-[#D4A373] mb-4" />
                <h4 className="font-serif text-lg mb-2">{t(`landing.agents.${key}.title`)}</h4>
                <p className="text-sm text-white/70 leading-relaxed">{t(`landing.agents.${key}.desc`)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* BYOK */}
      <section className="px-5 sm:px-8 py-20">
        <div className="max-w-5xl mx-auto rounded-[28px] border border-white/10 bg-gradient-to-br from-[#1a1612] to-[#0B0A09] p-8 sm:p-12 flex flex-col md:flex-row gap-10 items-start">
          <div className="flex-1">
            <div className="flex items-center gap-2 text-[#D4A373] mb-4">
              <KeyRound size={18} />
              <span className="text-[12px] uppercase tracking-[0.2em] font-semibold">{t('landing.byok.label')}</span>
            </div>
            <h3 className="font-serif text-3xl tracking-tight mb-4">{t('landing.byok.title')}</h3>
            <p className="text-white/70 leading-relaxed">{t('landing.byok.desc')}</p>
          </div>
          <div className="w-full md:w-[320px] text-[13px] text-white/70 space-y-4 rounded-2xl border border-white/10 bg-black/40 p-5">
            {byokProviders.length > 0 ? (
              <ul className="grid grid-cols-1 gap-2 text-sm text-[#F4F1EA]">
                {byokProviders.map((p) => (
                  <li key={p.id}>{p.name}</li>
                ))}
              </ul>
            ) : (
              <p className="text-white/70">{t('landing.byok.pointProvider')}</p>
            )}
            <p className="text-[#D4A373]">{t('landing.byok.pointYours')}</p>
          </div>
        </div>
      </section>

      {/* Pricing */}
      <section id="pricing" className="px-5 sm:px-8 py-28 border-t border-white/[0.06]">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="font-serif text-3xl sm:text-5xl tracking-tight mb-4">{t('landing.pricing.title')}</h2>
            <p className="text-white/80 mb-8">{t('landing.pricing.desc')}</p>
            <div className="inline-flex p-1 rounded-full border border-white/15 bg-white/[0.04]">
              <button
                type="button"
                onClick={() => setBillingInterval('monthly')}
                className={`px-5 py-2 rounded-full text-[13px] font-semibold transition-all ${billingInterval === 'monthly' ? 'bg-[#F4F1EA] text-[#0B0A09]' : 'text-white/80'}`}
              >
                {t('landing.pricing.monthly')}
              </button>
              <button
                type="button"
                onClick={() => setBillingInterval('annual')}
                className={`px-5 py-2 rounded-full text-[13px] font-semibold transition-all relative ${billingInterval === 'annual' ? 'bg-[#F4F1EA] text-[#0B0A09]' : 'text-white/80'}`}
              >
                {t('landing.pricing.annual')}
                <span className="absolute -top-3 -right-1 text-[11px] text-[#E8C39A] whitespace-nowrap">
                  {t('landing.pricing.savePercent', { percent: annualSavePercent })}
                </span>
              </button>
            </div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
            {PLANS.map((plan) => (
              <div
                key={plan.key}
                className={`rounded-2xl border p-6 flex flex-col ${
                  plan.popular
                    ? 'border-[#D4A373]/60 bg-[#D4A373]/12'
                    : 'border-white/[0.12] bg-white/[0.04]'
                }`}
              >
                {plan.popular && (
                  <span className="text-[11px] font-bold uppercase tracking-widest text-[#E8C39A] mb-3">
                    {t('landing.pricing.popular')}
                  </span>
                )}
                <h4 className="text-[14px] font-medium tracking-wide text-[#F4F1EA] mb-2">
                  {t(`landing.pricing.${plan.key}.name`)}
                </h4>
                <div className="flex items-baseline gap-1 mb-2">
                  <span className="text-3xl font-serif">{plan.price}</span>
                  {plan.period && <span className="text-sm text-white/80">{plan.period}</span>}
                </div>
                {plan.hasTrial && (
                  <p className="text-[12px] font-semibold text-[#E8C39A] mb-3">
                    {t('landing.pricing.trialBadge', { days: trialDays })}
                  </p>
                )}
                <p className="text-sm text-white/80 mb-6">{t(`landing.pricing.${plan.key}.desc`)}</p>
                <ul className="space-y-2.5 mb-8 flex-1">
                  {plan.hasTrial && (
                    <li className="flex gap-2 text-xs text-[#E8C39A]">
                      <Check size={12} className="text-[#E8C39A] mt-0.5 shrink-0" />
                      {t('landing.pricing.trialFeature', { days: trialDays })}
                    </li>
                  )}
                  {[0, 1, 2, 3, 4, 5].map((j) => {
                    const feat = t(`landing.pricing.${plan.key}.feature${j}`, {
                      count: byokProviders.length || '…',
                    })
                    if (!feat || feat.startsWith('landing.')) return null
                    return (
                      <li key={j} className="flex gap-2 text-sm text-[#F4F1EA]/90">
                        <Check size={12} className="text-[#E8C39A] mt-0.5 shrink-0" />
                        {feat}
                      </li>
                    )
                  })}
                </ul>
                <Link
                  href="/register"
                  className={`py-3 rounded-xl text-center text-[13px] font-semibold transition-colors ${
                    plan.popular
                      ? 'bg-[#F4F1EA] text-[#0B0A09] hover:bg-white'
                      : 'bg-white/15 text-white hover:bg-white/20'
                  }`}
                >
                  {plan.hasTrial
                    ? t('landing.pricing.trialCta', { days: trialDays })
                    : t(`landing.pricing.${plan.key}.cta`)}
                </Link>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="relative px-5 sm:px-8 py-36 text-center overflow-hidden">
        <div className="pointer-events-none absolute inset-0">
          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[300px] bg-[#D4A373]/20 blur-[100px] rounded-full" />
        </div>
        <div className="relative z-10 max-w-2xl mx-auto">
          <BrainCircuit className="mx-auto text-[#D4A373] mb-6" size={32} strokeWidth={1.25} />
          <h2 className="font-serif text-4xl sm:text-6xl tracking-tight leading-tight mb-6">
            {t('landing.cta.title')}
          </h2>
          <p className="text-white/70 text-lg mb-10">{t('landing.cta.desc')}</p>
          <Link
            href="/register"
            className="inline-flex items-center gap-3 px-10 py-4 rounded-full bg-[#F4F1EA] text-[#0B0A09] text-[15px] font-semibold hover:bg-white transition-all hover:scale-[1.02]"
          >
            {t('landing.cta.button')}
            <ArrowRight size={18} />
          </Link>
          <p className="mt-4 text-[12px] text-white/75">{t('landing.hero.ctaHint')}</p>
        </div>
      </section>

    </PublicSiteChrome>
  )
}

function ProductMoment({
  id,
  eyebrow,
  title,
  desc,
  children,
  dark,
  compact,
}: {
  id?: string
  eyebrow: string
  title: string
  desc: string
  children: ReactNode
  dark?: boolean
  compact?: boolean
}) {
  return (
    <motion.div
      id={id}
      initial={{ opacity: 0, y: 28 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: '-60px' }}
      transition={{ duration: 0.55 }}
      className={`rounded-[24px] sm:rounded-[32px] border overflow-hidden ${
        dark
          ? 'bg-[#141210] border-white/[0.08] text-[#F4F1EA]'
          : 'bg-[#EDE8DF] border-transparent text-[#0B0A09]'
      } ${compact ? '' : 'grid grid-cols-1 lg:grid-cols-2'}`}
    >
      <div className={`p-8 sm:p-10 flex flex-col justify-center ${compact ? 'pb-4' : ''}`}>
        <p className={`text-[11px] uppercase tracking-[0.22em] font-semibold mb-3 ${dark ? 'text-[#D4A373]' : 'text-[#A47148]'}`}>
          {eyebrow}
        </p>
        <h3 className="font-serif text-2xl sm:text-3xl tracking-tight mb-3 leading-tight">{title}</h3>
        <p className={`text-[15px] leading-relaxed ${dark ? 'text-white/70' : 'text-[#0B0A09]/75'}`}>{desc}</p>
      </div>
      <div className={`${compact ? 'px-4 pb-6' : 'p-6 sm:p-8'} flex items-center`}>
        <div className="w-full">{children}</div>
      </div>
    </motion.div>
  )
}