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";
import { NpiProviderTable } from "@/components/settings/npiProviderTable";

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"})`,
    );

  // MANAGE USERS (admin only)
  const [newUsername, setNewUsername] = useState("");
  const [newPassword, setNewPassword] = useState("");

  const {
    data: allUsers = [],
    refetch: refetchUsers,
  } = useQuery<{ id: number; username: string }[]>({
    queryKey: ["/api/users/list"],
    queryFn: async () => {
      const res = await apiRequest("GET", "/api/users/list");
      if (!res.ok) return [];
      return res.json();
    },
    enabled: false, // loaded lazily below
  });

  const { user: currentUser } = useAuth();
  const isAdmin = currentUser?.username === "admin";

  useEffect(() => {
    if (isAdmin) refetchUsers();
  }, [isAdmin]);

  const addUserMutation = useMutation({
    mutationFn: async (data: { username: string; password: string }) => {
      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 create user");
      }
      return res.json();
    },
    onSuccess: () => {
      setNewUsername("");
      setNewPassword("");
      refetchUsers();
      toast({ title: "User Created", description: "New user added successfully." });
    },
    onError: (err: any) => {
      toast({ title: "Error", description: err?.message || "Failed to create user", variant: "destructive" });
    },
  });

  const deleteUserMutation = useMutation({
    mutationFn: async (id: number) => {
      const res = await apiRequest("DELETE", `/api/users/${id}`);
      if (!res.ok) throw new Error("Failed to delete user");
    },
    onSuccess: () => {
      refetchUsers();
      toast({ title: "User Deleted", description: "User removed successfully." });
    },
    onError: (err: any) => {
      toast({ title: "Error", description: err?.message || "Failed to delete user", variant: "destructive" });
    },
  });

  // MANAGE USER (own account)
  const [usernameUser, setUsernameUser] = useState("");

  useEffect(() => {
    if (currentUser?.username) {
      setUsernameUser(currentUser.username);
    }
  }, [currentUser]);

  //update user mutation
  const updateUserMutate = useMutation({
    mutationFn: async (
      updates: Partial<{ username: string; password: string }>,
    ) => {
      if (!currentUser?.id) throw new Error("User not loaded");
      const res = await apiRequest("PUT", `/api/users/${currentUser.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>
      )}

      {/* Manage Users section (admin only) */}
      {isAdmin && (
        <Card className="mt-6">
          <CardContent className="space-y-4 py-6">
            <h3 className="text-lg font-semibold">Manage Users</h3>

            {/* Existing users list */}
            <div className="border rounded divide-y">
              {allUsers.length === 0 && (
                <p className="text-sm text-gray-500 p-3">No users found.</p>
              )}
              {allUsers.map((u) => (
                <div key={u.id} className="flex items-center justify-between px-3 py-2">
                  <span className="text-sm font-medium">{u.username}</span>
                  {u.username !== "admin" && (
                    <button
                      className="text-sm text-red-600 hover:underline"
                      onClick={() => deleteUserMutation.mutate(u.id)}
                      disabled={deleteUserMutation.isPending}
                    >
                      Delete
                    </button>
                  )}
                </div>
              ))}
            </div>

            {/* Add new user form */}
            <form
              className="space-y-3 pt-2"
              onSubmit={(e) => {
                e.preventDefault();
                if (!newUsername.trim() || !newPassword.trim()) return;
                addUserMutation.mutate({ username: newUsername.trim(), password: newPassword.trim() });
              }}
            >
              <h4 className="text-sm font-semibold text-gray-700">Add New User</h4>
              <div>
                <label className="block text-sm font-medium">Username</label>
                <input
                  type="text"
                  value={newUsername}
                  onChange={(e) => setNewUsername(e.target.value)}
                  className="mt-1 p-2 border rounded w-full"
                  placeholder="Enter username"
                  required
                />
              </div>
              <div>
                <label className="block text-sm font-medium">Password</label>
                <input
                  type="password"
                  value={newPassword}
                  onChange={(e) => setNewPassword(e.target.value)}
                  className="mt-1 p-2 border rounded w-full"
                  placeholder="••••••••"
                  required
                />
              </div>
              <button
                type="submit"
                className="bg-teal-600 text-white px-4 py-2 rounded hover:bg-teal-700"
                disabled={addUserMutation.isPending}
              >
                {addUserMutation.isPending ? "Adding..." : "Add User"}
              </button>
            </form>
          </CardContent>
        </Card>
      )}

      {/* User Setting section */}
      <Card className="mt-6">
        <CardContent className="space-y-4 py-6">
          <h3 className="text-lg font-semibold">User Settings</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-teal-600 text-white px-4 py-2 rounded hover:bg-teal-700"
              disabled={updateUserMutate.isPending}
            >
              {updateUserMutate.isPending ? "Saving..." : "Save Changes"}
            </button>
          </form>
        </CardContent>
      </Card>

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

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