"use client";

import { useTranslation } from "@/i18n/navigation";
import type { ToolsCategory } from "@/app/lib/theme-data";

type ToolsProps = {
  data: { categories: ToolsCategory[] };
};

function truncateDesc(desc: string, maxLen = 5) {
  if (!desc || desc.length <= maxLen) return desc;
  return desc.slice(0, maxLen) + "...";
}

export default function Tools({ data }: ToolsProps) {
  const categories = data.categories;
  const { t } = useTranslation("tools");
  const total = categories.reduce((s, c) => s + c.tools.length, 0);
  const toolStats = [
    { value: `${total}+`, key: "tools" as const },
    { value: String(categories.length), key: "categories" as const },
    { value: "数字游民", key: "nomad" as const },
    { value: "佣金", key: "affiliate" as const },
  ];
  return (
    <section id="tools" className="py-20 sm:py-28 dark:bg-slate-950">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="text-center">
          <div className="mb-4 inline-flex items-center gap-2 rounded-full border border-sky-200 bg-sky-50 px-4 py-1.5 text-sm font-medium text-sky-700 dark:border-sky-800 dark:bg-sky-900/50 dark:text-sky-300">
            {t("badge")}
          </div>
          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
            <span className="gradient-text">{t("title")}</span>
          </h2>
          <p className="mx-auto mt-4 max-w-2xl text-lg text-slate-600 dark:text-slate-400">
            {t("subtitle")}
          </p>
        </div>

        <div className="mt-14 grid gap-5 overflow-visible sm:grid-cols-2 lg:grid-cols-4">
          {categories.map((cat) => (
            <div
              key={cat.title}
              className="card-hover group overflow-visible rounded-2xl border border-slate-100 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900"
            >
              <div className={`h-1.5 bg-gradient-to-r ${cat.color}`} />
              <div className="p-5">
                <div className="mb-3 flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <span className="text-2xl">{cat.icon}</span>
                    <h3 className="font-bold text-slate-900 dark:text-slate-100">{cat.title}</h3>
                  </div>
                  <span className={`rounded-full px-2 py-0.5 text-xs font-semibold ${cat.bg} ${cat.text}`}>
                    {cat.tools.length}
                  </span>
                </div>
                <div className="space-y-2">
                  {cat.tools.map((tool) => (
                    <a
                      key={tool.name}
                      href={tool.href}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="group/item flex items-center justify-between rounded-lg bg-slate-50 px-3 py-2 text-sm transition-colors hover:bg-slate-100/80 hover:text-sky-600 dark:bg-slate-800 dark:hover:bg-slate-700 dark:hover:text-sky-400"
                    >
                      <span className="font-medium text-slate-700 dark:text-slate-300">{tool.name}</span>
                      <span className="relative text-slate-400">
                        {truncateDesc(tool.desc)}
                        {tool.desc && tool.desc.length > 5 && (
                          <span className="pointer-events-none absolute bottom-full left-1/2 z-10 mb-1 w-max max-w-[90vw] -translate-x-1/2 whitespace-normal break-words rounded-lg bg-slate-800 px-3 py-2 text-xs text-white opacity-0 shadow-lg transition-opacity group-hover/item:opacity-100">
                            {tool.desc}
                          </span>
                        )}
                      </span>
                    </a>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-14 grid grid-cols-2 gap-4 sm:grid-cols-4">
          {toolStats.map((s) => (
            <div
              key={s.key}
              className="rounded-2xl border border-slate-100 bg-white p-5 text-center shadow-sm dark:border-slate-800 dark:bg-slate-900"
            >
              <div className="text-3xl font-extrabold text-sky-600 dark:text-sky-400">
                {s.value}
              </div>
              <div className="mt-1 text-sm text-slate-500 dark:text-slate-400">{t(`stats.${s.key}`)}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}