"use client";

import Link from "next/link";

import { Server } from "lucide-react";

import { Card, CardBody, CardHeader, CardTitle } from "@/components/ui/card";

import { Skeleton } from "@/components/ui/skeleton";

import { SourceChip } from "@/components/shared/SourceChip";

import { useSources } from "@/hooks/useSources";

import { formatLatency } from "@/lib/utils";

import type { SourceStatus } from "@/lib/types";

const DOT: Record<SourceStatus, string> = {

  healthy: "var(--color-accent-green)",

  degraded: "var(--color-accent-amber)",

  down: "var(--color-accent-red)",

  disabled: "var(--color-fg-disabled)",

};

export function SourceGrid() {

  const { data, isLoading } = useSources();

  return (

    <Card className="flex h-full flex-col">

      <CardHeader>

        <CardTitle className="flex items-center gap-2">

          <Server className="h-4 w-4 text-[var(--color-fg-tertiary)]" aria-hidden />

          Sources

        </CardTitle>

        <Link href="/sources" className="text-xs text-[var(--color-accent-teal)] hover:underline">

          View all

        </Link>

      </CardHeader>

      <CardBody className="space-y-1.5 pt-3">

        {isLoading || !data

          ? Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-11" />)

          : data.map((s) => (

              <Link

                key={s.id}

                href={`/sources?source=${s.id}`}

                className="flex items-center gap-3 rounded-[var(--radius)] px-2 py-2 transition-colors hover:bg-[var(--color-bg-overlay)]"

              >

                <span className="relative flex h-2 w-2 shrink-0">

                  <span

                    className="h-2 w-2 rounded-full"

                    style={{ backgroundColor: DOT[s.status] }}

                    aria-hidden

                  />

                </span>

                <SourceChip id={s.id} size={22} />

                <span className="min-w-0 flex-1 truncate text-sm text-[var(--color-fg-secondary)]">{s.name}</span>

                <span className="font-mono text-xs tabular text-[var(--color-fg-tertiary)]">

                  {formatLatency(s.latency_ms_p50)}

                </span>

              </Link>

            ))}

      </CardBody>

    </Card>

  );

}