"use client";

import { useState, useMemo } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription } from "@/components/ui/alert";

export default function LoginPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const nextPath = useMemo(
    () => searchParams.get("next") || "/dashboard",
    [searchParams]
  );

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [showPw, setShowPw] = useState(false);
  const [remember, setRemember] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [err, setErr] = useState("");

  async function onSubmit(e) {
    e.preventDefault();
    setErr("");

    if (!username.trim() || !password) {
      setErr("กรอกชื่อผู้ใช้และรหัสผ่านให้ครบ");
      return;
    }

    try {
      setSubmitting(true);

      // เรียก backend ให้ตั้ง HttpOnly cookie: access_token
      const res = await fetch(
        `${process.env.NEXT_PUBLIC_API_BASE}/api/auth/login`,
        {
          method: "POST",
          credentials: "include", // สำคัญ: รับ/ส่งคุกกี้
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ username, password, remember }),
          cache: "no-store",
        }
      );

      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        setErr(data?.message || "ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง");
        return;
      }

      // สำเร็จ → backend ตั้งคุกกี้แล้ว → redirect
      router.replace(nextPath);
    } catch (e) {
      setErr("เชื่อมต่อเซิร์ฟเวอร์ไม่ได้ กรุณาลองใหม่");
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <Card className="w-full max-w-md border-0 shadow-xl ring-1 ring-black/5 bg-white/90 backdrop-blur">
      <CardHeader className="space-y-1">
        <CardTitle className="text-2xl font-bold text-sky-800">
          เข้าสู่ระบบ
        </CardTitle>
        <CardDescription className="text-sky-700">
          Document Management System • LCBP3
        </CardDescription>
      </CardHeader>

      <CardContent>
        {err ? (
          <Alert className="mb-4">
            <AlertDescription>{err}</AlertDescription>
          </Alert>
        ) : null}

        <form onSubmit={onSubmit} className="grid gap-4">
          <div className="grid gap-2">
            <Label htmlFor="username">ชื่อผู้ใช้</Label>
            <Input
              id="username"
              autoFocus
              autoComplete="username"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              placeholder="เช่น superadmin"
              disabled={submitting}
            />
          </div>

          <div className="grid gap-2">
            <Label htmlFor="password">รหัสผ่าน</Label>
            <div className="relative">
              <Input
                id="password"
                type={showPw ? "text" : "password"}
                autoComplete="current-password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="••••••••"
                disabled={submitting}
                className="pr-10"
              />
              <button
                type="button"
                onClick={() => setShowPw((v) => !v)}
                className="absolute inset-y-0 px-2 my-auto text-xs bg-white border rounded-md right-2 hover:bg-slate-50"
                aria-label={showPw ? "ซ่อนรหัสผ่าน" : "แสดงรหัสผ่าน"}
                disabled={submitting}
              >
                {showPw ? "Hide" : "Show"}
              </button>
            </div>
          </div>

          <div className="flex items-center justify-between pt-1">
            <label className="inline-flex items-center gap-2 text-sm text-slate-600">
              <input
                type="checkbox"
                className="size-4 accent-sky-700"
                checked={remember}
                onChange={(e) => setRemember(e.target.checked)}
                disabled={submitting}
              />
              จดจำฉันไว้ในเครื่องนี้
            </label>

            <a
              href="/forgot"
              className="text-sm text-sky-700 hover:text-sky-900 hover:underline"
            >
              ลืมรหัสผ่าน?
            </a>
          </div>

          <Button
            type="submit"
            disabled={submitting}
            className="mt-2 bg-sky-700 hover:bg-sky-800"
          >
            {submitting ? (
              <span className="inline-flex items-center gap-2">
                <Spinner /> กำลังเข้าสู่ระบบ…
              </span>
            ) : (
              "เข้าสู่ระบบ"
            )}
          </Button>
        </form>
      </CardContent>

      <CardFooter className="text-xs text-center text-slate-500">
        &copy; {new Date().getFullYear()} np-dms.work
      </CardFooter>
    </Card>
  );
}

/** Spinner แบบไม่พึ่งไลบรารีเสริม */
function Spinner() {
  return (
    <svg
      className="animate-spin size-4"
      viewBox="0 0 24 24"
      fill="none"
      aria-hidden="true"
    >
      <circle
        className="opacity-25"
        cx="12"
        cy="12"
        r="10"
        stroke="currentColor"
        strokeWidth="4"
      />
      <path
        className="opacity-75"
        fill="currentColor"
        d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
      />
    </svg>
  );
}