"use client";

import { useState } from "react";
import Link from "next/link";
import { Search, CalendarDays, Ticket, User, LogIn, ShieldCheck } from "lucide-react";
import EventCard, { type EventItem } from "@/components/EventCard";
import { useAuthStore } from "@/store/authStore";

const MOCK_EVENTS: EventItem[] = [
  {
    id: 1,
    title: "Чемпионат по ММА",
    date: "15 Апреля",
    time: "19:00",
    venue: "ВТБ Арена",
    city: "Москва",
    priceFrom: 2500,
    imageSrc:
      "https://images.unsplash.com/photo-1549719386-74dfcbf7dbed?w=400&q=80",
  },
  {
    id: 2,
    title: 'Турнир по Боксу: "Удар года"',
    date: "",
    time: "",
    venue: "ВТБ Арена",
    city: "Москва",
    priceFrom: 2500,
    imageSrc:
      "https://images.unsplash.com/photo-1517649763962-0c623066013b?w=400&q=80",
  },
  {
    id: 3,
    title: "Турнир по Бои",
    date: "15 Апреля",
    time: "19:00",
    venue: "ВТБ Арена",
    city: "Москва",
    priceFrom: 3000,
    imageSrc:
      "https://images.unsplash.com/photo-1484810934922-571fd7d1b41d?w=400&q=80",
  },
];

const FILTERS = ["Все", "Ближайшие", "Популярные", "Скоро"] as const;
type Filter = (typeof FILTERS)[number];

export default function HomePage() {
  const token = useAuthStore((s) => s.token);
  const [activeFilter, setActiveFilter] = useState<Filter>("Все");

  return (
    <div className="flex justify-center min-h-screen bg-[#121212]">
      <div className="relative w-full max-w-[390px] flex flex-col min-h-screen bg-[#121212]">

        {/* ── Header ── */}
        <div className="flex items-center justify-between px-5 pt-12 pb-4">
          <h1 className="text-[32px] font-bold leading-tight tracking-tight text-white">
            События
          </h1>
          <div className="flex items-center gap-2">
            {!token && (
              <Link
                href="/login"
                className="flex items-center gap-1.5 bg-[#E32636] hover:bg-[#C41E2A] text-white text-[12px] font-semibold px-3 py-1.5 rounded-full transition-colors"
              >
                <LogIn size={13} strokeWidth={2.5} />
                Войти
              </Link>
            )}
            <button
              aria-label="Поиск"
              className="p-2 rounded-full text-white hover:bg-[#2C2C2E] transition-colors"
            >
              <Search size={24} strokeWidth={2} />
            </button>
          </div>
        </div>

        {/* ── Filter tabs ── */}
        <div className="flex gap-2 px-5 pb-4 overflow-x-auto scrollbar-hide">
          {FILTERS.map((f) => (
            <button
              key={f}
              onClick={() => setActiveFilter(f)}
              className={`flex-shrink-0 px-4 py-2 rounded-full text-sm font-medium transition-colors ${
                activeFilter === f
                  ? "bg-white text-[#121212]"
                  : "bg-[#2C2C2E] text-[#8E8E93] hover:bg-[#3A3A3C]"
              }`}
            >
              {f}
            </button>
          ))}
        </div>

        {/* ── Event list ── */}
        <div className="flex flex-col gap-3 px-4 flex-1 pb-24">
          {MOCK_EVENTS.map((event) => (
            <Link key={event.id} href={`/events/${event.id}/seats`}>
              <EventCard event={event} />
            </Link>
          ))}
        </div>

        {/* ── Bottom navigation ── */}
        <nav className="fixed bottom-0 left-1/2 -translate-x-1/2 w-full max-w-[390px] bg-[#1C1C1E] border-t border-[#2C2C2E]">
          <div className="flex">
            <Link
              href="/"
              className="flex-1 flex flex-col items-center gap-1 py-3 text-[10px] font-medium text-white"
            >
              <CalendarDays size={22} strokeWidth={2.5} />
              События
            </Link>

            <Link
              href={token ? "/tickets" : "/login"}
              className="flex-1 flex flex-col items-center gap-1 py-3 text-[10px] font-medium text-[#8E8E93]"
            >
              <Ticket size={22} strokeWidth={1.8} />
              Мои билеты
            </Link>

            <Link
              href={token ? "/profile" : "/login"}
              className="flex-1 flex flex-col items-center gap-1 py-3 text-[10px] font-medium text-[#8E8E93]"
            >
              <User size={22} strokeWidth={1.8} />
              Профиль
            </Link>

            <Link
              href="/admin"
              className="flex-1 flex flex-col items-center gap-1 py-3 text-[10px] font-medium text-[#8E8E93]"
            >
              <ShieldCheck size={22} strokeWidth={1.8} />
              Админка
            </Link>
          </div>
        </nav>

      </div>
    </div>
  );
}
