"use client";

import { useState, useCallback } from "react";
import { usePoll } from "@/lib/use-poll";
import { postAPI } from "@/lib/api";
import type { OverviewStats, HealthScore, DiskUsageEntry } from "@/lib/types";
import { StatCard } from "@/components/stat-card";
import { ActivityFeed } from "@/components/activity-feed";
import { JellyfinCard } from "@/components/jellyfin-card";
import { OllamaCard } from "@/components/ollama-card";
import { CalendarCard } from "@/components/calendar-card";
import { HostRow } from "@/components/host-card";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { CardSkeleton, TableSkeleton } from "@/components/skeleton";

/* --- Quick Action Button --- */
interface ActionButtonProps {
  label: string;
  endpoint: string;
  icon: string;
}

function ActionButton({ label, endpoint, icon }: ActionButtonProps) {
  const [state, setState] = useState<"idle" | "loading" | "success" | "error">("idle");

  const run = useCallback(async () => {
    setState("loading");
    try {
      await postAPI(endpoint);
      setState("success");
    } catch {
      setState("error");
    }
    setTimeout(() => setState("idle"), 2000);
  }, [endpoint]);

  const bg =
    state === "loading"
      ? "bg-white/[0.08] cursor-wait"
      : state === "success"
        ? "bg-green-500/15 border-green-500/30"
        : state === "error"
          ? "bg-red-500/15 border-red-500/30"
          : "bg-white/[0.04] hover:bg-white/[0.08] border-white/[0.08]";

  return (
    <button
      onClick={run}
      disabled={state === "loading"}
      className={`flex items-center gap-2 rounded-xl border px-3 py-2 text-sm font-medium transition-all ${bg}`}
    >
      <span className="text-[10px] font-bold px-1.5 py-0.5 rounded bg-white/[0.08] text-muted-foreground">{icon}</span>
      <span>
        {state === "loading"
          ? "Running..."
          : state === "success"
            ? "Done!"
            : state === "error"
              ? "Failed"
              : label}
      </span>
    </button>
  );
}

/* --- Organizer Toggle --- */
function OrganizerToggle() {
  const [paused, setPaused] = useState(false);
  const [state, setState] = useState<"idle" | "loading">("idle");

  const toggle = useCallback(async () => {
    setState("loading");
    try {
      if (paused) {
        await postAPI("/api/actions/resume-organizers");
        setPaused(false);
      } else {
        await postAPI("/api/actions/pause-organizers");
        setPaused(true);
      }
    } catch {
      // ignore
    }
    setState("idle");
  }, [paused]);

  return (
    <button
      onClick={toggle}
      disabled={state === "loading"}
      className={`flex items-center gap-2 rounded-xl border px-3 py-2 text-sm font-medium transition-all ${
        paused
          ? "bg-amber-500/15 border-amber-500/30 hover:bg-amber-500/25"
          : "bg-white/[0.04] hover:bg-white/[0.08] border-white/[0.08]"
      }`}
    >
      <span>{paused ? ">" : "||"}</span>
      <span>
        {state === "loading" ? "..." : paused ? "Resume Organizers" : "Pause Organizers"}
      </span>
    </button>
  );
}

/* --- Disk Usage Bar --- */
function DiskBar({ entry }: { entry: DiskUsageEntry }) {
  const color =
    entry.used_pct >= 85
      ? "from-red-500 to-red-400"
      : entry.used_pct >= 70
        ? "from-amber-500 to-amber-400"
        : "from-green-500 to-emerald-400";

  const hostColors: Record<string, string> = {
    atlantis: "text-blue-400",
    calypso: "text-violet-400",
    olares: "text-emerald-400",
    nuc: "text-amber-400",
    rpi5: "text-cyan-400",
    homelab: "text-green-400",
    guava: "text-orange-400",
    seattle: "text-teal-400",
  };
  const hostCls =
    hostColors[entry.host.toLowerCase()] ?? "text-foreground";

  return (
    <div className="space-y-1.5">
      <div className="flex items-center justify-between text-sm">
        <div className="flex items-center gap-2 min-w-0">
          <span className={`font-medium ${hostCls}`}>{entry.host}</span>
          <span className="text-muted-foreground/60 font-mono text-xs truncate">
            {entry.mount}
          </span>
        </div>
        <div className="flex items-center gap-3 shrink-0">
          <span className="text-xs text-muted-foreground">
            {entry.total_gb >= 1000
              ? `${(entry.total_gb / 1000).toFixed(1)} TB`
              : `${Math.round(entry.total_gb)} GB`}
          </span>
          <span className="text-xs font-medium tabular-nums-transition">
            {entry.used_pct}%
          </span>
        </div>
      </div>
      <div className="glass-bar-track h-2">
        <div
          className={`h-full glass-bar-fill bg-gradient-to-r ${color} transition-all duration-700`}
          style={{ width: `${entry.used_pct}%` }}
        />
      </div>
    </div>
  );
}

