"use client";

import { useState } from "react";

import { useRouter } from "next/navigation";

import {
  CheckCircle2,
  ChefHat,
  ClipboardList,
  Eye,
  EyeOff,
  GitBranch,
  History,
  Lock,
  Map,
  Navigation,
  Ticket,
  Truck,
  User,
} from "lucide-react";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { APP_CONFIG } from "@/config/app-config";
import { login, MOCK_CREDENTIALS, ROLE_LABELS, type Role } from "@/lib/auth";

/** Per-role demo tile look: tinted idle cards, saturated gradient when selected */
const ROLE_DEMO_STYLES: Record<
  Role,
  {
    idle: string;
    selected: string;
    iconIdle: string;
    iconSelected: string;
    titleIdle: string;
    titleSelected: string;
  }
> = {
  foh: {
    idle: "border-blue-200 bg-blue-500/[0.08] hover:border-blue-300 hover:bg-blue-500/15 dark:border-blue-500/35 dark:bg-blue-500/10 dark:hover:border-blue-400/55",
    selected:
      "border-blue-400 bg-gradient-to-br from-blue-500 via-blue-600 to-blue-700 text-white shadow-lg shadow-blue-600/25 ring-2 ring-blue-400/40 dark:from-blue-600 dark:via-blue-700 dark:to-blue-900 dark:border-blue-500 dark:shadow-blue-900/40",
    iconIdle: "text-blue-600 dark:text-blue-400",
    iconSelected: "text-white",
    titleIdle: "text-blue-950 dark:text-blue-50",
    titleSelected: "text-white",
  },
  kitchen: {
    idle: "border-amber-200 bg-amber-500/[0.08] hover:border-amber-300 hover:bg-amber-500/15 dark:border-amber-500/35 dark:bg-amber-500/10 dark:hover:border-amber-400/55",
    selected:
      "border-amber-400 bg-gradient-to-br from-amber-500 via-orange-500 to-orange-600 text-white shadow-lg shadow-amber-600/25 ring-2 ring-amber-400/40 dark:from-amber-600 dark:via-orange-600 dark:to-orange-800 dark:border-amber-500 dark:shadow-amber-950/30",
    iconIdle: "text-amber-600 dark:text-amber-400",
    iconSelected: "text-white",
    titleIdle: "text-amber-950 dark:text-amber-50",
    titleSelected: "text-white",
  },
  dispatcher: {
    idle: "border-cyan-200 bg-cyan-500/[0.08] hover:border-cyan-300 hover:bg-cyan-500/15 dark:border-cyan-500/35 dark:bg-cyan-500/10 dark:hover:border-cyan-400/55",
    selected:
      "border-cyan-400 bg-gradient-to-br from-cyan-500 via-teal-500 to-teal-600 text-white shadow-lg shadow-cyan-600/25 ring-2 ring-cyan-400/40 dark:from-cyan-600 dark:via-teal-600 dark:to-teal-800 dark:border-cyan-500 dark:shadow-cyan-950/30",
    iconIdle: "text-cyan-600 dark:text-cyan-400",
    iconSelected: "text-white",
    titleIdle: "text-cyan-950 dark:text-cyan-50",
    titleSelected: "text-white",
  },
  driver: {
    idle: "border-emerald-200 bg-emerald-500/[0.08] hover:border-emerald-300 hover:bg-emerald-500/15 dark:border-emerald-500/35 dark:bg-emerald-500/10 dark:hover:border-emerald-400/55",
    selected:
      "border-emerald-400 bg-gradient-to-br from-emerald-500 via-green-600 to-green-700 text-white shadow-lg shadow-emerald-600/25 ring-2 ring-emerald-400/40 dark:from-emerald-600 dark:via-green-700 dark:to-green-900 dark:border-emerald-500 dark:shadow-emerald-950/30",
    iconIdle: "text-emerald-600 dark:text-emerald-400",
    iconSelected: "text-white",
    titleIdle: "text-emerald-950 dark:text-emerald-50",
    titleSelected: "text-white",
  },
  admin: {
    idle: "border-violet-200 bg-violet-500/[0.08] hover:border-violet-300 hover:bg-violet-500/15 dark:border-violet-500/35 dark:bg-violet-500/10 dark:hover:border-violet-400/55",
    selected:
      "border-violet-400 bg-gradient-to-br from-violet-500 via-purple-600 to-purple-800 text-white shadow-lg shadow-violet-600/25 ring-2 ring-violet-400/40 dark:from-violet-600 dark:via-purple-700 dark:to-purple-950 dark:border-violet-500 dark:shadow-violet-950/30",
    iconIdle: "text-violet-600 dark:text-violet-400",
    iconSelected: "text-white",
    titleIdle: "text-violet-950 dark:text-violet-50",
    titleSelected: "text-white",
  },
  packaging: {
    idle: "border-yellow-200 bg-yellow-500/[0.08] hover:border-yellow-300 hover:bg-yellow-500/15 dark:border-yellow-500/35 dark:bg-yellow-500/10 dark:hover:border-yellow-400/55",
    selected:
      "border-yellow-400 bg-gradient-to-br from-yellow-500 via-amber-500 to-amber-700 text-white shadow-lg shadow-yellow-600/25 ring-2 ring-yellow-400/40 dark:from-yellow-600 dark:via-amber-600 dark:to-amber-900 dark:border-yellow-500 dark:shadow-yellow-950/30",
    iconIdle: "text-yellow-700 dark:text-yellow-400",
    iconSelected: "text-white",
    titleIdle: "text-yellow-950 dark:text-yellow-50",
    titleSelected: "text-white",
  },
};

