import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '@/client/home/hooks/AuthProvider';
import { Button } from '@/client/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card';
import { Avatar, AvatarFallback, AvatarImage } from '@/client/components/ui/avatar';
import { Separator } from '@/client/components/ui/separator';
import { 
  User, 
  MapPin, 
  Globe, 
  Calendar, 
  LogOut, 
  Settings,
  UserCog,
  ShieldCheck,
  Clock
} from 'lucide-react';
import { format } from 'date-fns';
import { zhCN } from 'date-fns/locale';

const MemberPage: React.FC = () => {
  const navigate = useNavigate();
  const { user, logout } = useAuth();

  if (!user) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 px-4">
        <Card className="max-w-md">
          <CardHeader>
            <CardTitle>用户不存在</CardTitle>
            <CardDescription>请先登录后再访问此页面</CardDescription>
          </CardHeader>
          <CardContent>
            <Button onClick={() => navigate('/')} className="w-full">
              返回首页
            </Button>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
      <div className="container mx-auto py-8">
        <div className="mx-auto max-w-4xl space-y-8">
          {/* 用户资料卡片 */}
          <Card className="border-0 shadow-lg">
            <CardContent className="pt-6">
              <div className="flex flex-col items-center space-y-4">
                <Avatar className="h-24 w-24">
                  <AvatarImage 
                    src={user.avatar || `https://avatar.vercel.sh/${user.username}`} 
                    alt={user.nickname || user.username}
                  />
                  <AvatarFallback className="text-2xl bg-primary text-primary-foreground">
                    {user.username?.charAt(0).toUpperCase()}
                  </AvatarFallback>
                </Avatar>
                
                <div className="text-center space-y-2">
                  <h1 className="text-3xl font-bold">{user.nickname || user.username}</h1>
                  <p className="text-muted-foreground">@{user.username}</p>
                </div>

                <div className="flex items-center space-x-4">
                  <div className="text-center">
                    <p className="text-2xl font-bold">0</p>
                    <p className="text-sm text-muted-foreground">内容</p>
                  </div>
                  <Separator orientation="vertical" className="h-8" />
                  <div className="text-center">
                    <p className="text-2xl font-bold">0</p>
                    <p className="text-sm text-muted-foreground">关注</p>
                  </div>
                  <Separator orientation="vertical" className="h-8" />
                  <div className="text-center">
                    <p className="text-2xl font-bold">0</p>
                    <p className="text-sm text-muted-foreground">粉丝</p>
                  </div>
                </div>

                <div className="flex items-center space-x-2">
                  <Button 
                    onClick={() => navigate('/profile/edit')}
                    className="flex items-center space-x-2"
                  >
                    <UserCog className="h-4 w-4" />
                    <span>编辑资料</span>
                  </Button>
                  
                  <Button 
                    variant="outline"
                    onClick={async () => {
                      await logout();
                      navigate('/');
                    }}
                    className="flex items-center space-x-2"
                  >
                    <LogOut className="h-4 w-4" />
                    <span>退出登录</span>
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* 个人资料详情 */}
          <Card className="border-0 shadow-lg">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <User className="h-5 w-5" />
                <span>个人资料</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid gap-4">
                <div className="space-y-1">
                  <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                    <User className="h-4 w-4" />
                    <span>用户名</span>
                  </div>
                  <p className="font-medium">{user.username}</p>
                </div>

                <div className="space-y-1">
                  <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                    <ShieldCheck className="h-4 w-4" />
                    <span>邮箱</span>
                  </div>
                  <p className="font-medium">{user.email || '未设置'}</p>
                </div>

                {(user as any).location && (
                  <div className="space-y-1">
                    <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                      <MapPin className="h-4 w-4" />
                      <span>位置</span>
                    </div>
                    <p className="font-medium">{(user as any).location}</p>
                  </div>
                )}

                {(user as any).website && (
                  <div className="space-y-1">
                    <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                      <Globe className="h-4 w-4" />
                      <span>网站</span>
                    </div>
                    <a 
                      href={(user as any).website}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="font-medium text-primary hover:underline"
                    >
                      {(user as any).website}
                    </a>
                  </div>
                )}

                {(user as any).bio && (
                  <div className="space-y-1">
                    <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                      <User className="h-4 w-4" />
                      <span>个人简介</span>
                    </div>
                    <p className="font-medium">{(user as any).bio}</p>
                  </div>
                )}
              </div>

              <Separator />

              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-1">
                  <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                    <Calendar className="h-4 w-4" />
                    <span>注册时间</span>
                  </div>
                  <p className="font-medium">
                    {user.createdAt ? format(new Date(user.createdAt), 'yyyy年MM月dd日', { locale: zhCN }) : '未知'}
                  </p>
                </div>

                <div className="space-y-1">
                  <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                    <Clock className="h-4 w-4" />
                    <span>最后登录</span>
                  </div>
                  <p className="font-medium">
                    {user.updatedAt ? format(new Date(user.updatedAt), 'yyyy年MM月dd日 HH:mm', { locale: zhCN }) : '从未登录'}
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* 设置区域 */}
          <Card className="border-0 shadow-lg">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Settings className="h-5 w-5" />
                <span>账号设置</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <Button 
                variant="outline" 
                className="w-full justify-start"
                onClick={() => navigate('/profile/security')}
              >
                <ShieldCheck className="h-4 w-4 mr-2" />
                <span>安全设置</span>
              </Button>
              
              <Button 
                variant="outline" 
                className="w-full justify-start"
                onClick={() => navigate('/profile/preferences')}
              >
                <Settings className="h-4 w-4 mr-2" />
                <span>偏好设置</span>
              </Button>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
};

export default MemberPage;