import { useState, useEffect } from 'react';
import { request } from '@/api/client';
import type { ProfileInfo } from '@/types/admin';
import { useAuth } from '@/hooks/useAuth';
import { usePageStore } from '@/store/pageStore';

export function ProfilePage() {
  const { logout } = useAuth();
  const goToChat = usePageStore((s) => s.goToChat);
  const [profile, setProfile] = useState<ProfileInfo | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    (async () => {
      setLoading(true);
      const res = await request<ProfileInfo>('/profile');
      if (res.data) setProfile(res.data);
      else if (res.error) setError(res.error);
      setLoading(false);
    })();
  }, []);

  if (loading) {
    return (
      <div className="h-full flex items-center justify-center bg-[#FFFAF5] dark:bg-[#1a1a2e]">
        <p className="text-sm text-gray-400">加载中...</p>
      </div>
    );
  }

  return (
    <div className="h-full flex flex-col bg-[#FFFAF5] dark:bg-[#1a1a2e]">
      <div className="flex-shrink-0 px-6 py-4 border-b border-pink-100 dark:border-pink-900">
        <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-200">个人资料</h2>
        <p className="text-xs text-gray-400 mt-1">账号信息与设置</p>
      </div>

      <div className="flex-1 overflow-y-auto p-6">
        {error && (
          <div className="p-3 mb-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-sm text-red-500">
            {error}
          </div>
        )}

        {profile && (
          <div className="max-w-md space-y-4">
            {/* Avatar */}
            <div className="flex items-center gap-4 p-4 bg-white dark:bg-gray-800 rounded-xl border border-pink-100 dark:border-pink-900">
              <div className="w-16 h-16 rounded-full bg-pink-100 dark:bg-pink-900/30 flex items-center justify-center text-2xl">
                🌸
              </div>
              <div>
                <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200">
                  {profile.nickname || profile.username}
                </h3>
                <p className="text-sm text-gray-400">@{profile.username}</p>
                {profile.is_admin && (
                  <span className="inline-block mt-1 px-2 py-0.5 text-[10px] bg-pink-100 dark:bg-pink-900/30 text-pink-500 rounded-full">
                    管理员
                  </span>
                )}
              </div>
            </div>

            {/* Details */}
            <div className="p-4 bg-white dark:bg-gray-800 rounded-xl border border-pink-100 dark:border-pink-900 space-y-3">
              <DetailRow label="用户 ID" value={profile.user_id} />
              <DetailRow label="用户名" value={profile.username} />
              <DetailRow label="昵称" value={profile.nickname || '-'} />
              <DetailRow label="账号类型" value={profile.is_admin ? '管理员' : '普通用户'} />
              <DetailRow label="注册时间" value={new Date(profile.created_at).toLocaleString('zh-CN')} />
            </div>

            {/* Actions */}
            <div className="flex gap-3">
              <button
                onClick={goToChat}
                className="flex-1 px-4 py-2.5 bg-pink-50 dark:bg-pink-900/20 hover:bg-pink-100 dark:hover:bg-pink-900/30 text-pink-500 rounded-xl text-sm font-medium transition-colors border border-pink-200 dark:border-pink-800"
              >
                返回聊天
              </button>
              <button
                onClick={logout}
                className="px-4 py-2.5 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/30 text-red-400 rounded-xl text-sm font-medium transition-colors border border-red-200 dark:border-red-800"
              >
                退出登录
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function DetailRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex items-center justify-between">
      <span className="text-xs text-gray-400">{label}</span>
      <span className="text-sm text-gray-700 dark:text-gray-300 font-mono">{value}</span>
    </div>
  );
}
