"use client";

import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import type { BallboxStoreScreen } from "@/lib/tvs-backend-types";
import { tvScreensResponseSchema } from "@/lib/contracts/tvs";

type ScreensRuntimeGridProps = {
  initialScreens: BallboxStoreScreen[];
};

const statusLabels: Record<BallboxStoreScreen["status"], string> = {
  online: "Online",
  warning: "Atencion",
  offline: "Offline",
};

const statusClasses: Record<BallboxStoreScreen["status"], string> = {
  online: "border-primary/40 bg-primary/15 text-primary",
  warning: "border-amber-400/40 bg-amber-400/15 text-amber-200",
  offline: "border-rose-400/40 bg-rose-400/15 text-rose-200",
};

export function ScreensRuntimeGrid({ initialScreens }: ScreensRuntimeGridProps) {
  const [screens, setScreens] = useState(initialScreens);

  useEffect(() => {
    let isMounted = true;
    let timer: ReturnType<typeof setInterval> | null = null;

    const loadScreens = async () => {
      try {
        const response = await fetch("/api/tvs/screens", { cache: "no-store" });
        if (!response.ok) return;
        const payload = await response.json();
        const parsed = tvScreensResponseSchema.safeParse(payload);
        if (parsed.success && isMounted) {
          setScreens(parsed.data.items);
        }
      } catch {
        if (!isMounted) return;
      }
    };

    loadScreens();
    timer = setInterval(loadScreens, 5000);

    return () => {
      isMounted = false;
      if (timer) clearInterval(timer);
    };
  }, []);

  const orderedScreens = useMemo(
    () => [...screens].sort((a, b) => a.name.localeCompare(b.name)),
    [screens]
  );

  return (
    <div className="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
      {orderedScreens.map((screen) => (
        <Link
          key={screen.id}
          href={`/player/${screen.id}`}
          className="rounded-[1.5rem] border border-border/70 bg-background/40 p-5 transition hover:border-primary/50 hover:bg-background/60"
        >
          <div className="flex items-start justify-between gap-4">
            <div>
              <p className="text-sm font-medium text-foreground">{screen.name}</p>
              <p className="mt-2 text-sm text-muted-foreground">{screen.location}</p>
            </div>
            <span
              className={`inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs uppercase tracking-[0.18em] ${
                statusClasses[screen.status]
              }`}
            >
              <span className="h-2 w-2 rounded-full bg-current" />
              {statusLabels[screen.status]}
            </span>
          </div>
          <div className="mt-5 flex items-center justify-between text-xs uppercase tracking-[0.16em] text-muted-foreground">
            <span>Impresiones</span>
            <span className="font-mono text-sm text-foreground">{screen.impressionCount}</span>
          </div>
          <p className="mt-4 text-xs uppercase tracking-[0.16em] text-muted-foreground">Lightweight runtime</p>
          <p className="mt-3 font-mono text-xs uppercase tracking-[0.16em] text-primary">{screen.id}</p>
        </Link>
      ))}
    </div>
  );
}