import React, { useState, useEffect } from "react";
import { useQuery, useMutation } from "@tanstack/react-query";
import { StaffTable } from "@/components/staffs/staff-table";
import { useToast } from "@/hooks/use-toast";
import { Card, CardContent } from "@/components/ui/card";
import { apiRequest, queryClient } from "@/lib/queryClient";
import { StaffForm } from "@/components/staffs/staff-form";
import { DeleteConfirmationDialog } from "@/components/ui/deleteDialog";
import { CredentialTable } from "@/components/settings/insuranceCredTable";
import { useAuth } from "@/hooks/use-auth";
import { Staff } from "@repo/db/types";

type SafeUser = { id: number; username: string; role: "ADMIN" | "USER" };

export default function SettingsPage() {
  const { toast } = useToast();
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  // Modal and editing staff state
  const [modalOpen, setModalOpen] = useState(false);
  const [credentialModalOpen, setCredentialModalOpen] = useState(false);
  const [editingStaff, setEditingStaff] = useState<Staff | null>(null);

  const toggleMobileMenu = () => setIsMobileMenuOpen((prev) => !prev);

  // Fetch staff data
  const {
    data: staff = [],
    isLoading,
    isError,
    error,
  } = useQuery<Staff[]>({
    queryKey: ["/api/staffs/"],
    queryFn: async () => {
      const res = await apiRequest("GET", "/api/staffs/");
      if (!res.ok) {
        throw new Error("Failed to fetch staff");
      }
      return res.json();
    },
    staleTime: 1000 * 60 * 5, // 5 minutes cache
  });

  // Add Staff mutation
  const addStaffMutate = useMutation<
    Staff, // Return type
    Error, // Error type
    Omit<Staff, "id" | "createdAt"> // Variables
  >({
    mutationFn: async (newStaff: Omit<Staff, "id" | "createdAt">) => {
      const res = await apiRequest("POST", "/api/staffs/", newStaff);
      if (!res.ok) {
        const errorData = await res.json().catch(() => null);
        throw new Error(errorData?.message || "Failed to add staff");
      }
      return res.json();
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["/api/staffs/"] });
      toast({
        title: "Staff Added",
        description: "Staff member added successfully.",
        variant: "default",
      });
    },
    onError: (error: any) => {
      toast({
        title: "Error",
        description: error?.message || "Failed to add staff",
        variant: "destructive",
      });
    },
  });

  // Update Staff mutation
  const updateStaffMutate = useMutation<
    Staff,
    Error,
    { id: number; updatedFields: Partial<Staff> }
  >({
    mutationFn: async ({
      id,
      updatedFields,
    }: {
      id: number;
      updatedFields: Partial<Staff>;
    }) => {
      const res = await apiRequest("PUT", `/api/staffs/${id}`, updatedFields);
      if (!res.ok) {
        const errorData = await res.json().catch(() => null);
        throw new Error(errorData?.message || "Failed to update staff");
      }
      return res.json();
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["/api/staffs/"] });
      toast({
        title: "Staff Updated",
        description: "Staff member updated successfully.",
        variant: "default",
      });
    },
    onError: (error: any) => {
      toast({
        title: "Error",
        description: error?.message || "Failed to update staff",
        variant: "destructive",
      });
    },
  });

  // Delete Staff mutation
  const deleteStaffMutation = useMutation<number, Error, number>({
    mutationFn: async (id: number) => {
      const res = await apiRequest("DELETE", `/api/staffs/${id}`);
      if (!res.ok) {
        const errorData = await res.json().catch(() => null);
        throw new Error(errorData?.message || "Failed to delete staff");
      }
      return id;
    },
    onSuccess: () => {
      setIsDeleteStaffOpen(false);
      queryClient.invalidateQueries({ queryKey: ["/api/staffs/"] });
      toast({
        title: "Staff Removed",
        description: "Staff member deleted.",
        variant: "default",
      });
    },
    onError: (error: any) => {
      toast({
        title: "Error",
        description: error?.message || "Failed to delete staff",
        variant: "destructive",
      });
    },
  });

  // Extract mutation states for modal control and loading

  const isAdding = addStaffMutate.status === "pending";
  const isAddSuccess = addStaffMutate.status === "success";

  const isUpdating = updateStaffMutate.status === "pending";
  const isUpdateSuccess = updateStaffMutate.status === "success";

  // Open Add modal
  const openAddStaffModal = () => {
    setEditingStaff(null);
    setModalOpen(true);
  };

  // Open Edit modal
  const openEditStaffModal = (staff: Staff) => {
    setEditingStaff(staff);
    setModalOpen(true);
  };

  // Handle form submit for Add or Edit
  const handleFormSubmit = (formData: Omit<Staff, "id" | "createdAt">) => {
    if (editingStaff) {
      // Editing existing staff
      if (editingStaff.id === undefined) {
        toast({
          title: "Error",
          description: "Staff ID is missing",
          variant: "destructive",
        });
        return;
      }
      updateStaffMutate.mutate({
        id: editingStaff.id,
        updatedFields: formData,
      });
    } else {
      addStaffMutate.mutate(formData);
    }
  };

  const handleModalCancel = () => {
    setModalOpen(false);
  };

  // Close modal on successful add/update
  useEffect(() => {
    if (isAddSuccess || isUpdateSuccess) {
      setModalOpen(false);
    }
  }, [isAddSuccess, isUpdateSuccess]);

  const [isDeleteStaffOpen, setIsDeleteStaffOpen] = useState(false);
  const [currentStaff, setCurrentStaff] = useState<Staff | undefined>(
    undefined
  );

  const handleDeleteStaff = (staff: Staff) => {
    setCurrentStaff(staff);
    setIsDeleteStaffOpen(true);
  };

  const handleConfirmDeleteStaff = async () => {
    if (currentStaff?.id) {
      deleteStaffMutation.mutate(currentStaff.id);
    } else {
      toast({
        title: "Error",
        description: "No Staff selected for deletion.",
        variant: "destructive",
      });
    }
  };

  const handleViewStaff = (staff: Staff) =>
    alert(
      `Viewing staff member:\n${staff.name} (${staff.email || "No email"})`
    );

  // --- Users control (list, add, edit password, delete) ---
  const {
    data: usersList = [],
    isLoading: usersLoading,
    isError: usersError,
    error: usersErrorObj,
  } = useQuery<SafeUser[]>({
    queryKey: ["/api/users/list"],
    queryFn: async () => {
      const res = await apiRequest("GET", "/api/users/list");
      if (!res.ok) throw new Error("Failed to fetch users");
      return res.json();
    },
    staleTime: 1000 * 60 * 2,
  });

  const addUserMutate = useMutation<SafeUser, Error, { username: string; password: string; role?: "ADMIN" | "USER" }>({
    mutationFn: async (data) => {
      const res = await apiRequest("POST", "/api/users/", data);
      if (!res.ok) {
        const err = await res.json().catch(() => null);
        throw new Error(err?.error || "Failed to add user");
      }
      return res.json();
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["/api/users/list"] });
      setAddUserModalOpen(false);
      toast({ title: "User Added", description: "User created successfully.", variant: "default" });
    },
    onError: (e: any) => {
      toast({ title: "Error", description: e?.message || "Failed to add user", variant: "destructive" });
    },
  });

  const updateUserPasswordMutate = useMutation<SafeUser, Error, { id: number; password: string }>({
    mutationFn: async ({ id, password }) => {
      const res = await apiRequest("PUT", `/api/users/${id}`, { password });
      if (!res.ok) {
        const err = await res.json().catch(() => null);
        throw new Error(err?.error || "Failed to update password");
      }
      return res.json();
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["/api/users/list"] });
      setEditPasswordUser(null);
      toast({ title: "Password Updated", description: "Password changed successfully.", variant: "default" });
    },
    onError: (e: any) => {
      toast({ title: "Error", description: e?.message || "Failed to update password", variant: "destructive" });
    },
  });

  const deleteUserMutate = useMutation<number, Error, number>({
    mutationFn: async (id) => {
      const res = await apiRequest("DELETE", `/api/users/${id}`);
      if (!res.ok) {
        const err = await res.json().catch(() => null);
        throw new Error(err?.error || "Failed to delete user");
      }
      return id;
    },
    onSuccess: () => {
      setUserToDelete(null);
      queryClient.invalidateQueries({ queryKey: ["/api/users/list"] });
      toast({ title: "User Removed", description: "User deleted.", variant: "default" });
    },
    onError: (e: any) => {
      toast({ title: "Error", description: e?.message || "Failed to delete user", variant: "destructive" });
    },
  });

  const [addUserModalOpen, setAddUserModalOpen] = useState(false);
  const [editPasswordUser, setEditPasswordUser] = useState<SafeUser | null>(null);
  const [userToDelete, setUserToDelete] = useState<SafeUser | null>(null);

  // MANAGE USER (current user profile)
  const [usernameUser, setUsernameUser] = useState("");

  //fetch user
  const { user } = useAuth();
  useEffect(() => {
    if (user?.username) {
      setUsernameUser(user.username);
    }
  }, [user]);

  //update user mutation
  const updateUserMutate = useMutation({
    mutationFn: async (
      updates: Partial<{ username: string; password: string }>
    ) => {
      if (!user?.id) throw new Error("User not loaded");
      const res = await apiRequest("PUT", `/api/users/${user.id}`, updates);
      if (!res.ok) {
        const errorData = await res.json().catch(() => null);
        throw new Error(errorData?.error || "Failed to update user");
      }
      return res.json();
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["/api/users/"] });
      toast({
        title: "Updated",
        description: "Your profile has been updated.",
        variant: "default",
      });
    },
    onError: (err: any) => {
      toast({
        title: "Error",
        description: err?.message || "Failed to update user",
        variant: "destructive",
      });
    },
  });

  return (
    <div>
          <Card>
            <CardContent>
              <div className="mt-8">
                <StaffTable
                  staff={staff}
                  isLoading={isLoading}
                  isError={isError}
                  onAdd={openAddStaffModal}
                  onEdit={openEditStaffModal}
                  onDelete={handleDeleteStaff}
                  onView={handleViewStaff}
                />
                {isError && (
                  <p className="mt-4 text-red-600">
                    {(error as Error)?.message || "Failed to load staff data."}
                  </p>
                )}

                <DeleteConfirmationDialog
                  isOpen={isDeleteStaffOpen}
                  onConfirm={handleConfirmDeleteStaff}
                  onCancel={() => setIsDeleteStaffOpen(false)}
                  entityName={currentStaff?.name}
                />
              </div>
            </CardContent>
          </Card>

          {/* Modal Overlay */}
          {modalOpen && (
            <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
              <div className="bg-white rounded-lg p-6 w-full max-w-md shadow-lg">
                <h2 className="text-lg font-bold mb-4">
                  {editingStaff ? "Edit Staff" : "Add Staff"}
                </h2>
                <StaffForm
                  initialData={editingStaff || undefined}
                  onSubmit={handleFormSubmit}
                  onCancel={handleModalCancel}
                  isLoading={isAdding || isUpdating}
                />
              </div>
            </div>
          )}

          {/* Users control section */}
          <Card className="mt-6">
            <CardContent className="py-6">
              <div className="flex justify-between items-center mb-4">
                <h3 className="text-lg font-semibold">User Accounts</h3>
                <button
                  type="button"
                  onClick={() => setAddUserModalOpen(true)}
                  className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
                >
                  Add User
                </button>
              </div>
              <div className="overflow-x-auto">
                <table className="min-w-full divide-y divide-gray-200">
                  <thead className="bg-gray-50">
                    <tr>
                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Username</th>
                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Role</th>
                      <th className="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
                    </tr>
                  </thead>
                  <tbody className="bg-white divide-y divide-gray-200">
                    {usersLoading && (
                      <tr><td colSpan={3} className="px-4 py-4 text-gray-500">Loading users...</td></tr>
                    )}
                    {usersError && (
                      <tr><td colSpan={3} className="px-4 py-4 text-red-600">{(usersErrorObj as Error)?.message}</td></tr>
                    )}
                    {!usersLoading && !usersError && usersList.filter((u) => u.id !== user?.id).length === 0 && (
                      <tr><td colSpan={3} className="px-4 py-4 text-gray-500">No other users.</td></tr>
                    )}
                    {!usersLoading && usersList.filter((u) => u.id !== user?.id).map((u) => (
                      <tr key={u.id}>
                        <td className="px-4 py-2">
                          <span>{u.username}</span>
                        </td>
                        <td className="px-4 py-2">{u.role}</td>
                        <td className="px-4 py-2 text-right space-x-2">
                          <button
                            type="button"
                            onClick={() => setEditPasswordUser(u)}
                            className="text-blue-600 hover:underline"
                          >
                            Edit password
                          </button>
                          <button
                            type="button"
                            onClick={() => setUserToDelete(u)}
                            className="text-red-600 hover:underline"
                            title="Delete user"
                          >
                            Delete
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </CardContent>
          </Card>

          {/* User Setting section (current user profile) */}
          <Card className="mt-6">
            <CardContent className="space-y-4 py-6">
              <h3 className="text-lg font-semibold">Admin Setting</h3>
              <form
                className="space-y-4"
                onSubmit={(e) => {
                  e.preventDefault();
                  const formData = new FormData(e.currentTarget);
                  const password =
                    formData.get("password")?.toString().trim() || undefined;

                  updateUserMutate.mutate({
                    username: usernameUser?.trim() || undefined,
                    password: password || undefined,
                  });
                }}
              >
                <div>
                  <label className="block text-sm font-medium">Username</label>
                  <input
                    type="text"
                    name="username"
                    value={usernameUser}
                    onChange={(e) => setUsernameUser(e.target.value)}
                    className="mt-1 p-2 border rounded w-full"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium">
                    New Password
                  </label>
                  <input
                    type="password"
                    name="password"
                    className="mt-1 p-2 border rounded w-full"
                    placeholder="••••••••"
                  />
                  <p className="text-xs text-gray-500 mt-1">
                    Leave blank to keep current password.
                  </p>
                </div>

                <button
                  type="submit"
                  className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
                  disabled={updateUserMutate.isPending}
                >
                  {updateUserMutate.isPending ? "Saving..." : "Save Changes"}
                </button>
              </form>
            </CardContent>
          </Card>

          {/* Add User modal */}
          {addUserModalOpen && (
            <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
              <div className="bg-white rounded-lg p-6 w-full max-w-md shadow-lg">
                <h2 className="text-lg font-bold mb-4">Add User</h2>
                <form
                  onSubmit={(e) => {
                    e.preventDefault();
                    const form = e.currentTarget;
                    const username = (form.querySelector('[name="new-username"]') as HTMLInputElement)?.value?.trim();
                    const password = (form.querySelector('[name="new-password"]') as HTMLInputElement)?.value;
                    const role = (form.querySelector('[name="new-role"]') as HTMLSelectElement)?.value as "ADMIN" | "USER";
                    if (!username || !password) {
                      toast({ title: "Error", description: "Username and password are required.", variant: "destructive" });
                      return;
                    }
                    addUserMutate.mutate({ username, password, role: role || "USER" });
                  }}
                  className="space-y-4"
                >
                  <div>
                    <label className="block text-sm font-medium">Username</label>
                    <input name="new-username" type="text" required className="mt-1 p-2 border rounded w-full" />
                  </div>
                  <div>
                    <label className="block text-sm font-medium">Password</label>
                    <input name="new-password" type="password" required className="mt-1 p-2 border rounded w-full" placeholder="••••••••" />
                  </div>
                  <div>
                    <label className="block text-sm font-medium">Role</label>
                    <select name="new-role" className="mt-1 p-2 border rounded w-full" defaultValue="USER">
                      <option value="USER">User</option>
                      <option value="ADMIN">Admin</option>
                    </select>
                  </div>
                  <div className="flex gap-2 justify-end">
                    <button type="button" onClick={() => setAddUserModalOpen(false)} className="px-4 py-2 border rounded hover:bg-gray-100">
                      Cancel
                    </button>
                    <button type="submit" disabled={addUserMutate.isPending} className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50">
                      {addUserMutate.isPending ? "Adding..." : "Add User"}
                    </button>
                  </div>
                </form>
              </div>
            </div>
          )}

          {/* Edit password modal */}
          {editPasswordUser && (
            <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
              <div className="bg-white rounded-lg p-6 w-full max-w-md shadow-lg">
                <h2 className="text-lg font-bold mb-4">Change password for {editPasswordUser.username}</h2>
                <form
                  onSubmit={(e) => {
                    e.preventDefault();
                    const form = e.currentTarget;
                    const password = (form.querySelector('[name="edit-password"]') as HTMLInputElement)?.value;
                    if (!password?.trim()) {
                      toast({ title: "Error", description: "Password is required.", variant: "destructive" });
                      return;
                    }
                    updateUserPasswordMutate.mutate({ id: editPasswordUser.id, password });
                  }}
                  className="space-y-4"
                >
                  <div>
                    <label className="block text-sm font-medium">New password</label>
                    <input name="edit-password" type="password" required className="mt-1 p-2 border rounded w-full" placeholder="••••••••" />
                  </div>
                  <div className="flex gap-2 justify-end">
                    <button type="button" onClick={() => setEditPasswordUser(null)} className="px-4 py-2 border rounded hover:bg-gray-100">
                      Cancel
                    </button>
                    <button type="submit" disabled={updateUserPasswordMutate.isPending} className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50">
                      {updateUserPasswordMutate.isPending ? "Saving..." : "Save"}
                    </button>
                  </div>
                </form>
              </div>
            </div>
          )}

          <DeleteConfirmationDialog
            isOpen={!!userToDelete}
            onConfirm={() => userToDelete && deleteUserMutate.mutate(userToDelete.id)}
            onCancel={() => setUserToDelete(null)}
            entityName={userToDelete?.username}
          />

          {/* Credential Section */}
          <div className="mt-6">
            <CredentialTable />
          </div>
    </div>
  );
}