"use client";

import { useState } from "react";
import { Link, useTranslation, useRouter } from "@/i18n/navigation";
import { useAuthAndVip } from "@/app/lib/useAuthAndVip";
import AuthModal from "@/app/components/AuthModal";

const days = [
  { day: 1, icon: "👋", color: "bg-sky-500" },
  { day: 2, icon: "💡", color: "bg-cyan-500" },
  { day: 3, icon: "💰", color: "bg-teal-500" },
  { day: 4, icon: "🛠️", color: "bg-emerald-500" },
  { day: 5, icon: "📋", color: "bg-amber-500" },
  { day: 6, icon: "🗺️", color: "bg-orange-500" },
  { day: 7, icon: "🚀", color: "bg-rose-500" },
];

export default function Roadmap() {
  const { t } = useTranslation("roadmap");
  const router = useRouter();
  const { user, vip, loading, refetch } = useAuthAndVip();
  const [authOpen, setAuthOpen] = useState(false);
  return (
    <section id="roadmap" className="bg-slate-50 py-20 sm:py-28 dark:bg-slate-900">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="text-center">
          <h2 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100 sm:text-4xl">
            {t("title")} <span className="gradient-text">{t("titleHighlight")}</span>
          </h2>
          <p className="mx-auto mt-4 max-w-2xl text-lg text-slate-600 dark:text-slate-400">
            {t("subtitle")}
          </p>
        </div>

        {/* 7天入门文档 - 独立区块 */}
        <div className="mt-14">
          <h3 className="mb-4 text-center text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
            {t("daysSection")}
          </h3>
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            {days.map((d) => (
              <Link
                key={d.day}
                href={`/day/${d.day}`}
                className="card-hover group flex flex-col rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition-all hover:border-sky-200 hover:shadow-md dark:border-slate-700 dark:bg-slate-800 dark:hover:border-sky-600"
              >
                <div className="flex items-center gap-3">
                  <div
                    className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-xs font-bold text-white ${d.color}`}
                  >
                    DAY {d.day}
                  </div>
                  <span className="text-xl">{d.icon}</span>
                  <h3 className="text-base font-bold text-slate-900 group-hover:text-sky-600 dark:text-slate-100 dark:group-hover:text-sky-400">
                    {t(`days.${d.day}.title`)}
                  </h3>
                </div>
                <p className="mt-3 flex-1 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
                  {t(`days.${d.day}.desc`)}
                </p>
                <span className="mt-3 inline-flex items-center text-sm font-medium text-sky-600 dark:text-sky-400">
                  {t("viewDetails")}
                </span>
              </Link>
            ))}
          </div>
        </div>

        {/* 电子书 + 实战课 - 平级展示 */}
        <div className="mt-16">
          <h3 className="mb-6 text-center text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
            {t("productsSection")}
          </h3>
          <div className="grid gap-6 sm:grid-cols-2">
            <Link
              href="/ebook"
              className="group flex flex-col overflow-hidden rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-sky-50 to-cyan-50/50 p-8 shadow-md transition-all hover:border-sky-300 hover:shadow-lg dark:border-slate-700 dark:from-sky-900/20 dark:to-cyan-900/10 dark:hover:border-sky-600"
            >
              <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-r from-sky-500 to-cyan-500 text-3xl shadow-lg shadow-sky-200/50 dark:shadow-sky-900/30">
                📖
              </div>
              <h3 className="text-xl font-bold text-slate-900 dark:text-slate-100">
                {t("ebook.title")}
              </h3>
              <p className="mt-2 flex-1 text-slate-600 dark:text-slate-400">
                {t("ebook.desc")}
              </p>
              <span className="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-sky-600 dark:text-sky-400">
                {t("ebook.cta")}
              </span>
            </Link>

            <button
              type="button"
              onClick={async () => {
                if (loading) return;
                if (!user) {
                  setAuthOpen(true);
                  return;
                }
                if (!vip) {
                  router.replace("/join");
                  return;
                }
                router.replace("/course");
              }}
              className="group flex w-full flex-col overflow-hidden rounded-2xl border-2 border-amber-200 bg-gradient-to-br from-amber-50 to-orange-50/50 p-8 text-left shadow-md transition-all hover:border-amber-300 hover:shadow-lg dark:border-amber-800 dark:from-amber-900/20 dark:to-orange-900/10 dark:hover:border-amber-700"
            >
              <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-r from-amber-500 to-orange-500 text-3xl shadow-lg shadow-amber-200/50 dark:shadow-amber-900/30">
                🎓
              </div>
              <span className="mb-2 inline-block text-xs font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-400">
                {t("course.tag")}
              </span>
              <h3 className="text-xl font-bold text-slate-900 dark:text-slate-100">
                {t("course.title")}
              </h3>
              <p className="mt-2 flex-1 text-slate-600 dark:text-slate-400">
                {t("course.desc")}
              </p>
              <span className="mt-6 inline-flex items-center gap-2 self-start rounded-full bg-amber-500 px-6 py-3 font-semibold text-white transition group-hover:bg-amber-600 dark:bg-amber-600 dark:group-hover:bg-amber-500">
                {t("course.cta")}
              </span>
            </button>
          </div>
        </div>

      <AuthModal
        isOpen={authOpen}
        onClose={() => setAuthOpen(false)}
        onSuccess={async () => {
          setAuthOpen(false);
          const { vip: isVip } = await refetch();
          router.replace(isVip ? "/course" : "/join");
        }}
      />
      </div>
    </section>
  );
}