"use client";

import * as React from "react";
import { useRouter, useSearchParams } from "next/navigation";
import Image from "next/image";
import Link from "next/link";
import {
  Eye,
  EyeOff,
  Lock,
  User,
  GraduationCap,
  ShieldCheck,
  Sparkles,
  ArrowRight,
  HelpCircle,
  CheckCircle,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Modal } from "@/components/ui/modal";

function LoginForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const callbackUrl = searchParams.get("callbackUrl");

  const [identifier, setIdentifier] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [rememberMe, setRememberMe] = React.useState(true);
  const [showPassword, setShowPassword] = React.useState(false);
  const [isLoading, setIsLoading] = React.useState(false);
  const [errorMessage, setErrorMessage] = React.useState("");
  const [forgotModalOpen, setForgotModalOpen] = React.useState(false);

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setErrorMessage("");

    if (!identifier.trim()) {
      setErrorMessage("Identitas akun (NIS / NIP / Username) wajib diisi.");
      return;
    }
    if (!password) {
      setErrorMessage("Kata sandi wajib diisi.");
      return;
    }

    setIsLoading(true);
    try {
      const res = await fetch("/api/auth/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ identifier, password, rememberMe }),
      });

      const data = await res.json();
      if (!res.ok || !data.success) {
        setErrorMessage(data.error || "Gagal masuk. Periksa kembali data login Anda.");
        setIsLoading(false);
        return;
      }

      // Success
      const target = callbackUrl || data.data.redirectUrl;
      router.push(target);
      router.refresh();
    } catch (err) {
      setErrorMessage("Terjadi gangguan koneksi ke server LMS. Silakan periksa jaringan Anda.");
      setIsLoading(false);
    }
  };

  const setDemoCredential = (demoUser: string) => {
    setIdentifier(demoUser);
    setPassword("password123");
    setErrorMessage("");
  };

  return (
    <div className="min-h-screen flex flex-col md:flex-row bg-slate-50">
      {/* LEFT COLUMN: School Branding & Illustration */}
      <div className="md:w-1/2 lg:w-5/12 bg-gradient-to-br from-blue-950 via-blue-900 to-indigo-950 text-white p-8 md:p-12 flex flex-col justify-between relative overflow-hidden">
        {/* Background Decorative Rings */}
        <div className="absolute -top-24 -left-24 w-96 h-96 bg-blue-600/20 rounded-full blur-3xl pointer-events-none" />
        <div className="absolute -bottom-24 -right-24 w-96 h-96 bg-amber-500/10 rounded-full blur-3xl pointer-events-none" />

        {/* Top Header */}
        <div className="relative z-10">
          <Link href="/" className="inline-flex items-center gap-3 group">
            <div className="h-12 w-12 rounded-2xl bg-white/10 p-2 backdrop-blur-md border border-white/20 flex items-center justify-center shadow-lg group-hover:scale-105 transition-transform">
              <img
                src="/images/logo-sman3oku.svg"
                alt="Logo SMAN 3 OKU"
                className="h-9 w-9 object-contain"
              />
            </div>
            <div>
              <h2 className="text-lg font-black tracking-wider text-white">
                SMAN 3 OKU
              </h2>
              <p className="text-[11px] text-blue-200 uppercase tracking-widest font-medium">
                Ogan Komering Ulu
              </p>
            </div>
          </Link>
        </div>

        {/* Center Content */}
        <div className="relative z-10 py-12 md:py-8 space-y-6">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-500/20 border border-blue-400/30 text-xs font-semibold text-blue-200">
            <Sparkles className="h-3.5 w-3.5 text-amber-400" />
            Platform Pembelajaran Digital
          </div>

          <h1 className="text-3xl md:text-4xl font-extrabold leading-tight tracking-tight text-white">
            Transformasi Digital untuk Pembelajaran Berkualitas.
          </h1>

          <p className="text-sm text-blue-200/90 leading-relaxed">
            Terhubung langsung dengan seluruh ruang kelas, materi kurikulum merdeka, asesmen CBT interaktif, dan pemantauan nilai secara terintegrasi.
          </p>

          {/* Value points */}
          <div className="space-y-3 pt-2">
            <div className="flex items-center gap-3 text-xs text-blue-100">
              <div className="h-6 w-6 rounded-lg bg-emerald-500/20 text-emerald-300 flex items-center justify-center shrink-0 border border-emerald-500/30">
                <CheckCircle className="h-4 w-4" />
              </div>
              <span>Satu platform untuk Admin, Guru, Wali Kelas, dan Siswa</span>
            </div>
            <div className="flex items-center gap-3 text-xs text-blue-100">
              <div className="h-6 w-6 rounded-lg bg-emerald-500/20 text-emerald-300 flex items-center justify-center shrink-0 border border-emerald-500/30">
                <CheckCircle className="h-4 w-4" />
              </div>
              <span>Asesmen CBT mandiri dengan penilaian otomatis</span>
            </div>
            <div className="flex items-center gap-3 text-xs text-blue-100">
              <div className="h-6 w-6 rounded-lg bg-emerald-500/20 text-emerald-300 flex items-center justify-center shrink-0 border border-emerald-500/30">
                <CheckCircle className="h-4 w-4" />
              </div>
              <span>Rekapitulasi kehadiran dan buku nilai digital real-time</span>
            </div>
          </div>
        </div>

        {/* Footer */}
        <div className="relative z-10 text-xs text-blue-300/80 border-t border-white/10 pt-4 flex items-center justify-between">
          <span>&copy; 2026 SMAN 3 OKU</span>
          <Link href="/" className="hover:text-white transition-colors">
            Kembali ke Beranda &rarr;
          </Link>
        </div>
      </div>

      {/* RIGHT COLUMN: Login Form */}
      <div className="flex-1 flex items-center justify-center p-6 md:p-12 lg:p-16">
        <div className="w-full max-w-md space-y-6">
          {/* Form Header */}
          <div className="space-y-2">
            <div className="inline-block md:hidden mb-2">
              <img
                src="/images/logo-sman3oku.svg"
                alt="Logo SMAN 3 OKU"
                className="h-12 w-12"
              />
            </div>
            <h2 className="text-2xl md:text-3xl font-extrabold text-slate-900 tracking-tight">
              Selamat Datang
            </h2>
            <p className="text-xs md:text-sm text-slate-500">
              Silakan masuk untuk melanjutkan ke LMS SMAN 3 OKU.
            </p>
          </div>

          {/* Error Alert */}
          {errorMessage && (
            <div className="p-4 rounded-xl bg-rose-50 border border-rose-200 text-rose-700 text-xs leading-relaxed animate-shake">
              <div className="flex items-center gap-2 font-bold mb-0.5">
                <ShieldCheck className="h-4 w-4 text-rose-600" />
                Pemberitahuan
              </div>
              {errorMessage}
            </div>
          )}

          {/* Login Form */}
          <form onSubmit={handleLogin} className="space-y-4">
            <div>
              <label className="block text-xs font-bold text-slate-700 mb-1.5">
                Identitas Akun (Username / NIS / NIP)
              </label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400">
                  <User className="h-4 w-4" />
                </div>
                <input
                  type="text"
                  value={identifier}
                  onChange={(e) => setIdentifier(e.target.value)}
                  placeholder="Contoh: siswa01 / 26001 / admin"
                  className="w-full pl-10 pr-4 py-2.5 rounded-xl border border-slate-300 bg-white text-sm text-slate-900 placeholder:text-slate-400 focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/20 transition-all"
                  required
                />
              </div>
              <p className="text-[11px] text-slate-400 mt-1">
                Siswa: NIS/Username | Guru: NIP/Username | Admin: Username
              </p>
            </div>

            <div>
              <label className="block text-xs font-bold text-slate-700 mb-1.5">
                Kata Sandi
              </label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400">
                  <Lock className="h-4 w-4" />
                </div>
                <input
                  type={showPassword ? "text" : "password"}
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="Masukkan kata sandi Anda"
                  className="w-full pl-10 pr-10 py-2.5 rounded-xl border border-slate-300 bg-white text-sm text-slate-900 placeholder:text-slate-400 focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/20 transition-all"
                  required
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute inset-y-0 right-0 pr-3 flex items-center text-slate-400 hover:text-slate-600"
                >
                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                </button>
              </div>
            </div>

            {/* Remember & Forgot */}
            <div className="flex items-center justify-between text-xs pt-1">
              <label className="flex items-center gap-2 cursor-pointer text-slate-600 select-none">
                <input
                  type="checkbox"
                  checked={rememberMe}
                  onChange={(e) => setRememberMe(e.target.checked)}
                  className="h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
                />
                <span>Ingat Saya</span>
              </label>

              <button
                type="button"
                onClick={() => setForgotModalOpen(true)}
                className="font-medium text-blue-600 hover:text-blue-700 hover:underline"
              >
                Lupa Password?
              </button>
            </div>

            {/* Submit Button */}
            <Button
              type="submit"
              size="lg"
              className="w-full font-bold shadow-md shadow-blue-600/30"
              isLoading={isLoading}
            >
              Masuk ke Portal LMS
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </form>

          {/* Quick Demo Switcher */}
          <div className="pt-4 border-t border-slate-200 space-y-2">
            <div className="flex items-center justify-between">
              <span className="text-xs font-bold text-slate-600">
                Pilih Akun Demo Pengujian:
              </span>
              <span className="text-[10px] text-slate-400 font-mono">
                pass: password123
              </span>
            </div>

            <div className="grid grid-cols-2 gap-2 text-xs">
              <button
                type="button"
                onClick={() => setDemoCredential("admin")}
                className="p-2 rounded-lg border border-slate-200 bg-white hover:border-blue-500 hover:bg-blue-50/50 text-left transition-all"
              >
                <span className="font-bold text-slate-800 block truncate">1. Administrator</span>
                <span className="text-[10px] text-slate-400">admin</span>
              </button>

              <button
                type="button"
                onClick={() => setDemoCredential("guru.matematika")}
                className="p-2 rounded-lg border border-slate-200 bg-white hover:border-blue-500 hover:bg-blue-50/50 text-left transition-all"
              >
                <span className="font-bold text-slate-800 block truncate">2. Guru & Wali Kelas</span>
                <span className="text-[10px] text-slate-400">guru.matematika</span>
              </button>

              <button
                type="button"
                onClick={() => setDemoCredential("guru.indonesia")}
                className="p-2 rounded-lg border border-slate-200 bg-white hover:border-blue-500 hover:bg-blue-50/50 text-left transition-all"
              >
                <span className="font-bold text-slate-800 block truncate">3. Guru Mapel</span>
                <span className="text-[10px] text-slate-400">guru.indonesia</span>
              </button>

              <button
                type="button"
                onClick={() => setDemoCredential("siswa01")}
                className="p-2 rounded-lg border border-slate-200 bg-white hover:border-blue-500 hover:bg-blue-50/50 text-left transition-all"
              >
                <span className="font-bold text-slate-800 block truncate">4. Siswa (Ahmad Fauzi)</span>
                <span className="text-[10px] text-slate-400">siswa01 / 26001</span>
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Forgot Password Modal */}
      <Modal
        isOpen={forgotModalOpen}
        onClose={() => setForgotModalOpen(false)}
        title="Bantuan Lupa Kata Sandi"
        description="Layanan Bantuan Akun SMAN 3 OKU"
      >
        <div className="space-y-4 text-xs text-slate-600 leading-relaxed">
          <p>
            Untuk menjaga keamanan akun akademik, proses reset kata sandi dikelola langsung oleh Tim Kurikulum dan Administrator IT SMAN 3 OKU.
          </p>
          <div className="p-3.5 rounded-xl bg-slate-50 border border-slate-200 space-y-1.5">
            <p className="font-bold text-slate-800">Tata Cara Reset Password:</p>
            <ol className="list-decimal pl-4 space-y-1 text-slate-600">
              <li>Hubungi Wali Kelas Anda (untuk Siswa) atau Administrator IT (untuk Guru).</li>
              <li>Sebutkan NIS / NIP dan Nama Lengkap untuk verifikasi identitas.</li>
              <li>Administrator akan mereset password ke default dan memberikan akses kembali.</li>
            </ol>
          </div>
          <div className="text-[11px] text-slate-500 flex items-center gap-2">
            <HelpCircle className="h-4 w-4 text-blue-500" />
            <span>Kontak IT SMAN 3 OKU: <strong>it.support@sman3oku.sch.id</strong></span>
          </div>
          <div className="pt-2 flex justify-end">
            <Button size="sm" onClick={() => setForgotModalOpen(false)}>
              Saya Mengerti
            </Button>
          </div>
        </div>
      </Modal>
    </div>
  );
}

export default function LoginPage() {
  return (
    <React.Suspense fallback={<div className="min-h-screen flex items-center justify-center bg-slate-900 text-xs text-slate-400">Memuat LMS SMAN 3 OKU...</div>}>
      <LoginForm />
    </React.Suspense>
  );
}