"use client";

import React, { useState } from "react";
import Image from "next/image";
import { useRouter, useSearchParams } from "next/navigation";
import {
  User,
  Lock,
  Eye,
  EyeOff,
  ArrowRight,
  ShieldCheck,
  Sparkles,
  HelpCircle,
  AlertCircle,
  CheckCircle2,
  GraduationCap,
  School,
  Building2,
  Phone,
  Mail,
  X,
  BookOpen,
} from "lucide-react";
import { brandConfig } from "@/config/brand";
import { useAuth } from "@/context/AuthContext";

export const LoginView: React.FC = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const returnUrl = searchParams.get("returnUrl");
  const { login } = useAuth();

  // Form states
  const [identifier, setIdentifier] = useState<string>("");
  const [password, setPassword] = useState<string>("");
  const [rememberMe, setRememberMe] = useState<boolean>(true);
  const [showPassword, setShowPassword] = useState<boolean>(false);
  const [loading, setLoading] = useState<boolean>(false);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [isHelpModalOpen, setIsHelpModalOpen] = useState<boolean>(false);

  // Submit Handler
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!identifier.trim() || !password) {
      setErrorMessage("Mohon masukkan Username / Email / NISN / NIPY dan Kata Sandi.");
      return;
    }

    try {
      setLoading(true);
      setErrorMessage(null);

      const result = await login(identifier.trim(), password, rememberMe);

      if (result.success) {
        // Redirect ke returnUrl jika ada, atau ke URL role yang ditentukan
        const destination = returnUrl || result.redirectUrl || "/";
        router.push(destination);
      } else {
        setErrorMessage(result.message || "Gagal masuk ke aplikasi.");
      }
    } catch (err: any) {
      setErrorMessage("Terjadi kesalahan jaringan saat proses autentikasi.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen flex flex-col lg:flex-row bg-slate-50 antialiased selection:bg-blue-100 selection:text-blue-900">
      {/* ======================================================== */}
      {/* SISI KIRI: BANNER VISUAL SMA BPI 1 BANDUNG (DESKTOP)     */}
      {/* ======================================================== */}
      <div className="hidden lg:flex lg:w-1/2 xl:w-[48%] relative flex-col justify-between p-10 xl:p-14 bg-gradient-to-br from-[#071739] via-[#0F2B5B] to-[#1E3A8A] text-white overflow-hidden shadow-2xl">
        {/* Background glow orbs & decorative patterns */}
        <div className="absolute -top-24 -left-24 w-96 h-96 rounded-full bg-blue-500/20 blur-3xl pointer-events-none" />
        <div className="absolute bottom-0 right-0 w-96 h-96 rounded-full bg-indigo-500/20 blur-3xl pointer-events-none" />
        <div className="absolute top-1/2 left-1/3 w-64 h-64 rounded-full bg-amber-400/10 blur-2xl pointer-events-none" />

        {/* Header Kiri: Logo & Identitas */}
        <div className="relative z-10 flex items-center gap-3.5">
          <div className="w-12 h-12 rounded-2xl bg-white/10 backdrop-blur-md border border-white/20 p-2 flex items-center justify-center shadow-lg">
            <div className="relative w-full h-full">
              <Image
                src={brandConfig.logo.src}
                alt={brandConfig.logo.alt}
                fill
                className="object-contain"
                priority
              />
            </div>
          </div>
          <div>
            <div className="flex items-center gap-2">
              <span className="font-extrabold text-lg tracking-tight text-white">
                {brandConfig.appName}
              </span>
              <span className="px-2 py-0.5 rounded-full text-[10px] font-bold bg-amber-400 text-slate-900 shadow-xs">
                Portal Resmi
              </span>
            </div>
            <p className="text-xs text-blue-200 font-medium">
              {brandConfig.schoolName}
            </p>
          </div>
        </div>

        {/* Konten Utama Kiri: Hero Text & Feature Cards */}
        <div className="relative z-10 my-auto py-8 space-y-7">
          <div className="space-y-3">
            <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-white/10 backdrop-blur-md border border-white/20 text-blue-200">
              <Sparkles className="w-3.5 h-3.5 text-amber-300" />
              Layanan Digital SMA BPI 1 Bandung
            </span>

            <h1 className="text-3xl xl:text-4xl font-extrabold tracking-tight leading-tight text-white">
              Sistem Informasi & Manajemen Sekolah Terpadu
            </h1>

            <p className="text-sm text-blue-100/90 leading-relaxed max-w-lg">
              Satu portal terintegrasi untuk seluruh civitas akademika SMA BPI 1 Bandung dalam pengelolaan kurikulum, kesiswaan, presensi digital, dan capaian peserta didik.
            </p>
          </div>

          {/* 3 Fitur Unggulan Sistem */}
          <div className="space-y-3 max-w-lg">
            <div className="p-3.5 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 flex items-start gap-3 transition-transform hover:translate-x-1 duration-200">
              <div className="w-9 h-9 rounded-lg bg-blue-500/20 text-blue-300 flex items-center justify-center shrink-0 border border-blue-400/20 mt-0.5">
                <ShieldCheck className="w-5 h-5 text-blue-300" />
              </div>
              <div>
                <p className="text-xs font-bold text-white">
                  Live Sync & Real-Time Data Terintegrasi
                </p>
                <p className="text-[11px] text-blue-200/80 mt-0.5 leading-relaxed">
                  Terhubung langsung dengan basis data SQLite, presensi dhuha jumat, analisis rapor, dan rekap poin kedisiplinan siswa.
                </p>
              </div>
            </div>

            <div className="p-3.5 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 flex items-start gap-3 transition-transform hover:translate-x-1 duration-200">
              <div className="w-9 h-9 rounded-lg bg-amber-500/20 text-amber-300 flex items-center justify-center shrink-0 border border-amber-400/20 mt-0.5">
                <GraduationCap className="w-5 h-5 text-amber-300" />
              </div>
              <div>
                <p className="text-xs font-bold text-white">
                  Akses Multi-Role & Hak Akses Bertingkat
                </p>
                <p className="text-[11px] text-blue-200/80 mt-0.5 leading-relaxed">
                  Pengalaman khusus untuk Super Admin, Kurikulum, Guru BK, Wali Kelas, Guru Mapel, Siswa, dan Orang Tua.
                </p>
              </div>
            </div>

            <div className="p-3.5 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 flex items-start gap-3 transition-transform hover:translate-x-1 duration-200">
              <div className="w-9 h-9 rounded-lg bg-emerald-500/20 text-emerald-300 flex items-center justify-center shrink-0 border border-emerald-400/20 mt-0.5">
                <BookOpen className="w-5 h-5 text-emerald-300" />
              </div>
              <div>
                <p className="text-xs font-bold text-white">
                  Standar Kurikulum Merdeka Fase E & F
                </p>
                <p className="text-[11px] text-blue-200/80 mt-0.5 leading-relaxed">
                  Mendukung cetak profil format standar F4, asesmen sumatif, portofolio bakat prolife, dan sertifikasi kelulusan.
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Footer Kiri: Akreditasi & Alamat */}
        <div className="relative z-10 pt-4 border-t border-white/10 flex flex-col sm:flex-row sm:items-center justify-between gap-2 text-[11px] text-blue-200/80">
          <div>
            <p className="font-semibold text-white">
              {brandConfig.schoolName}
            </p>
            <p>{brandConfig.address.street}, {brandConfig.address.city}</p>
          </div>
          <div className="sm:text-right">
            <span className="inline-block px-2 py-0.5 rounded bg-white/10 text-white font-bold text-[10px]">
              {brandConfig.accreditation}
            </span>
            <p className="mt-0.5">NPSN: {brandConfig.npsn}</p>
          </div>
        </div>
      </div>

      {/* ======================================================== */}
      {/* SISI KANAN: FORM LOGIN BERSIH & ELEGANT                  */}
      {/* ======================================================== */}
      <div className="flex-1 flex flex-col justify-between p-6 sm:p-10 lg:p-12 xl:p-16 min-w-0 overflow-y-auto">
        {/* Header Mobile Only */}
        <div className="lg:hidden flex items-center gap-3 mb-6 pb-4 border-b border-slate-200">
          <div className="relative w-10 h-10 shrink-0">
            <Image
              src={brandConfig.logo.src}
              alt={brandConfig.logo.alt}
              fill
              className="object-contain"
            />
          </div>
          <div>
            <h1 className="font-extrabold text-base text-brand-navy">
              {brandConfig.appName}
            </h1>
            <p className="text-xs text-slate-500 font-medium">
              {brandConfig.shortSchoolName}
            </p>
          </div>
        </div>

        {/* Center Container Form */}
        <div className="my-auto mx-auto w-full max-w-md">
          {/* Form Header */}
          <div className="space-y-1.5 mb-6 text-left">
            <div className="flex items-center gap-2">
              <h2 className="text-2xl sm:text-3xl font-extrabold tracking-tight text-slate-900">
                Selamat Datang Kembali
              </h2>
            </div>
            <p className="text-xs sm:text-sm text-slate-500">
              Silakan masuk ke akun <strong>BPI SmartSchool</strong> Anda untuk melanjutkan.
            </p>
          </div>

          {/* Alert Error Box */}
          {errorMessage && (
            <div className="mb-5 p-3.5 rounded-xl bg-rose-50 border border-rose-200 text-rose-800 text-xs flex items-start gap-2.5 animate-in fade-in slide-in-from-top-1">
              <AlertCircle className="w-4 h-4 text-rose-600 shrink-0 mt-0.5" />
              <div className="flex-1">
                <span className="font-bold block mb-0.5">Gagal Masuk</span>
                <span className="leading-relaxed">{errorMessage}</span>
              </div>
              <button
                type="button"
                onClick={() => setErrorMessage(null)}
                className="text-rose-400 hover:text-rose-700"
              >
                <X className="w-4 h-4" />
              </button>
            </div>
          )}

          {/* Form Elemen */}
          <form onSubmit={handleSubmit} className="space-y-4">
            {/* Input 1: Username / Email / NISN / NIPY */}
            <div className="space-y-1.5">
              <label
                htmlFor="identifier"
                className="block text-xs font-bold text-slate-700 uppercase tracking-wider"
              >
                Username / Email / NISN / NIPY
              </label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400">
                  <User className="w-4 h-4" />
                </div>
                <input
                  id="identifier"
                  type="text"
                  value={identifier}
                  onChange={(e) => setIdentifier(e.target.value)}
                  placeholder="Masukkan Username / NISN..."
                  required
                  autoFocus
                  className="w-full pl-10 pr-4 py-2.5 sm:py-3 text-sm border border-slate-300 rounded-xl bg-white text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-blue/30 focus:border-brand-blue transition-all shadow-xs"
                />
              </div>
            </div>

            {/* Input 2: Kata Sandi (Password) with Eye Toggle */}
            <div className="space-y-1.5">
              <div className="flex items-center justify-between">
                <label
                  htmlFor="password"
                  className="block text-xs font-bold text-slate-700 uppercase tracking-wider"
                >
                  Kata Sandi (Password)
                </label>
              </div>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400">
                  <Lock className="w-4 h-4" />
                </div>
                <input
                  id="password"
                  type={showPassword ? "text" : "password"}
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="Masukkan Kata Sandi..."
                  required
                  className="w-full pl-10 pr-11 py-2.5 sm:py-3 text-sm border border-slate-300 rounded-xl bg-white text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-blue/30 focus:border-brand-blue transition-all shadow-xs"
                />
                <button
                  type="button"
                  onClick={() => setShowPassword((prev) => !prev)}
                  className="absolute inset-y-0 right-0 pr-3.5 flex items-center text-slate-400 hover:text-slate-600 focus:outline-none"
                  aria-label={showPassword ? "Sembunyikan password" : "Lihat password"}
                >
                  {showPassword ? (
                    <EyeOff className="w-4 h-4 text-blue-600" />
                  ) : (
                    <Eye className="w-4 h-4" />
                  )}
                </button>
              </div>
            </div>

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

              <button
                type="button"
                onClick={() => setIsHelpModalOpen(true)}
                className="text-xs font-semibold text-brand-blue hover:text-blue-700 hover:underline transition-colors"
              >
                Lupa Password?
              </button>
            </div>

            {/* Tombol Utama: Masuk ke Aplikasi */}
            <button
              type="submit"
              disabled={loading}
              className="w-full mt-2 py-3 px-4 rounded-xl font-bold text-sm text-white bg-brand-blue hover:bg-blue-700 active:bg-blue-800 shadow-md hover:shadow-lg disabled:opacity-60 disabled:cursor-not-allowed transition-all flex items-center justify-center gap-2"
            >
              {loading ? (
                <>
                  <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                  <span>Memverifikasi Kredensial...</span>
                </>
              ) : (
                <>
                  <span>Masuk ke Aplikasi</span>
                  <ArrowRight className="w-4 h-4" />
                </>
              )}
            </button>
          </form>
        </div>

        {/* Footer Sisi Kanan */}
        <div className="mt-8 pt-4 border-t border-slate-100 text-center text-xs text-slate-400">
          <p>
            &copy; {new Date().getFullYear()} {brandConfig.appName} &bull; {brandConfig.schoolName}. Hak cipta dilindungi undang-undang.
          </p>
        </div>
      </div>

      {/* ======================================================== */}
      {/* MODAL BANTUAN RESET PASSWORD ("LUPA PASSWORD?")          */}
      {/* ======================================================== */}
      {isHelpModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-xs animate-in fade-in">
          <div className="bg-white rounded-2xl max-w-md w-full p-6 shadow-2xl border border-slate-200 space-y-4">
            <div className="flex items-start justify-between">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-xl bg-blue-50 border border-blue-100 flex items-center justify-center text-brand-blue">
                  <HelpCircle className="w-5 h-5" />
                </div>
                <div>
                  <h3 className="font-bold text-base text-slate-900">
                    Bantuan Akun & Kata Sandi
                  </h3>
                  <p className="text-xs text-slate-500">
                    Reset kata sandi terproteksi SMA BPI 1 Bandung
                  </p>
                </div>
              </div>
              <button
                type="button"
                onClick={() => setIsHelpModalOpen(false)}
                className="text-slate-400 hover:text-slate-600 p-1"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="space-y-3 text-xs text-slate-600 leading-relaxed bg-slate-50 p-4 rounded-xl border border-slate-200/80">
              <p>
                Demi menjaga keamanan data pokok pendidikan dan privasi peserta didik, reset kata sandi dilakukan secara terverifikasi melalui prosedur resmi:
              </p>

              <div className="space-y-2">
                <div className="flex items-start gap-2">
                  <CheckCircle2 className="w-4 h-4 text-emerald-600 shrink-0 mt-0.5" />
                  <span>
                    <strong>Pendidik & Staf:</strong> Hubungi Administrator Sistem BPI SmartSchool atau bagian Tata Usaha (TU).
                  </span>
                </div>
                <div className="flex items-start gap-2">
                  <CheckCircle2 className="w-4 h-4 text-emerald-600 shrink-0 mt-0.5" />
                  <span>
                    <strong>Siswa & Orang Tua:</strong> Silakan menghubungi <strong>Wali Kelas</strong> masing-masing atau datang ke <strong>Ruang Guru BK</strong> SMA BPI 1 Bandung.
                  </span>
                </div>
                <div className="flex items-start gap-2">
                  <CheckCircle2 className="w-4 h-4 text-emerald-600 shrink-0 mt-0.5" />
                  <span>
                    <strong>Calon Siswa (SPMB):</strong> Hubungi Panitia SPMB di Sekretariat Pendaftaran.
                  </span>
                </div>
              </div>
            </div>

            <div className="p-3 bg-blue-50 border border-blue-100 rounded-xl text-xs space-y-1 text-slate-700">
              <p className="font-bold text-brand-blue flex items-center gap-1.5">
                <Phone className="w-3.5 h-3.5" /> Layanan Bantuan Sekolah:
              </p>
              <p>Telepon: <strong>{brandConfig.contact.phone}</strong></p>
              <p>Email: <strong>{brandConfig.contact.email}</strong></p>
              <p>Alamat: {brandConfig.address.street}, Kota Bandung</p>
            </div>

            <button
              type="button"
              onClick={() => setIsHelpModalOpen(false)}
              className="w-full py-2.5 rounded-xl font-bold text-xs bg-slate-900 text-white hover:bg-slate-800 transition-colors"
            >
              Mengerti & Tutup
            </button>
          </div>
        </div>
      )}
    </div>
  );
};