import React, { useState, useEffect } from "react";
import { Eye, EyeOff } from "lucide-react";
import { useQuery, useMutation } from "@tanstack/react-query";
import { useParams } from "wouter";
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 { NpiProviderTable } from "@/components/settings/npiProviderTable";
import { ProgramBridgeTable } from "@/components/settings/program-bridge-table";
import { TwilioSettingsCard } from "@/components/settings/twilio-settings-card";
import { AiSettingsCard } from "@/components/settings/ai-settings-card";
import { OfficeHoursCard } from "@/components/settings/office-hours-card";
import { OfficeContactCard } from "@/components/settings/office-contact-card";
import { ProcedureTimeslotCard } from "@/components/settings/procedure-timeslot-card";
import { InsuranceContactCard } from "@/components/settings/insurance-contact-card";
import { AiChatSettingsCard } from "@/components/settings/ai-chat-settings-card";
import { SeleniumSettingsCard } from "@/components/settings/selenium-settings-card";
export default function SettingsPage() {
    const { toast } = useToast();
    const { user: currentUser } = useAuth();
    const isAdmin = currentUser?.username === "admin";
    const params = useParams();
    const section = params.section ?? "staff";
    // Staff state
    const [modalOpen, setModalOpen] = useState(false);
    const [editingStaff, setEditingStaff] = useState(null);
    const [isDeleteStaffOpen, setIsDeleteStaffOpen] = useState(false);
    const [currentStaff, setCurrentStaff] = useState(undefined);
    // User management state
    const [newUsername, setNewUsername] = useState("");
    const [newPassword, setNewPassword] = useState("");
    const [showNewUserPassword, setShowNewUserPassword] = useState(false);
    const [showAdminPassword, setShowAdminPassword] = useState(false);
    const [usernameUser, setUsernameUser] = useState("");
    useEffect(() => {
        if (currentUser?.username)
            setUsernameUser(currentUser.username);
    }, [currentUser]);
    // ── Staff ──────────────────────────────────────────────────────
    const { data: staff = [], isLoading: staffLoading, isError: staffError, error: staffErrorMsg } = useQuery({
        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,
    });
    const addStaffMutate = useMutation({
        mutationFn: async (newStaff) => {
            const res = await apiRequest("POST", "/api/staffs/", newStaff);
            if (!res.ok) {
                const e = await res.json().catch(() => null);
                throw new Error(e?.message || "Failed to add staff");
            }
            return res.json();
        },
        onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["/api/staffs/"] }); toast({ title: "Staff Added" }); },
        onError: (e) => toast({ title: "Error", description: e?.message, variant: "destructive" }),
    });
    const updateStaffMutate = useMutation({
        mutationFn: async ({ id, updatedFields }) => {
            const res = await apiRequest("PUT", `/api/staffs/${id}`, updatedFields);
            if (!res.ok) {
                const e = await res.json().catch(() => null);
                throw new Error(e?.message || "Failed to update staff");
            }
            return res.json();
        },
        onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["/api/staffs/"] }); toast({ title: "Staff Updated" }); },
        onError: (e) => toast({ title: "Error", description: e?.message, variant: "destructive" }),
    });
    const deleteStaffMutation = useMutation({
        mutationFn: async (id) => {
            const res = await apiRequest("DELETE", `/api/staffs/${id}`);
            if (!res.ok) {
                const e = await res.json().catch(() => null);
                throw new Error(e?.message || "Failed to delete staff");
            }
            return id;
        },
        onSuccess: () => { setIsDeleteStaffOpen(false); queryClient.invalidateQueries({ queryKey: ["/api/staffs/"] }); toast({ title: "Staff Removed" }); },
        onError: (e) => toast({ title: "Error", description: e?.message, variant: "destructive" }),
    });
    useEffect(() => {
        if (addStaffMutate.status === "success" || updateStaffMutate.status === "success")
            setModalOpen(false);
    }, [addStaffMutate.status, updateStaffMutate.status]);
    // ── Users ──────────────────────────────────────────────────────
    const { data: allUsers = [], refetch: refetchUsers } = useQuery({
        queryKey: ["/api/users/list"],
        queryFn: async () => { const res = await apiRequest("GET", "/api/users/list"); if (!res.ok)
            return []; return res.json(); },
        enabled: false,
    });
    useEffect(() => { if (isAdmin)
        refetchUsers(); }, [isAdmin]);
    const addUserMutation = useMutation({
        mutationFn: async (data) => {
            const res = await apiRequest("POST", "/api/users/", data);
            if (!res.ok) {
                const e = await res.json().catch(() => null);
                throw new Error(e?.error || "Failed to create user");
            }
            return res.json();
        },
        onSuccess: () => { setNewUsername(""); setNewPassword(""); refetchUsers(); toast({ title: "User Created" }); },
        onError: (e) => toast({ title: "Error", description: e?.message, variant: "destructive" }),
    });
    const deleteUserMutation = useMutation({
        mutationFn: async (id) => { const res = await apiRequest("DELETE", `/api/users/${id}`); if (!res.ok)
            throw new Error("Failed to delete user"); },
        onSuccess: () => { refetchUsers(); toast({ title: "User Deleted" }); },
        onError: (e) => toast({ title: "Error", description: e?.message, variant: "destructive" }),
    });
    const updateUserMutate = useMutation({
        mutationFn: async (updates) => {
            if (!currentUser?.id)
                throw new Error("User not loaded");
            const res = await apiRequest("PUT", `/api/users/${currentUser.id}`, updates);
            if (!res.ok) {
                const e = await res.json().catch(() => null);
                throw new Error(e?.error || "Failed to update user");
            }
            return res.json();
        },
        onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["/api/users/"] }); toast({ title: "Updated", description: "Your profile has been updated." }); },
        onError: (e) => toast({ title: "Error", description: e?.message, variant: "destructive" }),
    });
    // ── Section renderer ───────────────────────────────────────────
    const renderSection = () => {
        switch (section) {
            case "staff":
                return (<Card>
            <CardContent>
              <div className="mt-4">
                <StaffTable staff={staff} isLoading={staffLoading} isError={staffError} onAdd={() => { setEditingStaff(null); setModalOpen(true); }} onEdit={(s) => { setEditingStaff(s); setModalOpen(true); }} onDelete={(s) => { setCurrentStaff(s); setIsDeleteStaffOpen(true); }} onView={(s) => alert(`Viewing staff member:\n${s.name} (${s.email || "No email"})`)}/>
                {staffError && <p className="mt-4 text-red-600">{staffErrorMsg?.message || "Failed to load staff data."}</p>}
                <DeleteConfirmationDialog isOpen={isDeleteStaffOpen} onConfirm={() => { if (currentStaff?.id)
                    deleteStaffMutation.mutate(currentStaff.id); }} onCancel={() => setIsDeleteStaffOpen(false)} entityName={currentStaff?.name}/>
              </div>
            </CardContent>
          </Card>);
            case "users":
                return (<Card>
            <CardContent className="space-y-4 py-6">
              <h3 className="text-lg font-semibold">Manage Users</h3>
              <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>
              <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>
                  <div className="relative mt-1">
                    <input type={showNewUserPassword ? "text" : "password"} value={newPassword} onChange={(e) => setNewPassword(e.target.value)} className="p-2 border rounded w-full pr-10" placeholder="••••••••" required/>
                    <button type="button" onClick={() => setShowNewUserPassword((v) => !v)} className="absolute inset-y-0 right-2 flex items-center text-gray-500 hover:text-gray-700" tabIndex={-1}>
                      {showNewUserPassword ? <EyeOff size={16}/> : <Eye size={16}/>}
                    </button>
                  </div>
                </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>);
            case "account":
                return (<Card>
            <CardContent className="space-y-4 py-6">
              <h3 className="text-lg font-semibold">Account 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({ ...(isAdmin ? {} : { 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 disabled:bg-gray-100 disabled:cursor-not-allowed disabled:text-gray-500" disabled={isAdmin}/>
                  {isAdmin && <p className="text-xs text-gray-500 mt-1">Admin username cannot be changed.</p>}
                </div>
                <div>
                  <label className="block text-sm font-medium">New Password</label>
                  <div className="relative mt-1">
                    <input type={showAdminPassword ? "text" : "password"} name="password" className="p-2 border rounded w-full pr-10" placeholder="••••••••"/>
                    <button type="button" onClick={() => setShowAdminPassword((v) => !v)} className="absolute inset-y-0 right-2 flex items-center text-gray-500 hover:text-gray-700" tabIndex={-1}>
                      {showAdminPassword ? <EyeOff size={16}/> : <Eye size={16}/>}
                    </button>
                  </div>
                  <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>);
            case "credentials":
                return <CredentialTable />;
            case "npi":
                return <NpiProviderTable />;
            case "programs":
                return <ProgramBridgeTable />;
            case "twilio":
                return <TwilioSettingsCard />;
            case "ai":
                return <AiSettingsCard />;
            case "aichat":
                return <AiChatSettingsCard />;
            case "officehours":
                return <OfficeHoursCard />;
            case "officecontact":
                return <OfficeContactCard />;
            case "proceduretimeslot":
                return <ProcedureTimeslotCard />;
            case "insurancecontact":
                return <InsuranceContactCard />;
            case "selenium":
                return <SeleniumSettingsCard />;
            default:
                return null;
        }
    };
    return (<>
      {renderSection()}

      {/* Staff add/edit modal */}
      {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={(formData) => {
                if (editingStaff) {
                    if (!editingStaff.id)
                        return;
                    updateStaffMutate.mutate({ id: editingStaff.id, updatedFields: formData });
                }
                else {
                    addStaffMutate.mutate(formData);
                }
            }} onCancel={() => setModalOpen(false)} isLoading={addStaffMutate.status === "pending" || updateStaffMutate.status === "pending"}/>
          </div>
        </div>)}
    </>);
}