DashboardClient.tsx

// src/app/(auth)/DashboardClient.tsx
"use client"

import { H1, H2 } from "@typography"
import dynamic from "next/dynamic"
import { useMemo, useState, useTransition } from "react"
import { DashboardSkeleton } from "@/app/(auth)/DashboardSkeleton"
import { CHART_THEME } from "@/components/charts/lib/theme"
import { AlertsBanner } from "@/components/dashboard/AlertsBanner"
import { AnalyticsSection } from "@/components/dashboard/AnalyticsSection"
import { DayRangeSidebar } from "@/components/dashboard/DayRangeSidebar"
import { EcosystemStatsSection } from "@/components/dashboard/EcosystemStatsSection"
import { FleetDashboard } from "@/components/dashboard/FleetDashboard"
import { LoginTimers } from "@/components/dashboard/LoginTimers"
import { PollAllButton } from "@/components/dashboard/PollAllButton"
import { TodayAtAGlance } from "@/components/dashboard/TodayAtAGlance"
import { TodayAtAGlanceSkeleton } from "@/components/dashboard/TodayAtAGlanceSkeleton"
import { TrackerLeaderboard } from "@/components/dashboard/TrackerLeaderboard"
import { TrackerOverviewGrid } from "@/components/dashboard/TrackerOverviewGrid"
import { useDashboardSettings } from "@/components/dashboard/useDashboardSettings"
import { Button, Divider, GearIcon, TabBar } from "@/components/ui"
import { useDashboardData } from "@/hooks/useDashboardData"
import { computeAggregateStats } from "@/lib/dashboard"
import type { Snapshot, TrackerSummary } from "@/types/api"
import type { TrackerSnapshotSeries } from "@/types/charts"

const DashboardSettingsSheet = dynamic(
  () =>
    import("@/components/dashboard/DashboardSettingsSheet").then((m) => m.DashboardSettingsSheet),
  { ssr: false }
)

const DASHBOARD_TABS = [
  { key: "tracker-stats" as const, label: "Tracker Stats" },
  { key: "torrent-fleet" as const, label: "Torrent Fleet" },
]

function buildTrackerSeries(
  trackers: TrackerSummary[],
  snapshotMap: Map<number, Snapshot[]>
): TrackerSnapshotSeries[] {
  return trackers.map((t) => ({
    name: t.name,
    color: t.color,
    snapshots: snapshotMap.get(t.id) ?? [],
  }))
}

interface DashboardClientProps {
  initialTrackers: TrackerSummary[]
  snapshotRetentionDays: number | null
}

export function DashboardClient({ initialTrackers, snapshotRetentionDays }: DashboardClientProps) {
  const data = useDashboardData({ initialTrackers, snapshotRetentionDays })
  const dashSettings = useDashboardSettings()
  const [settingsOpen, setSettingsOpen] = useState(false)
  // Two-state tab pattern: dashboardTab updates immediately (drives TabBar pill animation),
  // deferredTab updates via startTransition (drives content switch + query gating).
  // This prevents the 350ms React reconciliation from blocking the pill's CSS transition.
  const [dashboardTab, setDashboardTab] = useState<"tracker-stats" | "torrent-fleet">(
    "tracker-stats"
  )
  const [deferredTab, setDeferredTab] = useState<"tracker-stats" | "torrent-fleet">("tracker-stats")
  const [, startTransition] = useTransition()

  const aggregateStats = useMemo(() => computeAggregateStats(data.trackers), [data.trackers])
  const trackerSeries = useMemo(
    () => buildTrackerSeries(data.trackers, data.snapshotMap),
    [data.trackers, data.snapshotMap]
  )

  if (data.loading) {
    return <DashboardSkeleton />
  }

  if (data.trackers.length === 0) {
    return (
      <div className="full-page-loader">
        <p className="text-secondary text-sm font-mono">No trackers added yet</p>
      </div>
    )
  }

  return (
    <div className="flex flex-col gap-10 max-w-6xl mx-auto pb-12">
      {/* Page Header */}
      <div className="flex items-center justify-between">
        <H1>Dashboard</H1>
        <div className="flex items-center gap-2">
          <PollAllButton onPollComplete={data.refresh} />
          <Button
            variant="secondary"
            size="sm"
            onClick={() => setSettingsOpen(true)}
            aria-label="Dashboard settings"
            className="group"
          >
            <GearIcon
              width="16"
              height="16"
              className="transition-transform duration-300 group-active:rotate-90"
            />
          </Button>
        </div>
      </div>

      {/* Today At A Glance */}
      {dashSettings.settings.showTodayAtAGlance && (
        <div className="flex flex-col gap-4">
          <H2>Today At A Glance</H2>
          {data.todayData ? (
            <TodayAtAGlance data={data.todayData} />
          ) : data.todayLoading ? (
            <TodayAtAGlanceSkeleton />
          ) : null}
        </div>
      )}

      {/* Tracker Overview */}
      <div className="flex flex-col gap-4">
        <H2>Trackers</H2>
        <TrackerOverviewGrid
          trackers={data.trackers}
          showHealthIndicators={dashSettings.settings.showHealthIndicators}
        />
      </div>

      {/* Alerts */}
      {data.alerts.length > 0 && (
        <AlertsBanner
          alerts={data.alerts}
          onDismiss={data.dismissAlert}
          onDismissAll={data.dismissAllAlerts}
        />
      )}

      {/* Login Timers */}
      {dashSettings.settings.showLoginTimers && <LoginTimers trackers={data.trackers} />}

      {/* Leaderboard */}
      <div className="flex flex-col gap-4">
        <H2>Leaderboard</H2>
        <TrackerLeaderboard trackers={data.trackers} />
      </div>

      {/* Divider */}
      <Divider />

      {/* Aggregate Stats */}
      <EcosystemStatsSection trackers={data.trackers} aggregateStats={aggregateStats} />

      {/* Divider */}
      <Divider />

      {/* Tab Switcher */}
      <TabBar
        tabs={DASHBOARD_TABS}
        activeTab={dashboardTab}
        onChange={(tab) => {
          setDashboardTab(tab)
          startTransition(() => setDeferredTab(tab))
        }}
      />

      {/*  Analytics / Fleet  */}
      <div className="flex flex-col md:flex-row gap-4 md:gap-8">
        <div className="flex-1 min-w-0">
          <div className={deferredTab !== "torrent-fleet" ? "hidden" : undefined}>
            <FleetDashboard dayRange={data.dayRange} isActive={deferredTab === "torrent-fleet"} />
          </div>
          <div className={deferredTab !== "tracker-stats" ? "hidden" : undefined}>
            <AnalyticsSection trackerSeries={trackerSeries} trackers={data.trackers} />
          </div>
        </div>

        {/* Sticky sidebar*/}
        <DayRangeSidebar
          days={data.dayRange}
          onChange={data.setDayRange}
          accentColor={CHART_THEME.accent}
        />
      </div>

      {/* Settings Sheet */}
      <DashboardSettingsSheet
        open={settingsOpen}
        onClose={() => setSettingsOpen(false)}
        dashSettings={dashSettings}
      />
    </div>
  )
}