import React, { useState, useMemo } from "react";
import { Link } from "react-router-dom";
import { ArrowRight, Search as SearchIcon, Filter, X } from "lucide-react";
import { useLanguage } from "../App";

export const Research: React.FC = () => {
  const { language } = useLanguage();
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("All");

  const content = {
    en: {
      title: "Research Archive",
      subtitle:
        "Our collection of white papers, technical deep dives, and engineering retrospectives. We believe in open-sourcing our learnings from the frontier of applied AI.",
      read_paper: "Read Paper",
      search_placeholder: "grep search-query...",
      no_results: "No research found matching criteria.",
      categories: [
        "All",
        "Fine-tuning",
        "Systems",
        "Architecture",
        "Small Models",
      ],
      articles: [
        {
          id: "lora-without-regret",
          title: "LoRA Without Regret",
          date: "Sep 29, 2025",
          authors: "John Schulman, Pradit",
          abstract:
            "Fine-tuning large models is expensive. We investigate whether Low-Rank Adaptation (LoRA) can truly match full fine-tuning performance across various downstream tasks, analyzing rank scaling and matrix initialization.",
          tags: ["Fine-tuning", "Optimization", "Deep Learning"],
          category: "Fine-tuning",
        },
        {
          id: "rag-latency-optimization",
          title: "Optimizing RAG Latency: A Systems Approach",
          date: "Aug 14, 2025",
          authors: "Pradit Engineering",
          abstract:
            "Retrieval-Augmented Generation often suffers from p99 latency spikes. We break down the contribution of embedding generation, vector search, and reranking, proposing a caching layer that reduces latency by 40%.",
          tags: ["RAG", "Systems", "Latency"],
          category: "Architecture",
        },
        {
          id: "small-models-reasoning",
          title: "The Unreasonable Effectiveness of Small Models",
          date: "July 02, 2025",
          authors: "Pradit Research",
          abstract:
            "Can a 7B parameter model reason as well as a 70B model? With specific chain-of-thought fine-tuning on high-quality synthetic data, we demonstrate parity on GSM8K benchmarks.",
          tags: ["Small Models", "Reasoning", "Data Efficiency"],
          category: "Small Models",
        },
      ],
    },
    th: {
      title: "คลังงานวิจัย",
      subtitle:
        "คลังเอกสารทางเทคนิคและการถอดบทเรียนทางวิศวกรรม เราเชื่อในการเปิดเผยสิ่งที่เราเรียนรู้จากพรมแดนแห่ง AI ประยุกต์สู่สาธารณะ",
      read_paper: "อ่านบทความ",
      search_placeholder: "ค้นหาบทความ...",
      no_results: "ไม่พบงานวิจัยที่ตรงกับเงื่อนไข",
      categories: [
        "ทั้งหมด",
        "Fine-tuning",
        "Systems",
        "Architecture",
        "Small Models",
      ],
      articles: [
        {
          id: "lora-without-regret",
          title: "LoRA โดยไม่เสียใจ",
          date: "29 ก.ย. 2025",
          authors: "John Schulman, Pradit (ประดิษฐ์)",
          abstract:
            "การ Fine-tune โมเดลขนาดใหญ่มีค่าใช้จ่ายสูง เราตรวจสอบว่า Low-Rank Adaptation (LoRA) สามารถให้ประสิทธิภาพเทียบเท่าการ Fine-tune เต็มรูปแบบได้หรือไม่ โดยวิเคราะห์การปรับขนาด Rank และการเริ่มต้น Matrix",
          tags: ["Fine-tuning", "Optimization", "Deep Learning"],
          category: "Fine-tuning",
        },
        {
          id: "rag-latency-optimization",
          title: "การปรับปรุงความหน่วง RAG: แนวทางเชิงระบบ",
          date: "14 ส.ค. 2025",
          authors: "Pradit Engineering",
          abstract:
            "ระบบ RAG มักประสบปัญหาค่าความหน่วง p99 สูง เราจำแนกส่วนประกอบของการสร้าง Embedding, Vector Search และ Reranking พร้อมเสนอชั้น Caching ที่ลดความหน่วงได้ถึง 40%",
          tags: ["RAG", "Systems", "Latency"],
          category: "Architecture",
        },
        {
          id: "small-models-reasoning",
          title: "ประสิทธิภาพที่น่าทึ่งของโมเดลขนาดเล็ก",
          date: "02 ก.ค. 2025",
          authors: "Pradit Research",
          abstract:
            "โมเดล 7B สามารถให้เหตุผลได้ดีเท่ากับ 70B หรือไม่? ด้วยการ Fine-tune แบบ Chain-of-thought บนข้อมูลสังเคราะห์คุณภาพสูง เราแสดงให้เห็นถึงความสามารถที่เทียบเท่ากันบน GSM8K",
          tags: ["Small Models", "Reasoning", "Data Efficiency"],
          category: "Small Models",
        },
      ],
    },
  };

  const t = content[language];

  // Filtering Logic
  const filteredArticles = useMemo(() => {
    return t.articles.filter((article) => {
      const matchesSearch =
        article.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
        article.abstract.toLowerCase().includes(searchQuery.toLowerCase());

      // Map 'All' or 'ทั้งหมด' to show everything
      const isAll =
        selectedCategory === "All" || selectedCategory === "ทั้งหมด";
      const matchesCategory =
        isAll ||
        article.category === selectedCategory ||
        article.tags.includes(selectedCategory);

      return matchesSearch && matchesCategory;
    });
  }, [searchQuery, selectedCategory, t.articles]);

  return (
    <div className="bg-paper min-h-screen pt-24 pb-24">
      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <header className="mb-12 pb-8 border-b border-gray-100">
          <h1 className="font-serif text-4xl md:text-5xl text-ink leading-tight mb-6">
            {t.title}
          </h1>
          <p className="font-serif text-xl text-subtle leading-relaxed max-w-3xl">
            {t.subtitle}
          </p>
        </header>

        {/* Controls: Search & Filter */}
        <div className="flex flex-col md:flex-row gap-6 mb-16 items-start md:items-center justify-between">
          {/* Categories */}
          <div className="flex flex-wrap gap-2">
            {t.categories.map((cat) => (
              <button
                key={cat}
                onClick={() => setSelectedCategory(cat)}
                className={`px-4 py-1.5 text-xs font-bold uppercase tracking-wider rounded-full transition-all border ${
                  selectedCategory === cat
                    ? "bg-ink text-white border-ink"
                    : "bg-white text-subtle border-gray-200 hover:border-gray-400"
                }`}
              >
                {cat}
              </button>
            ))}
          </div>

          {/* Search Bar */}
          <div className="relative w-full md:w-64 group">
            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <SearchIcon
                size={14}
                className="text-gray-400 group-focus-within:text-ink"
              />
            </div>
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="block w-full pl-9 pr-3 py-2 border-b-2 border-gray-200 bg-transparent text-sm font-mono text-ink focus:outline-none focus:border-ink transition-colors placeholder:text-gray-400"
              placeholder={t.search_placeholder}
            />
            {searchQuery && (
              <button
                onClick={() => setSearchQuery("")}
                className="absolute inset-y-0 right-0 pr-2 flex items-center text-gray-400 hover:text-ink"
              >
                <X size={14} />
              </button>
            )}
          </div>
        </div>

        {/* Results List */}
        <div className="space-y-16">
          {filteredArticles.length > 0 ? (
            filteredArticles.map((article) => (
              <article
                key={article.id}
                className="group relative grid grid-cols-1 md:grid-cols-12 gap-8 p-6 -mx-6 rounded-lg hover:bg-gray-50 transition-colors border border-transparent hover:border-gray-100"
              >
                {/* Metadata Column */}
                <div className="md:col-span-3 flex flex-col gap-2">
                  <span className="font-mono text-xs font-bold text-subtle">
                    {article.date}
                  </span>
                  <span className="font-sans text-xs font-medium text-gray-400 uppercase tracking-wider">
                    {article.category}
                  </span>
                  <div className="flex flex-wrap gap-2 mt-2">
                    {article.tags.slice(0, 2).map((tag) => (
                      <span
                        key={tag}
                        className="inline-flex px-2 py-0.5 bg-gray-200/50 text-[10px] text-gray-600 rounded-sm font-mono"
                      >
                        #{tag}
                      </span>
                    ))}
                  </div>
                </div>

                {/* Content Column */}
                <div className="md:col-span-9">
                  <h2 className="font-serif text-2xl font-bold text-ink mb-3 group-hover:text-accent transition-colors">
                    <Link
                      to={
                        article.id === "lora-without-regret"
                          ? "/research/lora-without-regret"
                          : "#"
                      }
                    >
                      {article.title}
                    </Link>
                  </h2>

                  <div className="mb-4 font-sans text-sm text-subtle italic">
                    {article.authors}
                  </div>

                  <p className="font-serif text-lg text-gray-600 leading-relaxed mb-6">
                    {article.abstract}
                  </p>

                  <Link
                    to={
                      article.id === "lora-without-regret"
                        ? "/research/lora-without-regret"
                        : "#"
                    }
                    className="inline-flex items-center text-xs font-bold uppercase tracking-widest text-ink group-hover:text-accent transition-colors border-b border-transparent group-hover:border-accent pb-0.5"
                  >
                    {t.read_paper} <ArrowRight className="ml-2 w-3 h-3" />
                  </Link>
                </div>
              </article>
            ))
          ) : (
            <div className="py-24 text-center border border-dashed border-gray-200 rounded-lg">
              <Filter size={48} className="mx-auto text-gray-200 mb-4" />
              <p className="font-serif text-subtle text-lg">{t.no_results}</p>
              <button
                onClick={() => {
                  setSearchQuery("");
                  setSelectedCategory(language === "en" ? "All" : "ทั้งหมด");
                }}
                className="mt-4 text-sm font-bold text-ink underline"
              >
                Clear filters
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};