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,
  Globe,
  Shield,
  Zap,
  Settings,
  Network,
} from 'lucide-react';

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

  const ingressTypes = [
    {
      id: 'simple',
      title: 'Ingress Simples',
      description: 'Roteamento HTTP básico sem TLS',
      icon: Globe,
      color: 'text-blue-600',
      bgColor: 'bg-blue-50',
      borderColor: 'border-blue-200',
      features: ['HTTP simples', 'Uma ou múltiplas rotas', 'Configuração básica'],
      path: '/service-discovery/ingresses/create/simple',
    },
    {
      id: 'tls',
      title: 'Ingress com TLS',
      description: 'HTTPS com certificado existente',
      icon: Shield,
      color: 'text-green-600',
      bgColor: 'bg-green-50',
      borderColor: 'border-green-200',
      features: ['HTTPS seguro', 'Certificado existente', 'Redirecionamento automático'],
      path: '/service-discovery/ingresses/create/tls',
    },
    {
      id: 'letsencrypt-traefik',
      title: 'Let\'s Encrypt + Traefik',
      description: 'HTTPS automático com Traefik',
      icon: Zap,
      color: 'text-purple-600',
      bgColor: 'bg-purple-50',
      borderColor: 'border-purple-200',
      features: ['Certificado automático', 'ClusterIssuer', 'Template Traefik'],
      path: '/service-discovery/ingresses/create/letsencrypt-traefik',
    },
    {
      id: 'letsencrypt-nginx',
      title: 'Let\'s Encrypt + NGINX',
      description: 'HTTPS automático com NGINX',
      icon: Zap,
      color: 'text-orange-600',
      bgColor: 'bg-orange-50',
      borderColor: 'border-orange-200',
      features: ['Certificado automático', 'Issuer dedicado', 'Template NGINX'],
      path: '/service-discovery/ingresses/create/letsencrypt-nginx',
    },
    {
      id: 'advanced',
      title: 'Ingress Avançado',
      description: 'Configuração personalizada completa',
      icon: Settings,
      color: 'text-gray-600',
      bgColor: 'bg-gray-50',
      borderColor: 'border-gray-200',
      features: ['Múltiplas regras', 'Anotações customizadas', 'Configuração completa'],
      path: '/service-discovery/ingresses/create/advanced',
    },
  ];

  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">
              <Network className="h-8 w-8 mr-3 text-blue-600" />
              Criar Ingress
            </h1>
            <p className="text-muted-foreground">
              Escolha o tipo de Ingress que deseja criar
            </p>
          </div>
        </div>
      </div>

      {/* Description */}
      <Card>
        <CardContent className="pt-6">
          <p className="text-muted-foreground text-center">
            Selecione abaixo o tipo de Ingress que melhor atende às suas necessidades. 
            Cada opção oferece diferentes funcionalidades e níveis de configuração.
          </p>
        </CardContent>
      </Card>

      {/* Ingress Type Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {ingressTypes.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">Recursos:</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 IngressCreatePage;