"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { type Horse, MONTHLY_TOP_NAMES } from "@/lib/types";

function StarRating({ value }: { value: number }) {
  return (
    <div className="stars-row" aria-label={`${value} étoiles sur 5`}>
      {Array.from({ length: 5 }, (_, i) => {
        const full = value >= i + 1;
        const half = !full && value > i;
        return (
          <span
            key={i}
            className={`star-glyph ${full ? "star-full" : half ? "star-half" : "star-empty"}`}
          >
            ★
          </span>
        );
      })}
    </div>
  );
}

function getCategoryClass(category: string): string {
  const lower = (category || "").toLowerCase();
  if (lower.includes("jument") || lower.includes("mare")) return "jument";
  if (lower.includes("carrier") || lower.includes("course") || lower.includes("baby")) return "carriere";
  return "etalon";
}

function formatCategory(category: string): string {
  const lower = (category || "").toLowerCase();
  if (lower.includes("jument") || lower.includes("mare")) return "Jument";
  if (lower.includes("carrier") || lower.includes("course") || lower.includes("baby")) return "Carrière de Course";
  return "Etalon";
}

export default function HomePage() {
  const [query, setQuery] = useState("");
  // Result box is hidden by default; only shown after user selects a database search result or Top 10 item
  const [selectedHorse, setSelectedHorse] = useState<Horse | null>(null);
  const [suggestions, setSuggestions] = useState<Horse[]>([]);
  const [showSuggestions, setShowSuggestions] = useState(false);
  const [detailsOpen, setDetailsOpen] = useState(false);
  const [isSearching, setIsSearching] = useState(false);
  const searchWrapRef = useRef<HTMLDivElement>(null);
  const resultRef = useRef<HTMLElement>(null);

  // Close suggestions when clicking outside
  useEffect(() => {
    function handleClickOutside(e: MouseEvent) {
      if (searchWrapRef.current && !searchWrapRef.current.contains(e.target as Node)) {
        setShowSuggestions(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  // Fetch search results from database API /api/search with debouncing
  useEffect(() => {
    const trimmed = query.trim();
    if (trimmed.length < 2) {
      setSuggestions([]);
      return;
    }

    let active = true;
    setIsSearching(true);

    const timer = setTimeout(async () => {
      try {
        const res = await fetch(`/api/search?q=${encodeURIComponent(trimmed)}`);
        if (!res.ok) throw new Error("Search failed");
        const data = await res.json();
        if (active && Array.isArray(data.results)) {
          setSuggestions(data.results.slice(0, 8));
        }
      } catch (err) {
        console.error("[Search] Database query failed:", err);
        if (active) {
          setSuggestions([]);
        }
      } finally {
        if (active) setIsSearching(false);
      }
    }, 200);

    return () => {
      active = false;
      clearTimeout(timer);
    };
  }, [query]);

  function handleSelectHorse(horse: Horse) {
    setSelectedHorse(horse);
    setQuery(horse.name);
    setShowSuggestions(false);
    setDetailsOpen(false);

    setTimeout(() => {
      if (resultRef.current) {
        resultRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
      }
    }, 60);
  }

  async function handleFormSubmit(e: React.FormEvent) {
    e.preventDefault();
    const trimmed = query.trim();
    if (!trimmed) return;

    if (suggestions.length > 0) {
      handleSelectHorse(suggestions[0]);
    } else {
      // Query the database directly for the submitted term
      try {
        const res = await fetch(`/api/search?q=${encodeURIComponent(trimmed)}`);
        if (res.ok) {
          const data = await res.json();
          if (Array.isArray(data.results) && data.results.length > 0) {
            handleSelectHorse(data.results[0]);
          }
        }
      } catch (err) {
        console.error("Direct database search failed:", err);
      }
    }
    setShowSuggestions(false);
  }

  // Tapping a top 10 horse queries the live database for that horse
  async function handleSelectTop10(name: string) {
    setQuery(name);
    setShowSuggestions(false);

    try {
      const res = await fetch(`/api/search?q=${encodeURIComponent(name)}`);
      if (res.ok) {
        const data = await res.json();
        if (Array.isArray(data.results) && data.results.length > 0) {
          const exact = data.results.find((h: Horse) => h.name.toLowerCase() === name.toLowerCase()) ?? data.results[0];
          handleSelectHorse(exact);
          return;
        }
      }
    } catch (err) {
      console.error("Top 10 database fetch failed:", err);
    }
  }

  const top10List = useMemo(() => {
    return MONTHLY_TOP_NAMES.map((name, index) => ({
      rank: index + 1,
      name,
    }));
  }, []);

  return (
    <div className="mobile-viewport">
      <main className="app-container">
        {/* Header / Brand with Trophy Sulky Emblem */}
        <header className="brand-header">
          <div className="emblem-container">
            <Image
              src="/emblem.svg"
              alt="SnapTrot Sulky Emblem"
              width={260}
              height={140}
              priority
              className="sulky-emblem-img"
            />
          </div>

          <h1 className="main-logo-text">
            <span className="logo-white">Snap</span>
            <span className="logo-gold">Trot</span>
            <span className="logo-tld">.fr</span>
          </h1>

          <p className="main-tagline">
            Trouvez la note <strong className="tagline-highlight">SnapTrot</strong>
            <br />
            de votre cheval en 1 click !
          </p>
        </header>

        {/* Floating White Pill Search Bar */}
        <section className="search-section" ref={searchWrapRef}>
          <form className="search-pill-box" onSubmit={handleFormSubmit}>
            <div className="search-lens-wrap" aria-hidden="true">
              <svg viewBox="0 0 24 24" className="search-lens-icon">
                <circle cx="10.5" cy="10.5" r="7" stroke="currentColor" strokeWidth="2.3" fill="none" />
                <path d="M16 16L21 21" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
              </svg>
            </div>

            <input
              type="text"
              className="search-input"
              value={query}
              onChange={(e) => {
                setQuery(e.target.value);
                setShowSuggestions(true);
              }}
              onFocus={() => setShowSuggestions(true)}
              placeholder="Entrez le nom d'un étalon, d'une poulinière ou d'un Trotteur Français"
              autoComplete="off"
              autoCorrect="off"
              spellCheck={false}
              aria-label="Rechercher un cheval"
            />

            <button
              type="submit"
              className="search-submit-btn"
              aria-label="Lancer la recherche"
            >
              <svg viewBox="0 0 24 24" className="arrow-icon" aria-hidden="true">
                <path
                  d="M5 12h14M13 6l6 6-6 6"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2.6"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </button>
          </form>

          {/* Autocomplete Suggestions Dropdown from Database */}
          {showSuggestions && suggestions.length > 0 && (
            <div className="suggestions-dropdown" role="listbox">
              {suggestions.map((h) => (
                <button
                  key={`${h.id}-${h.name}-${h.category}`}
                  type="button"
                  className="suggestion-row"
                  onClick={() => handleSelectHorse(h)}
                >
                  <span className="sugg-avatar" aria-hidden="true">♞</span>
                  <div className="sugg-details">
                    <strong className="sugg-name">{h.name}</strong>
                    <span className="sugg-sub">
                      {h.breed} · {h.year ? `${h.year} · ` : ""}{h.ranking}
                    </span>
                  </div>
                  <span className={`category-tag ${getCategoryClass(h.category)}`}>
                    {formatCategory(h.category)}
                  </span>
                </button>
              ))}
            </div>
          )}

          {showSuggestions && query.trim().length >= 2 && suggestions.length === 0 && !isSearching && (
            <div className="suggestions-dropdown empty-suggestions">
              <span>Aucun résultat trouvé dans la base pour « {query} »</span>
            </div>
          )}
        </section>

        {/* The Result Box - Populated strictly from database records */}
        {selectedHorse && (
          <section className="result-container" ref={resultRef} aria-live="polite">
            <article className="result-gold-card">
              <div className="result-card-inner">
                {/* Left: Horse Portrait Image */}
                <div className="horse-portrait-wrap">
                  <Image
                    src={selectedHorse.image || "/horses/horse-portrait.svg"}
                    alt={selectedHorse.name}
                    width={150}
                    height={150}
                    className="horse-portrait-img"
                    priority
                  />
                  <div className="portrait-vignette" />
                </div>

                {/* Right: Horse Info, Badges and Rating */}
                <div className="horse-meta-wrap">
                  <h2 className="horse-title-name">{selectedHorse.name}</h2>

                  {/* Badges Row: Category + Grade */}
                  <div className="badges-row">
                    {/* Category Badge */}
                    <div className="badge-item">
                      <div className={`badge-pill cat-pill ${getCategoryClass(selectedHorse.category)}`}>
                        {formatCategory(selectedHorse.category)}
                      </div>
                      <span className="badge-sub-label">
                        ({selectedHorse.active ? "actif" : "inactif"})
                      </span>
                    </div>

                    {/* Grade Badge */}
                    <div className="badge-item">
                      <div className="badge-pill grade-pill">
                        {selectedHorse.grade.toFixed(1)}
                      </div>
                      <span className="badge-sub-label">(Note sur 10)</span>
                    </div>
                  </div>

                  {/* Star System */}
                  <StarRating value={selectedHorse.stars} />
                </div>
              </div>

              {/* Bottom: Statistiques détaillées white pill button */}
              <button
                type="button"
                className="details-pill-btn"
                onClick={() => setDetailsOpen((prev) => !prev)}
                aria-expanded={detailsOpen}
              >
                <div className="btn-left-content">
                  {/* Bar Chart Icon */}
                  <svg viewBox="0 0 24 24" className="chart-icon" aria-hidden="true">
                    <rect x="3" y="12" width="4" height="9" rx="1" fill="currentColor" />
                    <rect x="10" y="5" width="4" height="16" rx="1" fill="currentColor" />
                    <rect x="17" y="9" width="4" height="12" rx="1" fill="currentColor" />
                  </svg>
                  <span className="btn-title-text">Statistiques détaillées</span>
                </div>

                {/* Chevron */}
                <svg
                  viewBox="0 0 24 24"
                  className={`chevron-icon ${detailsOpen ? "chevron-open" : ""}`}
                  aria-hidden="true"
                >
                  <path
                    d="M9 6l6 6-6 6"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2.8"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </button>

              {/* Expandable Detailed Statistics Drawer */}
              {detailsOpen && (
                <div className="stats-drawer">
                  <div className="stats-drawer-header">
                    <span className="stats-kicker">FICHE COMPLÈTE & PERFORMANCES</span>
                    <span className="stats-badge-tag">{selectedHorse.discipline}</span>
                  </div>

                  <p className="ranking-badge-line">
                    <span className="gold-dot" /> {selectedHorse.ranking}
                  </p>

                  <div className="stats-grid">
                    {selectedHorse.statistics.map((stat, idx) => (
                      <div className="stat-card-box" key={idx}>
                        <span className="stat-label">{stat.label}</span>
                        <strong className="stat-val">{stat.value}</strong>
                      </div>
                    ))}
                  </div>

                  <div className="stats-footer-meta">
                    <span>Race : <strong>{selectedHorse.breed}</strong></span>
                    <span>Année : <strong>{selectedHorse.year || "Non renseignée"}</strong></span>
                  </div>
                </div>
              )}
            </article>
          </section>
        )}

        {/* Top 10 - Recherches du mois */}
        <section className="top10-section">
          {/* Section Divider Header */}
          <div className="top10-header-divider">
            <div className="divider-line" />
            <div className="top10-title-pill">
              {/* Bar chart icon */}
              <svg viewBox="0 0 24 24" className="gold-chart-icon" aria-hidden="true">
                <rect x="3" y="12" width="4" height="9" rx="1" fill="currentColor" />
                <rect x="10" y="5" width="4" height="16" rx="1" fill="currentColor" />
                <rect x="17" y="9" width="4" height="12" rx="1" fill="currentColor" />
              </svg>
              <span>Top 10 - Recherches du mois</span>
            </div>
            <div className="divider-line" />
          </div>

          {/* Top 10 Card Container */}
          <div className="top10-card">
            {top10List.map((item) => {
              const isFirst = item.rank === 1;
              return (
                <button
                  type="button"
                  key={item.rank}
                  className={`top10-row ${isFirst ? "top10-first" : ""}`}
                  onClick={() => handleSelectTop10(item.name)}
                >
                  <span className="rank-badge">{item.rank}</span>
                  <span className="rank-horse-name">{item.name}</span>
                  <span className="rank-select-arrow" aria-hidden="true">›</span>
                </button>
              );
            })}
          </div>
        </section>

        {/* Footer */}
        <footer className="app-footer">
          <div className="footer-links">
            <span className="footer-brand">
              Snap<span className="gold-text">Trot</span>.fr
            </span>
            <span className="footer-dot">·</span>
            <Link href="/database-check" className="footer-link">
              Diagnostic base FoalX
            </Link>
          </div>
          <p className="footer-copy">Données équines certifiées · Trotteur Français</p>
        </footer>
      </main>
    </div>
  );
}