import { useMemo, useState } from "react"
import { Link, useNavigate } from "react-router-dom"
import {
  ArrowRight,
  BarChart3,
  CheckCircle2,
  Clock3,
  Command,
  Globe2,
  Layers3,
  Moon,
  ShieldCheck,
  Sparkles,
  Sun,
  TimerReset,
  Waypoints,
} from "lucide-react"
import { toast } from "sonner"

import { Button } from "../components/ui/button"
import { useTheme } from "../components/ThemeProvider"
import { useTranslation } from "../hooks/useTranslation"
import { cn } from "../lib/utils"
import { startDemo } from "../api/demo"
import { setDemoSessionMeta, setSessionTokens } from "../lib/session"

const formatNumber = (value: number, lang: "en" | "fa") =>
  new Intl.NumberFormat(lang === "fa" ? "fa-IR" : "en-US").format(value)

export default function Landing() {
  const navigate = useNavigate()
  const { t, lang, setLanguage } = useTranslation()
  const { theme, setTheme } = useTheme()
  const [isStartingDemo, setIsStartingDemo] = useState(false)

  const isAuthenticated = typeof window !== "undefined" && !!localStorage.getItem("accessToken")
  const isDarkMode =
    theme === "dark" ||
    (theme === "system" && document.documentElement.classList.contains("dark"))

  const metrics = useMemo(
    () => [
      {
        value: lang === "fa" ? "۹۸٪" : "98%",
        label: t.landing.metrics.capture,
        tone: "from-cyan-500/20 to-cyan-500/5 text-cyan-700 dark:text-cyan-200",
      },
      {
        value: lang === "fa" ? "۴.۶×" : "4.6x",
        label: t.landing.metrics.visibility,
        tone: "from-emerald-500/20 to-emerald-500/5 text-emerald-700 dark:text-emerald-200",
      },
      {
        value: lang === "fa" ? "< ۲m" : "< 2m",
        label: t.landing.metrics.decision,
        tone: "from-amber-500/20 to-amber-500/5 text-amber-700 dark:text-amber-200",
      },
    ],
    [lang, t.landing.metrics],
  )

  const capabilityCards = useMemo(
    () => [
      {
        icon: TimerReset,
        title: t.landing.capabilities.time.title,
        description: t.landing.capabilities.time.description,
      },
      {
        icon: BarChart3,
        title: t.landing.capabilities.reports.title,
        description: t.landing.capabilities.reports.description,
      },
      {
        icon: ShieldCheck,
        title: t.landing.capabilities.control.title,
        description: t.landing.capabilities.control.description,
      },
    ],
    [t.landing.capabilities],
  )

  const workflow = useMemo(
    () => [
      t.landing.workflow.capture,
      t.landing.workflow.structure,
      t.landing.workflow.improve,
    ],
    [t.landing.workflow],
  )

  const ctaTarget = isAuthenticated ? "/timesheet" : "/auth"

  const handleStartDemo = async () => {
    if (isStartingDemo) return
    setIsStartingDemo(true)
    try {
      const demo = await startDemo()
      setSessionTokens(demo.access, demo.refresh)
      setDemoSessionMeta(demo.expires_at)
      toast.success(t.demo?.started || "Demo environment is ready.")
      navigate("/timesheet")
    } catch (error) {
      console.error(error)
      toast.error(t.demo?.startError || "Could not start the demo environment.")
    } finally {
      setIsStartingDemo(false)
    }
  }

  return (
    <div className="scroll-smooth min-h-screen overflow-x-hidden bg-[radial-gradient(circle_at_top,#e0f2fe_0%,#f8fafc_36%,#eef2ff_100%)] text-slate-950 dark:bg-[radial-gradient(circle_at_top,#082f49_0%,#020617_40%,#020617_100%)] dark:text-slate-50">
      <div className="landing-aurora pointer-events-none fixed inset-0 opacity-80" />
      <div className="landing-hero-grid pointer-events-none fixed inset-0 opacity-70 dark:opacity-40" />
      <div className="pointer-events-none fixed left-[-12rem] top-24 h-80 w-80 rounded-full bg-cyan-400/20 blur-3xl dark:bg-cyan-500/10" />
      <div className="pointer-events-none fixed right-[-10rem] top-44 h-72 w-72 rounded-full bg-amber-300/25 blur-3xl dark:bg-amber-400/10" />

      <div className="relative mx-auto flex min-h-screen max-w-7xl flex-col px-4 pb-14 pt-5 sm:px-6 lg:px-8">
        <header className="animate-landing-rise flex items-center justify-between rounded-full border border-white/70 bg-white/75 px-4 py-3 shadow-[0_20px_60px_-36px_rgba(15,23,42,0.45)] backdrop-blur-xl dark:border-white/10 dark:bg-slate-950/55">
          <button
            type="button"
            onClick={() => navigate("/")}
            className="inline-flex items-center gap-3 rounded-full px-2 py-1 text-left"
          >
            <span className="flex h-10 w-10 items-center justify-center rounded-2xl bg-slate-950 text-white shadow-lg shadow-cyan-500/20 dark:bg-white dark:text-slate-950">
              <Command className="h-5 w-5" />
            </span>
            <span>
              <span className="block text-lg font-semibold">{t.title}</span>
            </span>
          </button>

          <div className="hidden items-center gap-2 md:flex">
            <Link to="/" className="rounded-ful px-4 py-2 text-sm text-white shadow-sm font-bold">
              {lang === "fa" ? "خانه" : "Home"}
            </Link>
            <Link to="/about" className="rounded-full px-4 py-2 text-sm font-medium text-slate-600 transition dark:text-slate-200 dark:hover:text-white">
              {t.landing.nav.about}
            </Link>
          </div>

          <div className="flex items-center gap-2">
            <button
              type="button"
              onClick={() => setLanguage(lang === "fa" ? "en" : "fa")}
              className="inline-flex h-11 items-center gap-2 rounded-full border border-slate-200/80 bg-white/80 px-4 text-sm font-medium text-slate-700 transition hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-950/80 dark:text-slate-200 dark:hover:bg-slate-900"
            >
              <Globe2 className="h-4 w-4" />
              {lang === "fa" ? t.landing.actions.switchToEnglish : t.landing.actions.switchToPersian}
            </button>
            <button
              type="button"
              onClick={() => setTheme(isDarkMode ? "light" : "dark")}
              className="inline-flex h-11 w-11 items-center justify-center rounded-full border border-slate-200/80 bg-white/80 text-slate-700 transition hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-950/80 dark:text-slate-200 dark:hover:bg-slate-900"
              aria-label={isDarkMode ? t.lightMode : t.darkMode}
            >
              {isDarkMode ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
            </button>
          </div>
        </header>

        <section className="relative grid flex-1 items-start items-center gap-10 py-12 lg:grid-cols-[1.08fr_0.92fr] lg:py-20">
          <div className="space-y-8">
            <div className="animate-landing-rise [animation-delay:120ms]">
              <div className="mb-5 inline-flex items-center gap-2 rounded-full border border-cyan-200/70 bg-white/75 px-4 py-2 text-sm font-medium text-cyan-900 shadow-sm backdrop-blur dark:border-cyan-500/20 dark:bg-cyan-500/10 dark:text-cyan-100">
                <Sparkles className="h-4 w-4" />
                {t.landing.eyebrow}
              </div>
              <h1 className="max-w-4xl text-4xl font-semibold leading-[1.1] text-slate-950 sm:text-4xl lg:text-5xl 2xl:text-6xl dark:text-white">
                {t.landing.hero.titleTop}
                <span className="mt-4 pb-4 landing-shimmer block bg-[linear-gradient(120deg,#0f172a_15%,#0891b2_48%,#0f766e_78%,#0f172a_100%)] bg-clip-text text-transparent dark:bg-[linear-gradient(120deg,#ffffff_18%,#67e8f9_48%,#2dd4bf_78%,#ffffff_100%)]">
                  {t.landing.hero.titleAccent}
                </span>
              </h1>
              <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-600 dark:text-slate-300 sm:text-xl">
                {t.landing.hero.description}
              </p>
            </div>

            <div className="animate-landing-rise flex flex-col gap-3 sm:flex-row [animation-delay:220ms]">
              <Button
                onClick={() => navigate(ctaTarget)}
                className="h-14 rounded-full bg-slate-950 px-7 text-base text-white shadow-[0_30px_80px_-28px_rgba(8,145,178,0.45)] hover:bg-slate-800 dark:bg-cyan-400 dark:text-slate-950 dark:hover:bg-cyan-300"
              >
                {isAuthenticated ? t.landing.actions.openWorkspace : t.landing.actions.startNow}
                <ArrowRight className={cn("ms-2 h-4 w-4", lang === "fa" && "rtl:rotate-180")} />
              </Button>
              <button
                type="button"
                onClick={handleStartDemo}
                disabled={isStartingDemo}
                className="inline-flex h-14 items-center justify-center rounded-full border border-slate-200 bg-white/85 px-7 text-base font-medium text-slate-800 shadow-sm backdrop-blur transition hover:bg-white disabled:cursor-not-allowed disabled:opacity-70 dark:border-slate-800 dark:bg-slate-950/70 dark:text-slate-100 dark:hover:bg-slate-900"
              >
                {isStartingDemo ? t.demo?.starting || "Preparing demo..." : t.landing.actions.watchDemo}
              </button>
            </div>

            <div className="animate-landing-rise grid gap-3 sm:grid-cols-3 [animation-delay:320ms]">
              {metrics.map((metric) => (
                <div
                  key={metric.label}
                  className={cn(
                    "rounded-3xl border border-white/70 bg-gradient-to-br p-5 shadow-[0_28px_70px_-40px_rgba(15,23,42,0.55)] backdrop-blur-lg dark:border-white/10 dark:bg-slate-950/60",
                    metric.tone,
                  )}
                >
                  <div className="text-3xl font-semibold tracking-[-0.04em]">{metric.value}</div>
                  <div className="mt-2 text-sm font-medium text-slate-600 dark:text-slate-300">{metric.label}</div>
                </div>
              ))}
            </div>

            <div className="animate-landing-rise flex flex-wrap items-center gap-4 text-sm text-slate-500 dark:text-slate-400 [animation-delay:420ms]">
              <span className="inline-flex items-center gap-2">
                <CheckCircle2 className="h-4 w-4 text-emerald-500" />
                {t.landing.trust.first}
              </span>
              <span className="inline-flex items-center gap-2">
                <CheckCircle2 className="h-4 w-4 text-emerald-500" />
                {t.landing.trust.second}
              </span>
              <span className="inline-flex items-center gap-2">
                <CheckCircle2 className="h-4 w-4 text-emerald-500" />
                {t.landing.trust.third}
              </span>
            </div>
          </div>

          <div id="demo" className="relative animate-landing-rise [animation-delay:180ms]">
            <div className="animate-landing-float absolute -left-6 top-10 hidden rounded-3xl border border-white/60 bg-white/80 p-4 shadow-[0_24px_70px_-34px_rgba(8,145,178,0.6)] backdrop-blur-xl lg:block dark:border-white/10 dark:bg-slate-950/70">
              <div className="mb-3 flex items-center gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-cyan-500/15 text-cyan-700 dark:text-cyan-200">
                  <Clock3 className="h-5 w-5" />
                </div>
                <div>
                  <div className="text-xs uppercase tracking-[0.18em] text-slate-400">{t.landing.demo.timerTag}</div>
                  <div className="text-sm font-semibold text-slate-900 dark:text-white">{t.landing.demo.timerTitle}</div>
                </div>
              </div>
              <div className="text-3xl font-semibold tracking-[-0.05em] text-slate-950 dark:text-white">
                {lang === "fa" ? "۰۲:۴۶:۱۸" : "02:46:18"}
              </div>
              <div className="mt-2 text-sm text-slate-500 dark:text-slate-400">{t.landing.demo.timerText}</div>
            </div>

            <div className="relative overflow-hidden rounded-[2rem] border border-white/70 bg-white/80 p-4 shadow-[0_45px_110px_-48px_rgba(15,23,42,0.6)] backdrop-blur-2xl dark:border-white/10 dark:bg-slate-950/70 sm:p-6">
              <div className="mb-5 flex items-center justify-between">
                <div>
                  <div className="text-xs uppercase tracking-[0.22em] text-slate-400 dark:text-slate-500">
                    {t.landing.demo.panelLabel}
                  </div>
                  <div className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-slate-950 dark:text-white">
                    {t.landing.demo.panelTitle}
                  </div>
                </div>
                <div className="rounded-full border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm font-semibold text-emerald-700 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-200">
                  {lang === "fa" ? "زنده" : "Live"}
                </div>
              </div>

              <div className="grid gap-4 lg:grid-cols-[1.15fr_0.85fr]">
                <div className="space-y-4">
                  <div className="rounded-[1.5rem] border border-slate-200/80 bg-slate-950 p-5 text-white shadow-inner dark:border-slate-800">
                    <div className="flex flex-wrap items-center justify-between gap-3">
                      <div>
                        <div className="text-xs uppercase tracking-[0.2em] text-cyan-200/70">{t.landing.demo.runningCard}</div>
                        <div className="mt-2 text-xl font-semibold">{t.landing.demo.currentTask}</div>
                        <div className="mt-2 text-sm text-slate-300">{t.landing.demo.currentTaskMeta}</div>
                      </div>
                      <div className="rounded-3xl bg-white/10 px-4 py-3 text-right backdrop-blur">
                        <div className="text-xs uppercase tracking-[0.18em] text-slate-300">{t.landing.demo.billableLabel}</div>
                        <div className="mt-2 text-2xl font-semibold">{lang === "fa" ? "۹۵ دلار" : "$95"}</div>
                      </div>
                    </div>
                    <div className="mt-5 h-2 overflow-hidden rounded-full bg-white/10">
                      <div className="h-full w-[78%] rounded-full bg-[linear-gradient(90deg,#67e8f9,#14b8a6)]" />
                    </div>
                  </div>

                  <div className="grid gap-4 sm:grid-cols-2">
                    <div className="rounded-[1.5rem] border border-slate-200/80 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                      <div className="flex items-center gap-2 text-sm font-semibold text-slate-900 dark:text-white">
                        <BarChart3 className="h-4 w-4 text-cyan-500" />
                        {t.landing.demo.reportCard}
                      </div>
                      <div className="mt-4 flex h-32 items-end gap-2">
                        {[34, 56, 48, 72, 65, 88, 76].map((height, index) => (
                          <div
                            key={height}
                            className="flex-1 rounded-t-2xl bg-[linear-gradient(180deg,#67e8f9_0%,#0f766e_100%)] opacity-90"
                            style={{
                              height: `${height}%`,
                              animationDelay: `${index * 120}ms`,
                            }}
                          />
                        ))}
                      </div>
                    </div>

                    <div className="rounded-[1.5rem] border border-slate-200/80 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                      <div className="flex items-center gap-2 text-sm font-semibold text-slate-900 dark:text-white">
                        <Waypoints className="h-4 w-4 text-amber-500" />
                        {t.landing.demo.opsCard}
                      </div>
                      <div className="mt-4 space-y-3">
                        {[82, 63, 91].map((value, index) => (
                          <div key={value}>
                            <div className="mb-2 flex items-center justify-between text-xs text-slate-500 dark:text-slate-400">
                              <span>{t.landing.demo.opsLabels[index]}</span>
                              <span>{formatNumber(value, lang)}%</span>
                            </div>
                            <div className="h-2 rounded-full bg-slate-100 dark:bg-slate-800">
                              <div
                                className="h-full rounded-full bg-[linear-gradient(90deg,#f59e0b,#f97316)]"
                                style={{ width: `${value}%` }}
                              />
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>

                <div className="space-y-4">
                  <div className="rounded-[1.5rem] border border-slate-200/80 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                    <div className="flex items-center gap-2 text-sm font-semibold text-slate-900 dark:text-white">
                      <Layers3 className="h-4 w-4 text-violet-500" />
                      {t.landing.demo.logCard}
                    </div>
                    <div className="mt-4 space-y-3">
                      {t.landing.demo.logItems.map((item: { title: string; meta: string }, index: number) => (
                        <div key={item.title} className="rounded-2xl border border-slate-200 bg-slate-50 p-3 dark:border-slate-800 dark:bg-slate-950">
                          <div className="flex items-start justify-between gap-3">
                            <div>
                              <div className="text-sm font-medium text-slate-900 dark:text-white">{item.title}</div>
                              <div className="mt-1 text-xs text-slate-500 dark:text-slate-400">{item.meta}</div>
                            </div>
                            <div className={cn(
                              "mt-0.5 h-2.5 w-2.5 rounded-full",
                              index === 0 ? "bg-emerald-500" : index === 1 ? "bg-cyan-500" : "bg-amber-500",
                            )} />
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>

                  <div className="rounded-[1.5rem] border border-slate-200/80 bg-slate-950 p-4 text-white shadow-inner dark:border-slate-800">
                    <div className="text-xs uppercase tracking-[0.18em] text-slate-400">{t.landing.demo.outcomeTag}</div>
                    <div className="mt-3 text-4xl font-semibold tracking-[-0.05em]">{lang === "fa" ? "۳۶٪" : "36%"}</div>
                    <div className="mt-2 text-sm text-slate-300">{t.landing.demo.outcomeText}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section id="features" className="grid gap-4 py-8 md:grid-cols-3">
          {capabilityCards.map(({ icon: Icon, title, description }, index) => (
            <div
              key={title}
              className="animate-landing-rise rounded-[2rem] border border-white/70 bg-white/80 p-6 shadow-[0_30px_80px_-50px_rgba(15,23,42,0.6)] backdrop-blur-xl dark:border-white/10 dark:bg-slate-950/65"
              style={{ animationDelay: `${index * 120}ms` }}
            >
              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-950 text-white dark:bg-cyan-400 dark:text-slate-950">
                <Icon className="h-5 w-5" />
              </div>
              <h2 className="mt-5 text-2xl font-semibold tracking-[-0.04em] text-slate-950 dark:text-white">{title}</h2>
              <p className="mt-3 text-base leading-7 text-slate-600 dark:text-slate-300">{description}</p>
            </div>
          ))}
        </section>

        <section id="workflow" className="grid gap-6 py-8 lg:grid-cols-[0.9fr_1.1fr]">
          <div className="rounded-[2rem] border border-white/70 bg-white/80 p-7 shadow-[0_30px_80px_-50px_rgba(15,23,42,0.6)] backdrop-blur-xl dark:border-white/10 dark:bg-slate-950/65">
            <div className="text-sm font-semibold uppercase tracking-[0.2em] text-cyan-700 dark:text-cyan-300">
              {t.landing.workflowTag}
            </div>
            <h2 className="mt-4 text-4xl font-semibold tracking-[-0.05em] text-slate-950 dark:text-white">
              {t.landing.workflowTitle}
            </h2>
            <p className="mt-4 max-w-xl text-lg leading-8 text-slate-600 dark:text-slate-300">
              {t.landing.workflowDescription}
            </p>
          </div>

          <div className="grid gap-4 md:grid-cols-3">
            {workflow.map((item, index) => (
              <div
                key={item}
                className="rounded-[2rem] border border-white/70 bg-gradient-to-br from-white/95 to-slate-50/80 p-6 shadow-[0_26px_70px_-48px_rgba(15,23,42,0.65)] backdrop-blur-xl dark:border-white/10 dark:from-slate-950/80 dark:to-slate-900/55"
              >
                <div className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500">
                  {lang === "fa" ? `گام ${formatNumber(index + 1, lang)}` : `Step ${index + 1}`}
                </div>
                <div className="mt-12 text-xl font-semibold leading-8 tracking-[-0.03em] text-slate-950 dark:text-white">
                  {item}
                </div>
              </div>
            ))}
          </div>
        </section>

        <section className="py-8">
          <div className="relative overflow-hidden rounded-[2.5rem] border border-slate-950/5 bg-slate-950 px-6 py-10 text-white shadow-[0_40px_100px_-40px_rgba(15,23,42,0.8)] dark:border-white/10 sm:px-10">
            <div className="flex flex-row pointer-events-none absolute inset-y-0 right-0 w-[45%] bg-[radial-gradient(circle_at_top_right,rgba(34,211,238,0.35),transparent_55%),radial-gradient(circle_at_bottom_right,rgba(245,158,11,0.22),transparent_45%)]" />
              <div className="relative flex flex-col lg:flex-row gap-6 justify-between">
                <div className="max-w-4xl">
                  <div className="text-sm font-semibold uppercase tracking-[0.2em] text-cyan-300">{t.landing.finalCtaTag}</div>
                  <h2 className="mt-4 text-4xl font-semibold leading-[1.1] tracking-[-0.05em] sm:text-5xl">
                    {t.landing.finalCtaTitle}
                  </h2>
                  <p className="mt-4 text-lg leading-8 text-slate-300">{t.landing.finalCtaDescription}</p>
                </div>
                <div className="flex flex-row lg:flex-col gap-3">
                  <Button
                    onClick={() => navigate(ctaTarget)}
                    className="h-14 rounded-full bg-white px-7 text-base font-semibold text-slate-950 hover:bg-slate-100"
                  >
                    {isAuthenticated ? t.landing.actions.openWorkspace : t.landing.actions.startNow}
                  </Button>
                  <Button
                    variant="outline"
                    asChild
                    className="h-14 rounded-full border-white/20 bg-white/5 px-7 text-base text-white hover:bg-white/10 dark:border-white/20 dark:bg-white/5 dark:text-white dark:hover:bg-white/10"
                  >
                    <Link to="/terms">{t.landing.actions.readTerms}</Link>
                  </Button>
                  <Button
                    variant="outline"
                    asChild
                    className="h-14 rounded-full border-white/20 bg-white/5 px-7 text-base text-white hover:bg-white/10 dark:border-white/20 dark:bg-white/5 dark:text-white dark:hover:bg-white/10"
                  >
                    <Link to="/about">{t.landing.actions.readAbout}</Link>
                  </Button>
                </div>
              </div>
          </div>
        </section>
      </div>
    </div>
  )
}