"use client";

import { useState } from "react";
import { Search, CalendarDays, Ticket, User } from "lucide-react";
import EventCard, { type EventItem } from "@/components/EventCard";

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];

const NAV_ITEMS = [
  { label: "События", icon: CalendarDays },
  { label: "Мои билеты", icon: Ticket },
  { label: "Профиль", icon: User },
] as const;

export default function HomePage() {
  const [activeFilter, setActiveFilter] = useState<Filter>("Все");
  const [activeNav, setActiveNav] = useState(0);

  return (
    <div className="flex justify-center min-h-screen bg-[#121212]">
      {/* Phone-width wrapper */}
      <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>
          <button
            aria-label="Поиск"
            className="p-2 rounded-full text-white hover:bg-[#2C2C2E] transition-colors"
          >
            <Search size={24} strokeWidth={2} />
          </button>
        </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) => (
            <EventCard key={event.id} event={event} />
          ))}
        </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">
            {NAV_ITEMS.map(({ label, icon: Icon }, idx) => (
              <button
                key={label}
                onClick={() => setActiveNav(idx)}
                className={`flex-1 flex flex-col items-center gap-1 py-3 text-[10px] font-medium transition-colors ${
                  activeNav === idx ? "text-white" : "text-[#8E8E93]"
                }`}
              >
                <Icon
                  size={22}
                  strokeWidth={activeNav === idx ? 2.5 : 1.8}
                />
                {label}
              </button>
            ))}
          </div>
        </nav>
      </div>
    </div>
  );
}
