import React from 'react';
import { useAuth } from '@/client/home-shadcn/hooks/AuthProvider';
import { useNavigate } from 'react-router-dom';
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 { Badge } from '@/client/components/ui/badge';
import { 
  ShieldCheck, 
  UserCircle, 
  Smartphone, 
  LogIn, 
  UserPlus,
  ExternalLink
} from 'lucide-react';

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

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
      {/* 顶部导航 */}
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container mx-auto flex h-16 items-center justify-between">
          <div className="flex items-center space-x-2">
            <ShieldCheck className="h-6 w-6 text-primary" />
            <h1 className="text-xl font-bold">网站首页</h1>
          </div>
          
          <div className="flex items-center space-x-4">
            {user ? (
              <div 
                className="flex items-center space-x-3 cursor-pointer hover:bg-muted/50 rounded-lg px-3 py-2 transition-colors"
                onClick={() => navigate('/member')}
              >
                <Avatar className="h-8 w-8">
                  <AvatarImage src={`https://avatar.vercel.sh/${user.username}`} />
                  <AvatarFallback className="bg-primary text-primary-foreground">
                    {user.username?.charAt(0).toUpperCase()}
                  </AvatarFallback>
                </Avatar>
                <span className="hidden md:inline text-sm font-medium">{user.username}</span>
              </div>
            ) : (
              <div className="flex items-center space-x-2">
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => navigate('/login')}
                  className="flex items-center space-x-1"
                >
                  <LogIn className="h-4 w-4" />
                  <span>登录</span>
                </Button>
                <Button
                  size="sm"
                  onClick={() => navigate('/register')}
                  className="flex items-center space-x-1"
                >
                  <UserPlus className="h-4 w-4" />
                  <span>注册</span>
                </Button>
              </div>
            )}
          </div>
        </div>
      </header>

      {/* 主内容区 */}
      <main className="container mx-auto py-8">
        <div className="mx-auto max-w-6xl space-y-8">
          {/* 欢迎区域 */}
          <Card className="border-0 shadow-lg">
            <CardHeader>
              <CardTitle className="text-3xl font-bold bg-gradient-to-r from-primary to-purple-600 bg-clip-text text-transparent">
                欢迎使用网站模板
              </CardTitle>
              <CardDescription className="text-lg">
                这是一个现代化的网站首页模板，采用 shadcn/ui 设计系统构建
              </CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground">
                已集成完整的用户认证系统，包含登录、注册和用户中心功能。
                使用 React 19 + TypeScript + shadcn/ui + Tailwind CSS 技术栈。
              </p>
            </CardContent>
          </Card>

          {/* 功能特性卡片 */}
          <div className="grid gap-6 md:grid-cols-3">
            <Card className="border-0 shadow-lg hover:shadow-xl transition-shadow">
              <CardHeader>
                <div className="flex items-center space-x-2">
                  <div className="p-2 bg-blue-100 rounded-lg">
                    <ShieldCheck className="h-6 w-6 text-blue-600" />
                  </div>
                  <CardTitle className="text-lg">用户认证</CardTitle>
                </div>
              </CardHeader>
              <CardContent>
                <CardDescription>
                  完整的登录、注册功能，基于 JWT 的现代化认证系统
                </CardDescription>
                <Badge variant="secondary" className="mt-2">安全认证</Badge>
              </CardContent>
            </Card>

            <Card className="border-0 shadow-lg hover:shadow-xl transition-shadow">
              <CardHeader>
                <div className="flex items-center space-x-2">
                  <div className="p-2 bg-green-100 rounded-lg">
                    <UserCircle className="h-6 w-6 text-green-600" />
                  </div>
                  <CardTitle className="text-lg">用户中心</CardTitle>
                </div>
              </CardHeader>
              <CardContent>
                <CardDescription>
                  用户可以查看和管理个人信息，支持头像上传和个人资料编辑
                </CardDescription>
                <Badge variant="secondary" className="mt-2">个人管理</Badge>
              </CardContent>
            </Card>

            <Card className="border-0 shadow-lg hover:shadow-xl transition-shadow">
              <CardHeader>
                <div className="flex items-center space-x-2">
                  <div className="p-2 bg-purple-100 rounded-lg">
                    <Smartphone className="h-6 w-6 text-purple-600" />
                  </div>
                  <CardTitle className="text-lg">响应式设计</CardTitle>
                </div>
              </CardHeader>
              <CardContent>
                <CardDescription>
                  适配各种设备屏幕，采用移动端优先的设计理念
                </CardDescription>
                <Badge variant="secondary" className="mt-2">移动优先</Badge>
              </CardContent>
            </Card>
          </div>

          {/* 快速链接 */}
          <Card className="border-0 shadow-lg">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <ExternalLink className="h-5 w-5" />
                <span>快速访问</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex flex-wrap gap-4">
                <Button
                  variant="outline"
                  onClick={() => window.open('/admin', '_blank')}
                  className="flex items-center space-x-2"
                >
                  <span>管理后台</span>
                  <ExternalLink className="h-4 w-4" />
                </Button>
                <Button
                  variant="outline"
                  onClick={() => window.open('/ui', '_blank')}
                  className="flex items-center space-x-2"
                >
                  <span>API 文档</span>
                  <ExternalLink className="h-4 w-4" />
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </main>

      {/* 页脚 */}
      <footer className="border-t bg-background">
        <div className="container mx-auto py-6">
          <div className="flex flex-col items-center justify-center space-y-2">
            <p className="text-sm text-muted-foreground">
              网站模板 ©{new Date().getFullYear()} Created with React & shadcn/ui
            </p>
            <div className="flex items-center space-x-4 text-sm">
              <Button
                variant="link"
                size="sm"
                onClick={() => window.open('/admin', '_blank')}
                className="text-muted-foreground hover:text-primary"
              >
                管理后台
              </Button>
              <span className="text-muted-foreground">•</span>
              <Button
                variant="link"
                size="sm"
                onClick={() => window.open('/ui', '_blank')}
                className="text-muted-foreground hover:text-primary"
              >
                API 文档
              </Button>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default HomePage;