"use client";

import { useState, useEffect } from "react";
import { useAuthContext } from "@/context/auth-context";
import { useActivityLog, useServerLogs } from "@/hooks/use-admin";
import { ServerLogsPanel } from "./components/server-logs-panel";
import { ActivityLogPanel } from "./components/activity-log-panel";
import { ProviderSettingsPanel } from "./components/provider-settings-panel";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";

export default function AdminPage() {
  const { token } = useAuthContext();

  const { lines, connected } = useServerLogs(token);
  const [localLines, setLocalLines] = useState(lines);

  // Sync external lines into local state so Clear can reset without clearing the hook
  useEffect(() => {
    setLocalLines(lines);
  }, [lines]);

  const { data: events = [], isLoading } = useActivityLog(token);

  return (
    <div className="flex flex-1 flex-col overflow-hidden">
      {/* Page header */}
      <div className="flex items-center gap-3 border-b border-zinc-800 px-6 py-4">
        <h1 className="text-base font-semibold text-zinc-100">Admin</h1>
        <span className="text-xs text-zinc-500">System monitoring &amp; logs</span>
      </div>

      <Tabs defaultValue="logs" className="flex flex-1 flex-col overflow-hidden">
        <div className="border-b border-zinc-800 px-6">
          <TabsList className="h-9 bg-transparent p-0 gap-1">
            <TabsTrigger
              value="logs"
              className="rounded-none border-b-2 border-transparent px-3 py-1.5 text-xs data-[state=active]:border-zinc-100 data-[state=active]:bg-transparent data-[state=active]:text-zinc-100"
            >
              Logs
            </TabsTrigger>
            <TabsTrigger
              value="providers"
              className="rounded-none border-b-2 border-transparent px-3 py-1.5 text-xs data-[state=active]:border-zinc-100 data-[state=active]:bg-transparent data-[state=active]:text-zinc-100"
            >
              Providers
            </TabsTrigger>
          </TabsList>
        </div>

        <TabsContent value="logs" className="flex min-h-0 flex-1 overflow-hidden mt-0">
          {/* Two-column layout */}
          <div className="flex min-h-0 flex-1 overflow-hidden">
            {/* Left: server logs */}
            <div className="flex min-w-0 flex-1 flex-col overflow-hidden border-r border-zinc-800">
              <ServerLogsPanel
                lines={localLines}
                connected={connected}
                onClear={() => setLocalLines([])}
              />
            </div>

            {/* Right: activity log */}
            <div className="flex w-80 shrink-0 flex-col overflow-hidden">
              <ActivityLogPanel events={events} isLoading={isLoading} />
            </div>
          </div>
        </TabsContent>

        <TabsContent value="providers" className="flex-1 overflow-auto mt-0">
          <ProviderSettingsPanel />
        </TabsContent>
      </Tabs>
    </div>
  );
}