import { useLogoutMutation } from '@/app/backend/endpoints/auth';
import { Button } from '@/components/ui/formsButton';
import { LogOutIcon, TextCursorInput } from 'lucide-react';
import { toast } from 'sonner';
import { useNavigate } from 'react-router-dom';
import useUser from '@/hooks/useUser';
import AlertDialogResetPassword from '@/components/AlertDialogResetPassword';

function SettingsPage() {
  const { user } = useUser();
  const role = user?.role === 'superAdmin' ? 'Super Admin' : 'Admin';
  const [logout, { isLoading }] = useLogoutMutation();
  const navigate = useNavigate();
  return (
    <section className="flex items-center justify-center w-full h-full">
      <div className="w-full max-w-[700px] flex flex-col items-center justify-between p-16 gap-4">
        <div className="bg-white flex flex-row p-6 rounded-lg border-2 justify-start gap-8 items-center w-full">
          <div className="flex flex-col gap-2">
            <div className="flex flex-row gap-2 items-center justify-center">
              <div className="text-3xl font-semibold">
                {`${user?.firstName} ${user?.lastName}`}
              </div>
              <div className="bg-purple-200 rounded-2xl mt-2 border border-purple-700 w-fit items-center justify-center">
                <div className="text-center text-purple-800 px-4 text-sm">
                  {role}
                </div>
              </div>
            </div>
            <div className="text-xl text-slate-400">{user?.email}</div>
          </div>
        </div>
        <div className="bg-white flex flex-row p-6 rounded-lg border-2 justify-between gap-8 items-center w-full">
          <AlertDialogResetPassword userId={user?._id!}>
            <Button
              variant={'outline'}
              className="pl-6 pr-8 rounded-md bg-slate-50 gap-2"
            >
              <TextCursorInput />
              Reset Password
            </Button>
          </AlertDialogResetPassword>
          <Button
            variant={'destructive'}
            className="pl-10 pr-12 rounded-md gap-2"
            isLoading={isLoading}
            onClick={() => {
              logout()
                .unwrap()
                .then(() => {
                  toast.success('Logged out successfully!');
                  navigate('/admin/login');
                })
                .catch((error: any) => {
                  toast.error(error?.data?.message ?? error?.error.toString());
                });
            }}
          >
            <LogOutIcon /> Logout
          </Button>
        </div>
      </div>
    </section>
  );
}

export default SettingsPage;

// import { useLogoutMutation } from '@/app/backend/endpoints/auth';
// import PageTitle from '@/components/Dashboard/PageTitle';
// import { Button } from '@/components/ui/formsButton';
// import { Card, CardContent } from '@/components/ui/card';
// import useUser from '@/hooks/useUser';
// import { toast } from 'sonner';

// export default function Settings() {
//   const [Logout] = useLogoutMutation();
//   const { removeUser } = useUser();

//   const handleLogout = () => {
//     Logout()
//       .unwrap()
//       .then((response) => {
//         removeUser();
//         toast.success(response.message);
//       })
//       .catch((error: any) => {
//         toast.error(error?.data?.message ?? error?.error.toString());
//       });
//   };

//   return (
//     <div >
//       <PageTitle title="Users" />
//       <div className="flex justify-center items-center h-screen">
//         <Card>
//           <CardContent className="grid gap-4 pt-6">
//             <Button className="w-full " variant="outline">
//               Reset Password
//             </Button>
//             <Button
//               type="submit"
//               className="w-full"
//               variant="destructive"
//               onClick={handleLogout}
//             >
//               Logout
//             </Button>
//           </CardContent>
//         </Card>
//       </div>
//     </div>
//   );
// }