"use client";

import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import {
  Search,
  MapPin,
  Cross,
  Pill,
  Clock,
  Zap,
  Utensils,
} from "lucide-react";
import LocationButton from "@/components/LocationButton";
import LocationStatus from "@/components/LocationStatus";
import { useLocation } from "@/context/LocationContext";

const quickSearches = [
  { label: "Nöbetçi Eczane", icon: Clock, hot: true, href: "/nobetci-eczane" },
  { label: "Eczane", icon: Pill, hot: false, href: "/eczane" },
  { label: "Hastane", icon: Cross, hot: false, href: "/hastane" },
  { label: "Restoran", icon: Utensils, hot: false, href: "/restoran" },
  { label: "Elektrikçi", icon: Zap, hot: false, href: "/elektrikci" },
];

const mockResults = [
  { name: "Merkez Eczanesi", dist: "240m", open: true, type: "eczane" },
  { name: "Nöbetçi — Güneş Eczanesi", dist: "480m", open: true, type: "nobetci" },
  { name: "Memorial Hastanesi", dist: "1.2km", open: true, type: "hastane" },
];

export default function Hero() {
  const [query, setQuery] = useState("");
  const router = useRouter();
  const { shortLabel, address } = useLocation();
  const displayCity = address?.city ?? "İstanbul";

  const handleSearch = () => {
    const q = query.trim().toLowerCase();
    if (q.includes("nöbet") || q.includes("nobet")) router.push("/nobetci-eczane");
    else if (q.includes("hastane")) router.push("/hastane");
    else if (q.includes("eczane")) router.push("/eczane");
    else if (q.includes("restoran") || q.includes("yemek")) router.push("/restoran");
    else if (q.includes("market")) router.push("/market");
    else if (q.includes("otel")) router.push("/otel");
    else if (q.includes("elektrik")) router.push("/elektrikci");
    else if (q.includes("tesisat")) router.push("/tesisatci");
    else if (q.includes("çilingir") || q.includes("cilingir")) router.push("/cilingir");
    else if (q.includes("atm")) router.push("/atm");
    else router.push("/kategoriler");
  };

  return (
    <section className="relative overflow-hidden pt-24 pb-6 sm:pt-28 sm:pb-10 lg:min-h-[88vh] lg:pb-12">
      <div className="hero-glow pointer-events-none absolute inset-0" />
      <div className="grid-pattern pointer-events-none absolute inset-0 opacity-50" />

      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-12">
          {/* Left — Copy & Search */}
          <div>
            <div className="animate-fade-up mb-6 inline-flex items-center gap-2 rounded-full border border-emerald-500/20 bg-emerald-500/10 px-4 py-1.5 text-sm font-medium text-emerald-300">
              <span className="relative flex h-2 w-2">
                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
                <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-400" />
              </span>
              Türkiye&apos;nin #1 Yakınımda Platformu
            </div>

            <h1 className="animate-fade-up stagger-1 animate-fade-up text-4xl font-extrabold leading-[1.1] tracking-tight text-white sm:text-5xl lg:text-6xl">
              Aradığın her şey{" "}
              <span className="text-gradient">yakınında</span>
            </h1>

            <p className="animate-fade-up stagger-2 animate-fade-up mt-5 max-w-lg text-lg leading-relaxed text-slate-400 sm:text-xl">
              Google&apos;da aranan, Maps&apos;te bulunamayan — nöbetçi eczane, acil usta,
              7/24 hizmetler. Resmi veri + konum + yol tarifi tek ekranda.
            </p>

            {/* Search Box */}
            <div className="animate-fade-up stagger-3 animate-fade-up mt-8">
              <div className="search-glow rounded-2xl glass-strong p-2 transition-all duration-300">
                <div className="flex flex-col gap-2 sm:flex-row">
                  <div className="relative flex flex-1 items-center">
                    <Search className="absolute left-4 h-5 w-5 text-slate-500" />
                    <input
                      type="text"
                      value={query}
                      onChange={(e) => setQuery(e.target.value)}
                      onKeyDown={(e) => e.key === "Enter" && handleSearch()}
                      placeholder="Eczane, hastane, nöbetçi eczane..."
                      className="w-full rounded-xl bg-white/5 py-4 pl-12 pr-4 text-base text-white placeholder:text-slate-500 outline-none transition-colors focus:bg-white/8"
                    />
                  </div>
                  <LocationButton variant="hero" />
                  <button
                    type="button"
                    onClick={handleSearch}
                    className="flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-emerald-500 to-emerald-600 px-8 py-4 text-sm font-bold text-white shadow-lg shadow-emerald-500/25 transition-all hover:from-emerald-400 hover:to-emerald-500 hover:shadow-emerald-500/40 active:scale-[0.98]"
                  >
                    <Search className="h-4 w-4" />
                    Ara
                  </button>
                </div>
              </div>

              <LocationStatus />

              {/* Quick chips */}
              <div className="mt-4 flex flex-wrap gap-2">
                {quickSearches.map((item) => {
                  const Icon = item.icon;
                  return (
                    <Link
                      key={item.label}
                      href={item.href}
                      className={`chip flex items-center gap-1.5 rounded-full border px-3.5 py-2 text-sm font-medium ${
                        item.hot
                          ? "border-amber-500/30 bg-amber-500/10 text-amber-300"
                          : "border-white/10 bg-white/5 text-slate-300"
                      }`}
                    >
                      <Icon className="h-3.5 w-3.5" />
                      {item.label}
                      {item.hot && (
                        <span className="ml-0.5 rounded-full bg-amber-500 px-1.5 py-0.5 text-[10px] font-bold uppercase text-black">
                          7/24
                        </span>
                      )}
                    </Link>
                  );
                })}
              </div>
            </div>

            {/* Trust badges */}
            <div className="animate-fade-up stagger-4 animate-fade-up mt-8 flex flex-wrap items-center gap-5 text-sm text-slate-500">
              <div className="flex items-center gap-2">
                <div className="flex -space-x-2">
                  {[...Array(4)].map((_, i) => (
                    <div
                      key={i}
                      className="h-8 w-8 rounded-full border-2 border-[#030712] bg-gradient-to-br from-slate-600 to-slate-700"
                    />
                  ))}
                </div>
                <span>
                  <strong className="text-white">2M+</strong> aylık arama
                </span>
              </div>
              <div className="h-4 w-px bg-white/10" />
              <span>
                <strong className="text-emerald-400">81</strong> il kapsamı
              </span>
              <div className="h-4 w-px bg-white/10 hidden sm:block" />
              <span className="hidden sm:inline">
                <strong className="text-white">Anlık</strong> güncelleme
              </span>
            </div>
          </div>

          {/* Right — Visual mockup */}
          <div className="animate-fade-up stagger-5 animate-fade-up relative hidden lg:block">
            <div className="relative mx-auto w-full max-w-md">
              {/* Glow behind card */}
              <div className="absolute -inset-4 rounded-3xl bg-gradient-to-br from-emerald-500/20 via-transparent to-amber-500/10 blur-2xl" />

              {/* Phone mockup */}
              <div className="relative rounded-[2rem] border border-white/10 bg-[#0a0f1a] p-3 shadow-2xl shadow-black/50">
                <div className="rounded-[1.5rem] bg-[#0d1117] p-4">
                  {/* Status bar */}
                  <div className="mb-4 flex items-center justify-between text-xs text-slate-500">
                    <span>09:41</span>
                    <div className="flex items-center gap-1">
                      <MapPin className="h-3 w-3 text-emerald-400" />
                      <span className="text-emerald-400">{shortLabel ?? displayCity}</span>
                    </div>
                  </div>

                  {/* Mini map area */}
                  <div className="relative mb-4 h-36 overflow-hidden rounded-xl bg-[#111827]">
                    <div className="absolute inset-0 grid-pattern opacity-30" />
                    {/* Map pins */}
                    <div className="absolute left-[30%] top-[25%] animate-float">
                      <div className="relative">
                        <span className="absolute -inset-2 rounded-full bg-emerald-400/30 animate-ping-slow" style={{ animation: "ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite" }} />
                        <div className="relative flex h-8 w-8 items-center justify-center rounded-full bg-emerald-500 shadow-lg shadow-emerald-500/40">
                          <Pill className="h-4 w-4 text-white" />
                        </div>
                      </div>
                    </div>
                    <div className="absolute right-[25%] top-[45%] animate-float-delayed">
                      <div className="flex h-7 w-7 items-center justify-center rounded-full bg-amber-500 shadow-lg shadow-amber-500/40">
                        <Clock className="h-3.5 w-3.5 text-white" />
                      </div>
                    </div>
                    <div className="absolute left-[55%] bottom-[20%]">
                      <div className="flex h-7 w-7 items-center justify-center rounded-full bg-red-500/80 shadow-lg">
                        <Cross className="h-3.5 w-3.5 text-white" />
                      </div>
                    </div>
                    {/* User location */}
                    <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
                      <div className="h-4 w-4 rounded-full border-2 border-white bg-blue-500 shadow-lg" />
                    </div>
                  </div>

                  {/* Results list */}
                  <div className="space-y-2">
                    {mockResults.map((r) => (
                      <div
                        key={r.name}
                        className={`flex items-center justify-between rounded-xl border p-3 ${
                          r.type === "nobetci"
                            ? "border-amber-500/20 bg-amber-500/5"
                            : "border-white/5 bg-white/3"
                        }`}
                      >
                        <div className="min-w-0 flex-1">
                          <p className="truncate text-sm font-semibold text-white">{r.name}</p>
                          <p className="text-xs text-slate-500">
                            {r.type === "nobetci" ? "Nöbetçi · Açık" : r.type === "hastane" ? "Hastane" : "Eczane"}
                          </p>
                        </div>
                        <div className="ml-3 shrink-0 text-right">
                          <p className="text-sm font-bold text-emerald-400">{r.dist}</p>
                          <p className="text-xs text-slate-600">yürüme</p>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              {/* Floating badge */}
              <div className="absolute -right-6 -bottom-4 animate-float rounded-2xl border border-emerald-500/30 bg-emerald-500/10 px-4 py-3 backdrop-blur-xl">
                <p className="text-xs font-medium text-emerald-300">En yakın sonuç</p>
                <p className="text-lg font-bold text-white">240 metre</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}