'use client';

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { IconButton, Button } from '@/components/ui/button';
import { useCurrentUser, useDeleteUser } from '@/hooks/auth';
import ProfileLayout from '@/layout/ProfileLayout';
import { ThirdType } from '@/services/auth';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { toast } from 'sonner';
import { useTranslations } from 'next-intl';

const AccountPage = () => {
  const t = useTranslations('profile.account_page');
  const router = useRouter();
  const { data: user } = useCurrentUser();
  const [isDisabling, setIsDisabling] = useState(false);
  const { mutateAsync: deleteUser } = useDeleteUser();

  const handleDisableAccount = async () => {
    setIsDisabling(true);
    try {
      await deleteUser();
      toast.success(t('accountDisabledSuccess'));
    } catch (error) {
      console.error('禁用账户失败:', error);
    } finally {
      setIsDisabling(false);
    }
  };

  const renderAvatar = () => {
    const iconfonts = {
      [ThirdType.Apple]: 'icon-social-apple',
      [ThirdType.Discord]: 'icon-social-discord',
      [ThirdType.Google]: 'icon-social-google',
    };

    return (
      <div className="bg-surface-element-normal flex size-12 items-center justify-center rounded-full">
        <i className={`iconfont ${iconfonts[user?.thirdType || ThirdType.Google]} !text-[24px]`} />
      </div>
    );
  };

  return (
    <ProfileLayout title={t('account')}>
      {/* 账户信息容器 */}
      <div className="bg-surface-base-normal rounded-2xl p-6">
        <div className="space-y-6">
          {/* 账户信息卡片 */}
          <div className="bg-surface-element-normal rounded-lg p-4">
            <div className="flex items-center gap-4">
              {/* 账户头像/图标 */}
              {renderAvatar()}

              {/* 账户信息 */}
              <div className="flex flex-col">
                <div className="txt-label-l text-txt-primary-normal">{user?.thirdNickname}</div>
                <div className="txt-body-s text-txt-secondary-normal">
                  {user?.thirdEmail || '-'}
                </div>
              </div>
            </div>
          </div>

          {/* 禁用账户按钮 */}
          <div className="flex justify-end">
            <AlertDialog>
              <AlertDialogTrigger asChild>
                <Button variant="destructive" size="large" loading={isDisabling}>
                  {t('disableAccount')}
                </Button>
              </AlertDialogTrigger>
              <AlertDialogContent>
                <AlertDialogHeader>
                  <AlertDialogTitle>{t('disableAccount')}</AlertDialogTitle>
                </AlertDialogHeader>
                <AlertDialogDescription>{t('disableAccountConfirm')}</AlertDialogDescription>
                <AlertDialogFooter>
                  <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
                  <AlertDialogAction
                    variant="destructive"
                    loading={isDisabling}
                    onClick={handleDisableAccount}
                  >
                    {t('disable')}
                  </AlertDialogAction>
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialog>
          </div>
        </div>
      </div>
    </ProfileLayout>
  );
};

export default AccountPage;
