'use client';

import Link from 'next/link';
import Image from 'next/image';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { ArrowRight } from 'lucide-react';
import { Avatar, AvatarImage } from '@/components/ui/avatar';
import { useAuth } from '@/lib/auth';
import { basePath } from '@/lib/config';
import { Loader2, LogOut, ChevronDown, User } from 'lucide-react';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

export function LandingPage() {
  const { user, isLoading, isAuthenticated, login, logout } = useAuth();

  return (
    <div className="flex flex-col min-h-screen">
      {/* 导航栏 */}
      <header className="border-b">
        <div className="container flex h-16  px-4 md:px-6 items-center justify-between mx-auto">
          <div className="flex items-center gap-6">
            <Link href="/" className="flex items-center gap-2">
              <Image src={`${basePath}/pingkai-db.svg`} alt="平凯数据库" width={88} height={24} unoptimized />
              <span className="text-lg font-bold">合作伙伴适配认证中心</span>
            </Link>
          </div>
          <nav className="flex items-center gap-4">
            <div className="min-[560px]:flex items-center gap-4 hidden">
              <Link href="#process" className="text-sm font-medium hover:underline">
                认证流程
              </Link>
              <Link href="#faq" className="text-sm font-medium hover:underline">
                常见问题
              </Link>
            </div>
            <div className="flex items-center gap-4">
              {isLoading ? (
                <div className="flex items-center gap-2">
                  <Loader2 className="h-4 w-4 animate-spin" />
                </div>
              ) : isAuthenticated && user ? (
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" className="relative h-8 flex items-center gap-2 px-2">
                      <Avatar className="h-6 w-6">
                        <AvatarImage src={user.avatar_url} alt="avatar" />
                      </Avatar>
                      <ChevronDown />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent className="w-56" align="end" forceMount>
                    <DropdownMenuItem className="cursor-pointer">
                      <Link href="/dashboard">
                        <div className="flex items-center">
                          <User className="mr-2 h-4 w-4" />
                          <span className="font-medium">{user.username}</span>
                        </div>
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem onClick={logout} className="cursor-pointer">
                      <LogOut className="h-4 w-4" />
                      <span>退出登录</span>
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              ) : (
                <Button onClick={() => login()}>登录 / 注册</Button>
              )}
            </div>
          </nav>
        </div>
      </header>

      {/* 主要内容 */}
      <main className="flex-1">
        <section className="w-full py-8 bg-gradient-to-r from-blue-50 to-indigo-50">
          <div className="container px-4 md:px-6 mx-auto">
            <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 items-center">
              <div className="space-y-4">
                <h1 className="text-4xl font-bold tracking-tighter">适配认证</h1>
                <p className="max-w-[600px] text-gray-500 text-base/relaxed">
                  加入我们的合作伙伴生态体系，获取适配认证，让您的产品兼容更多品牌，赢得更多客户信任。
                </p>
                <div className="flex flex-col gap-2 min-[400px]:flex-row">
                  <Link href="/dashboard">
                    <Button size="lg" className="w-full">
                      立即申请认证
                      <ArrowRight className="ml-2 h-4 w-4" />
                    </Button>
                  </Link>
                  <a href="https://pingkai.cn/partners" target="_blank">
                    <Button variant="outline" size="lg" className="w-full">
                      了解更多
                    </Button>
                  </a>
                </div>
              </div>
              <div className="mx-auto lg:ml-auto">
                <Image
                  alt="适配认证"
                  className="rounded-xl object-cover"
                  src={`${basePath}/20250708-154200.jpeg`}
                  width={600}
                  height={400}
                />
              </div>
            </div>
          </div>
        </section>

        {/* 认证优势 */}
        {/* <section className="w-full py-16 bg-white" id="benefits">
          <div className="container px-4 md:px-6 mx-auto">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
                  认证优势
                </h2>
                <p className="max-w-[900px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                  获得产品适配认证，您将获得以下优势
                </p>
              </div>
            </div>
            <div className="grid grid-cols-1 gap-6 mt-12 md:grid-cols-2 lg:grid-cols-4">
              <Card>
                <CardHeader className="flex flex-row items-center gap-4">
                  <CheckCircle className="h-8 w-8 text-blue-600" />
                  <CardTitle>兼容性保障</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-500">
                    确保您的产品与我们的平台完全兼容，提供无缝用户体验
                  </p>
                </CardContent>
              </Card>
              <Card>
                <CardHeader className="flex flex-row items-center gap-4">
                  <TrendingUp className="h-8 w-8 text-blue-600" />
                  <CardTitle>市场拓展</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-500">进入新的市场领域，获取更多商机和客户资源</p>
                </CardContent>
              </Card>
              <Card>
                <CardHeader className="flex flex-row items-center gap-4">
                  <Users className="h-8 w-8 text-blue-600" />
                  <CardTitle>技术支持</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-500">获得专业的技术支持和适配指导，加速产品开发</p>
                </CardContent>
              </Card>
              <Card>
                <CardHeader className="flex flex-row items-center gap-4">
                  <Award className="h-8 w-8 text-blue-600" />
                  <CardTitle>品牌背书</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-500">获得官方认证标识，提升产品可信度和品牌价值</p>
                </CardContent>
              </Card>
            </div>
          </div>
        </section> */}

        {/* 认证流程 */}
        <section className="w-full py-16 bg-gray-50" id="process">
          <div className="container px-4 md:px-6 mx-auto">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tighter">认证流程</h2>
                <p className="max-w-[900px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                  简单四步，完成产品适配认证
                </p>
              </div>
            </div>
            <div className="grid grid-cols-1 gap-8 mt-12 md:grid-cols-2 lg:grid-cols-4">
              <div className="flex flex-col items-center text-center">
                <div className="flex h-16 w-16 items-center justify-center rounded-full bg-blue-100 text-blue-600">
                  <span className="text-2xl font-bold">1</span>
                </div>
                <h3 className="mt-4 text-xl font-bold">准备报告</h3>
                <p className="mt-2 text-gray-500">下载<Link className='text-primary' href="/dashboard">报告模板</Link>和<Link className='text-primary' href="/dashboard">安装包</Link>，执行测试并编写报告</p>
              </div>
              <div className="flex flex-col items-center text-center">
                <div className="flex h-16 w-16 items-center justify-center rounded-full bg-blue-100 text-blue-600">
                  <span className="text-2xl font-bold">2</span>
                </div>
                <h3 className="mt-4 text-xl font-bold">提交申请</h3>
                <p className="mt-2 text-gray-500">在线填写申请表，提交适配认证申请</p>
              </div>
              <div className="flex flex-col items-center text-center">
                <div className="flex h-16 w-16 items-center justify-center rounded-full bg-blue-100 text-blue-600">
                  <span className="text-2xl font-bold">3</span>
                </div>
                <h3 className="mt-4 text-xl font-bold">认证审核</h3>
                <p className="mt-2 text-gray-500">等待测试审核结果，按需更新测试报告</p>
              </div>
              <div className="flex flex-col items-center text-center">
                <div className="flex h-16 w-16 items-center justify-center rounded-full bg-blue-100 text-blue-600">
                  <span className="text-2xl font-bold">4</span>
                </div>
                <h3 className="mt-4 text-xl font-bold">获得证书</h3>
                <p className="mt-2 text-gray-500">测试通过，获得双方互认证证书</p>
              </div>
            </div>
          </div>
        </section>

        {/* 常见问题 */}
        <section className="w-full py-16 bg-white" id="faq">
          <div className="container px-4 md:px-6 mx-auto">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tighter">常见问题</h2>
                <p className="max-w-[900px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                  关于适配认证的常见问题解答
                </p>
              </div>
            </div>
            <div className="mt-12 max-w-3xl mx-auto space-y-4">
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">怎么选择对应的适配报告模版？</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-500">
                    针对服务器、操作系统、中间件、存储设备等基础软硬件，请选用“平凯星辰 -
                    基础设施生态工具互认证报告模板”。 针对独立软件开发商
                    ISV，专注于设计、开发和销售独立软件产品，例如：备份软件、运维管理平台、数据传输管道类软件、ERP、HRM、HIS、MES
                    等，请选用“平凯星辰 - 应用联合解决方案互认证报告模板”。
                  </p>
                </CardContent>
              </Card>
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">适配认证是否需要费用？</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-500">不需要费用。</p>
                </CardContent>
              </Card>
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">认证流程需要多长时间？</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-500">
                    自您提交申请后，认证审核流程通常需 2-4
                    周，具体时长取决于申请资料的完整性和准确性。我们会加快审核，助您尽早获得认证资格。
                  </p>
                </CardContent>
              </Card>
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">认证有效期是多久？</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-500">
                    适配认证的有效期通常为两年。到期前，您需完成续期流程，包括更新产品信息和进行兼容性测试，以维持认证资格。
                  </p>
                </CardContent>
              </Card>
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">如何查询认证状态？</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-500">
                    您可以通过登录合作伙伴适配认证中心，在个人中心页面查看您的认证申请状态和已获得的认证证书。也可以通过证书查询功能，输入产品名称或厂商名称进行查询。
                  </p>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>
      </main>

      {/* 页脚 */}
      <footer className="border-t bg-gray-100">
        <div className="container px-4 md:px-6 mx-auto flex flex-col gap-6 py-8 md:flex-row md:items-center md:justify-between">
          <div className="flex flex-col gap-2">
            <Link href="/" className="font-bold">
              合作伙伴适配认证中心
            </Link>
            <p className="text-sm text-gray-500">© {new Date().getFullYear()} 版权所有。保留所有权利。</p>
          </div>
        </div>
      </footer>
    </div>
  );
}