import {
  ActivityIcon,
  AlertCircleIcon,
  CheckCircle2Icon,
  HardDriveIcon,
  Loader2Icon,
  ServerIcon,
  SparklesIcon,
} from "lucide-react";

import type {
  AppStatusResponse,
  HealthActionKind,
  HealthCheck,
} from "../../status-model";

import { Badge } from "./ui/badge";
import { Button } from "./ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "./ui/card";

interface HealthCenterProps {
  health: AppStatusResponse["health"];
  resident: AppStatusResponse["resident"];
  onAction: (action: HealthActionKind) => void;
  busyAction?: HealthActionKind | null;
}

function getStatusIcon(status: HealthCheck["status"]) {
  switch (status) {
    case "ok":
      return <CheckCircle2Icon className="size-4 text-green-500" />;
    case "warn":
      return <AlertCircleIcon className="size-4 text-amber-500" />;
    case "error":
      return <AlertCircleIcon className="size-4 text-destructive" />;
  }
}

function getStatusLabel(status: HealthCheck["status"]): string {
  switch (status) {
    case "ok":
      return "Ready";
    case "warn":
      return "Needs attention";
    case "error":
      return "Blocked";
  }
}

export function HealthCenter({
  health,
  resident,
  onAction,
  busyAction,
}: HealthCenterProps) {
  return (
    <section className="space-y-4">
      <div className="flex items-start justify-between gap-4">
        <div>
          <div className="mb-2 flex items-center gap-2">
            <HardDriveIcon className="size-4 text-primary" />
            <h2 className="font-semibold text-2xl">Health Center</h2>
          </div>
          <p className="max-w-3xl text-muted-foreground">{health.summary}</p>
        </div>
        <Badge
          className={
            health.state === "healthy"
              ? "border-emerald-500/25 bg-emerald-500/10 text-emerald-500"
              : health.state === "setup-required"
                ? "border-destructive/25 bg-destructive/10 text-destructive"
                : "border-amber-500/25 bg-amber-500/10 text-amber-500"
          }
          variant="outline"
        >
          {health.state === "healthy"
            ? "Ready"
            : health.state === "setup-required"
              ? "First run"
              : "Needs attention"}
        </Badge>
      </div>

      <div className="rounded-lg border border-border/40 bg-muted/10 px-4 py-3">
        <div className="mb-3 flex items-center gap-2">
          <ServerIcon className="size-4 text-primary" />
          <h3 className="font-mono text-[10px] text-muted-foreground uppercase tracking-[0.15em]">
            {resident.resident ? "Resident runtime" : "Standalone runtime"}
          </h3>
          <span className="ml-auto rounded bg-primary/12 px-1.5 py-0.5 font-mono text-[10px] text-primary tabular-nums">
            {resident.mode}
          </span>
        </div>
        <dl className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm sm:grid-cols-4 lg:grid-cols-6">
          <div>
            <dt className="font-mono text-[9px] text-muted-foreground/50 uppercase">
              Uptime
            </dt>
            <dd className="font-mono tabular-nums">
              {resident.uptimeSeconds === null
                ? "standalone"
                : `${resident.uptimeSeconds}s`}
            </dd>
          </div>
          <div>
            <dt className="font-mono text-[9px] text-muted-foreground/50 uppercase">
              Listener
            </dt>
            <dd className="font-mono tabular-nums">
              {resident.listenerPort ?? "none"}
            </dd>
          </div>
          <div>
            <dt className="font-mono text-[9px] text-muted-foreground/50 uppercase">
              Sessions
            </dt>
            <dd className="font-mono tabular-nums">
              {resident.transport.activeSessions}
            </dd>
          </div>
          <div>
            <dt className="font-mono text-[9px] text-muted-foreground/50 uppercase">
              Requests
            </dt>
            <dd className="font-mono tabular-nums">
              {resident.transport.activeRequests}
              {resident.transport.queuedRequests > 0
                ? ` +${resident.transport.queuedRequests} queued`
                : ""}
            </dd>
          </div>
          <div>
            <dt className="font-mono text-[9px] text-muted-foreground/50 uppercase">
              Models
            </dt>
            <dd className="font-mono tabular-nums">
              {resident.models.loadedModels} warm ·{" "}
              {resident.models.activeLeases} leased
            </dd>
          </div>
          <div>
            <dt className="font-mono text-[9px] text-muted-foreground/50 uppercase">
              Admission
            </dt>
            <dd className="flex items-center gap-1.5 font-mono">
              <ActivityIcon className="size-3 text-primary" />
              {resident.admission.state}
            </dd>
          </div>
        </dl>
      </div>

      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {health.checks.map((check) => {
          const isBusy = busyAction === check.actionKind;

          return (
            <Card
              className="border-border/60 bg-card/70 backdrop-blur-sm"
              key={check.id}
            >
              <CardHeader className="space-y-3 pb-3">
                <div className="flex items-center justify-between gap-3">
                  <div className="flex items-center gap-2">
                    {getStatusIcon(check.status)}
                    <CardTitle className="text-base">{check.title}</CardTitle>
                  </div>
                  <Badge variant="secondary">
                    {getStatusLabel(check.status)}
                  </Badge>
                </div>
                <CardDescription className="text-sm text-foreground/85">
                  {check.summary}
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <p className="text-muted-foreground text-sm">{check.detail}</p>
                {check.actionKind && check.actionLabel && (
                  <Button
                    className="w-full"
                    disabled={isBusy}
                    onClick={() => onAction(check.actionKind!)}
                    size="sm"
                    variant={check.status === "ok" ? "outline" : "default"}
                  >
                    {isBusy ? (
                      <Loader2Icon className="mr-2 size-4 animate-spin" />
                    ) : check.status === "ok" ? (
                      <SparklesIcon className="mr-2 size-4" />
                    ) : null}
                    {check.actionLabel}
                  </Button>
                )}
              </CardContent>
            </Card>
          );
        })}
      </div>
    </section>
  );
}