import type { Metadata } from "next";
import { redirect } from "next/navigation";
import { Activity, CalendarClock, FileSpreadsheet, Globe, HeartPulse, History, ShieldCheck } from "lucide-react";
import { getCurrentUser } from "@/server/auth/session";
import { LoginForm } from "./login-form";

export const metadata: Metadata = { title: "Sign in" };

const FEATURES = [
  {
    icon: HeartPulse,
    title: "App health monitoring",
    text: "Every app's health API checked and shown as Working, Slow or Not Working, with response times.",
  },
  {
    icon: Globe,
    title: "Domain expiry tracking",
    text: "Registration and expiry dates from the registries; domains close to expiry listed first and highlighted.",
  },
  {
    icon: CalendarClock,
    title: "Scheduled checks",
    text: "Checks run on their own at the configured time, or on demand with Check Now.",
  },
  {
    icon: History,
    title: "Run history",
    text: "Each check run lists exactly which apps were working and which were not.",
  },
  {
    icon: FileSpreadsheet,
    title: "App management",
    text: "Add, edit and disable apps, or import them in bulk from a spreadsheet.",
  },
  {
    icon: ShieldCheck,
    title: "Private by design",
    text: "Signed-in access only, with rate-limited sign-in and server-side sessions.",
  },
];

const STATUSES = [
  { label: "Working", dot: "bg-emerald-400" },
  { label: "Slow", dot: "bg-amber-400" },
  { label: "Not Working", dot: "bg-red-400" },
];

// Faint static grid behind the features panel.
const GRID_BACKGROUND = {
  backgroundImage:
    "linear-gradient(to right, rgb(255 255 255 / 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgb(255 255 255 / 0.04) 1px, transparent 1px)",
  backgroundSize: "40px 40px",
};

export default async function LoginPage() {
  if (await getCurrentUser()) redirect("/");

  return (
    <main className="grid flex-1 bg-white lg:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)]">
      <section
        aria-label="Features"
        className="light-palette order-2 flex flex-col justify-between gap-10 bg-slate-900 px-6 py-10 text-white sm:px-10 lg:order-1 lg:px-14 lg:py-12"
        style={GRID_BACKGROUND}
      >
        <div className="hidden items-center gap-2.5 lg:flex">
          <span className="flex size-9 items-center justify-center rounded-md bg-white text-slate-900">
            <Activity className="size-5" aria-hidden />
          </span>
          <span className="text-base font-semibold">BTS Apps Dashboard</span>
        </div>

        <div className="max-w-2xl">
          <p className="text-xs font-medium uppercase tracking-wider text-slate-400">Production monitoring</p>
          <p className="mt-3 text-2xl font-semibold leading-snug">
            Health and domain expiry of every BTS app, in one place.
          </p>
          <div className="mt-5 flex flex-wrap gap-2">
            {STATUSES.map(({ label, dot }) => (
              <span
                key={label}
                className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-2.5 py-1 text-xs text-slate-200"
              >
                <span className={`size-1.5 rounded-full ${dot}`} aria-hidden />
                {label}
              </span>
            ))}
          </div>

          <ul className="mt-10 grid gap-3 sm:grid-cols-2">
            {FEATURES.map(({ icon: Icon, title, text }) => (
              <li key={title} className="rounded-lg border border-white/10 bg-white/[0.03] p-4">
                <span className="flex size-8 items-center justify-center rounded-md bg-white/10 text-white">
                  <Icon className="size-4" aria-hidden />
                </span>
                <p className="mt-3 text-sm font-medium">{title}</p>
                <p className="mt-1 text-xs leading-relaxed text-slate-400">{text}</p>
              </li>
            ))}
          </ul>
        </div>

        <p className="text-xs text-slate-500">Internal tool — authorised users only.</p>
      </section>

      <section className="order-1 flex items-center justify-center px-6 py-12 sm:px-10 lg:order-2">
        <div className="w-full max-w-sm">
          <div className="mb-8 flex items-center gap-2.5 lg:hidden">
            <span className="flex size-9 items-center justify-center rounded-md bg-slate-900 text-white">
              <Activity className="size-5" aria-hidden />
            </span>
            <span className="text-base font-semibold text-slate-900">BTS Apps Dashboard</span>
          </div>

          <h1 className="text-xl font-semibold text-slate-900">Welcome back</h1>
          <p className="mt-1 mb-8 text-sm text-slate-500">Sign in with your dashboard account to continue.</p>
          <LoginForm />
          <p className="mt-8 border-t border-slate-100 pt-4 text-xs text-slate-400">
            Forgotten your password? Ask an administrator to reset it.
          </p>
        </div>
      </section>
    </main>
  );
}