"use client";

import { useEffect, useState } from "react";
import dynamic from "next/dynamic";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ServerControls } from "@/components/ServerControls";
import { Analytics } from "@/components/Analytics";
import { Skeleton } from "@/components/ui/skeleton";

const TabFallback = () => (
  <div className="space-y-3">
    <Skeleton className="h-24 w-full" />
    <Skeleton className="h-48 w-full" />
  </div>
);

const PlayerManager = dynamic(
  () => import("@/components/PlayerManager").then((m) => ({ default: m.PlayerManager })),
  { loading: TabFallback, ssr: false }
);
const ChatBridge = dynamic(
  () => import("@/components/ChatBridge").then((m) => ({ default: m.ChatBridge })),
  { loading: TabFallback, ssr: false }
);
const ModManager = dynamic(
  () => import("@/components/ModManager").then((m) => ({ default: m.ModManager })),
  { loading: TabFallback, ssr: false }
);
const BackupManager = dynamic(
  () => import("@/components/BackupManager").then((m) => ({ default: m.BackupManager })),
  { loading: TabFallback, ssr: false }
);
const LogViewer = dynamic(
  () => import("@/components/LogViewer").then((m) => ({ default: m.LogViewer })),
  { loading: TabFallback, ssr: false }
);

const TABS = [
  { value: "server", label: "Server" },
  { value: "players", label: "Players" },
  { value: "chat", label: "Chat" },
  { value: "mods", label: "Mods" },
  { value: "backups", label: "Backups" },
  { value: "logs", label: "Logs" },
];

export function AdminTabs() {
  const [mounted, setMounted] = useState(false);
  const [value, setValue] = useState<string>("server");

  useEffect(() => {
    setMounted(true);
    const hash = window.location.hash.replace("#", "");
    if (hash && TABS.some((t) => t.value === hash)) {
      setValue(hash);
      return;
    }
    const saved = localStorage.getItem("admin-tab");
    if (saved && TABS.some((t) => t.value === saved)) setValue(saved);
  }, []);

  useEffect(() => {
    const onHash = () => {
      const h = window.location.hash.replace("#", "");
      if (h && TABS.some((t) => t.value === h)) setValue(h);
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  useEffect(() => {
    if (!mounted) return;
    localStorage.setItem("admin-tab", value);
    history.replaceState(null, "", `#${value}`);
  }, [value, mounted]);

  if (!mounted) return null;

  return (
    <Tabs
      value={value}
      onValueChange={(v) => setValue(v as string)}
      className="w-full"
    >
      <TabsList
        aria-label="Admin sections"
        className="flex w-full flex-wrap h-auto sm:h-9 gap-1 p-1 overflow-x-auto justify-start sm:justify-center"
      >
        {TABS.map((t) => (
          <TabsTrigger key={t.value} value={t.value} className="text-xs sm:text-sm">
            {t.label}
          </TabsTrigger>
        ))}
      </TabsList>

      <TabsContent value="server" className="mt-4 space-y-4 sm:space-y-6">
        <ServerControls />
        <Analytics />
      </TabsContent>
      <TabsContent value="players" className="mt-4">
        <PlayerManager />
      </TabsContent>
      <TabsContent value="chat" className="mt-4" keepMounted={false}>
        <ChatBridge />
      </TabsContent>
      <TabsContent value="mods" className="mt-4">
        <ModManager />
      </TabsContent>
      <TabsContent value="backups" className="mt-4">
        <BackupManager />
      </TabsContent>
      <TabsContent value="logs" className="mt-4" keepMounted={false}>
        <LogViewer />
      </TabsContent>
    </Tabs>
  );
}