"use client";

import { Suspense, useState, useCallback } from "react";
import { LayoutConfigurationsTable } from "@/app/components/layout-configurations/LayoutConfigurationsTable";
import { CreateLayoutConfigurationDialog } from "@/app/components/layout-configurations/CreateLayoutConfigurationDialog";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
import { RefreshCw } from "lucide-react";
import { Card } from "@/components/ui/card";

export default function LayoutConfigurationsPage() {
  const [refreshKey, setRefreshKey] = useState(0);

  const handleRefresh = useCallback(() => {
    setRefreshKey(prev => prev + 1);
  }, []);

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
      <div className="container mx-auto py-8 px-4">
        <div className="flex justify-between items-center mb-8">
          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
            Layout Configurations
          </h1>
          <div className="flex gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={handleRefresh}
              className="flex items-center gap-2 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
            >
              <RefreshCw className="h-4 w-4" />
              Refresh
            </Button>
            <CreateLayoutConfigurationDialog />
          </div>
        </div>

        <Card className="dark:bg-gray-800 dark:border-gray-700">
          <Suspense fallback={<LayoutConfigurationsSkeleton />}>
            <LayoutConfigurationsTable key={refreshKey} />
          </Suspense>
        </Card>
      </div>
    </div>
  );
}

function LayoutConfigurationsSkeleton() {
  return (
    <div className="p-4 space-y-4">
      {[...Array(5)].map((_, i) => (
        <div key={i} className="flex items-center space-x-4">
          <Skeleton className="h-12 w-full dark:bg-gray-700" />
        </div>
      ))}
    </div>
  );
}