"use client";

import Link from "next/link";
import { motion } from "framer-motion";
import { categoryLabels, hotKeywords } from "@/lib/mock-data";
import { AppResource } from "@/lib/types";
import { BadgeCheck, ShieldCheck, Download, ArrowRight } from "lucide-react";
import { buildChannelUrl } from "@/lib/marketing";
import { useTrack } from "@/hooks/use-track";
import { TRACKING_EVENTS } from "@/lib/tracking-events";

export function SearchBar({ placeholder = "搜索资源..." }: { placeholder?: string }) {
  return (
    <div className="rounded-2xl border border-cyan-300/20 bg-slate-950/30 p-2 backdrop-blur-xl">
      <input
        placeholder={placeholder}
        className="input-fancy border-none bg-transparent py-2"
      />
    </div>
  );
}

export function CategoryTabs({
  active,
  onChange,
}: {
  active: string;
  onChange: (value: string) => void;
}) {
  return (
    <div className="flex flex-wrap gap-2">
      <button onClick={() => onChange("all")} className={`pill ${active === "all" ? "pill-active" : ""}`}>全部</button>
      {Object.entries(categoryLabels).map(([key, label]) => (
        <button key={key} onClick={() => onChange(key)} className={`pill ${active === key ? "pill-active" : ""}`}>
          {label}
        </button>
      ))}
    </div>
  );
}

export function HeroSection() {
  const { track } = useTrack();
  return (
    <motion.section initial={{ opacity: 0, y: 24 }} animate={{ opacity: 1, y: 0 }} className="panel-strong relative w-full min-w-0 overflow-hidden">
      <div className="pointer-events-none absolute -top-20 right-[-60px] h-56 w-56 rounded-full bg-cyan-300/20 blur-3xl" />
      <div className="pointer-events-none absolute -bottom-24 left-[-80px] h-60 w-60 rounded-full bg-indigo-400/15 blur-3xl" />
      <div className="relative grid gap-6 lg:grid-cols-12 lg:items-center">
        <div className="space-y-4 lg:col-span-8">
          <p className="text-xs uppercase tracking-[0.3em] text-cyan-200/80">Download Nova</p>
          <h1 className="text-3xl font-bold leading-tight tracking-tight md:text-5xl">网盘资源下载，一站直达</h1>
          <p className="max-w-2xl text-sm text-slate-300 md:text-base">每日更新，版本清晰，渠道可查。热门软件、学习资料、影音资源快速下载。</p>
          <SearchBar placeholder="试试搜索：AI 绘图、剪辑、开发工具..." />
          <div className="flex flex-wrap gap-1.5">
            {hotKeywords.map((k) => (
              <span key={k} className="pill">{k}</span>
            ))}
          </div>
          <div className="flex flex-wrap gap-3">
            <Link href="/apps" onClick={() => track(TRACKING_EVENTS.ctaClick, { position: "hero", target: "apps" })} className="cta-main">进入资源库</Link>
            <Link href="/unlock" onClick={() => track(TRACKING_EVENTS.ctaClick, { position: "hero", target: "unlock" })} className="cta-sub">输入解锁码</Link>
          </div>
        </div>
        <div className="grid gap-2 sm:grid-cols-3 lg:col-span-4 lg:grid-cols-1">
          <div className="rounded-xl border border-white/10 bg-slate-900/35 p-3">
            <p className="text-xs text-slate-400">今日更新</p>
            <p className="mt-1 text-2xl font-bold text-cyan-200">27</p>
          </div>
          <div className="rounded-xl border border-white/10 bg-slate-900/35 p-3">
            <p className="text-xs text-slate-400">可用资源</p>
            <p className="mt-1 text-2xl font-bold text-cyan-200">1,286</p>
          </div>
          <div className="rounded-xl border border-white/10 bg-slate-900/35 p-3">
            <p className="text-xs text-slate-400">总下载量</p>
            <p className="mt-1 text-2xl font-bold text-cyan-200">8.4M</p>
          </div>
        </div>
      </div>
    </motion.section>
  );
}

