import { useLogoutMutation } from '@/app/backend/endpoints/auth';
import avatar from '@/assets/avatar.png';
import { Button } from '@/components/ui/button';
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';
import useTitle from '@/hooks/useTitle';

function SettingsPage() {
  useTitle('Settings');
  const { user } = useUser();
  const role =
    user?.role === 'inst_designer'
      ? 'Instructor Designer'
      : user?.role === 'school'
      ? 'School'
      : user?.role === 'teacher'
      ? 'Teacher'
      : user?.role === 'admin'
      ? 'Admin'
      : user?.role === 'super_admin'
      ? 'Super Admin'
      : 'inst_admin';
  const [logout, { isLoading }] = useLogoutMutation();
  const navigate = useNavigate();
  return (
    <div className="w-full flex flex-col items-start 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">
        <img
          src={avatar}
          draggable="false"
          alt="avatar"
          className="w-36 h-36 rounded-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">
              {role === 'School'
                ? (user as SchoolI)?.schoolName
                : `${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?.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('/login');
              })
              .catch((error: any) => {
                toast.error(error?.data?.message ?? error?.error.toString());
              });
          }}
        >
          <LogOutIcon /> Logout
        </Button>
      </div>
      <div className="bg-white flex flex-row p-6 rounded-lg border-2 justify-center gap-8 items-center w-full">
        <div className="text-sm text-slate-500">
          if you need any help contact: super.snai3i@snai3i.com
        </div>
      </div>
    </div>
  );
}

export default SettingsPage;