"use client";

import {
  faImage,
  faInfoCircle,
  faGear,
  faStore,
  faLightbulb,
} from "@fortawesome/free-solid-svg-icons";
import { Suspense, useMemo } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import AdminPageHeader from "@/components/admin/AdminPageHeader";
import AdminTabNavigation from "@/components/admin/AdminTabNavigation";
import AdminLoadingState from "@/components/admin/AdminLoadingState";
import HeroTab from "./tabs/HeroTab";
import AboutTab from "./tabs/AboutTab";
import ServicesTab from "./tabs/ServicesTab";
import BoldTab from "./tabs/BoldTab";
import WattsTab from "./tabs/WattsTab";

type TabId = "hero" | "about" | "services" | "bold" | "watts";

const TABS = [
  { id: "hero", label: "Hero", icon: faImage },
  { id: "about", label: "About", icon: faInfoCircle },
  { id: "services", label: "Services", icon: faGear },
  { id: "bold", label: "Bold Products", icon: faStore },
  { id: "watts", label: "Watts", icon: faLightbulb },
] as const;

function HomeHubContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const rawTab = searchParams.get("tab");
  const activeTab: TabId = useMemo(() => {
    if (TABS.some((t) => t.id === rawTab)) return rawTab as TabId;
    return "hero";
  }, [rawTab]);

  const handleTabChange = (id: string) => {
    const params = new URLSearchParams(searchParams.toString());
    params.set("tab", id);
    router.replace(`/admin/home?${params.toString()}`, { scroll: false });
  };

  return (
    <>
      <AdminPageHeader
        title="Homepage"
        description="Manage the hero, about, services, bold products, and watts sections of your homepage"
      />
      <AdminTabNavigation
        tabs={TABS as unknown as { id: string; label: string; icon: any }[]}
        activeTab={activeTab}
        onTabChange={handleTabChange}
        className="mb-6"
      />
      <div>
        {activeTab === "hero" && <HeroTab />}
        {activeTab === "about" && <AboutTab />}
        {activeTab === "services" && <ServicesTab />}
        {activeTab === "bold" && <BoldTab />}
        {activeTab === "watts" && <WattsTab />}
      </div>
    </>
  );
}

export default function AdminHomeHub() {
  return (
    <Suspense fallback={<AdminLoadingState message="Loading homepage..." />}>
      <HomeHubContent />
    </Suspense>
  );
}
