import { useMemo, useState } from "react";
import { Navbar3 } from "../components/Navbar";
import { Header23 } from "../components/Header23";
import { Filters5 } from "../components/Filters5";
import { Event33 } from "../components/Event33";
import { Banner15 } from "../components/Banner15";
import { Footer3 } from "../components/Footer";
import { ALL_EVENTS } from "../data/events";

const TYPE_TABS = ["Talk", "Workshop", "Interaction", "AI and Future"];
const LEVEL_TABS: Record<string, string> = {
  "Senior": "Senior",
  "Mid-Level": "Mid-Level",
  "Junior": "Junior",
};

const Programm = () => {
  const [activeTab, setActiveTab] = useState("all");
  const [searchQuery, setSearchQuery] = useState("");
  const [activeDay, setActiveDay] = useState("all");

  const filteredEvents = useMemo(() => {
    return ALL_EVENTS.filter((e) => {
      if (activeTab !== "all") {
        const matchesType = TYPE_TABS.includes(activeTab) && e.type === activeTab;
        const matchesLevel = LEVEL_TABS[activeTab] && e.level === LEVEL_TABS[activeTab];
        if (!matchesType && !matchesLevel) return false;
      }
      if (searchQuery) {
        const q = searchQuery.toLowerCase();
        if (!e.title.toLowerCase().includes(q) && !e.speaker.toLowerCase().includes(q)) return false;
      }
      if (activeDay !== "all" && e.day !== activeDay) return false;
      return true;
    });
  }, [activeTab, searchQuery, activeDay]);

  const activeTags = [
    searchQuery ? { label: searchQuery, onRemove: () => setSearchQuery("") } : null,
    activeDay !== "all" ? { label: activeDay, onRemove: () => setActiveDay("all") } : null,
    activeTab !== "all" ? { label: activeTab, onRemove: () => setActiveTab("all") } : null,
  ].filter(Boolean) as { label: string; onRemove: () => void }[];

  const handleReset = () => {
    setActiveTab("all");
    setSearchQuery("");
    setActiveDay("all");
  };

  return (
    <div>
      <Navbar3 />
      <Header23 />
      <Filters5
        activeTab={activeTab}
        onTabChange={setActiveTab}
        searchQuery={searchQuery}
        onSearchChange={setSearchQuery}
        activeDay={activeDay}
        onDayChange={setActiveDay}
        activeTags={activeTags}
        onReset={handleReset}
      />
      <Event33 events={filteredEvents} />
      <Banner15 />
      <Footer3 />
    </div>
  );
};

export default Programm;