"use client";

import { X, ChevronDown, Home, Grid3X3, Gift, BookOpen, User } from "lucide-react";
import { Button, buttonVariants } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";
import Link from "next/link";

// 课程数据
const courses = [
  {
    id: 1,
    title: "2021年二级建造师《建筑工程管理与实务》精讲课",
    progress: 17,
  },
  {
    id: 2,
    title: "2021年二级建造师《建筑工程管理与实务》精讲课",
    progress: 17,
  },
  {
    id: 3,
    title: "2021年二级建造师《建筑工程管理与实务》精讲课",
    progress: 17,
  },
  {
    id: 4,
    title: "2021年二级建造师《建筑工程管理与实务》精讲课",
    progress: 45,
  },
  {
    id: 5,
    title: "2021年二级建造师《建筑工程管理与实务》精讲课",
    progress: 82,
  },
];

// 底部导航项
const navItems = [
  { icon: Home, label: "首页", href: "/" },
  { icon: Grid3X3, label: "分类", href: "/category" },
  { icon: Gift, label: "活动", href: "/activity" },
  { icon: BookOpen, label: "学习", href: "/study", active: true },
  { icon: User, label: "我的", href: "/profile" },
];

export default function StudyPage() {
  return (
    <div className="flex min-h-screen flex-col bg-gray-100">
      {/* 顶部导航 */}
      <header className="sticky top-0 z-10 bg-white px-4 py-3">
        <div className="flex items-center justify-between">
          <Button variant="ghost" size="icon" className="size-8 -ml-2 text-gray-600">
            <X className="size-5" />
          </Button>
          <h1 className="text-lg font-medium text-gray-900">学习</h1>
          <div className="size-8" />
        </div>
      </header>

      {/* 筛选区域 */}
      <div className="flex items-center justify-between border-b border-gray-200 bg-white px-4 py-3">
        <button className="flex items-center gap-1 text-sm text-gray-700">
          <span>一级建造师</span>
          <ChevronDown className="size-4" />
        </button>
        <Link
          href="/study/track"
          className="text-sm text-sky-500 hover:text-sky-600"
        >
          学习轨迹
        </Link>
      </div>

      {/* 课程列表 */}
      <main className="flex-1 space-y-3 overflow-auto p-3 pb-20">
        {courses.map((course) => (
          <Card
            key={course.id}
            className="border-0 shadow-sm"
          >
            <CardContent className="p-4 space-y-4">
              {/* 课程标题 */}
              <h3 className="text-base font-medium leading-relaxed text-gray-900">
                {course.title}
              </h3>

              {/* 进度条 */}
              <div className="space-y-2">
                <div className="h-1.5 w-full overflow-hidden rounded-full bg-gray-200">
                  <div
                    className="h-full rounded-full bg-sky-500 transition-all"
                    style={{ width: `${course.progress}%` }}
                  />
                </div>
                <div className="text-right text-xs text-sky-500">
                  学习进度{course.progress}%
                </div>
              </div>

              {/* 前往学习按钮 */}
              <Link
                href={`/study/course/${course.id}`}
                className={cn(
                  buttonVariants({ variant: "default" }),
                  "w-full bg-sky-500 text-white hover:bg-sky-600 h-10 rounded-md"
                )}
              >
                前往学习
              </Link>
            </CardContent>
          </Card>
        ))}
      </main>

      {/* 底部导航 */}
      <nav className="fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white px-2 pb-safe">
        <div className="mx-auto flex max-w-md justify-around py-2">
          {navItems.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                "flex flex-col items-center gap-1 px-3 py-1",
                item.active ? "text-sky-500" : "text-gray-500"
              )}
            >
              <item.icon className="size-5" />
              <span className="text-xs">{item.label}</span>
            </Link>
          ))}
        </div>
      </nav>
    </div>
  );
}