"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useToast } from "@/components/ui/toast-provider";
import { LogIn, User, Key } from "lucide-react";

interface LoginDialogProps {
  onLoginSuccess: (userData: any) => void;
}

export default function LoginDialog({ onLoginSuccess }: LoginDialogProps) {
  const { showSuccess, showError } = useToast();
  const [isOpen, setIsOpen] = useState(false);
  const [isLoading, setIsLoading] = useState(false);


  // Ketua Jurusan form state
  const [ketuaForm, setKetuaForm] = useState({
    nip: "",
    password: "",
  });

  // Admin form state
  const [adminForm, setAdminForm] = useState({
    username: "",
    password: "",
  });

  const handleKetuaLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);

    try {
      const response = await fetch("/api/auth/login", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          nip: ketuaForm.nip,
          password: ketuaForm.password,
          role: "ketuajurusan",
        }),
      });

      const data = await response.json();

      if (response.ok) {
        showSuccess("Berhasil!", "Selamat datang, Ketua Jurusan!");
        onLoginSuccess(data);
        setIsOpen(false);
        setKetuaForm({ nip: "", password: "" });
      } else {
        showError("Gagal!", data.message || "NIP atau password salah");
      }
    } catch (error) {
      showError("Gagal!", "Terjadi kesalahan saat login");
    } finally {
      setIsLoading(false);
    }
  };

  const handleAdminLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);

    try {
      const response = await fetch("/api/auth/login", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          username: adminForm.username,
          password: adminForm.password,
          role: "admin",
        }),
      });

      const data = await response.json();

      if (response.ok) {
        showSuccess("Berhasil!", "Selamat datang, Admin!");
        onLoginSuccess(data);
        setIsOpen(false);
        setAdminForm({ username: "", password: "" });
      } else {
        showError("Gagal!", data.message || "Username atau password salah");
      }
    } catch (error) {
      showError("Gagal!", "Terjadi kesalahan saat login");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild>
        <Button variant="outline" className="flex items-center gap-2">
          <LogIn className="h-4 w-4" />
          Login
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            Login ke PODIF
          </DialogTitle>
        </DialogHeader>
        <Tabs defaultValue="ketua" className="w-full">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="ketua">Ketua Jurusan</TabsTrigger>
            <TabsTrigger value="admin">Admin</TabsTrigger>
          </TabsList>
          
          <TabsContent value="ketua" className="space-y-4">
            <form onSubmit={handleKetuaLogin} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="nip">NIP</Label>
                <Input
                  id="nip"
                  type="text"
                  placeholder="Masukkan NIP"
                  value={ketuaForm.nip}
                  onChange={(e) => setKetuaForm({ ...ketuaForm, nip: e.target.value })}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="ketua-password">Password</Label>
                <Input
                  id="ketua-password"
                  type="password"
                  placeholder="Masukkan password"
                  value={ketuaForm.password}
                  onChange={(e) => setKetuaForm({ ...ketuaForm, password: e.target.value })}
                  required
                />
              </div>
              <Button type="submit" className="w-full" disabled={isLoading}>
                {isLoading ? "Loading..." : "Login sebagai Ketua Jurusan"}
              </Button>
            </form>
          </TabsContent>
          
          <TabsContent value="admin" className="space-y-4">
            <form onSubmit={handleAdminLogin} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="username">Username</Label>
                <Input
                  id="username"
                  type="text"
                  placeholder="Masukkan username"
                  value={adminForm.username}
                  onChange={(e) => setAdminForm({ ...adminForm, username: e.target.value })}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="admin-password">Password</Label>
                <Input
                  id="admin-password"
                  type="password"
                  placeholder="Masukkan password"
                  value={adminForm.password}
                  onChange={(e) => setAdminForm({ ...adminForm, password: e.target.value })}
                  required
                />
              </div>
              <Button type="submit" className="w-full" disabled={isLoading}>
                {isLoading ? "Loading..." : "Login sebagai Admin"}
              </Button>
            </form>
          </TabsContent>
        </Tabs>
      </DialogContent>
    </Dialog>
  );
}