"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import {
  CodeXml, Copy, Eye, MessageSquare, GitFork, Users,
  Plus, Zap, ShieldCheck, Binary,
} from "lucide-react";
import type { SnippetStats } from "@/lib/api";
import { snippetLangColor } from "@/lib/snippetLangColors";

const MONO = "var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)";

function useRollIn(target: number, duration = 1000) {
  const [value, setValue] = useState(0);
  useEffect(() => {
    const start = performance.now();
    let raf = 0;
    const tick = (t: number) => {
      const p = Math.min((t - start) / duration, 1);
      const ease = 1 - Math.pow(1 - p, 3);
      setValue(Math.round(target * ease));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, duration]);
  return value;
}

function formatK(n: number) {
  if (n >= 100_000) return `${(n / 1000).toFixed(0)}k`;
  if (n >= 10_000) return `${(n / 1000).toFixed(0)}k`;
  if (n >= 1000) return `${(n / 1000).toFixed(1).replace(/\.0$/, "")}k`;
  return `${n}`;
}

function StatBlock({
  icon,
  label,
  value,
  delay,
}: {
  icon: React.ReactNode;
  label: string;
  value: string;
  delay: number;
}) {
  return (
    <div
      className="j13-hero-stat flex items-center gap-2.5 px-3 py-2 rounded-md"
      style={{
        animationDelay: `${delay}ms`,
        background: "var(--hero-chip-bg)",
        border: "1px solid var(--hero-line)",
      }}
    >
      <span
        className="w-7 h-7 flex items-center justify-center rounded-md shrink-0"
        style={{ background: "var(--hero-chip-icon)" }}
      >
        <span style={{ color: "var(--accent)" }}>{icon}</span>
      </span>
      <div className="flex flex-col leading-none">
        <span
          className="text-[10px] font-medium tracking-wide uppercase"
          style={{ color: "var(--hero-ink-3)", fontFamily: MONO }}
        >
          {label}
        </span>
        <span
          className="text-[17px] font-extrabold tabular-nums mt-0.5"
          style={{ color: "var(--hero-ink)", fontFamily: MONO }}
        >
          {value}
        </span>
      </div>
    </div>
  );
}

function LangMatrix({
  topLanguages,
  total,
}: {
  topLanguages: SnippetStats["top_languages"];
  total: number;
}) {
  const max = Math.max(1, ...topLanguages.map((l) => l.count));
  return (
    <div className="mt-4">
      <div className="flex items-center justify-between mb-2">
        <span className="text-[10px] font-medium tracking-wide uppercase" style={{ color: "var(--hero-ink-3)", fontFamily: MONO }}>
          Language Matrix
        </span>
        <div className="flex items-center gap-1" style={{ color: "var(--hero-ink-3)" }}>
          <ShieldCheck size={9} />
          <span className="text-[9px]" style={{ fontFamily: MONO }}>
            SECURE
          </span>
        </div>
      </div>
      <div className="flex flex-col gap-2">
        {topLanguages.map((l, i) => {
          const c = snippetLangColor(l.language);
          const pct = total > 0 ? Math.round((l.count / total) * 100) : 0;
          return (
            <div key={l.language} className="flex items-center gap-2.5">
              <span
                className="w-[72px] shrink-0 text-[10px] font-semibold text-right tabular-nums truncate"
                style={{ color: c, fontFamily: MONO }}
              >
                {l.language}
              </span>
              <div className="flex-1 h-[5px] rounded-full overflow-hidden" style={{ background: "var(--hero-track)" }}>
                <div
                  className="j13-hero-langbar h-full rounded-full"
                  style={{
                    width: `${Math.max(3, (l.count / max) * 100)}%`,
                    background: `linear-gradient(90deg, ${c}, color-mix(in srgb, ${c}, transparent 40%))`,
                    animationDelay: `${300 + i * 80}ms`,
                  }}
                />
              </div>
              <span className="w-7 shrink-0 text-[10px] tabular-nums text-right" style={{ color: "var(--hero-ink-3)", fontFamily: MONO }}>
                {pct}%
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/** 语言跑马灯：10 种热门语言 ×2 循环 */
function LangTicker({ langs }: { langs: string[] }) {
  const doubled = [...langs, ...langs];
  return (
    <div className="j13-hero-ticker py-2" style={{ borderTop: "1px solid var(--hero-track)", borderBottom: "1px solid var(--hero-track)" }}>
      <div className="j13-hero-ticker-track">
        {doubled.map((l, i) => (
          <span key={`${l}-${i}`} className="flex items-center gap-1.5 text-[11px] font-medium shrink-0" style={{ fontFamily: MONO, color: "var(--hero-ink-2)" }}>
            <span className="inline-block w-[5px] h-[5px] rounded-full" style={{ background: snippetLangColor(l) }} />
            {l}
          </span>
        ))}
      </div>
    </div>
  );
}

export default function SnippetHero({
  stats,
  isLoggedIn,
}: {
  stats: SnippetStats | null;
  isLoggedIn: boolean;
}) {
  const s = stats;
  const total = useRollIn(s?.total_snippets ?? 0);
  const copies = useRollIn(s?.total_copies ?? 0);
  const views = useRollIn(s?.total_views ?? 0);
  const comments = useRollIn(s?.total_comments ?? 0);
  const forks = useRollIn(s?.total_forks ?? 0);
  const contributors = useRollIn(s?.contributors ?? 0);

  // 跑马灯展示的热门语言（去重后取前 10，兜底硬编码）
  const tickerLangs = Array.from(new Set([
    ...topLangNames(s?.top_languages),
    "go", "rust", "typescript", "python", "javascript", "bash", "dockerfile", "kotlin", "yaml", "sql",
  ])).slice(0, 10);

  return (
    <section className="j13-hero relative mb-6 rounded-2xl overflow-hidden">
      {/* 网格底纹 */}
      <div className="absolute inset-0 j13-hero-grid pointer-events-none" />

      {/* 扫描光束 */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none" style={{ opacity: 0.5 }}>
        <div className="j13-hero-scan" />
      </div>

      {/* 内容层 */}
      <div className="relative px-5 pt-5 pb-5 sm:px-7 sm:pt-6 sm:pb-6">
        {/* 顶部栏 */}
        <div className="flex items-start justify-between gap-3 mb-5">
          <div className="flex items-start gap-3 min-w-0">
            <span
              className="inline-flex items-center justify-center w-10 h-10 rounded-xl shrink-0"
              style={{ background: "rgba(148,163,205,0.09)", border: "1px solid var(--hero-line)" }}
            >
              <CodeXml size={19} style={{ color: "var(--accent)" }} />
            </span>
            <div className="min-w-0">
              <div className="flex items-center gap-1.5 flex-wrap">
                <span className="text-[11px]" style={{ color: "var(--hero-ink-3)", fontFamily: MONO }}>
                  $ jiang13/snippets
                </span>
                <span className="text-[11px]" style={{ color: "var(--hero-ink-3)", fontFamily: MONO }}>
                  --public --summary
                </span>
                <span className="j13-hero-caret inline-block w-[6px] h-[3px] rounded-sm" style={{ background: "var(--accent)" }} />
              </div>
              <h1 className="j13-hero-title text-[22px] sm:text-[26px] font-extrabold tracking-tight leading-none mt-0.5">
                代码片段广场
              </h1>
            </div>
          </div>

          <div className="shrink-0 flex items-center gap-2">
            <span className="flex items-center gap-1.5 text-[10px] px-2 py-1 rounded-full" style={{ color: "var(--hero-ink-3)", fontFamily: MONO, background: "var(--hero-chip-bg)", border: "1px solid var(--hero-line)" }}>
              <span className="inline-block w-2 h-2 rounded-full j13-hero-pulse" style={{ background: "#22c55e" }} />
              ONLINE
            </span>
            {isLoggedIn && (
              <Link href="/snippets/new" className="btn btn-primary btn-sm inline-flex items-center gap-1.5 shrink-0">
                <Plus size={14} /> 新建
              </Link>
            )}
          </div>
        </div>

        {/* 统计区 */}
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2">
          <StatBlock icon={<Binary size={12} />} label="Snippets" value={formatK(total)} delay={0} />
          <StatBlock icon={<Eye size={12} />} label="Views" value={formatK(views)} delay={60} />
          <StatBlock icon={<Copy size={12} />} label="Copies" value={formatK(copies)} delay={120} />
          <StatBlock icon={<GitFork size={12} />} label="Forks" value={formatK(forks)} delay={180} />
          <StatBlock icon={<MessageSquare size={12} />} label="Comments" value={formatK(comments)} delay={240} />
          <StatBlock icon={<Users size={12} />} label="Devs" value={formatK(contributors)} delay={300} />
        </div>

        {/* 语言矩阵 */}
        {s && s.top_languages.length > 0 && <LangMatrix topLanguages={s.top_languages} total={s.total_snippets} />}

        {/* 底栏 */}
        <div className="mt-4 flex items-center justify-between">
          <span className="flex items-center gap-1.5 text-[10px]" style={{ color: "var(--hero-ink-3)", fontFamily: MONO }}>
            <Zap size={9} />
            {s ? "DATA_SYNCED" : "OFFLINE"}
          </span>
          <span className="text-[10px] tabular-nums" style={{ color: "var(--hero-ink-3)", fontFamily: MONO }}>
            LAT<span style={{ color: "var(--accent)" }}> 37.7749°N</span> LNG<span style={{ color: "var(--accent)" }}> 122.4194°W</span>
          </span>
        </div>
      </div>

      {/* 语言跑马灯 */}
      <LangTicker langs={tickerLangs} />
    </section>
  );
}

function topLangNames(arr?: { language: string; count: number }[]) {
  if (!arr) return [];
  return arr.map((a) => a.language).filter(Boolean);
}