"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { api } from "@/lib/client";

const DEMO = [
  ["superadmin@telur.local", "Super Admin"],
  ["owner@telur.local", "Pemilik Usaha"],
  ["admin1@telur.local", "Admin Cabang"],
  ["kurir1@telur.local", "Kurir"],
];

const ROLE_LABEL: Record<string, string> = {
  super_admin: "Super Admin",
  owner_approver: "Pemilik Usaha",
  branch_admin: "Admin Cabang",
  courier: "Kurir",
};

interface Remembered {
  name: string;
  role: string;
  branchName: string | null;
}

// Baca cookie tampilan "remembered_user" (non-httpOnly) — hanya untuk
// menampilkan kartu "Lanjutkan sebagai ...", BUKAN untuk autentikasi.
function readRemembered(): Remembered | null {
  if (typeof document === "undefined") return null;
  const match = document.cookie.match(/(?:^|; )remembered_user=([^;]*)/);
  if (!match) return null;
  try {
    return JSON.parse(decodeURIComponent(match[1]));
  } catch {
    return null;
  }
}

export default function LoginPage() {
  const router = useRouter();
  const [identifier, setIdentifier] = useState("");
  const [password, setPassword] = useState("password123");
  const [showPassword, setShowPassword] = useState(false);
  const [remember, setRemember] = useState(true);
  const [err, setErr] = useState("");
  const [loading, setLoading] = useState(false);
  const [remembered, setRemembered] = useState<Remembered | null>(null);
  const [showManualForm, setShowManualForm] = useState(false);
  const [continuing, setContinuing] = useState(false);

  useEffect(() => {
    setRemembered(readRemembered());
  }, []);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setErr("");
    setLoading(true);
    try {
      await api("/api/auth/login", {
        method: "POST",
        body: JSON.stringify({ identifier, password, remember }),
      });
      router.push("/");
      router.refresh();
    } catch (e: any) {
      setErr(e.message);
    } finally {
      setLoading(false);
    }
  }

  async function continueSession() {
    setErr("");
    setContinuing(true);
    try {
      await api("/api/auth/continue", { method: "POST" });
      router.push("/");
      router.refresh();
    } catch (e: any) {
      // Sesi tersimpan sudah habis — tampilkan form login manual.
      setRemembered(null);
      setShowManualForm(true);
      setErr(e.message);
    } finally {
      setContinuing(false);
    }
  }

  const showCard = remembered && !showManualForm;

  return (
    <div className="flex min-h-screen items-center justify-center px-4">
      <div className="w-full max-w-sm">
        <div className="mb-6 text-center">
          <div className="mx-auto mb-2 flex h-14 w-14 items-center justify-center rounded-2xl bg-brand-600 text-2xl">🥚</div>
          <h1 className="text-xl font-bold">Distribusi Telur</h1>
          <p className="text-sm text-slate-500">Pusat Kendali Multi-Cabang</p>
        </div>

        {showCard ? (
          <div className="card space-y-3 text-center">
            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-brand-100 text-xl font-bold text-brand-700">
              {remembered!.name.charAt(0).toUpperCase()}
            </div>
            <div>
              <p className="font-semibold">{remembered!.name}</p>
              <p className="text-xs text-slate-500">
                {ROLE_LABEL[remembered!.role] ?? remembered!.role}
                {remembered!.branchName ? ` · ${remembered!.branchName}` : ""}
              </p>
            </div>
            {err && <p className="text-sm text-red-600">{err}</p>}
            <button className="btn-primary w-full" disabled={continuing} onClick={continueSession}>
              {continuing ? "Masuk..." : `Lanjutkan sebagai ${remembered!.name}`}
            </button>
            <button
              type="button"
              className="text-xs text-slate-500 underline"
              onClick={() => setShowManualForm(true)}
            >
              Bukan Anda? Masuk Manual
            </button>
          </div>
        ) : (
          <>
            <form onSubmit={submit} className="card space-y-3">
              <div>
                <label className="label">Email atau No. HP</label>
                <input
                  className="input"
                  value={identifier}
                  onChange={(e) => setIdentifier(e.target.value)}
                  placeholder="email@telur.local atau 0812xxxxxxx"
                  autoFocus
                />
              </div>
              <div>
                <label className="label">Kata Sandi</label>
                <div className="relative">
                  <input
                    type={showPassword ? "text" : "password"}
                    className="input pr-10"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                  />
                  <button
                    type="button"
                    onClick={() => setShowPassword((v) => !v)}
                    className="absolute inset-y-0 right-0 flex items-center px-3 text-lg text-slate-400 hover:text-slate-600"
                    title={showPassword ? "Sembunyikan kata sandi" : "Lihat kata sandi"}
                    aria-label={showPassword ? "Sembunyikan kata sandi" : "Lihat kata sandi"}
                  >
                    {showPassword ? "🙈" : "👁️"}
                  </button>
                </div>
              </div>
              <label className="flex cursor-pointer items-center gap-2 text-sm text-slate-600">
                <input
                  type="checkbox"
                  className="h-4 w-4"
                  checked={remember}
                  onChange={(e) => setRemember(e.target.checked)}
                />
                Ingat saya di perangkat ini
              </label>
              {err && <p className="text-sm text-red-600">{err}</p>}
              <button className="btn-primary w-full" disabled={loading}>
                {loading ? "Masuk..." : "Masuk"}
              </button>
            </form>
            {remembered && (
              <button
                type="button"
                className="mt-3 w-full text-center text-xs text-slate-500 underline"
                onClick={() => setShowManualForm(false)}
              >
                ← Kembali ke akun tersimpan
              </button>
            )}
          </>
        )}

        {!showCard && (
          <div className="mt-4 text-center text-xs text-slate-500">
            <p className="mb-1 font-medium">Akun contoh (kata sandi: password123)</p>
            <div className="flex flex-wrap justify-center gap-1">
              {DEMO.map(([mail, label]) => (
                <button
                  key={mail}
                  onClick={() => setIdentifier(mail)}
                  className="badge bg-slate-100 hover:bg-brand-100"
                  title={mail}
                >
                  {label}
                </button>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}