// Ordered by the real order lifecycle: who touches the order first → last
const DEMO_ACCOUNTS: { role: Role; username: string; password: string }[] = [
  { role: "foh",        username: "foh",        password: "foh123" },
  { role: "kitchen",    username: "kitchen",    password: "kitchen123" },
  { role: "dispatcher", username: "dispatcher", password: "dispatcher123" },
  { role: "driver",     username: "driver",     password: "driver123" },
  { role: "admin",      username: "admin",      password: "admin123" },
];

const ROLE_ICONS: Record<Role, React.ElementType> = {
  admin:      User,
  foh:        ClipboardList,
  kitchen:    ChefHat,
  packaging:  Ticket,
  driver:     Truck,
  dispatcher: Navigation,
};

const FEATURES = [
  { icon: ClipboardList, iconBg: "bg-blue-500/15",    iconColor: "text-blue-400",    topBorder: "border-t-blue-500",    glow: "bg-blue-500",    title: "FOH Order List",    desc: "Filter live orders, open any ticket in a side panel." },
  { icon: ChefHat,       iconBg: "bg-amber-500/15",   iconColor: "text-amber-400",   topBorder: "border-t-amber-500",   glow: "bg-amber-500",   title: "Kitchen Queue",     desc: "3-column kanban — Sent, Preparing, Ready." },
  { icon: Map,           iconBg: "bg-cyan-500/15",    iconColor: "text-cyan-400",    topBorder: "border-t-cyan-500",    glow: "bg-cyan-500",    title: "Dispatch Map",      desc: "Live OpenStreetMap pins, click to open ticket." },
  { icon: Truck,         iconBg: "bg-emerald-500/15", iconColor: "text-emerald-400", topBorder: "border-t-emerald-500", glow: "bg-emerald-500", title: "Driver Run List",   desc: "One-tap Pickup → On Way → Delivered." },
  { icon: GitBranch,     iconBg: "bg-violet-500/15",  iconColor: "text-violet-400",  topBorder: "border-t-violet-500",  glow: "bg-violet-500",  title: "Role-gated Stages", desc: "Validated transitions — the right person at the right time." },
  { icon: History,       iconBg: "bg-rose-500/15",    iconColor: "text-rose-400",    topBorder: "border-t-rose-500",    glow: "bg-rose-500",    title: "Event Timeline",    desc: "Every action logged with actor and timestamp." },
];

const STATS = [
  { value: "6", label: "Roles" },
  { value: "8", label: "Stages" },
  { value: "2", label: "Order Types" },
  { value: "1", label: "Ticket" },
];

