"use client";

import { useRouter } from "next/navigation";
import { DiagramCard } from "./DiagramCard";
import { EmptyDiagrams } from "./EmptyDiagrams";
import { CreateDiagramDialog } from "./CreateDiagramDialog";
import { Button } from "@turbostarter/ui-web/button";
import { Icons } from "@turbostarter/ui-web/icons";
import { pathsConfig } from "~/config/paths";

import type { DiagramResponse } from "./DiagramCard";

interface DiagramGridProps {
  diagrams: DiagramResponse[];
  isLoading: boolean;
}

export function DiagramGrid({ diagrams, isLoading }: DiagramGridProps) {
  const router = useRouter();

  if (isLoading) {
    return (
      <div className="flex h-64 items-center justify-center">
        <Icons.Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Diagrams</h1>
          <p className="text-muted-foreground">
            Create and manage your system diagrams
          </p>
        </div>
        <CreateDiagramDialog>
          <Button>
            <Icons.Plus className="mr-2 h-4 w-4" />
            New Diagram
          </Button>
        </CreateDiagramDialog>
      </div>

      {diagrams.length === 0 ? (
        <EmptyDiagrams />
      ) : (
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {diagrams.map((diagram) => (
            <DiagramCard
              key={diagram.id}
              diagram={diagram}
              onClick={() => router.push(pathsConfig.dashboard.user.diagram(diagram.id))}
            />
          ))}
        </div>
      )}
    </div>
  );
}
