"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useAuth } from "@/lib/auth";
import { AnalyticsTab } from "@/components/admin/AnalyticsTab";
import { AuditLogsTab } from "@/components/admin/AuditLogsTab";
import { MembersTab } from "@/components/admin/MembersTab";
import { EmojisTab } from "@/components/admin/EmojisTab";
import { BarChart3, ScrollText, Users, Smile, ArrowLeft } from "lucide-react";

type Tab = "analytics" | "audit-logs" | "members" | "emojis";

export function AdminDashboard() {
  const { isAuthenticated, loading: authLoading } = useAuth();
  const router = useRouter();
  const [activeTab, setActiveTab] = useState<Tab>("analytics");

  useEffect(() => {
    if (!authLoading && !isAuthenticated) {
      router.replace("/login");
    }
  }, [authLoading, isAuthenticated, router]);

  if (authLoading) {
    return (
      <div className="flex h-screen items-center justify-center bg-slack-darkpurple">
        <div className="text-white text-lg animate-pulse">Loading Admin...</div>
      </div>
    );
  }

  const tabs: { key: Tab; label: string; icon: typeof BarChart3 }[] = [
    { key: "analytics", label: "Analytics", icon: BarChart3 },
    { key: "audit-logs", label: "Audit Logs", icon: ScrollText },
    { key: "members", label: "Members", icon: Users },
    { key: "emojis", label: "Emojis", icon: Smile },
  ];

  return (
    <div className="min-h-screen bg-[#f9f9f9]">
      {/* Header */}
      <header className="bg-slack-purple text-white px-6 py-3 flex items-center gap-4">
        <button
          onClick={() => router.push("/chat")}
          className="flex items-center gap-2 text-white/80 hover:text-white transition-colors"
        >
          <ArrowLeft size={20} />
          <span className="text-sm font-medium">Back to ChatApp</span>
        </button>
        <h1 className="text-lg font-bold">Admin Dashboard</h1>
      </header>

      {/* Tabs */}
      <div className="border-b border-gray-200 bg-white">
        <div className="max-w-5xl mx-auto flex gap-1 px-4">
          {tabs.map((tab) => {
            const Icon = tab.icon;
            const isActive = activeTab === tab.key;
            return (
              <button
                key={tab.key}
                onClick={() => setActiveTab(tab.key)}
                className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
                  isActive
                    ? "border-slack-purple text-slack-purple"
                    : "border-transparent text-gray-500 hover:text-gray-700"
                }`}
              >
                <Icon size={16} />
                {tab.label}
              </button>
            );
          })}
        </div>
      </div>

      {/* Content */}
      <div className="max-w-5xl mx-auto py-6 px-4">
        {activeTab === "analytics" && <AnalyticsTab />}
        {activeTab === "audit-logs" && <AuditLogsTab />}
        {activeTab === "members" && <MembersTab />}
        {activeTab === "emojis" && <EmojisTab />}
      </div>
    </div>
  );
}