import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import {
  ArrowLeft,
  GitBranch,
  Layers,
  Server,
  Network,
  Globe,
  Settings,
} from 'lucide-react';

export function ServiceCreatePage() {
  const navigate = useNavigate();

  const serviceTypes = [
    {
      id: 'clusterip',
      title: 'ClusterIP',
      description: 'Serviço interno do cluster',
      icon: Layers,
      color: 'text-blue-600',
      bgColor: 'bg-blue-50',
      borderColor: 'border-blue-200',
      features: ['Acesso interno apenas', 'Comunicação entre pods', 'Padrão do Kubernetes'],
      path: '/service-discovery/services/create/clusterip',
    },
    {
      id: 'nodeport',
      title: 'NodePort',
      description: 'Exposto em porta do nó',
      icon: Server,
      color: 'text-green-600',
      bgColor: 'bg-green-50',
      borderColor: 'border-green-200',
      features: ['Acesso externo', 'Porta alta (30000-32767)', 'Ideal para desenvolvimento'],
      path: '/service-discovery/services/create/nodeport',
    },
    {
      id: 'loadbalancer',
      title: 'LoadBalancer',
      description: 'Balanceador de carga externo',
      icon: Network,
      color: 'text-purple-600',
      bgColor: 'bg-purple-50',
      borderColor: 'border-purple-200',
      features: ['IP externo dedicado', 'Integração com cloud', 'Produção'],
      path: '/service-discovery/services/create/loadbalancer',
    },
    {
      id: 'externalname',
      title: 'ExternalName',
      description: 'Alias para serviço externo',
      icon: Globe,
      color: 'text-orange-600',
      bgColor: 'bg-orange-50',
      borderColor: 'border-orange-200',
      features: ['Redirecionamento DNS', 'Serviços externos', 'Sem selector'],
      path: '/service-discovery/services/create/externalname',
    },
    {
      id: 'headless',
      title: 'Headless Service',
      description: 'Sem IP próprio (ClusterIP: None)',
      icon: Settings,
      color: 'text-gray-600',
      bgColor: 'bg-gray-50',
      borderColor: 'border-gray-200',
      features: ['Descoberta de pods direta', 'StatefulSets', 'Controle total de DNS'],
      path: '/service-discovery/services/create/headless',
    },
  ];

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-4">
          <Button variant="ghost" size="icon" onClick={() => navigate(-1)}>
            <ArrowLeft className="h-4 w-4" />
          </Button>
          <div>
            <h1 className="text-3xl font-bold text-foreground flex items-center">
              <GitBranch className="h-8 w-8 mr-3 text-blue-600" />
              Criar Service
            </h1>
            <p className="text-muted-foreground">
              Escolha o tipo de Service que deseja criar
            </p>
          </div>
        </div>
      </div>

      {/* Description */}
      <Card>
        <CardContent className="pt-6">
          <p className="text-muted-foreground text-center">
            Selecione o tipo de Service que melhor atende às suas necessidades. 
            Cada tipo oferece diferentes formas de expor e acessar seus pods.
          </p>
        </CardContent>
      </Card>

      {/* Service Type Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {serviceTypes.map((type) => {
          const IconComponent = type.icon;
          
          return (
            <Card
              key={type.id}
              className={`cursor-pointer transition-all duration-200 hover:shadow-lg hover:scale-105 ${type.borderColor} ${type.bgColor}`}
              onClick={() => navigate(type.path)}
            >
              <CardHeader className="text-center pb-4">
                <div className={`mx-auto mb-4 p-3 rounded-full bg-white shadow-sm w-fit`}>
                  <IconComponent className={`h-8 w-8 ${type.color}`} />
                </div>
                <CardTitle className="text-xl">{type.title}</CardTitle>
                <p className="text-muted-foreground text-sm">
                  {type.description}
                </p>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  <h4 className="font-medium text-sm text-gray-700">Características:</h4>
                  <ul className="text-sm text-muted-foreground space-y-1">
                    {type.features.map((feature, index) => (
                      <li key={index} className="flex items-center">
                        <div className={`w-1.5 h-1.5 rounded-full ${type.color.replace('text-', 'bg-')} mr-2`} />
                        {feature}
                      </li>
                    ))}
                  </ul>
                </div>
                
                <Button 
                  className="w-full mt-4" 
                  variant="outline"
                  onClick={() => navigate(type.path)}
                >
                  Selecionar
                </Button>
              </CardContent>
            </Card>
          );
        })}
      </div>

      {/* Actions */}
      <div className="flex items-center justify-between pt-6">
        <Button variant="outline" onClick={() => navigate(-1)}>
          <ArrowLeft className="h-4 w-4 mr-2" />
          Voltar
        </Button>
        <div className="text-sm text-muted-foreground">
          Escolha uma opção acima para continuar
        </div>
      </div>
    </div>
  );
}

export default ServiceCreatePage;