import { useState } from "react";
import { Link } from "react-router-dom";
import { useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
import {
  Cpu,
  MemoryStick,
  HardDrive,
  Container,
  Clock,
  ArrowUpCircle,
  RefreshCw,
  Server,
  Database,
} from "lucide-react";
import { toast } from "sonner";
import { Card } from "@/components/ui";
import { HostHeader } from "@/components/hosts/HostHeader";
import { StacksTable } from "@/components/stacks/StacksTable";
import { FunnelChart } from "@/components/dashboard/FunnelChart";
import { UptimeChart } from "@/components/dashboard/UptimeChart";
import { OpsGrid } from "@/components/dashboard/OpsGrid";
import { AiPromptBar } from "@/components/dashboard/AiPromptBar";
import { stacksApi } from "@/api/stacks";
import { systemApi } from "@/api/system";
import { imagesApi } from "@/api/images";
import { agentsApi } from "@/api/agents";
import { volumesApi } from "@/api/volumes";
import { dashboardApi } from "@/api/dashboard";
import { apiErrorMessage } from "@/api/client";
import { cn, formatBytes, relativeTime } from "@/lib/utils";
import { useAuthStore } from "@/store/auth";
import { useStackActions } from "@/hooks/useStackActions";
import type { Agent } from "@/types";

const sumSizes = (m: Record<string, number | null>) =>
  Object.values(m).reduce<number>((a, b) => a + (b ?? 0), 0);

type RangeDays = 7 | 30;

export function Dashboard() {
  const isAdmin = useAuthStore((s) => s.user?.role === "admin");
  const { busyId, start, stop, restart } = useStackActions();
  const [range, setRange] = useState<RangeDays>(30);

  const funnel = useQuery({
    queryKey: ["dashboard-funnel"],
    queryFn: () => dashboardApi.funnel(),
    refetchInterval: 30000,
  });
  const summary = useQuery({
    queryKey: ["dashboard-summary"],
    queryFn: dashboardApi.summary,
    refetchInterval: 60000,
  });

  const stacks = useQuery({ queryKey: ["stacks"], queryFn: stacksApi.list, refetchInterval: 5000 });
  const stats = useQuery({ queryKey: ["stack-stats"], queryFn: stacksApi.stats, refetchInterval: 5000 });
  const info = useQuery({ queryKey: ["system"], queryFn: systemApi.info, refetchInterval: 5000 });
  const audit = useQuery({ queryKey: ["audit"], queryFn: () => systemApi.audit(10), refetchInterval: 10000 });
  const updates = useQuery({ queryKey: ["image-updates"], queryFn: () => imagesApi.updates(), refetchInterval: 60000 });
  const agents = useQuery({ queryKey: ["agents"], queryFn: () => agentsApi.list(), refetchInterval: 15000 });
  // Volumes total is from `docker system df` (slow, cached ~60s server-side).
  const volSize = useQuery({
    queryKey: ["volumes-size", "local"],
    queryFn: () => volumesApi.sizes().then(sumSizes),
    refetchInterval: 60000,
  });

  const updateCount = Object.values(updates.data ?? {}).filter((u) => u.update_available).length;
  const hasAgents = (agents.data?.length ?? 0) > 0;

  return (
    <div className="space-y-8">
      {/* ---- Overview header ---- */}
      <div className="flex flex-wrap items-end justify-between gap-4">
        <h1 className="sp-display text-[40px] leading-none sm:text-[50px]">Overview</h1>
        <div className="flex items-center gap-1.5">
          {([30, 7] as RangeDays[]).map((d) => (
            <button
              key={d}
              onClick={() => setRange(d)}
              className={cn(
                "rounded-pill px-3.5 py-1.5 text-[13px] font-medium transition-colors",
                range === d
                  ? "bg-sp-pill text-sp-pill-text"
                  : "border border-sp-border bg-sp-surface text-sp-text-2 hover:text-sp-text-1"
              )}
            >
              Last {d} days
            </button>
          ))}
        </div>
      </div>

      {updateCount > 0 && (
        <Link
          to="/images"
          className="flex items-center gap-2 rounded-card border border-sp-amber/40 bg-sp-amber/10 px-4 py-3 text-sm text-sp-amber hover:bg-sp-amber/20"
        >
          <ArrowUpCircle className="h-5 w-5" />
          {updateCount} image update{updateCount > 1 ? "s" : ""} available — view on the Images page.
        </Link>
      )}

      {/* ---- Analytics row: funnel + container count ---- */}
      <div className="grid grid-cols-1 gap-4 lg:grid-cols-[1fr_300px]">
        <StackHealthCard funnel={funnel.data} loading={funnel.isLoading} />
        <ContainerCountCard
          localRunning={summary.data?.total_containers}
          loading={summary.isLoading}
          agents={agents.data ?? []}
          healthyRate={
            funnel.data && funnel.data.running > 0
              ? Math.round((funnel.data.healthy / funnel.data.running) * 100)
              : null
          }
        />
      </div>

      {/* ---- Bottom row: uptime + ops ---- */}
      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
        <UptimeCard
          series={summary.data?.uptime_series.slice(-range)}
          loading={summary.isLoading}
          range={range}
        />
        <OpsCard
          series={summary.data?.ops_last_30d.slice(-range)}
          peakDay={summary.data?.ops_peak_day ?? null}
          loading={summary.isLoading}
          range={range}
        />
      </div>

      {/* ---- Local host ---- */}
      <section>
        {hasAgents ? (
          <HostHeader />
        ) : (
          <h2 className="sp-label mb-3">This host</h2>
        )}
        <ResourceBar
          cpuCores={info.data?.cpu_cores ?? 0}
          memUsed={info.data?.ram.used ?? 0}
          memTotal={info.data?.ram.total ?? 0}
          diskUsed={info.data?.disk.used ?? 0}
          diskTotal={info.data?.disk.total ?? 0}
          volumesSize={volSize.data}
          containersRunning={info.data?.containers_running ?? 0}
          containersTotal={info.data?.containers_total ?? 0}
          dockerVersion={info.data?.docker_version ?? ""}
        />
        <StacksTable
          stacks={stacks.data}
          stats={stats.data}
          hostCpus={info.data?.cpu_cores ?? 0}
          hostMem={info.data?.ram.total ?? 0}
          isAdmin={isAdmin}
          busyId={busyId}
          loading={stacks.isLoading}
          onStart={start}
          onStop={stop}
          onRestart={restart}
          emptyText="No stacks yet. Create one from the Stacks page."
        />
      </section>

      {/* Remote hosts */}
      {agents.data?.map((agent) => (
        <AgentDashboardSection key={agent.id} agent={agent} isAdmin={isAdmin} />
      ))}

      {/* Recent activity */}
      <section>
        <h2 className="sp-label mb-3 flex items-center gap-2">
          <Clock className="h-4 w-4" /> Recent activity
        </h2>
        <Card>
          {audit.data && audit.data.length > 0 ? (
            <ul className="divide-y divide-slate-100 text-sm dark:divide-slate-700">
              {audit.data.map((a) => (
                <li key={a.id} className="flex items-center justify-between py-2">
                  <span>
                    <span className="font-medium">{a.user}</span>{" "}
                    <span className="text-slate-500">{a.action}</span>{" "}
                    <span className="font-mono text-xs text-accent dark:text-accent-dark">{a.target}</span>
                  </span>
                  <span className="text-xs text-slate-400">{relativeTime(a.timestamp)}</span>
                </li>
              ))}
            </ul>
          ) : (
            <p className="text-sm text-slate-500">No activity yet.</p>
          )}
        </Card>
      </section>
    </div>
  );
}

/* ---------------------------------------------------------------------- */
/* Analytics cards                                                          */
/* ---------------------------------------------------------------------- */

const FUNNEL_STAGES = [
  { key: "discovered", label: "Discovered" },
  { key: "running", label: "Running" },
  { key: "healthy", label: "Healthy" },
  { key: "updated", label: "Up to date" },
  { key: "monitored", label: "Monitored" },
] as const;

function StackHealthCard({
  funnel,
  loading,
}: {
  funnel?: import("@/api/dashboard").FunnelData;
  loading: boolean;
}) {
  const qc = useQueryClient();
  const [refreshing, setRefreshing] = useState(false);
  const [hovered, setHovered] = useState<number | null>(null);

  const refresh = async () => {
    setRefreshing(true);
    try {
      const data = await dashboardApi.funnel(true);
      qc.setQueryData(["dashboard-funnel"], data);
    } catch (e) {
      toast.error(apiErrorMessage(e));
    } finally {
      setRefreshing(false);
    }
  };

  return (
    <div className="sp-card sp-rise flex flex-col gap-5 p-5 sm:p-6">
      <div className="flex items-center justify-between">
        <h2 className="sp-label">Stack health</h2>
        <button
          onClick={refresh}
          className="flex items-center gap-1.5 rounded-pill border border-sp-border bg-sp-surface-2 px-2.5 py-1 text-xs text-sp-text-2 hover:text-sp-text-1"
          title="Refresh now"
        >
          <RefreshCw className={cn("h-3 w-3", refreshing && "animate-spin")} />
          {funnel ? relativeTime(funnel.as_of) : "…"}
        </button>
      </div>

      {loading || !funnel ? (
        <div className="space-y-4">
          <div className="sp-skeleton h-12" />
          <div className="sp-skeleton h-52" />
        </div>
      ) : (
        <>
          <div className="grid grid-cols-5 gap-2">
            {FUNNEL_STAGES.map(({ key, label }, i) => (
              <div
                key={key}
                className={cn(
                  "min-w-0 transition-opacity",
                  hovered !== null && hovered !== i && "opacity-40"
                )}
              >
                <p className="sp-label truncate">{label}</p>
                <p className="sp-display mt-0.5 text-2xl sm:text-3xl">{funnel[key]}</p>
              </div>
            ))}
          </div>
          <FunnelChart
            stages={FUNNEL_STAGES.map(({ key, label }) => ({ label, value: funnel[key] }))}
            onHover={setHovered}
          />
        </>
      )}

      <AiPromptBar />
    </div>
  );
}

function ContainerCountCard({
  localRunning,
  loading,
  agents,
  healthyRate,
}: {
  localRunning?: number;
  loading: boolean;
  agents: Agent[];
  healthyRate: number | null;
}) {
  const online = agents.filter((a) => a.status === "online");
  const remote = useQueries({
    queries: online.map((a) => ({
      queryKey: ["agent-system", a.id],
      queryFn: () => agentsApi.system(a.id),
      refetchInterval: 30000,
    })),
  });

  const hosts: { name: string; count: number }[] = [
    { name: "local", count: localRunning ?? 0 },
    ...online.map((a, i) => ({ name: a.name, count: remote[i].data?.containers_running ?? 0 })),
  ];
  const total = hosts.reduce((s, h) => s + h.count, 0);
  const max = Math.max(...hosts.map((h) => h.count), 1);

  return (
    <div className="sp-card sp-rise flex flex-col p-5 sm:p-6" style={{ animationDelay: "60ms" }}>
      <h2 className="sp-label">Containers running</h2>
      {loading ? (
        <div className="mt-3 space-y-3">
          <div className="sp-skeleton h-14 w-28" />
          <div className="sp-skeleton h-20" />
        </div>
      ) : (
        <>
          <p className="sp-display mt-1 text-5xl">{total}</p>
          <div className="mt-4 space-y-2.5">
            {hosts.map((h) => (
              <div key={h.name}>
                <div className="mb-1 flex items-center justify-between text-xs">
                  <span className="truncate font-medium text-sp-text-2">{h.name}</span>
                  <span className="font-semibold text-sp-text-1">{h.count}</span>
                </div>
                <div className="h-1.5 rounded-pill bg-sp-surface-2">
                  <div
                    className="h-1.5 rounded-pill bg-sp-blue"
                    style={{ width: `${(h.count / max) * 100}%` }}
                  />
                </div>
              </div>
            ))}
          </div>
        </>
      )}
      <div className="mt-auto pt-5">
        <div className="flex items-center gap-2.5 rounded-2xl bg-sp-pill px-3.5 py-3 text-sp-pill-text">
          <span className="text-base leading-none">✦</span>
          <p className="text-xs font-medium leading-snug">
            {healthyRate === null
              ? "Insights appear once stacks are running."
              : `${healthyRate}% of running stacks are healthy.`}
          </p>
        </div>
      </div>
    </div>
  );
}

function UptimeCard({
  series,
  loading,
  range,
}: {
  series?: { date: string; value: number | null }[];
  loading: boolean;
  range: RangeDays;
}) {
  const values = series?.map((p) => p.value) ?? [];
  const latest = [...values].reverse().find((v): v is number => v !== null);
  return (
    <div className="sp-card sp-rise p-5 sm:p-6" style={{ animationDelay: "120ms" }}>
      <div className="flex items-start justify-between">
        <div>
          <h2 className="sp-label">Uptime</h2>
          <p className="sp-display mt-1 text-4xl">
            {latest === undefined ? "—" : `${latest}%`}
          </p>
        </div>
        <span className="sp-label">{range}d</span>
      </div>
      <div className="mt-4">
        {loading || !series ? (
          <div className="sp-skeleton h-24" />
        ) : (
          <UptimeChart data={values} />
        )}
      </div>
      <p className="mt-2 text-xs text-sp-text-3">Daily share of compose containers running, this host.</p>
    </div>
  );
}

function OpsCard({
  series,
  peakDay,
  loading,
  range,
}: {
  series?: { date: string; count: number }[];
  peakDay: string | null;
  loading: boolean;
  range: RangeDays;
}) {
  const total = series?.reduce((s, p) => s + p.count, 0) ?? 0;
  const max = Math.max(...(series?.map((p) => p.count) ?? []), 1);
  return (
    <div className="sp-card sp-rise p-5 sm:p-6" style={{ animationDelay: "180ms" }}>
      <div className="flex items-start justify-between">
        <div>
          <h2 className="sp-label">Operations</h2>
          <p className="sp-display mt-1 text-4xl">{total}</p>
        </div>
        <span className="sp-label">{range}d</span>
      </div>
      <div className="mt-4">
        {loading || !series ? (
          <div className="sp-skeleton h-16" />
        ) : (
          <OpsGrid data={series.map((p) => p.count / max)} cols={range} />
        )}
      </div>
      <p className="mt-2 text-xs text-sp-text-3">
        {peakDay ? `Busiest day: ${peakDay}.` : "Audit-log actions per day."}
      </p>
    </div>
  );
}

/* ---------------------------------------------------------------------- */
/* Host sections (pre-Phase-24, retained)                                   */
/* ---------------------------------------------------------------------- */

function AgentDashboardSection({ agent, isAdmin }: { agent: Agent; isAdmin: boolean }) {
  const qc = useQueryClient();
  const online = agent.status === "online";
  const [busyId, setBusyId] = useState<string | null>(null);

  const stacks = useQuery({
    queryKey: ["agent-stacks", agent.id],
    queryFn: () => agentsApi.stacks(agent.id),
    enabled: online,
    refetchInterval: 8000,
  });
  const stats = useQuery({
    queryKey: ["agent-stack-stats", agent.id],
    queryFn: () => agentsApi.stackStats(agent.id),
    enabled: online,
    refetchInterval: 5000,
  });
  const sys = useQuery({
    queryKey: ["agent-system", agent.id],
    queryFn: () => agentsApi.system(agent.id),
    enabled: online,
    refetchInterval: 30000,
  });
  const volSize = useQuery({
    queryKey: ["volumes-size", agent.id],
    queryFn: () => volumesApi.sizes(false, agent.id).then(sumSizes),
    enabled: online,
    refetchInterval: 60000,
  });

  const run = async (action: string, label: string, id: string) => {
    setBusyId(id);
    const t = toast.loading(`${label} ${id} on ${agent.name}…`);
    try {
      await agentsApi.action(agent.id, id, action);
      toast.success(`${label} ${id} ✓`, { id: t });
      qc.invalidateQueries({ queryKey: ["agent-stacks", agent.id] });
      qc.invalidateQueries({ queryKey: ["agent-stack-stats", agent.id] });
    } catch (e) {
      toast.error(apiErrorMessage(e), { id: t });
    } finally {
      setBusyId(null);
    }
  };

  return (
    <section>
      <HostHeader agent={agent} />
      {!online ? (
        <Card>
          <p className="text-sm text-slate-500">
            Host is {agent.status}. Check it under Settings → Remote hosts.
          </p>
        </Card>
      ) : (
        <>
        <ResourceBar
          cpuCores={sys.data?.cpu_cores ?? 0}
          memUsed={sys.data?.mem_used ?? 0}
          memTotal={sys.data?.mem_total ?? 0}
          diskUsed={sys.data?.disk_used ?? 0}
          diskTotal={sys.data?.disk_total ?? 0}
          volumesSize={volSize.data}
          containersRunning={sys.data?.containers_running ?? 0}
          containersTotal={sys.data?.containers_total ?? 0}
          dockerVersion={sys.data?.docker_version ?? ""}
        />
        <StacksTable
          stacks={stacks.data}
          stats={stats.data}
          hostCpus={sys.data?.cpu_cores ?? 0}
          hostMem={sys.data?.mem_total ?? 0}
          isAdmin={isAdmin}
          busyId={busyId}
          loading={stacks.isLoading}
          linkBase={`/hosts/${agent.id}/stacks`}
          onStart={(id) => run("start", "Starting", id)}
          onStop={(id) => run("stop", "Stopping", id)}
          onRestart={(id) => run("restart", "Restarting", id)}
          emptyText="No stacks on this host."
        />
        </>
      )}
    </section>
  );
}

function ResourceBar({
  cpuCores,
  memUsed,
  memTotal,
  diskUsed,
  diskTotal,
  volumesSize,
  containersRunning,
  containersTotal,
  dockerVersion,
}: {
  cpuCores: number;
  memUsed: number;
  memTotal: number;
  diskUsed: number;
  diskTotal: number;
  volumesSize?: number;
  containersRunning: number;
  containersTotal: number;
  dockerVersion: string;
}) {
  return (
    <div className="mb-4 grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
      <Stat icon={<Cpu className="h-5 w-5" />} label="CPU cores" value={cpuCores || "—"} />
      <Stat
        icon={<MemoryStick className="h-5 w-5" />}
        label="Memory"
        value={memTotal ? `${formatBytes(memUsed)} / ${formatBytes(memTotal)}` : "—"}
      />
      <Stat
        icon={<HardDrive className="h-5 w-5" />}
        label="Disk"
        value={diskTotal ? `${formatBytes(diskUsed)} / ${formatBytes(diskTotal)}` : "—"}
      />
      <Stat
        icon={<Database className="h-5 w-5" />}
        label="Volumes"
        value={volumesSize === undefined ? "…" : formatBytes(volumesSize)}
      />
      <Stat
        icon={<Container className="h-5 w-5" />}
        label="Containers"
        value={`${containersRunning} / ${containersTotal}`}
      />
      <Stat icon={<Server className="h-5 w-5" />} label="Docker" value={dockerVersion || "—"} />
    </div>
  );
}

function Stat({
  icon,
  label,
  value,
}: {
  icon: React.ReactNode;
  label: string;
  value: React.ReactNode;
}) {
  return (
    <Card className="flex items-center gap-3">
      <div className="rounded-lg bg-accent/10 p-2 text-accent dark:bg-accent-dark/10 dark:text-accent-dark">
        {icon}
      </div>
      <div className="min-w-0">
        <p className="text-xs text-slate-500">{label}</p>
        <p className="truncate text-sm font-semibold">{value}</p>
      </div>
    </Card>
  );
}