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,
  Container,
  Zap,
  Settings,
  Database,
  Code,
  Layers,
} from 'lucide-react';

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

  const deploymentTypes = [
    {
      id: 'simple',
      title: 'Deployment Simples',
      description: 'Aplicação web básica com configuração mínima',
      icon: Container,
      color: 'text-blue-600',
      bgColor: 'bg-blue-50',
      borderColor: 'border-blue-200',
      features: ['Container único', 'Configuração básica', 'Ideal para começar'],
      path: '/workloads/deployments/create/simple',
    },
    {
      id: 'webapp',
      title: 'Aplicação Web',
      description: 'Aplicação web com Service e configurações otimizadas',
      icon: Zap,
      color: 'text-green-600',
      bgColor: 'bg-green-50',
      borderColor: 'border-green-200',
      features: ['Service incluído', 'Health checks', 'Recursos configurados'],
      path: '/workloads/deployments/create/webapp',
    },
    {
      id: 'api',
      title: 'API/Microservice',
      description: 'API REST com configurações de produção',
      icon: Settings,
      color: 'text-purple-600',
      bgColor: 'bg-purple-50',
      borderColor: 'border-purple-200',
      features: ['Múltiplas réplicas', 'Probes avançados', 'Variáveis de ambiente'],
      path: '/workloads/deployments/create/api',
    },
    {
      id: 'database',
      title: 'Aplicação com Banco',
      description: 'App com banco de dados e volumes persistentes',
      icon: Database,
      color: 'text-orange-600',
      bgColor: 'bg-orange-50',
      borderColor: 'border-orange-200',
      features: ['Volumes persistentes', 'ConfigMaps/Secrets', 'Init containers'],
      path: '/workloads/deployments/create/database',
    },
    {
      id: 'worker',
      title: 'Worker/Background',
      description: 'Processamento em background e filas',
      icon: Layers,
      color: 'text-red-600',
      bgColor: 'bg-red-50',
      borderColor: 'border-red-200',
      features: ['Sem Service', 'Auto-scaling', 'Tolerância a falhas'],
      path: '/workloads/deployments/create/worker',
    },
    {
      id: 'advanced',
      title: 'Deployment Avançado',
      description: 'Configuração personalizada completa',
      icon: Code,
      color: 'text-gray-600',
      bgColor: 'bg-gray-50',
      borderColor: 'border-gray-200',
      features: ['Editor YAML', 'Configuração completa', 'Controle total'],
      path: '/workloads/deployments/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">
              <Container className="h-8 w-8 mr-3 text-blue-600" />
              Criar Deployment
            </h1>
            <p className="text-muted-foreground">
              Escolha o tipo de Deployment que deseja criar
            </p>
          </div>
        </div>
      </div>

      {/* Description */}
      <Card>
        <CardContent className="pt-6">
          <p className="text-muted-foreground text-center">
            Selecione o template que melhor atende ao seu caso de uso. 
            Cada opção oferece configurações otimizadas para diferentes tipos de aplicação.
          </p>
        </CardContent>
      </Card>

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