import Link from "next/link";
import { Bot, ShieldCheck } from "lucide-react";
import { LanguageToggle } from "@/components/language-toggle";
import { LoginForm } from "@/components/auth/login-form";
import { Card } from "@/components/ui";
import { getLocale } from "@/lib/i18n";

const copy = {
  en: {
    title: "Admin login",
    subtitle: "Access the wakelai.com operator console for customers, provisioning, billing, and runtime health.",
    back: "Back to website",
    note: "Use an operator account. Add ADMIN_EMAILS in env to restrict admin access to selected emails."
  },
  ar: {
    title: "دخول الأدمن",
    subtitle: "ادخل إلى لوحة تشغيل wakelai.com لإدارة العملاء والتشغيل والفوترة وصحة النسخ.",
    back: "العودة للموقع",
    note: "استخدم حساب المشغل. أضف ADMIN_EMAILS في env لتقييد دخول الأدمن على إيميلات محددة."
  }
} as const;

export default async function AdminLoginPage() {
  const locale = await getLocale();
  const t = copy[locale];

  return (
    <main className="grid min-h-screen bg-slate-950 text-white lg:grid-cols-[0.95fr_1.05fr]">
      <section className="flex min-h-[40vh] flex-col justify-between overflow-hidden border-b border-white/10 p-8 lg:border-b-0 lg:border-r">
        <div className="flex items-center justify-between">
          <Link href="/" className="flex items-center gap-3">
            <span className="flex h-10 w-10 items-center justify-center rounded-md bg-white text-slate-950">
              <Bot size={21} />
            </span>
            <span className="font-black">wakelai.com</span>
          </Link>
          <LanguageToggle locale={locale} />
        </div>
        <div className="relative z-10 max-w-xl py-12">
          <span className="inline-flex items-center gap-2 rounded-full border border-emerald-400/30 bg-emerald-400/10 px-4 py-2 text-sm font-bold text-emerald-200">
            <ShieldCheck size={16} />
            Operator console
          </span>
          <h1 className="mt-8 text-5xl font-black leading-tight">{t.title}</h1>
          <p className="mt-5 text-lg leading-8 text-slate-300">{t.subtitle}</p>
        </div>
        <Link href="/" className="text-sm font-bold text-slate-300 hover:text-white">
          {t.back}
        </Link>
      </section>
      <section className="flex items-center justify-center p-6">
        <Card className="w-full max-w-md border-slate-800 bg-white text-slate-950">
          <h2 className="text-2xl font-black">{t.title}</h2>
          <p className="mt-2 text-sm leading-6 text-slate-600">{t.note}</p>
          <div className="mt-6">
            <LoginForm locale={locale} callbackUrl="/admin" />
          </div>
        </Card>
      </section>
    </main>
  );
}