"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { useForm } from "@tanstack/react-form";
import { toast } from "sonner";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import AdminUsersService from "@/services/admin.users.service";
import type { User } from "@/types/auth.type";
import { Loader2 } from "lucide-react";

interface UserFormProps {
  user?: User;
  mode: "create" | "edit";
}

const UserForm = ({ user, mode }: UserFormProps) => {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);

  const form = useForm({
    defaultValues: {
      username: user?.username || "",
      password: "",
      role: user?.role || "USER",
    },
    onSubmit: async ({ value }) => {
      setIsSubmitting(true);
      try {
        if (mode === "create") {
          await AdminUsersService.create({
            username: value.username,
            password: value.password,
            role: value.role as "ADMIN" | "USER",
          });
          toast.success("User berhasil ditambahkan");
        } else if (mode === "edit" && user) {
          const updateData: { username?: string; password?: string; role?: "ADMIN" | "USER" } = {};
          if (value.username !== user.username) updateData.username = value.username;
          if (value.password) updateData.password = value.password;
          if (value.role !== user.role) updateData.role = value.role as "ADMIN" | "USER";
          
          if (Object.keys(updateData).length > 0) {
            await AdminUsersService.update(user.id, updateData);
          }
          toast.success("User berhasil diperbarui");
        }
        router.push("/admin/users");
      } catch (error) {
        toast.error(mode === "create" ? "Gagal menambahkan user" : "Gagal memperbarui user");
      } finally {
        setIsSubmitting(false);
      }
    },
  });

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        e.stopPropagation();
        form.handleSubmit();
      }}
      className="space-y-6"
    >
      {/* User Info Card */}
      <Card>
        <CardHeader>
          <CardTitle>Informasi User</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* Username */}
          <form.Field name="username">
            {(field) => (
              <div className="space-y-2">
                <Label htmlFor="username">Username *</Label>
                <Input
                  id="username"
                  value={field.state.value}
                  onChange={(e) => field.handleChange(e.target.value)}
                  placeholder="Masukkan username"
                  required
                />
              </div>
            )}
          </form.Field>

          {/* Password */}
          <form.Field name="password">
            {(field) => (
              <div className="space-y-2">
                <Label htmlFor="password">
                  {mode === "edit" ? "Password (kosongkan jika tidak ingin mengubah)" : "Password *"}
                </Label>
                <Input
                  id="password"
                  type="password"
                  value={field.state.value}
                  onChange={(e) => field.handleChange(e.target.value)}
                  placeholder={mode === "edit" ? "Kosongkan jika tidak ingin mengubah" : "Masukkan password"}
                  required={mode === "create"}
                />
              </div>
            )}
          </form.Field>

          {/* Role */}
          <form.Field name="role">
            {(field) => (
              <div className="space-y-2">
                <Label htmlFor="role">Role *</Label>
                <Select
                  value={field.state.value}
                  onValueChange={(value) => {
                    if (value) field.handleChange(value);
                  }}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Pilih role" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="ADMIN">ADMIN</SelectItem>
                    <SelectItem value="USER">USER</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            )}
          </form.Field>
        </CardContent>
      </Card>

      {/* Submit Buttons */}
      <div className="flex gap-4">
        <Button
          type="button"
          variant="outline"
          onClick={() => router.push("/admin/users")}
        >
          Batal
        </Button>
        <Button type="submit" disabled={isSubmitting}>
          {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
          {mode === "create" ? "Tambah User" : "Simpan Perubahan"}
        </Button>
      </div>
    </form>
  );
};

export default UserForm;