"use client";

import { motion } from "framer-motion";

import { AlertTriangle } from "lucide-react";

import { Card } from "@/components/ui/card";

import { Switch } from "@/components/ui/switch";

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

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

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

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

import { staggerContainer, fadeUpItem } from "@/lib/motion";

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

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

const STATUS_META: Record<SourceStatus, { label: string; color: string }> = {

  healthy: { label: "Healthy", color: "var(--color-accent-green)" },

  degraded: { label: "Degraded", color: "var(--color-accent-amber)" },

  down: { label: "Down", color: "var(--color-accent-red)" },

  disabled: { label: "Disabled", color: "var(--color-fg-disabled)" },

};

export default function SourcesPage() {

  const { data, isLoading } = useSources();

  const toggle = useToggleSource();

  return (

    <div className="mx-auto max-w-[1200px] space-y-5">

      <div>

        <h2 className="text-lg font-semibold tracking-[var(--tracking-tight)]">Sources</h2>

        <p className="mt-0.5 text-sm text-[var(--color-fg-tertiary)]">

          Every place DropHawk watches. Toggle a source to pause or resume polling.

        </p>

      </div>

      {isLoading || !data ? (

        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">

          {Array.from({ length: 6 }).map((_, i) => (

            <Skeleton key={i} className="h-[150px] rounded-[var(--radius-lg)]" />

          ))}

        </div>

      ) : (

        <motion.div

          variants={staggerContainer}

          initial="initial"

          animate="animate"

          className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3"

        >

          {data.map((s) => {

            const meta = STATUS_META[s.status];

            return (

              <motion.div key={s.id} variants={fadeUpItem}>

                <Card className="flex h-full flex-col gap-3 p-4">

                  <div className="flex items-start gap-3">

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

                    <div className="min-w-0 flex-1">

                      <p className="truncate text-sm font-semibold text-[var(--color-fg-primary)]">{s.name}</p>

                      <span

                        className="mt-1 inline-flex items-center gap-1.5 text-xs font-medium"

                        style={{ color: meta.color }}

                      >

                        <span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: meta.color }} aria-hidden />

                        {meta.label}

                      </span>

                    </div>

                    <Switch

                      checked={s.enabled}

                      onCheckedChange={(enabled) => toggle.mutate({ id: s.id, enabled })}

                      aria-label={`${s.enabled ? "Disable" : "Enable"} ${s.name}`}

                    />

                  </div>

                  <dl className="grid grid-cols-3 gap-2 border-t border-[var(--color-border-subtle)] pt-3 text-center">

                    <Metric label="p50" value={formatLatency(s.latency_ms_p50)} />

                    <Metric label="p95" value={formatLatency(s.latency_ms_p95)} />

                    <Metric label="24h" value={s.events_seen_24h.toLocaleString()} />

                  </dl>

                  <div className="flex items-center justify-between text-xs text-[var(--color-fg-tertiary)]">

                    <span>Every {s.poll_interval_s}s</span>

                    {s.last_success_at ? <RelativeTime iso={s.last_success_at} /> : <span>never</span>}

                  </div>

                  {s.last_error ? (

                    <p className="flex items-start gap-1.5 rounded-[var(--radius-sm)] bg-[color-mix(in_oklch,var(--color-accent-red)_10%,transparent)] p-2 text-xs text-[var(--color-accent-red)]">

                      <AlertTriangle className="mt-0.5 h-3 w-3 shrink-0" aria-hidden />

                      <span className="truncate">{s.last_error}</span>

                    </p>

                  ) : null}

                </Card>

              </motion.div>

            );

          })}

        </motion.div>

      )}

    </div>

  );

}

function Metric({ label, value }: { label: string; value: string }) {

  return (

    <div>

      <dd className="font-mono text-sm tabular text-[var(--color-fg-primary)]">{value}</dd>

      <dt className="text-[10px] uppercase tracking-wider text-[var(--color-fg-tertiary)]">{label}</dt>

    </div>

  );

}