export default function LoginPage() {
  const router = useRouter();
  const [username, setUsername]       = useState("");
  const [password, setPassword]       = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [error, setError]             = useState("");
  const [loading, setLoading]         = useState(false);

  const fillDemo = (u: string, p: string) => { setUsername(u); setPassword(p); setError(""); };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError("");
    setTimeout(() => {
      const user = login(username.trim(), password);
      if (!user) { setError("Invalid username or password."); setLoading(false); return; }
      const ROLE_HOME: Record<string, string> = {
        foh: "/orders", admin: "/orders", packaging: "/orders",
        kitchen: "/kitchen", dispatcher: "/dispatch", driver: "/driver",
      };
      router.replace(ROLE_HOME[user.role] ?? "/orders");
    }, 300);
  };

  return (
    /* Page — dark canvas */
    <div className="min-h-screen bg-zinc-950 flex flex-col px-4 pt-4 pb-4 lg:px-8 lg:pt-6 lg:pb-6">

      {/* Page-level top bar */}
      <div className="flex items-center justify-between w-full mb-0">
        <div className="flex items-center gap-2.5">
          <div className="flex size-8 items-center justify-center rounded-lg bg-white/10">
            <Ticket className="size-4 text-white" />
          </div>
          <span className="font-bold text-white tracking-tight">{APP_CONFIG.name}</span>
        </div>
        <span className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-white/30 text-xs">
          POC v1
        </span>
      </div>

      {/* Center zone — grows to push footer down and card to middle */}
      <div className="flex flex-1 items-center justify-center py-6">
      <div className="w-full max-w-6xl flex flex-col lg:flex-row rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">

        {/* ── LEFT: brand panel ────────────────────────────── */}
        <div className="relative hidden lg:flex lg:w-[46%] flex-col justify-between overflow-hidden bg-[#111111] p-8">

          {/* Headline */}
          <div className="relative z-10 mt-6">
            <h1 className="font-extrabold text-white text-5xl leading-tight">
              One ticket.<br />
              <span className="text-white/30">Every role.</span>
            </h1>
            <p className="mt-3 text-white/40 text-sm leading-relaxed max-w-xs">
              FOH, kitchen, dispatch, and drivers — all on the same live order record.
            </p>
          </div>

          {/* Feature cards */}
          <div className="relative z-10 mt-5 grid grid-cols-2 gap-2">
            {FEATURES.map((f) => {
              const Icon = f.icon;
              return (
                <div key={f.title} className={`relative overflow-hidden rounded-xl border border-zinc-800 border-t-2 bg-zinc-900/80 p-4 ${f.topBorder}`}>
                  <div className={`pointer-events-none absolute -top-6 -right-6 size-24 rounded-full opacity-10 blur-xl ${f.glow}`} />
                  <div className={`relative mb-3 inline-flex size-9 items-center justify-center rounded-lg ${f.iconBg}`}>
                    <Icon className={`size-[18px] ${f.iconColor}`} />
                  </div>
                  <p className="relative font-semibold text-white text-sm leading-snug">{f.title}</p>
                  <p className="relative mt-1.5 text-zinc-500 text-xs leading-relaxed">{f.desc}</p>
                </div>
              );
            })}
          </div>

          {/* Stats strip */}
          <div className="relative z-10 mt-5 flex overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900/80">
            {STATS.map((s, i) => (
              <div key={s.label} className={`flex flex-1 flex-col items-center py-2.5 ${i < STATS.length - 1 ? "border-r border-zinc-800" : ""}`}>
                <span className="font-bold text-xl text-white leading-none">{s.value}</span>
                <span className="mt-1 text-[10px] uppercase tracking-wider text-zinc-500">{s.label}</span>
              </div>
            ))}
          </div>

          {/* Blobs */}
          <div className="pointer-events-none absolute -bottom-24 -right-16 size-64 rounded-full bg-indigo-600/10 blur-3xl" />
          <div className="pointer-events-none absolute top-16 -left-16 size-52 rounded-full bg-violet-600/8 blur-3xl" />
        </div>

        {/* ── RIGHT: login form ─────────────────────────────── */}
        <div className="flex flex-1 flex-col justify-center bg-white p-8 lg:p-10 dark:bg-zinc-900">

          {/* Mobile logo */}
          <div className="mb-8 flex items-center gap-2 lg:hidden">
            <Ticket className="size-5" />
            <span className="font-bold">{APP_CONFIG.name}</span>
          </div>

          {/* Heading */}
          <div className="mb-5">
            <h2 className="font-extrabold text-3xl text-zinc-900 dark:text-white">Sign in</h2>
            <p className="mt-1 text-sm text-zinc-400">Pick a demo account or enter credentials</p>
          </div>

          {/* Role tiles */}
          <div className="mb-4">
            <p className="mb-2 text-[10px] font-semibold uppercase tracking-widest text-zinc-400">Demo Accounts</p>
            <div className="grid grid-cols-3 gap-2">
              {DEMO_ACCOUNTS.map((acc) => {
                const Icon = ROLE_ICONS[acc.role];
                const isSelected = username === acc.username;
                const st = ROLE_DEMO_STYLES[acc.role];
                return (
                  <button
                    key={acc.role}
                    type="button"
                    aria-label={`Sign in as ${ROLE_LABELS[acc.role]}`}
                    onClick={() => fillDemo(acc.username, acc.password)}
                    className={`group relative flex min-h-[5.25rem] flex-col items-center justify-center gap-1.5 overflow-hidden rounded-xl border-2 px-2 py-2.5 text-center transition-all duration-150 ${
                      isSelected ? st.selected : st.idle
                    }`}
                  >
                    {isSelected && (
                      <span className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_30%_-10%,rgba(255,255,255,0.35),transparent_55%)] opacity-90" />
                    )}
                    {isSelected && (
                      <CheckCircle2 className="absolute top-1.5 right-1.5 z-10 size-3 text-white drop-shadow-sm" />
                    )}
                    <Icon
                      className={`relative z-10 size-5 shrink-0 transition-transform duration-150 group-hover:scale-110 ${isSelected ? st.iconSelected : st.iconIdle}`}
                    />
                    <p
                      className={`relative z-10 line-clamp-2 font-semibold text-[11px] leading-snug ${isSelected ? st.titleSelected : st.titleIdle}`}
                    >
                      {ROLE_LABELS[acc.role]}
                    </p>
                  </button>
                );
              })}
            </div>
          </div>

          {/* Divider */}
          <div className="relative mb-5">
            <div className="absolute inset-0 flex items-center">
              <div className="w-full border-t border-zinc-100 dark:border-zinc-800" />
            </div>
            <div className="relative flex justify-center">
              <span className="bg-white px-3 text-[10px] text-zinc-400 dark:bg-zinc-900">or enter manually</span>
            </div>
          </div>

          {/* Form */}
          <form onSubmit={handleSubmit} className="space-y-3.5">
            <div>
              <Label htmlFor="username" className="text-[11px] font-medium text-zinc-500 dark:text-zinc-400">Username</Label>
              <div className="relative mt-1.5">
                <User className="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-zinc-400" />
                <Input
                  id="username"
                  placeholder="e.g. foh"
                  value={username}
                  onChange={(e) => { setUsername(e.target.value); setError(""); }}
                  className="border-zinc-200 pl-9 text-sm dark:border-zinc-700"
                  autoComplete="username"
                  autoFocus
                />
              </div>
            </div>
            <div>
              <Label htmlFor="password" className="text-[11px] font-medium text-zinc-500 dark:text-zinc-400">Password</Label>
              <div className="relative mt-1.5">
                <Lock className="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-zinc-400" />
                <Input
                  id="password"
                  type={showPassword ? "text" : "password"}
                  placeholder="••••••••"
                  value={password}
                  onChange={(e) => { setPassword(e.target.value); setError(""); }}
                  className="border-zinc-200 px-9 text-sm dark:border-zinc-700"
                  autoComplete="current-password"
                />
                <button type="button" onClick={() => setShowPassword(!showPassword)}
                  className="absolute top-1/2 right-3 -translate-y-1/2 text-zinc-400 hover:text-zinc-600">
                  {showPassword ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
                </button>
              </div>
            </div>

            {error && (
              <div className="rounded-lg bg-red-50 px-3 py-2.5 text-red-600 text-sm dark:bg-red-950/40 dark:text-red-400">{error}</div>
            )}

            <Button
              type="submit"
              className="mt-1 w-full bg-zinc-900 text-white hover:bg-zinc-700 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-100"
              disabled={loading || !username || !password}
            >
              {loading ? "Signing in…" : "Sign in →"}
            </Button>
          </form>

        </div>
      </div>
      </div>

      {/* Page-level footer */}
      <div className="flex items-center justify-center w-full">
        <p className="text-white/20 text-xs">{APP_CONFIG.copyright} All data stored locally in your browser.</p>
      </div>

    </div>
  );
}