"use client"

import {
  DatabaseIcon,
  CodeIcon,
  RepeatIcon,
  AiVideoIcon,
  Chatting01Icon,
  FolderOpenIcon,
  TranslateIcon,
  BarChartIcon,
  BotIcon,
  CloudUploadIcon,
  FileAttachmentIcon,
} from "@hugeicons/core-free-icons"
import { HugeiconsIcon } from "@hugeicons/react"

import { BentoCard, BentoGrid } from "@/components/ui/bento-grid"
import { SectionWrapper } from "@/components/section-wrapper"

const GITHUB_BASE = "https://github.com/LiukerSun"

const projects = [
  {
    Icon: (props: { className?: string }) => (
      <HugeiconsIcon icon={DatabaseIcon} {...props} />
    ),
    name: "ERP 管理系统",
    description:
      "管理超过 1200 件商品 SKU，覆盖库存、供应链、图片和出入库流程。Go 后端 + TypeScript 前端，整体效率提升 3-4 倍。",
    href: `${GITHUB_BASE}/erp_backend`,
    cta: "查看源码",
    background: (
      <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-transparent to-purple-500/10" />
    ),
    className: "col-span-1 lg:col-span-2",
  },
  {
    Icon: (props: { className?: string }) => (
      <HugeiconsIcon icon={RepeatIcon} {...props} />
    ),
    name: "自动化交易系统",
    description:
      "基于 MetaTrader 5 的量化交易自动化系统，支持策略回测与实时监控。",
    href: `${GITHUB_BASE}/metatrader5-quant-server-python`,
    cta: "查看源码",
    background: (
      <div className="absolute inset-0 bg-gradient-to-br from-amber-500/10 via-transparent to-orange-500/10" />
    ),
    className: "col-span-1 lg:col-span-1",
  },
  {
    Icon: (props: { className?: string }) => (
      <HugeiconsIcon icon={Chatting01Icon} {...props} />
    ),
    name: "Telegram AI 翻译机器人",
    description:
      "集成 OpenAI 的 Telegram 机器人，支持自定义预设、多轮对话上下文管理和用户权限系统。",
    href: `${GITHUB_BASE}/tg_ai_translate_bot_go`,
    cta: "查看源码",
    background: (
      <div className="absolute inset-0 bg-gradient-to-br from-green-500/10 via-transparent to-teal-500/10" />
    ),
    className: "col-span-1 lg:col-span-1",
  },
  {
    Icon: (props: { className?: string }) => (
      <HugeiconsIcon icon={AiVideoIcon} {...props} />
    ),
    name: "Agent Dispatcher",
    description:
      "AI Agent 调度系统，智能分配任务与资源管理。",
    href: `${GITHUB_BASE}/agentdispatcher`,
    cta: "查看源码",
    background: (
      <div className="absolute inset-0 bg-gradient-to-br from-pink-500/10 via-transparent to-rose-500/10" />
    ),
    className: "col-span-1 lg:col-span-1",
  },
  {
    Icon: (props: { className?: string }) => (
      <HugeiconsIcon icon={BarChartIcon} {...props} />
    ),
    name: "直播数据分析",
    description:
      "实时直播数据抓取与分析工具。",
    href: `${GITHUB_BASE}/liveDataAnalysis`,
    cta: "查看源码",
    background: (
      <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/10 via-transparent to-blue-500/10" />
    ),
    className: "col-span-1 lg:col-span-1",
  },
  {
    Icon: (props: { className?: string }) => (
      <HugeiconsIcon icon={CodeIcon} {...props} />
    ),
    name: "cc-cli 命令行工具",
    description:
      "通用命令行工具集，提升开发效率。",
    href: `${GITHUB_BASE}/cc-cli`,
    cta: "查看源码",
    background: (
      <div className="absolute inset-0 bg-gradient-to-br from-violet-500/10 via-transparent to-indigo-500/10" />
    ),
    className: "col-span-1 lg:col-span-1",
  },
  {
    Icon: (props: { className?: string }) => (
      <HugeiconsIcon icon={FileAttachmentIcon} {...props} />
    ),
    name: "Excel JSON 转换工具",
    description:
      "Excel 表格转 JSON 格式的 Python 工具，支持自定义模板。",
    href: `${GITHUB_BASE}/excel-json-tool`,
    cta: "查看源码",
    background: (
      <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-transparent to-green-500/10" />
    ),
    className: "col-span-1 lg:col-span-1",
  },
  {
    Icon: (props: { className?: string }) => (
      <HugeiconsIcon icon={CloudUploadIcon} {...props} />
    ),
    name: "DevTools 开发网关",
    description:
      "基于 Docker + Traefik + Cloudflare DNS 验证的本地开发网关系统。",
    href: `${GITHUB_BASE}/DevTools`,
    cta: "查看源码",
    background: (
      <div className="absolute inset-0 bg-gradient-to-br from-sky-500/10 via-transparent to-blue-500/10" />
    ),
    className: "col-span-1 lg:col-span-1",
  },
]

const otherProjects = [
  {
    name: "OpenManage",
    href: `${GITHUB_BASE}/openmanage`,
    icon: <HugeiconsIcon icon={FolderOpenIcon} className="size-5" />,
  },
  {
    name: "抖音弹幕录制",
    href: `${GITHUB_BASE}/DouyinDanmu`,
    icon: <HugeiconsIcon icon={BotIcon} className="size-5" />,
  },
  {
    name: "微信机器人",
    href: `${GITHUB_BASE}/weixinbot`,
    icon: <HugeiconsIcon icon={Chatting01Icon} className="size-5" />,
  },
  {
    name: "Excel 转 MySQL",
    href: `${GITHUB_BASE}/excel2mysql`,
    icon: <HugeiconsIcon icon={TranslateIcon} className="size-5" />,
  },
  {
    name: "抖店 Excel",
    href: `${GITHUB_BASE}/doudian_excel`,
    icon: <HugeiconsIcon icon={FileAttachmentIcon} className="size-5" />,
  },
  {
    name: "Flip Game",
    href: `${GITHUB_BASE}/flipgame`,
    icon: <HugeiconsIcon icon={RepeatIcon} className="size-5" />,
  },
]

export function Projects() {
  return (
    <SectionWrapper id="projects" className="py-24">
      <div className="mx-auto max-w-5xl px-6">
        <h2 className="mb-12 text-center text-3xl font-bold tracking-tight sm:text-4xl">
          项目作品
        </h2>
        <BentoGrid>
          {projects.map((project) => (
            <BentoCard key={project.name} {...project} />
          ))}
        </BentoGrid>

        {/* 其他开源项目 */}
        <h3 className="mt-16 mb-6 text-center text-xl font-semibold">
          更多开源项目
        </h3>
        <div className="grid gap-3 sm:grid-cols-3 lg:grid-cols-6">
          {otherProjects.map((item) => (
            <a
              key={item.name}
              href={item.href}
              target="_blank"
              rel="noopener noreferrer"
              className="flex flex-col items-center gap-2 rounded-xl border border-border bg-card p-4 text-center transition-colors hover:bg-accent/50"
            >
              <div className="flex size-10 items-center justify-center rounded-full border border-border bg-background text-muted-foreground">
                {item.icon}
              </div>
              <div className="text-xs text-muted-foreground underline">
                {item.name}
              </div>
            </a>
          ))}
        </div>
      </div>
    </SectionWrapper>
  )
}