app/components/SystemStatus.tsx

'use client';

import { useState, useEffect } from 'react';

interface SystemStatusProps {
    initialData: any;
}

export function SystemStatus({ initialData }: SystemStatusProps) {
    const [data, setData] = useState(initialData);

    useEffect(() => {
        const interval = setInterval(async () => {
            try {
                // Fetch from health endpoint with no-store/no-cache to ensure fresh data
                const res = await fetch('/api/v1/health', {
                    cache: 'no-store',
                    headers: {
                        'Cache-Control': 'no-cache',
                        'Pragma': 'no-cache'
                    }
                });
                if (res.ok) {
                    const json = await res.json();
                    setData(json);
                }
            } catch (error) {
                console.error("Failed to refresh system status", error);
            }
        }, 5000); // Update every 5 seconds

        return () => clearInterval(interval);
    }, []);

    return (
        <pre className="p-4 rounded bg-zinc-100 dark:bg-zinc-950 text-xs font-mono text-zinc-800 dark:text-zinc-300 overflow-x-auto w-full max-w-full">
            {JSON.stringify(data, null, 2)}
        </pre>
    );
}