import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Lock, User as UserIcon, Loader2 } from "lucide-react";
import { toast } from "sonner";
import { useSip } from "@/lib/sip-data";
import logoAsset from "@/assets/logo_smpn8.png.asset.json";

export function LoginView() {
  const { login, users } = useSip();
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);

  const submit = (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setTimeout(() => {
      const user = login(username, password);
      setLoading(false);
      if (!user) {
        const target = users.find(
          (u) => u.username.trim().toLowerCase() === username.trim().toLowerCase(),
        );
        toast.error("Login Gagal", {
          description: target?.nonaktif
            ? "Akun Anda dinonaktifkan oleh admin."
            : "Username atau password salah.",
        });
        return;
      }
      toast.success(`Selamat datang, ${user.nama}`, { description: `Login sebagai ${user.role}` });
    }, 500);
  };

  return (
    <div className="gradient-auth flex min-h-screen items-center justify-center p-4">
      <div className="surface-card w-full max-w-md p-8">
        <div className="mb-8 text-center">
          <img
            src={logoAsset.url}
            alt="Logo SMP Negeri 8 Palangka Raya"
            className="mx-auto mb-4 h-24 w-24 object-contain"
          />
          <h1 className="text-2xl font-bold">SIP SMPN 8</h1>
          <p className="text-muted-foreground text-sm font-medium">Sistem Informasi Petugas Piket</p>
          <p className="text-muted-foreground/70 mt-1 text-xs">SMP Negeri 8 Palangka Raya</p>
        </div>

        <form onSubmit={submit} className="space-y-4">
          <div className="grid gap-2">
            <Label htmlFor="username">Username</Label>
            <div className="relative">
              <UserIcon className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
              <Input
                id="username"
                className="pl-9"
                placeholder="Masukkan username Anda"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                required
              />
            </div>
          </div>
          <div className="grid gap-2">
            <Label htmlFor="password">Password</Label>
            <div className="relative">
              <Lock className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
              <Input
                id="password"
                type="password"
                className="pl-9"
                placeholder="Masukkan password Anda"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
              />
            </div>
          </div>
          <Button type="submit" className="h-11 w-full" disabled={loading}>
            {loading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
            Masuk ke Sistem
          </Button>
        </form>

      </div>
    </div>
  );
}