import { useState, useEffect, useRef } from "react";
import { Helmet } from "react-helmet-async";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useMarketingCta } from "../../hooks/useMarketingCta";
import {
  ArrowRight,
  ChevronRight,
  Trophy,
  ExternalLink,
  Github,
  BookOpen,
  Lightbulb,
  ListChecks,
  BookText,
  Target,
  Layers,
  Presentation,
  Quote,
  Cpu,
  Brain,
} from "lucide-react";

// ---------------------------------------------------------------------------
// Animated leaderboard bar chart
// Uses IntersectionObserver to trigger bars growing from 0 → target width
// ---------------------------------------------------------------------------

interface LeaderboardEntry {
  name: string;
  score: number;
  /** Whether this is the Grep entry (highlighted) */
  isGrep?: boolean;
}

function AnimatedLeaderboard({
  data,
  /** The right-hand label format — "percent" renders 78.6%, "number" renders 56.27 */
  format = "percent",
}: {
  data: LeaderboardEntry[];
  format?: "percent" | "number";
}) {
  const ref = useRef<HTMLDivElement>(null);
  const [animated, setAnimated] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setAnimated(true);
          observer.disconnect();
        }
      },
      { threshold: 0.3 },
    );
    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  const maxScore = Math.max(...data.map((d) => d.score));

  return (
    <div ref={ref} className="space-y-3">
      {data.map((item, i) => {
        const barWidth = (item.score / maxScore) * 100;
        const label =
          format === "percent"
            ? `${animated ? item.score : 0}%`
            : animated
              ? item.score.toFixed(2)
              : "0.00";

        return (
          <div
            key={item.name}
            className={`flex items-center justify-between p-5 border-2 relative overflow-hidden ${
              item.isGrep
                ? "border-brand-purple text-white"
                : "border-white/20 text-gray-300"
            }`}
          >
            {/* Animated bar background */}
            <div
              className={`absolute inset-y-0 left-0 ${
                item.isGrep ? "bg-brand-purple" : "bg-white/10"
              }`}
              style={{
                width: animated ? `${barWidth}%` : "0%",
                transition: `width 1.2s cubic-bezier(0.22, 1, 0.36, 1) ${i * 0.15}s`,
              }}
            />
            <div className="relative z-10 flex items-center gap-2">
              <span className="font-mono uppercase tracking-wider">{item.name}</span>
              {item.isGrep && <Trophy className="w-4 h-4 text-brand-yellow" />}
            </div>
            <span
              className={`text-2xl font-black relative z-10 ${
                item.isGrep ? "text-white" : "text-gray-400"
              }`}
            >
              {label}
            </span>
          </div>
        );
      })}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Metric card (used in the 4-card grids)
// ---------------------------------------------------------------------------

function MetricCard({
  icon: Icon,
  title,
  value,
  delta,
}: {
  icon: React.ComponentType<{ className?: string }>;
  title: string;
  value: string;
  delta?: string;
}) {
  return (
    <div className="bg-white border-2 border-black/10 p-6">
      <div className="flex items-start gap-4">
        <div className="w-12 h-12 bg-black flex items-center justify-center flex-shrink-0">
          <Icon className="w-6 h-6 text-white" />
        </div>
        <div className="flex-1">
          <h3 className="font-mono font-bold uppercase tracking-wide text-sm mb-1">{title}</h3>
          <div className="text-3xl font-mono font-black text-brand-purple">{value}</div>
          {delta && (
            <div className="text-sm font-mono text-green-600 mt-1">{delta}</div>
          )}
        </div>
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Hero stat card (the three score pills at the top)
// ---------------------------------------------------------------------------

function HeroStatCard({
  benchmark,
  score,
  unit,
}: {
  benchmark: string;
  score: string;
  unit?: string;
}) {
  return (
    <div className="bg-white/5 border-2 border-white/10 p-6 text-center">
      <div className="text-4xl md:text-5xl font-mono font-black text-brand-purple mb-2">
        {score}
        {unit && <span className="text-2xl md:text-3xl">{unit}</span>}
      </div>
      <div className="text-xs font-mono uppercase tracking-wider text-gray-400">{benchmark}</div>
    </div>
  );
}

// ===========================================================================
// BENCHMARK PAGE
// ===========================================================================

export default function BenchmarkPage() {
  const { t } = useTranslation("marketing");
  const { href: ctaHref, state: ctaState } = useMarketingCta();
  const ctaText =
    ctaState === "signedIn"
      ? t("benchmark.cta.getStarted", "Get Started")
      : ctaState === "returning"
      ? t("common:header.signIn", "Sign In")
      : t("benchmark.cta.joinWaitlist", "Get Started");

  // -- DRACO data (top 5) --
  const dracoData: LeaderboardEntry[] = [
    { name: "Grep", score: 78.6, isGrep: true },
    { name: "Perplexity DR (Opus 4.6)", score: 70.5 },
    { name: "Claude Opus 4.6", score: 59.8 },
    { name: "Gemini Deep Research", score: 59.0 },
    { name: "OpenAI Deep Research (o3)", score: 52.1 },
  ];

  // -- DeepSearchQA data (top 5) --
  const deepSearchData: LeaderboardEntry[] = [
    { name: "Grep", score: 84.5, isGrep: true },
    { name: "Perplexity Deep Research", score: 81.9 },
    { name: "Moonshot K2.5", score: 77.1 },
    { name: "Anthropic Opus 4.5", score: 76.1 },
    { name: "Parallel Ultra2x", score: 72.6 },
  ];

  // -- DeepResearch Bench (RACE) data (top 5) --
  const raceData: LeaderboardEntry[] = [
    { name: "Grep", score: 56.27, isGrep: true },
    { name: "Cellcog Max", score: 56.13 },
    { name: "nvidia-aiq", score: 55.95 },
    { name: "Cellcog", score: 55.31 },
    { name: "CMCC-DeepInsight", score: 55.24 },
  ];

  return (
    <>
      <Helmet>
        <title>#1 on Every Major Benchmark — DRACO, DeepSearchQA, DeepResearch Bench | Grep AI</title>
        <meta
          name="description"
          content="Grep leads DRACO (78.6%), DeepSearchQA (84.5%), and DeepResearch Bench (56.27) — PhD-level research tasks graded by domain experts."
        />
        <meta
          property="og:title"
          content="#1 on Every Major Benchmark | Grep AI"
        />
        <meta
          property="og:description"
          content="Grep leads DRACO (78.6%), DeepSearchQA (84.5%), and DeepResearch Bench (56.27) — PhD-level research tasks graded by domain experts."
        />
        <meta
          property="og:image"
          content="https://storage.googleapis.com/parcha-ai-public-assets/grep-images/og/benchmark.jpg"
        />
        <meta property="og:url" content="https://grep.ai/benchmark" />
        <meta property="og:type" content="website" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta
          name="twitter:title"
          content="#1 on Every Major Benchmark | Grep AI"
        />
        <meta
          name="twitter:description"
          content="Grep leads DRACO (78.6%), DeepSearchQA (84.5%), and DeepResearch Bench (56.27) — PhD-level research tasks graded by domain experts."
        />
        <meta
          name="twitter:image"
          content="https://storage.googleapis.com/parcha-ai-public-assets/grep-images/og/benchmark.jpg"
        />
      </Helmet>

      <div className="bg-white">
        {/* ================================================================
            1. HERO — dark background
        ================================================================= */}
        <section className="bg-gray-900 text-white py-16 md:py-28 px-4 md:px-8">
          <div className="max-w-6xl mx-auto">
            {/* Breadcrumb */}
            <div className="flex items-center gap-2 text-sm text-gray-400 mb-6">
              <Link to="/" className="hover:text-white transition-colors">
                Home
              </Link>
              <ChevronRight className="w-4 h-4" />
              <span>Benchmark</span>
            </div>

            <div className="text-center max-w-4xl mx-auto mb-16">
              <h1 className="text-4xl md:text-6xl lg:text-7xl font-black tracking-tight uppercase mb-6">
                #1 on Every Major Benchmark
              </h1>
              <p className="text-lg md:text-xl text-gray-400 max-w-3xl mx-auto leading-relaxed">
                Evaluated on DRACO, DeepSearchQA, and DeepResearch Bench — PhD-level research
                tasks graded by domain experts.
              </p>
            </div>

            {/* Three headline stat cards */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
              <HeroStatCard benchmark="DRACO" score="78.6" unit="%" />
              <HeroStatCard benchmark="DeepSearchQA" score="84.5" unit="%" />
              <HeroStatCard benchmark="DeepResearch Bench" score="56.27" />
            </div>

            {/* CTAs */}
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link
                to={ctaHref}
                className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-brand-purple text-white font-mono uppercase tracking-wider text-sm hover:bg-indigo-700 transition-colors"
              >
                {ctaText}
                <ArrowRight className="w-4 h-4" />
              </Link>
              <a
                href="https://github.com/Parcha-ai/benchmarks"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center justify-center gap-2 px-8 py-4 border-2 border-white/30 text-white font-mono uppercase tracking-wider text-sm hover:bg-white/10 transition-colors"
              >
                <Github className="w-4 h-4" />
                View on GitHub
              </a>
            </div>
          </div>
        </section>

        {/* ================================================================
            2. DRACO BENCHMARK
        ================================================================= */}
        <section className="py-16 md:py-24 px-4 md:px-8 bg-white">
          <div className="max-w-6xl mx-auto">
            {/* Badge */}
            <div className="inline-flex items-center gap-2 px-3 py-1 bg-gray-100 text-black text-xs font-mono uppercase tracking-wider mb-6">
              DRACO — Perplexity + Harvard
            </div>

            <div className="grid md:grid-cols-2 gap-12 items-start mb-16">
              <div>
                <h2 className="text-3xl md:text-4xl font-black tracking-tight uppercase mb-6">
                  DRACO Benchmark
                </h2>
                <p className="text-gray-600 leading-relaxed mb-6">
                  100 open-ended research questions across 10 domains, judged by Gemini-2.5-Pro against 3,934
                  weighted rubric criteria. Grep leads all four evaluation axes and wins 9 of 10 domains.
                </p>
                <div className="bg-brand-purple/5 border-2 border-brand-purple p-4">
                  <p className="font-mono text-sm font-bold text-brand-purple uppercase tracking-wide">
                    Grep wins 9 of 10 domains
                  </p>
                </div>
              </div>

              {/* Leaderboard */}
              <div className="bg-gray-900 p-6 md:p-8">
                <AnimatedLeaderboard data={dracoData} format="percent" />
              </div>
            </div>

            {/* Performance by evaluation axis */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              <MetricCard
                icon={Target}
                title="Factual Accuracy"
                value="75.4%"
                delta="+7.5pp vs Perplexity"
              />
              <MetricCard
                icon={Layers}
                title="Breadth & Depth"
                value="80.3%"
                delta="+7.2pp"
              />
              <MetricCard
                icon={Presentation}
                title="Presentation"
                value="93.3%"
                delta="+3.0pp"
              />
              <MetricCard
                icon={Quote}
                title="Citation"
                value="79.1%"
                delta="+14.5pp"
              />
            </div>
          </div>
        </section>

        {/* ================================================================
            3. DEEPSEARCHQA BENCHMARK
        ================================================================= */}
        <section className="py-16 md:py-24 px-4 md:px-8 bg-gray-50">
          <div className="max-w-6xl mx-auto">
            {/* Badge */}
            <div className="inline-flex items-center gap-2 px-3 py-1 bg-gray-200 text-black text-xs font-mono uppercase tracking-wider mb-6">
              DeepSearchQA — Google
            </div>

            <div className="grid md:grid-cols-2 gap-12 items-start mb-12">
              {/* Leaderboard first on md+ for visual variety */}
              <div className="bg-gray-900 p-6 md:p-8 order-2 md:order-1">
                <AnimatedLeaderboard data={deepSearchData} format="percent" />
              </div>

              <div className="order-1 md:order-2">
                <h2 className="text-3xl md:text-4xl font-black tracking-tight uppercase mb-6">
                  DeepSearchQA
                </h2>
                <p className="text-gray-600 leading-relaxed mb-6">
                  896 multi-step research questions across 17 subject domains. Judge: Gemini 2.5 Flash.
                  Grep achieves 84.5% FC with perfect scores in Linguistics, Biology, and Arts &amp; Entertainment.
                </p>
                <div className="bg-brand-purple/5 border-2 border-brand-purple p-4">
                  <p className="font-mono text-sm font-bold text-brand-purple uppercase tracking-wide">
                    14 of 17 categories exceed 80% FC
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* ================================================================
            4. DEEPRESEARCH BENCH (RACE)
        ================================================================= */}
        <section className="py-16 md:py-24 px-4 md:px-8 bg-gray-900 text-white">
          <div className="max-w-6xl mx-auto">
            {/* Badge */}
            <div className="inline-flex items-center gap-2 px-3 py-1 bg-brand-purple text-white text-xs font-mono uppercase tracking-wider mb-6">
              DeepResearch Bench — RACE Framework
            </div>

            <div className="grid md:grid-cols-2 gap-12 items-start mb-16">
              <div>
                <h2 className="text-3xl md:text-4xl font-black tracking-tight uppercase mb-6">
                  DeepResearch Bench
                </h2>
                <p className="text-gray-400 leading-relaxed mb-6">
                  100 PhD-level research questions (50 Chinese, 50 English), judged by Gemini-2.5-Pro.
                  A score above 50 means the system outperformed the human expert. Grep leads the field of 34 systems.
                </p>
              </div>

              {/* Leaderboard */}
              <div className="bg-white/5 border-2 border-white/10 p-6 md:p-8">
                <AnimatedLeaderboard data={raceData} format="number" />
              </div>
            </div>

            {/* RACE dimensions — 4 cards */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              <div className="bg-white/5 border-2 border-white/10 p-6">
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 bg-brand-purple flex items-center justify-center flex-shrink-0">
                    <Lightbulb className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <h3 className="font-mono font-bold uppercase tracking-wide text-sm text-gray-300 mb-1">
                      Insight
                    </h3>
                    <div className="text-3xl font-mono font-black text-brand-purple">58.98</div>
                  </div>
                </div>
              </div>

              <div className="bg-white/5 border-2 border-white/10 p-6">
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 bg-brand-purple flex items-center justify-center flex-shrink-0">
                    <BookOpen className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <h3 className="font-mono font-bold uppercase tracking-wide text-sm text-gray-300 mb-1">
                      Comprehensiveness
                    </h3>
                    <div className="text-3xl font-mono font-black text-brand-purple">56.79</div>
                  </div>
                </div>
              </div>

              <div className="bg-white/5 border-2 border-white/10 p-6">
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 bg-brand-purple flex items-center justify-center flex-shrink-0">
                    <ListChecks className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <h3 className="font-mono font-bold uppercase tracking-wide text-sm text-gray-300 mb-1">
                      Instruction Following
                    </h3>
                    <div className="text-3xl font-mono font-black text-brand-purple">53.49</div>
                  </div>
                </div>
              </div>

              <div className="bg-white/5 border-2 border-white/10 p-6">
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 bg-brand-purple flex items-center justify-center flex-shrink-0">
                    <BookText className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <h3 className="font-mono font-bold uppercase tracking-wide text-sm text-gray-300 mb-1">
                      Readability
                    </h3>
                    <div className="text-3xl font-mono font-black text-brand-purple">53.50</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* ================================================================
            5. METHODOLOGY
        ================================================================= */}
        <section className="py-16 md:py-24 px-4 md:px-8 bg-white">
          <div className="max-w-4xl mx-auto">
            <h2 className="text-3xl md:text-4xl font-black tracking-tight uppercase mb-8 text-center">
              Methodology
            </h2>

            <div className="grid md:grid-cols-2 gap-8 mb-10">
              <div className="border-2 border-black/10 p-6">
                <div className="flex items-center gap-3 mb-4">
                  <div className="w-10 h-10 bg-black flex items-center justify-center flex-shrink-0">
                    <Cpu className="w-5 h-5 text-white" />
                  </div>
                  <h3 className="font-mono font-bold uppercase tracking-wide text-sm">
                    Multi-Agent Architecture
                  </h3>
                </div>
                <p className="text-gray-600 text-sm leading-relaxed">
                  Grep orchestrates specialised sub-agents — each responsible for search,
                  synthesis, verification, and citation — then merges their outputs into a
                  single, coherent research report.
                </p>
              </div>

              <div className="border-2 border-black/10 p-6">
                <div className="flex items-center gap-3 mb-4">
                  <div className="w-10 h-10 bg-black flex items-center justify-center flex-shrink-0">
                    <Brain className="w-5 h-5 text-white" />
                  </div>
                  <h3 className="font-mono font-bold uppercase tracking-wide text-sm">
                    Claude Opus 4.6 Backbone
                  </h3>
                </div>
                <p className="text-gray-600 text-sm leading-relaxed">
                  All reasoning and synthesis steps are powered by Claude Opus 4.6, giving
                  Grep best-in-class analytical depth, nuanced judgement, and instruction
                  following.
                </p>
              </div>
            </div>

            <div className="text-center">
              <a
                href="https://github.com/Parcha-ai/benchmarks"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 text-sm font-mono uppercase tracking-wider text-brand-purple hover:underline"
              >
                <Github className="w-4 h-4" />
                Full data and reproduction scripts on GitHub
                <ExternalLink className="w-3 h-3" />
              </a>
            </div>
          </div>
        </section>

        {/* ================================================================
            6. CTA
        ================================================================= */}
        <section className="py-16 md:py-24 px-4 md:px-8 bg-brand-purple text-white">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-3xl md:text-5xl font-black tracking-tight uppercase mb-6">
              Experience #1 Ranked Research
            </h2>
            <p className="text-lg text-indigo-100 mb-10 max-w-2xl mx-auto leading-relaxed">
              See why Grep outperforms OpenAI, Google, Perplexity, and every specialised
              research platform on PhD-level tasks.
            </p>

            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link
                to={ctaHref}
                className="inline-flex items-center justify-center gap-3 px-8 py-4 bg-white text-black font-mono uppercase tracking-wider hover:bg-gray-100 transition-colors"
              >
                {ctaText}
                <ArrowRight className="w-5 h-5" />
              </Link>
              <Link
                to="/developers"
                className="inline-flex items-center justify-center gap-3 px-8 py-4 bg-transparent border-2 border-white text-white font-mono uppercase tracking-wider hover:bg-white/10 transition-colors"
              >
                API Docs
              </Link>
            </div>
          </div>
        </section>
      </div>
    </>
  );
}