"use client";

import Link from "next/link";
import { BookOpen, BrainCircuit, Compass, Lock, Sparkles } from "lucide-react";
import { ZenCard } from "@/components/ui/zen-card";
import { useAuth } from "@/components/auth/auth-provider";

const MODULES = [
  {
    href: "/learn",
    title: "易经学习",
    description: "64 卦卡片择读，繁体精简与简体图文",
    icon: BookOpen,
    accent: "from-amber-500/10 to-transparent",
    protected: false,
  },
  {
    href: "/liuyao",
    title: "六爻算卦",
    description: "三钱法起卦，卦辞 AI 智能解读",
    icon: Sparkles,
    accent: "from-stone-500/10 to-transparent",
    protected: true,
  },
  {
    href: "/bazi",
    title: "生辰八字",
    description: "四柱排盘，十神大运，AI 命理解读",
    icon: BrainCircuit,
    accent: "from-zinc-500/10 to-transparent",
    protected: true,
  },
  {
    href: "/combined",
    title: "综合测算",
    description: "天时地利人和，六爻可选",
    icon: Compass,
    accent: "from-neutral-500/10 to-transparent",
    protected: true,
  },
] as const;

export default function HomeModules() {
  const { authEnabled, loggedIn } = useAuth();

  return (
    <div className="grid gap-4 sm:grid-cols-2">
      {MODULES.map(({ href, title, description, icon: Icon, accent, protected: locked }) => {
        const needLogin = locked && authEnabled && !loggedIn;
        const targetHref = needLogin ? `/login?next=${encodeURIComponent(href)}` : href;

        return (
          <Link key={href} href={targetHref} className="group block">
            <ZenCard
              className={`relative h-full bg-gradient-to-br ${accent} transition-all duration-300 group-hover:-translate-y-0.5 group-hover:shadow-md ${needLogin ? "opacity-90" : ""}`}
            >
              {needLogin && (
                <span className="absolute right-3 top-3 text-muted-foreground">
                  <Lock size={16} />
                </span>
              )}
              <div className="mb-3 flex items-center gap-3">
                <span className="flex h-10 w-10 items-center justify-center rounded-full border border-border/60 bg-background/80">
                  <Icon size={20} className="text-primary/80" />
                </span>
                <span className="text-lg font-medium tracking-wide">{title}</span>
              </div>
              <p className="text-sm leading-relaxed text-muted-foreground">
                {description}
                {needLogin && "（登录后可用）"}
              </p>
            </ZenCard>
          </Link>
        );
      })}
    </div>
  );
}