'use client';

import React, { useState } from 'react';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { useCurrentUser } from '@/hooks/auth';
import { IconButton } from '@/components/ui/button';
import { toast } from 'sonner';
import ProfileFeatureList from './components/ProfileFeatureList';
import ProfileDropdown from './components/ProfileDropdown';
import AvatarSetting from './components/AvatarSetting';
// import CharacterList from './components/CharacterList'
import Image from 'next/image';
import { useTranslations } from 'next-intl';

const genderMap = {
  0: '/icons/male.svg',
  1: '/icons/female.svg',
  2: '/icons/gender-neutral.svg',
};

export default function ProfilePage() {
  const t = useTranslations('profile');
  const { data: user } = useCurrentUser();
  const [isAvatarSettingOpen, setIsAvatarSettingOpen] = useState(false);

  const openAvatarSetting = () => {
    setIsAvatarSettingOpen(true);
  };

  const closeAvatarSetting = () => {
    setIsAvatarSettingOpen(false);
  };

  return (
    <div className="px-4 sm:px-12 py-8">
      <div className="relative mx-auto flex max-w-[736px] flex-col items-center pt-4 pb-8">
        {/* 用户头像和信息 */}
        <div className="flex w-full flex-col items-center gap-6">
          {/* 头像 */}
          <div className="relative cursor-pointer" onClick={openAvatarSetting}>
            <Avatar className="size-20 cursor-pointer">
              <AvatarImage
                className="h-20 w-20 object-cover"
                src={user?.headImage}
                width={80}
                height={80}
              />
              <AvatarFallback className="!txt-headline-m">
                {user?.nickname?.slice(0, 1)}
              </AvatarFallback>
            </Avatar>
            <div className="absolute right-0 bottom-0">
              <IconButton size="xs" variant="tertiaryDark" iconfont="icon-icon_order_remark" />
            </div>
          </div>
          <AvatarSetting
            isOpen={isAvatarSettingOpen}
            onClose={closeAvatarSetting}
            currentAvatar={user?.headImage}
          />

          {/* 用户名和ID */}
          <div className="flex flex-col items-center gap-1">
            <div className="flex items-center gap-1">
              <h1 className="txt-headline-s text-white">{user?.nickname}</h1>
              <Image src={genderMap[user?.sex ?? 0]} alt="Gender" width={24} height={24} />
            </div>
            <div className="flex items-center gap-1">
              <span className="txt-label-m text-txt-secondary-normal">ID: {user?.idCard}</span>
              <IconButton
                size="xs"
                variant="ghost"
                onClick={() => {
                  navigator.clipboard.writeText(user?.idCard?.toString() || '');
                  toast.success(t('copiedToClipboard'));
                }}
              >
                <i className="iconfont icon-copy text-txt-secondary-normal"></i>
              </IconButton>
            </div>
          </div>

          {/* 功能卡片 */}
          <ProfileFeatureList />
        </div>

        <ProfileDropdown />
      </div>
    </div>
  );
}
