'use client';

import { Server, HardDrive } from 'lucide-react';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
import { usePhoenixInfraNodes, usePhoenixInfraStorage } from '@/hooks/usePhoenixRailing';

export default function InfrastructurePage() {
  const { data: nodesData, isLoading: nodesLoading, error: nodesError } = usePhoenixInfraNodes();
  const { data: storageData, isLoading: storageLoading, error: storageError } = usePhoenixInfraStorage();

  return (
    <div className="container mx-auto p-6">
      <h1 className="text-3xl font-bold mb-6">Infrastructure</h1>
      <p className="text-muted-foreground mb-6">
        Cluster nodes and storage from Phoenix API Railing (GET /api/v1/infra/nodes, /api/v1/infra/storage).
      </p>

      <div className="grid gap-6 md:grid-cols-2">
        <Card className="bg-gray-800 border-gray-700">
          <CardHeader>
            <CardTitle className="text-white flex items-center gap-2">
              <Server className="h-5 w-5" />
              Cluster Nodes
            </CardTitle>
          </CardHeader>
          <CardContent>
            {nodesLoading && <p className="text-gray-400">Loading...</p>}
            {nodesError && <p className="text-red-400">Error loading nodes</p>}
            {nodesData?.nodes && (
              <ul className="space-y-2">
                {nodesData.nodes.map((n: Record<string, unknown>) => (
                  <li
                    key={String(n.node ?? n.name ?? n.id ?? '')}
                    className="flex justify-between text-sm"
                  >
                    <span>{String(n.node ?? n.name ?? n.id ?? '—')}</span>
                    <span className={n.status === 'online' ? 'text-green-400' : 'text-gray-400'}>
                      {String(n.status ?? '—')}
                    </span>
                  </li>
                ))}
              </ul>
            )}
            {nodesData?.stub && <p className="text-xs text-gray-500 mt-2">Stub data (set PROXMOX_* on railing)</p>}
          </CardContent>
        </Card>

        <Card className="bg-gray-800 border-gray-700">
          <CardHeader>
            <CardTitle className="text-white flex items-center gap-2">
              <HardDrive className="h-5 w-5" />
              Storage
            </CardTitle>
          </CardHeader>
          <CardContent>
            {storageLoading && <p className="text-gray-400">Loading...</p>}
            {storageError && <p className="text-red-400">Error loading storage</p>}
            {storageData?.storage && (
              <ul className="space-y-2">
                {storageData.storage.slice(0, 10).map((s: Record<string, unknown>, i: number) => (
                  <li key={String(s.storage ?? s.name ?? s.id ?? i)} className="text-sm">
                    {String(s.storage ?? s.name ?? s.id ?? '—')}
                  </li>
                ))}
              </ul>
            )}
            {storageData?.stub && <p className="text-xs text-gray-500 mt-2">Stub data (set PROXMOX_* on railing)</p>}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}
