"use client";

import { useEffect, useRef, useState } from "react";
import { Button } from "@/components/ui/button";
import { ArrowRight, CalendarDays, Rocket, X } from "lucide-react";
import type { Lang } from "@/app/page";

const REGISTER_URL = "https://agnet.taijiaicloud.com/login/";
const LAUNCH_URL = "/launch";

const copy = {
  en: {
    eyebrow: "Full launch",
    title: "Heicode goes fully live on June 5, 2026.",
    desc: "Register now and follow launch readiness for Client, Manager, Agnet Swarm, resource binding and audit.",
    date: "June 5, 2026",
    primary: "Register now",
    secondary: "Launch details",
    close: "Close launch announcement",
  },
  zh: {
    eyebrow: "全面上线",
    title: "Heicode 将于 2026年6月5日全面上线。",
    desc: "现在可以注册，并查看客户端、Manager、Agnet 蜂群、资源绑定和审计能力的上线准备。",
    date: "2026年6月5日",
    primary: "立即注册",
    secondary: "查看上线详情",
    close: "关闭上线公告",
  },
} satisfies Record<Lang, {
  eyebrow: string;
  title: string;
  desc: string;
  date: string;
  primary: string;
  secondary: string;
  close: string;
}>;

export function LaunchPopup({ lang }: { lang: Lang }) {
  const [open, setOpen] = useState(true);
  const previousLang = useRef(lang);
  const t = copy[lang];

  useEffect(() => {
    if (previousLang.current !== "zh" && lang === "zh") {
      setOpen(true);
    }
    previousLang.current = lang;
  }, [lang]);

  if (!open) {
    return null;
  }

  return (
    <div className="fixed inset-0 z-[70] flex items-center justify-center bg-foreground/55 px-4 py-8 backdrop-blur-sm">
      <div className="relative w-full max-w-2xl overflow-hidden rounded-[2rem] border border-border bg-background p-6 shadow-2xl sm:p-8">
        <button
          type="button"
          aria-label={t.close}
          onClick={() => setOpen(false)}
          className="absolute right-4 top-4 rounded-full border border-border bg-card/80 p-2 text-muted-foreground transition-colors hover:text-foreground"
        >
          <X className="h-5 w-5" />
        </button>

        <div className="pointer-events-none absolute -right-24 -top-24 h-56 w-56 rounded-full bg-primary/15 blur-3xl" />
        <div className="pointer-events-none absolute -bottom-24 -left-24 h-56 w-56 rounded-full bg-accent/15 blur-3xl" />

        <div className="relative">
          <div className="mb-5 inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/10 px-4 py-2 text-sm font-bold text-primary">
            <Rocket className="h-4 w-4" />
            {t.eyebrow}
          </div>
          <div className="mb-6 flex w-fit items-center gap-2 rounded-2xl bg-foreground px-4 py-3 text-background">
            <CalendarDays className="h-5 w-5 text-primary" />
            <span className="text-sm font-black tracking-wide">{t.date}</span>
          </div>

          <h2 className="max-w-xl text-3xl font-black leading-tight tracking-[-0.04em] sm:text-5xl">
            {t.title}
          </h2>
          <p className="mt-4 max-w-xl text-base leading-7 text-muted-foreground sm:text-lg">
            {t.desc}
          </p>

          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
            <Button className="h-12 rounded-full bg-primary px-7 text-primary-foreground hover:bg-primary/90" asChild>
              <a href={REGISTER_URL} target="_blank" rel="noreferrer">
                {t.primary}
                <ArrowRight className="h-4 w-4" />
              </a>
            </Button>
            <Button variant="outline" className="h-12 rounded-full bg-card/50 px-7" asChild>
              <a href={LAUNCH_URL}>{t.secondary}</a>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}