'use client';

import { useConfig } from '@/lib/hooks/useSupervisor';
import { ConfigTable } from '@/components/config/ConfigTable';
import { ReloadConfigButton } from '@/components/config/ReloadConfigButton';
import { ProcessGroupForm } from '@/components/config/ProcessGroupForm';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { AlertCircle } from 'lucide-react';

export default function ConfigPage() {
  const { data: configs, isLoading, isError } = useConfig();

  if (isError) {
    return (
      <div className="space-y-4 md:space-y-6">
        <h1 className="text-2xl sm:text-3xl font-bold">Configuration</h1>
        <Card className="border-destructive/50">
          <CardContent className="p-8 md:p-12 text-center">
            <AlertCircle className="h-10 w-10 md:h-12 md:w-12 text-destructive mx-auto mb-4" />
            <h2 className="text-lg md:text-xl font-semibold mb-2">Failed to load configuration</h2>
            <p className="text-sm md:text-base text-muted-foreground">
              Could not connect to Supervisor. Please check your configuration.
            </p>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div className="space-y-4 md:space-y-6">
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl sm:text-3xl font-bold">Configuration</h1>
          <p className="text-sm md:text-base text-muted-foreground mt-1">
            Manage process configurations and supervisor settings
          </p>
        </div>
        <ReloadConfigButton />
      </div>

      {/* Process Group Management */}
      <ProcessGroupForm />

      {/* Configuration Table */}
      <div className="space-y-4">
        <CardHeader className="px-0">
          <CardTitle>Process Configurations</CardTitle>
          <p className="text-sm text-muted-foreground mt-1">
            {configs?.length ?? 0} process{configs?.length !== 1 ? 'es' : ''} configured
          </p>
        </CardHeader>

        {isLoading ? (
          <Card>
            <CardContent className="p-8 text-center">
              <div className="animate-pulse">
                <div className="h-8 bg-muted rounded w-full mb-4"></div>
                <div className="h-8 bg-muted rounded w-full mb-4"></div>
                <div className="h-8 bg-muted rounded w-full"></div>
              </div>
            </CardContent>
          </Card>
        ) : configs && configs.length > 0 ? (
          <ConfigTable configs={configs} />
        ) : (
          <Card>
            <CardContent className="p-8 md:p-12 text-center">
              <p className="text-sm md:text-base text-muted-foreground">No process configurations found</p>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  );
}