export default function DashboardPage() {
  const { data } = usePoll<OverviewStats>("/api/stats/overview", 60000);
  const { data: health } = usePoll<HealthScore>("/api/health-score", 60000);
  const { data: disks } = usePoll<DiskUsageEntry[]>("/api/disk-usage", 300000);

  // Handle both API field name variants
  const endpoints = data?.containers?.endpoints || data?.containers?.by_endpoint || {};
  const rawEmail = data?.emails_today ?? data?.email_today ?? 0;
  const emailCount = typeof rawEmail === "object" && rawEmail !== null ? (rawEmail as Record<string, number>).total ?? 0 : rawEmail;
  const alertCount = data?.alerts ?? data?.unhealthy_count ?? 0;
  const running = data?.containers?.running ?? Object.values(endpoints).reduce((s, e) => s + (e.running || 0), 0);
  const hostsOnline = data?.hosts_online ?? Object.values(endpoints).filter(e => !e.error).length;
  const gpuPct = data?.gpu?.utilization_pct;
  const totalHosts = Object.keys(endpoints).length;

  // Top 5 most-used disks
  const topDisks = disks
    ? [...disks].sort((a, b) => b.used_pct - a.used_pct).slice(0, 5)
    : [];

  return (
    <div className="space-y-5">
      {/* Row 1: Stats */}
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
        <StatCard
          label="Health"
          value={health ? `${health.score}` : "—"}
          color={
            health
              ? health.score >= 80
                ? "green"
                : health.score >= 60
                  ? "amber"
                  : "amber"
              : "blue"
          }
          gauge={health ? health.score : undefined}
          sub={health ? `Grade: ${health.grade}` : undefined}
        />
        <StatCard
          label="Containers"
          value={data ? `${running}/${data.containers.total}` : "—"}
          color="blue"
          sub={data ? "running / total" : undefined}
        />
        <StatCard
          label="Hosts Online"
          value={data ? hostsOnline : "—"}
          color="green"
          sub="endpoints"
        />
        <StatCard
          label="GPU — RTX 5090"
          value={
            data?.gpu?.available
              ? `${gpuPct ?? 0}%`
              : "—"
          }
          color="violet"
          gauge={data?.gpu?.available ? gpuPct : undefined}
          sub={data?.gpu?.available ? `${data.gpu.temp_c ?? "—"}°C · ${data.gpu.power_w ?? data.gpu.power_draw_w ?? "—"}W` : "unavailable"}
        />
        <StatCard
          label="Emails Today"
          value={data ? emailCount : "—"}
          color="amber"
          sub="processed"
        />
        <StatCard
          label="Alerts"
          value={data ? alertCount : "—"}
          color="emerald"
          sub="active"
        />
      </div>

      {/* Row 1.5: Quick Actions */}
      <div className="flex flex-wrap items-center gap-3">
        <span className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mr-1">
          Quick Actions
        </span>
        <ActionButton label="Restart Jellyfin" endpoint="/api/actions/restart-jellyfin" icon="JF" />
        <ActionButton label="Restart Ollama" endpoint="/api/actions/restart-ollama" icon="AI" />
        <OrganizerToggle />
        <ActionButton label="Run Backup" endpoint="/api/actions/run-backup" icon="BK" />
      </div>

      {/* Row 2: Calendar + Activity Feed */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <CalendarCard />
        <ActivityFeed />
      </div>

      {/* Row 3: Jellyfin + GPU + Hosts */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <JellyfinCard />
        <OllamaCard />
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-base font-semibold">
              Hosts {data ? `(${hostsOnline}/${totalHosts} online)` : ""}
            </CardTitle>
          </CardHeader>
          <CardContent>
            {data ? (
              <div className="divide-y divide-white/[0.06]">
                {Object.entries(endpoints).map(([name, info]) => (
                  <HostRow
                    key={name}
                    name={name}
                    running={info.running}
                    total={info.total}
                    error={info.error}
                  />
                ))}
              </div>
            ) : (
              <CardSkeleton lines={5} />
            )}
          </CardContent>
        </Card>
      </div>

      {/* Row 4: Storage / Disk Usage */}
      <Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-base font-semibold">Storage</CardTitle>
        </CardHeader>
        <CardContent>
          {!disks ? (
            <CardSkeleton lines={5} />
          ) : topDisks.length === 0 ? (
            <p className="text-sm text-muted-foreground/60">No disk data</p>
          ) : (
            <div className="space-y-4">
              {topDisks.map((d, i) => (
                <DiskBar key={`${d.host}-${d.mount}-${i}`} entry={d} />
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}