export function SafetyBadge({ items }: { items: AppResource["safety"] }) {
  return (
    <div className="flex gap-1 text-emerald-300">
      {items.includes("official") && <BadgeCheck size={14} />}
      {items.includes("verified") && <ShieldCheck size={14} />}
      {items.includes("clean") && <ShieldCheck size={14} />}
    </div>
  );
}

export function AppCard({ app }: { app: AppResource }) {
  const { track } = useTrack();
  const primaryChannel = app.channels[0];
  const downloadUrl = buildChannelUrl(primaryChannel?.href ?? "#", primaryChannel?.name ?? "direct", app.slug);
  return (
    <motion.article whileHover={{ y: -4 }} className="card-glass flex h-full flex-col gap-2">
      <div className="flex items-center justify-between">
        <span className="text-xl">{app.icon}</span>
        <SafetyBadge items={app.safety} />
      </div>
      <div>
        <h3 className="text-base font-semibold">{app.name}</h3>
        <p className="text-xs text-slate-400">{app.subtitle}</p>
      </div>
      <p className="line-clamp-2 text-xs text-slate-300">{app.description}</p>
      <div className="flex flex-wrap gap-1">
        {app.tags.map((tag) => (
          <span key={tag} className="pill text-[11px]">{tag}</span>
        ))}
      </div>
      <div className="mt-auto flex items-center justify-between text-[11px] text-slate-400">
        <span>{app.version}</span>
        <span>{app.size}</span>
        <span>{app.updatedAt}</span>
      </div>
      <div className="flex items-center justify-between">
        <Link href={`/apps/${app.slug}`} className="text-sm text-cyan-300">查看详情</Link>
        <a
          href={downloadUrl}
          onClick={() => track(TRACKING_EVENTS.downloadClick, { slug: app.slug, channel: primaryChannel?.name ?? "direct", location: "card" })}
          className="inline-flex items-center gap-1 rounded-xl bg-cyan-400/90 px-3.5 py-2 text-xs font-semibold text-slate-900"
        >
          下载 <Download size={12} />
        </a>
      </div>
    </motion.article>
  );
}

export function AppGrid({ apps }: { apps: AppResource[] }) {
  return <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">{apps.map((a) => <AppCard key={a.id} app={a} />)}</div>;
}

export function StatsPanel() {
  const stats = [
    { k: "资源总数", v: "1,286" },
    { k: "今日更新", v: "27" },
    { k: "总下载量", v: "8.4M" },
    { k: "热门分类", v: "AI 工具" },
  ];
  return (
    <section className="grid grid-cols-2 gap-3 md:grid-cols-4">
      {stats.map((s) => (
        <motion.div key={s.k} initial={{ opacity: 0, y: 10 }} whileInView={{ opacity: 1, y: 0 }} className="card-glass">
          <p className="text-xs text-slate-400">{s.k}</p>
          <p className="mt-2 text-2xl font-bold text-cyan-300">{s.v}</p>
        </motion.div>
      ))}
    </section>
  );
}

export function UnlockSection() {
  return (
    <section className="card-glass flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-6">
      <div className="min-w-0 flex-1">
        <h3 className="text-lg font-semibold">更多下载方式</h3>
        <p className="mt-1 text-sm text-slate-300">关注公众号可获取解锁码，会员可用更多下载线路。</p>
      </div>
      <div className="flex shrink-0 flex-col gap-2 sm:flex-row sm:flex-wrap sm:justify-end">
        <Link href="/unlock" className="cta-main inline-flex items-center justify-center gap-1 whitespace-nowrap">
          去解锁中心 <ArrowRight size={14} />
        </Link>
        <Link href="/pricing" className="cta-sub inline-flex justify-center whitespace-nowrap">查看会员</Link>
      </div>
    </section>
  );
}

export function Footer() {
  return (
    <footer className="mt-16 border-t border-white/10 py-8 text-center text-xs text-slate-400">
      <p>Download Nova · 资源下载站</p>
    </footer>
  );
}