import React from 'react';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { useNodesInfo } from '@/hooks/useKubectl';
import {
  Loader2,
  Server,
  Cpu,
  HardDrive,
  Monitor,
  AlertCircle,
} from 'lucide-react';

export function Dashboard() {
  const { nodes, loading, error } = useNodesInfo();

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <Loader2 className="h-8 w-8 animate-spin" />
        <span className="ml-2">Carregando informações do cluster...</span>
      </div>
    );
  }

  // Se não há erro mas também não há nodes, provavelmente não há kubeconfig ativo
  if (!error && nodes.length === 0) {
    return (
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold text-foreground">Dashboard</h1>
          <p className="text-muted-foreground">
            Bem-vindo ao seu painel de controle
          </p>
        </div>
        <Card className="border-yellow-200">
          <CardHeader>
            <CardTitle className="text-yellow-600 flex items-center">
              <AlertCircle className="h-5 w-5 mr-2" />
              Aguardando configuração
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-yellow-600">
              Selecione um kubeconfig no menu lateral para visualizar as
              informações do cluster.
            </p>
          </CardContent>
        </Card>
      </div>
    );
  }

  if (error) {
    return (
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold text-foreground">Dashboard</h1>
          <p className="text-muted-foreground">
            Bem-vindo ao seu painel de controle
          </p>
        </div>
        <Card className="border-red-200">
          <CardHeader>
            <CardTitle className="text-red-600 flex items-center">
              <AlertCircle className="h-5 w-5 mr-2" />
              Erro ao carregar dados do cluster
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-red-500">{error}</p>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-foreground">Dashboard</h1>
        <p className="text-muted-foreground">
          Bem-vindo ao seu painel de controle - {nodes.length} node(s)
          encontrado(s)
        </p>
      </div>

      {/* Cluster Overview */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">
              Total de Nodes
            </CardTitle>
            <Server className="h-4 w-4 text-blue-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{nodes.length}</div>
            <p className="text-xs text-muted-foreground">
              Nodes ativos no cluster
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Arquiteturas</CardTitle>
            <Cpu className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {[...new Set(nodes.map((n) => n.architecture))].join(', ')}
            </div>
            <p className="text-xs text-muted-foreground">
              Tipos de arquitetura
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Kubernetes</CardTitle>
            <Monitor className="h-4 w-4 text-purple-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {nodes[0]?.kubeletVersion || 'N/A'}
            </div>
            <p className="text-xs text-muted-foreground">
              Versão do Kubernetes
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">OS</CardTitle>
            <HardDrive className="h-4 w-4 text-orange-600" />
          </CardHeader>
          <CardContent>
            <div className="text-sm font-bold">
              {nodes[0]?.operatingSystem || 'N/A'}
            </div>
            <p className="text-xs text-muted-foreground">
              {nodes[0]?.osImage || 'Sistema operacional'}
            </p>
          </CardContent>
        </Card>
      </div>

      {/* Nodes Details */}
      <div className="space-y-4">
        <h2 className="text-xl font-semibold">Detalhes dos Nodes</h2>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {nodes.map((node, index) => (
            <Card key={index}>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Server className="h-5 w-5 mr-2" />
                  {node.name}
                </CardTitle>
                <CardDescription>
                  Informações detalhadas do node
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-2">
                <div className="grid grid-cols-2 gap-4 text-sm">
                  <div>
                    <span className="font-medium">Arquitetura:</span>{' '}
                    {node.architecture}
                  </div>
                  <div>
                    <span className="font-medium">OS:</span>{' '}
                    {node.operatingSystem}
                  </div>
                  <div>
                    <span className="font-medium">Kernel:</span>{' '}
                    {node.kernelVersion}
                  </div>
                  <div>
                    <span className="font-medium">Runtime:</span>{' '}
                    {node.containerRuntimeVersion}
                  </div>
                  <div>
                    <span className="font-medium">Kubelet:</span>{' '}
                    {node.kubeletVersion}
                  </div>
                  <div>
                    <span className="font-medium">Kube-Proxy:</span>{' '}
                    {node.kubeProxyVersion}
                  </div>
                  <div className="col-span-2">
                    <span className="font-medium">OS Image:</span>{' '}
                    {node.osImage}
                  </div>
                  <div className="col-span-2">
                    <span className="font-medium">Machine ID:</span>
                    <span className="font-mono text-xs ml-1">
                      {node.machineID}
                    </span>
                  </div>
                  <div className="col-span-2">
                    <span className="font-medium">System UUID:</span>
                    <span className="font-mono text-xs ml-1">
                      {node.systemUUID}
                    </span>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
}
