"use client";

import { useState, useEffect, useCallback, useMemo } from "react";
import { Sidebar, type TabId, VALID_TABS } from "@/components/Sidebar";
import { Header } from "@/components/Header";
import { useCogentData } from "@/hooks/useCogentData";
import { OverviewPanel } from "@/components/overview/OverviewPanel";
import { ProcessesPanel } from "@/components/processes/ProcessesPanel";
import { FilesPanel } from "@/components/files/FilesPanel";
import { CapabilitiesPanel } from "@/components/capabilities/CapabilitiesPanel";
import { HandlersPanel } from "@/components/handlers/HandlersPanel";
import { RunsPanel } from "@/components/runs/RunsPanel";
import { TracePanel } from "@/components/traces/TracePanel";
import { ResourcesPanel } from "@/components/resources/ResourcesPanel";
import { AlertsPanel } from "@/components/alerts/AlertsPanel";
import { CronPanel } from "@/components/cron/CronPanel";
import { SetupPanel } from "@/components/setup/SetupPanel";
import { DiagnosticsPanel } from "@/components/diagnostics/DiagnosticsPanel";
import { TraceViewerPanel } from "@/components/trace-viewer/TraceViewerPanel";

function getTabFromHash(): TabId {
  if (typeof window === "undefined") return "overview";
  const hash = window.location.hash.replace("#", "");
  if (hash === "events") return "trace";
  if (hash.startsWith("trace-viewer:") || hash === "trace-viewer") return "trace-viewer" as TabId;
  return VALID_TABS.has(hash as TabId) ? (hash as TabId) : "overview";
}

function getTraceIdFromHash(): string | undefined {
  if (typeof window === "undefined") return undefined;
  const hash = window.location.hash.replace("#", "");
  if (hash.startsWith("trace-viewer:")) {
    return hash.slice("trace-viewer:".length);
  }
  return undefined;
}

function useCogentName(): string | null {
  const [name, setName] = useState<string | null>(null);
  useEffect(() => {
    setName(window.location.hostname.split(".")[0].replace(/-/g, "."));
  }, []);
  return name;
}

export default function DashboardPage() {
  const [activeTab, setActiveTab] = useState<TabId>(getTabFromHash);
  const [initialTraceId, setInitialTraceId] = useState<string | undefined>(getTraceIdFromHash);

  const handleTabChange = useCallback((tab: TabId) => {
    setActiveTab(tab);
    setInitialTraceId(undefined);
    window.location.hash = tab === "overview" ? "" : tab;
  }, []);

  useEffect(() => {
    const onPopState = () => {
      setActiveTab(getTabFromHash());
      setInitialTraceId(getTraceIdFromHash());
    };
    window.addEventListener("popstate", onPopState);
    return () => window.removeEventListener("popstate", onPopState);
  }, []);

  const cogentName = useCogentName();

  if (!cogentName) {
    return <div className="h-screen overflow-hidden" />;
  }

  return <Dashboard cogentName={cogentName} activeTab={activeTab} onTabChange={handleTabChange} initialTraceId={initialTraceId} />;
}

function Dashboard({ cogentName, activeTab, onTabChange, initialTraceId }: { cogentName: string; activeTab: TabId; onTabChange: (tab: TabId) => void; initialTraceId?: string }) {
  const { data, loading, error, refresh, timeRange, setTimeRange, connected, showHistory, setShowHistory } = useCogentData(cogentName);

  const STUCK_THRESHOLD_MS = 10 * 60 * 1000;
  const stuckProcessCount = useMemo(() => {
    return data.processes.filter(
      (p) => p.status === "running" && p.updated_at &&
        Date.now() - new Date(p.updated_at).getTime() > STUCK_THRESHOLD_MS,
    ).length;
  }, [data.processes]);

  const cs = data.cogosStatus;
  const currentEpoch = cs?.reboot_epoch ?? 0;
  const statusText = loading && !data.status && !cs
    ? "connecting..."
    : error
      ? error
      : cs
        ? `${cs.processes.total} processes · ${cs.files} files · ${cs.capabilities} capabilities`
        : data.status
          ? `${data.status.active_sessions} active · ${data.status.trigger_count} triggers · ${data.status.unresolved_alerts} alerts`
          : "no data";

  return (
    <div className="h-screen overflow-hidden">
      <Sidebar
        activeTab={activeTab}
        onTabChange={onTabChange}
        alertCount={data.status?.unresolved_alerts}
        stuckProcessCount={stuckProcessCount}
      />
      <Header
        cogentName={cogentName}
        statusText={statusText}
        timeRange={timeRange}
        onTimeRangeChange={setTimeRange}
        onRefresh={refresh}
        loading={loading}
        error={error}
        wsConnected={connected}
        schedulerLastTick={cs?.scheduler_last_tick ?? null}
        ages={cs?.ages ?? null}
        showHistory={showHistory}
        onShowHistoryChange={setShowHistory}
      />
      <main
        className="fixed overflow-y-auto p-5 pb-16"
        style={{
          top: "var(--header-h)",
          left: "var(--sidebar-w)",
          right: 0,
          bottom: 0,
        }}
      >
        {activeTab === "overview" && <OverviewPanel data={data} />}
        {activeTab === "processes" && (
          <ProcessesPanel
            processes={data.processes}
            cogentName={cogentName}
            onRefresh={refresh}
            resources={data.resources}
            runs={data.runs}
            files={data.files}
            capabilities={data.capabilities}
            eventTypes={data.eventTypes}
            currentEpoch={currentEpoch}
          />
        )}
        {activeTab === "files" && (
          <FilesPanel files={data.files} cogentName={cogentName} onRefresh={refresh} />
        )}
        {activeTab === "capabilities" && (
          <CapabilitiesPanel capabilities={data.capabilities} cogentName={cogentName} onRefresh={refresh} />
        )}
        {activeTab === "handlers" && (
          <HandlersPanel handlers={data.handlers} />
        )}
        {activeTab === "runs" && (
          <RunsPanel runs={data.runs} cogentName={cogentName} currentEpoch={currentEpoch} />
        )}
        {activeTab === "trace" && (
          <TracePanel traces={data.traces} cogentName={cogentName} timeRange={timeRange} onRefresh={refresh} />
        )}
        {activeTab === "trace-viewer" && (
          <TraceViewerPanel cogentName={cogentName} initialTraceId={initialTraceId} />
        )}
        {activeTab === "cron" && (
          <CronPanel crons={data.crons} cogentName={cogentName} onRefresh={refresh} />
        )}
        {activeTab === "resources" && (
          <ResourcesPanel resources={data.resources} />
        )}
        {activeTab === "alerts" && (
          <AlertsPanel alerts={data.alerts} cogentName={cogentName} onRefresh={refresh} />
        )}
        {activeTab === "diagnostics" && (
          <DiagnosticsPanel cogentName={cogentName} />
        )}
        {activeTab === "setup" && (
          <SetupPanel cogentName={cogentName} />
        )}
      </main>
    </div>
  );
}
