supervisor-ui/app/page.tsx

'use client';

import { useState } from 'react';
import { Activity, Server, FileText, Settings } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { SystemStatus } from '@/components/process/SystemStatus';
import { ProcessStateChart } from '@/components/charts/ProcessStateChart';
import { ProcessUptimeChart } from '@/components/charts/ProcessUptimeChart';
import { GroupStatistics } from '@/components/charts/GroupStatistics';
import { ConnectionStatus } from '@/components/ui/ConnectionStatus';
import { useProcesses } from '@/lib/hooks/useSupervisor';
import { useEventSource } from '@/lib/hooks/useEventSource';
import { ProcessState } from '@/lib/supervisor/types';

export default function HomePage() {
  const [realtimeEnabled] = useState(true);
  const { data: processes, isLoading, isError, refetch } = useProcesses();

  // Real-time updates via Server-Sent Events
  const { status: connectionStatus, reconnectAttempts, reconnect } = useEventSource(
    '/api/supervisor/events',
    {
      enabled: realtimeEnabled && !isLoading && !isError,
      onMessage: (message) => {
        if (message.event === 'process-update') {
          refetch();
        }
      },
    }
  );

  const stats = {
    total: processes?.length ?? 0,
    running: processes?.filter((p) => p.state === ProcessState.RUNNING).length ?? 0,
    stopped: processes?.filter((p) => p.state === ProcessState.STOPPED || p.state === ProcessState.EXITED).length ?? 0,
    fatal: processes?.filter((p) => p.state === ProcessState.FATAL).length ?? 0,
  };

  return (
    <div className="space-y-8 animate-fade-in">
      {/* Header */}
      <div className="flex flex-col sm:flex-row items-start justify-between gap-4">
        <div>
          <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
            Supervisor Dashboard
          </h1>
          <p className="text-sm md:text-base text-muted-foreground mt-2">
            Monitor and manage your processes in real-time
          </p>
        </div>
        <ConnectionStatus
          status={connectionStatus}
          reconnectAttempts={reconnectAttempts}
          onReconnect={reconnect}
        />
      </div>

      {/* System Status */}
      <SystemStatus />

      {/* Process Statistics */}
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Processes</CardTitle>
            <Activity className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{isLoading ? '...' : stats.total}</div>
            <p className="text-xs text-muted-foreground mt-1">
              All configured processes
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Running</CardTitle>
            <div className="h-3 w-3 rounded-full bg-success animate-pulse-slow" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-success">{isLoading ? '...' : stats.running}</div>
            <p className="text-xs text-muted-foreground mt-1">
              Active processes
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Stopped</CardTitle>
            <div className="h-3 w-3 rounded-full bg-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-muted-foreground">{isLoading ? '...' : stats.stopped}</div>
            <p className="text-xs text-muted-foreground mt-1">
              Inactive processes
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Fatal</CardTitle>
            <div className="h-3 w-3 rounded-full bg-destructive animate-pulse-slow" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-destructive">{isLoading ? '...' : stats.fatal}</div>
            <p className="text-xs text-muted-foreground mt-1">
              Failed processes
            </p>
          </CardContent>
        </Card>
      </div>

      {/* Charts and Analytics */}
      {!isLoading && processes && processes.length > 0 && (
        <div className="space-y-6">
          <h2 className="text-2xl font-bold">Analytics</h2>
          <div className="grid gap-6 lg:grid-cols-2">
            <ProcessStateChart processes={processes} />
            <GroupStatistics processes={processes} />
          </div>
          <div className="grid gap-6">
            <ProcessUptimeChart processes={processes} />
          </div>
        </div>
      )}

      {/* Quick Actions */}
      <div className="grid gap-6 md:grid-cols-3">
        <Card className="hover:shadow-lg transition-shadow cursor-pointer" onClick={() => window.location.href = '/processes'}>
          <CardHeader>
            <div className="flex items-center gap-3">
              <div className="p-3 rounded-lg bg-primary/10">
                <Server className="h-6 w-6 text-primary" />
              </div>
              <div>
                <CardTitle>Manage Processes</CardTitle>
                <CardDescription>Start, stop, and restart</CardDescription>
              </div>
            </div>
          </CardHeader>
        </Card>

        <Card className="hover:shadow-lg transition-shadow cursor-pointer" onClick={() => window.location.href = '/logs'}>
          <CardHeader>
            <div className="flex items-center gap-3">
              <div className="p-3 rounded-lg bg-accent/10">
                <FileText className="h-6 w-6 text-accent" />
              </div>
              <div>
                <CardTitle>View Logs</CardTitle>
                <CardDescription>Monitor process output</CardDescription>
              </div>
            </div>
          </CardHeader>
        </Card>

        <Card className="hover:shadow-lg transition-shadow cursor-pointer" onClick={() => window.location.href = '/config'}>
          <CardHeader>
            <div className="flex items-center gap-3">
              <div className="p-3 rounded-lg bg-success/10">
                <Settings className="h-6 w-6 text-success" />
              </div>
              <div>
                <CardTitle>Configuration</CardTitle>
                <CardDescription>Manage settings</CardDescription>
              </div>
            </div>
          </CardHeader>
        </Card>
      </div>
    </div>
  );
}