"use client"

import type React from "react"
import { useState } from "react"
import { Eye, EyeOff, Lock, User, Loader2, ArrowRight } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { cn } from "@/lib/utils"

export function LoginForm() {
  const [showPassword, setShowPassword] = useState(false)
  const [loading, setLoading] = useState(false)
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setLoading(true)
    setTimeout(() => setLoading(false), 1600)
  }

  const demoAccounts = [
    { icon: "👑", role: "Admin", user: "admin", pass: "password" },
    { icon: "📝", role: "Petugas", user: "petugas", pass: "password" },
    { icon: "👁️", role: "Guest", user: "guest", pass: "password" },
  ]

  function fillDemo(user: string, pass: string) {
    setUsername(user)
    setPassword(pass)
  }

  return (
    <div className="w-full max-w-md">
      {/* Glassmorphism card */}
      <div className="relative rounded-3xl border border-white/60 bg-white/70 p-8 shadow-[0_40px_120px_-30px_rgba(198,40,40,0.28),0_18px_50px_-20px_rgba(198,40,40,0.14)] backdrop-blur-xl sm:p-10">
        {/* subtle red glow accent */}
        <div
          aria-hidden
          className="pointer-events-none absolute -right-6 -top-6 h-24 w-24 rounded-full bg-primary/15 blur-2xl"
        />

        {/* Brand */}
        <div className="mb-8 flex items-center gap-3">
          <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-primary text-primary-foreground shadow-lg shadow-primary/25">
            <svg
              viewBox="0 0 24 24"
              fill="none"
              className="h-6 w-6"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              aria-hidden
            >
              <path d="M12 21s-7-5.6-7-11a7 7 0 1 1 14 0c0 5.4-7 11-7 11Z" />
              <circle cx="12" cy="10" r="2.5" />
            </svg>
          </div>
          <div>
            <p className="font-heading text-base font-bold leading-none tracking-tight text-foreground">
              WebGIS Geospasial
            </p>
            <p className="mt-1 text-xs font-medium text-muted-foreground">Sistem Analisis Spasial</p>
          </div>
        </div>

        <div className="mb-7">
          <h2 className="font-heading text-2xl font-bold tracking-tight text-foreground text-balance">
            Selamat Datang Kembali
          </h2>
          <p className="mt-2 text-sm leading-relaxed text-muted-foreground text-pretty">
            Masuk ke akun Anda untuk mengakses peta dan data analisis spasial.
          </p>
        </div>

        <form onSubmit={handleSubmit} className="flex flex-col gap-5">
          {/* Username */}
          <div className="flex flex-col gap-2">
            <Label htmlFor="username" className="text-sm font-semibold text-foreground">
              Nama Pengguna
            </Label>
            <div className="group relative">
              <User
                aria-hidden
                className="pointer-events-none absolute left-3.5 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-muted-foreground transition-colors group-focus-within:text-primary"
              />
              <Input
                id="username"
                type="text"
                required
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                placeholder="Masukkan nama pengguna"
                className="h-12 rounded-xl border-border/80 bg-white/80 pl-11 text-sm shadow-sm transition-all hover:border-primary/60 focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/20"
              />
            </div>
          </div>

          {/* Password */}
          <div className="flex flex-col gap-2">
            <Label htmlFor="password" className="text-sm font-semibold text-foreground">
              Kata Sandi
            </Label>
            <div className="group relative">
              <Lock
                aria-hidden
                className="pointer-events-none absolute left-3.5 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-muted-foreground transition-colors group-focus-within:text-primary"
              />
              <Input
                id="password"
                type={showPassword ? "text" : "password"}
                required
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="Masukkan kata sandi"
                className="h-12 rounded-xl border-border/80 bg-white/80 pl-11 pr-11 text-sm shadow-sm transition-all hover:border-primary/60 focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/20"
              />
              <button
                type="button"
                onClick={() => setShowPassword((s) => !s)}
                aria-label={showPassword ? "Sembunyikan kata sandi" : "Tampilkan kata sandi"}
                className="absolute right-3 top-1/2 -translate-y-1/2 rounded-md p-1 text-muted-foreground transition-colors hover:text-primary"
              >
                {showPassword ? <EyeOff className="h-[18px] w-[18px]" /> : <Eye className="h-[18px] w-[18px]" />}
              </button>
            </div>
          </div>

          {/* Remember + forgot */}
          <div className="flex items-center justify-between">
            <label htmlFor="remember" className="flex cursor-pointer items-center gap-2 select-none">
              <Checkbox
                id="remember"
                className="data-[state=checked]:border-primary data-[state=checked]:bg-primary"
              />
              <span className="text-sm font-medium text-muted-foreground">Ingat saya</span>
            </label>
            <a
              href="#"
              className="text-sm font-semibold text-primary transition-colors hover:text-primary/80"
            >
              Lupa sandi?
            </a>
          </div>

          {/* Submit */}
          <button
            type="submit"
            disabled={loading}
            className={cn(
              "group mt-1 flex h-12 items-center justify-center gap-2 rounded-xl bg-primary text-sm font-semibold text-primary-foreground",
              "shadow-lg shadow-primary/25 transition-all duration-300",
              "hover:-translate-y-0.5 hover:bg-[oklch(0.46_0.21_27)] hover:shadow-xl hover:shadow-primary/35",
              "active:translate-y-0 disabled:cursor-not-allowed disabled:opacity-80",
            )}
          >
            {loading ? (
              <>
                <Loader2 className="h-4 w-4 animate-spin" />
                Memproses...
              </>
            ) : (
              <>
                Masuk
                <ArrowRight className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" />
              </>
            )}
          </button>
        </form>

        {/* Demo accounts helper */}
        <div className="mt-7 rounded-xl border border-border/70 bg-gray-50 p-4">
          <div className="mb-3 flex items-center gap-2">
            <span className="h-1.5 w-1.5 rounded-full bg-primary" />
            <p className="text-xs font-bold uppercase tracking-wide text-foreground">Info Akun Demo</p>
            <span className="text-[11px] font-medium text-muted-foreground">· klik untuk mengisi</span>
          </div>
          <div className="flex flex-col gap-1.5">
            {demoAccounts.map((acc) => (
              <button
                key={acc.role}
                type="button"
                onClick={() => fillDemo(acc.user, acc.pass)}
                className="group flex cursor-pointer items-center justify-between gap-3 rounded-lg border border-transparent bg-white/60 px-3 py-2 text-left transition-all hover:border-primary/30 hover:bg-white hover:shadow-sm"
              >
                <span className="flex items-center gap-2.5">
                  <span aria-hidden className="text-sm leading-none">{acc.icon}</span>
                  <span className="text-xs font-semibold text-foreground">{acc.role}</span>
                </span>
                <span className="font-mono text-[11px] text-muted-foreground transition-colors group-hover:text-primary">
                  {acc.user} · {acc.pass}
                </span>
              </button>
            ))}
          </div>
        </div>
      </div>

      <p className="mt-6 text-center text-xs text-muted-foreground">
        © {new Date().getFullYear()} WebGIS Geospasial · Kementerian Analisis Spasial
      </p>
    </div>
  )
}