"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { motion, AnimatePresence } from "framer-motion";
import { useTheme } from "next-themes";
import { Check, Languages, SunMedium, MoonStar } from "lucide-react";
import { Button } from "@/components/ui/Button";
import { useTranslation } from "@/lib/i18n/LanguageProvider";
import { Language } from "@/lib/i18n/translations";
import { markOnboardingComplete } from "@/lib/onboarding";
import { useAuth } from "@/lib/auth/auth-provider";
import { cn } from "@/lib/cn";

export default function OnboardingPage() {
  const router = useRouter();
  const { user, loading } = useAuth();
  const { language, setLanguage, t } = useTranslation();
  const { setTheme, theme } = useTheme();
  const [step, setStep] = useState<"language" | "theme">("language");
  const [selectedTheme, setSelectedTheme] = useState<"light" | "dark">(
    (theme as "light" | "dark") ?? "dark"
  );

  function finish() {
    setTheme(selectedTheme);
    markOnboardingComplete();
    router.replace(loading ? "/welcome" : user ? "/home" : "/welcome");
  }

  return (
    <div className="relative flex min-h-dvh flex-1 flex-col overflow-hidden bg-ink px-6 pb-safe pt-safe">
      <div className="pointer-events-none absolute -top-16 right-[-40px] h-56 w-56 rounded-full bg-teal/15 blur-3xl" />
      <div className="pointer-events-none absolute top-40 left-[-50px] h-56 w-56 rounded-full bg-gold/15 blur-3xl" />

      <div className="flex flex-1 flex-col justify-center gap-8 py-10">
        <AnimatePresence mode="wait">
          {step === "language" ? (
            <motion.div
              key="language"
              initial={{ opacity: 0, x: 16 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: -16 }}
              transition={{ duration: 0.3 }}
              className="flex flex-col gap-8"
            >
              <div className="flex flex-col items-center gap-3 text-center">
                <span className="flex h-14 w-14 items-center justify-center rounded-3xl bg-gold/15">
                  <Languages size={22} className="text-gold-bright" strokeWidth={2} />
                </span>
                <div>
                  <h1 className="font-display text-xl font-semibold text-paper">
                    {t("onboarding.chooseLanguageTitle")}
                  </h1>
                  <p className="mt-1.5 text-sm text-paper/60">
                    {t("onboarding.chooseLanguageSubtitle")}
                  </p>
                </div>
              </div>

              <div className="flex flex-col gap-3">
                {(["en", "ur"] as Language[]).map((lang) => (
                  <button
                    key={lang}
                    type="button"
                    onClick={() => setLanguage(lang)}
                    className={cn(
                      "flex items-center justify-between rounded-3xl border px-5 py-4 text-left transition-all",
                      language === lang
                        ? "border-gold bg-gold/10 shadow-glow-gold"
                        : "border-white/10 bg-white/[0.04]"
                    )}
                  >
                    <span className="text-base font-semibold text-paper">
                      {lang === "en" ? t("onboarding.english") : t("onboarding.urdu")}
                    </span>
                    {language === lang && (
                      <span className="flex h-6 w-6 items-center justify-center rounded-full bg-gold text-ink">
                        <Check size={14} strokeWidth={3} />
                      </span>
                    )}
                  </button>
                ))}
              </div>
            </motion.div>
          ) : (
            <motion.div
              key="theme"
              initial={{ opacity: 0, x: 16 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: -16 }}
              transition={{ duration: 0.3 }}
              className="flex flex-col gap-8"
            >
              <div className="flex flex-col items-center gap-3 text-center">
                <span className="flex h-14 w-14 items-center justify-center rounded-3xl bg-gold/15">
                  <MoonStar size={22} className="text-gold-bright" strokeWidth={2} />
                </span>
                <div>
                  <h1 className="font-display text-xl font-semibold text-paper">
                    {t("onboarding.chooseThemeTitle")}
                  </h1>
                  <p className="mt-1.5 text-sm text-paper/60">
                    {t("onboarding.chooseThemeSubtitle")}
                  </p>
                </div>
              </div>

              <div className="flex flex-col gap-3">
                {(
                  [
                    { id: "light" as const, icon: SunMedium, label: t("onboarding.light") },
                    { id: "dark" as const, icon: MoonStar, label: t("onboarding.dark") },
                  ]
                ).map((opt) => (
                  <button
                    key={opt.id}
                    type="button"
                    onClick={() => setSelectedTheme(opt.id)}
                    className={cn(
                      "flex items-center justify-between rounded-3xl border px-5 py-4 text-left transition-all",
                      selectedTheme === opt.id
                        ? "border-gold bg-gold/10 shadow-glow-gold"
                        : "border-white/10 bg-white/[0.04]"
                    )}
                  >
                    <span className="flex items-center gap-3">
                      <opt.icon size={18} className="text-paper/70" strokeWidth={2} />
                      <span className="text-base font-semibold text-paper">{opt.label}</span>
                    </span>
                    {selectedTheme === opt.id && (
                      <span className="flex h-6 w-6 items-center justify-center rounded-full bg-gold text-ink">
                        <Check size={14} strokeWidth={3} />
                      </span>
                    )}
                  </button>
                ))}
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>

      <div className="flex flex-col gap-3">
        <Button
          size="lg"
          fullWidth
          onClick={() => (step === "language" ? setStep("theme") : finish())}
        >
          {step === "language" ? t("common.continue") : t("onboarding.getStarted")}
        </Button>
      </div>
    </div>
  );
}