import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  ArrowLeft,
  FileText,
  Upload,
  Container,
  GitBranch,
  Database,
  Globe,
  Cloud,
} from 'lucide-react';

export function DaemonSetImportPage() {
  const navigate = useNavigate();
  const [selectedImportType, setSelectedImportType] = useState<string>('');

  const importTypes = [
    {
      value: 'yaml',
      label: 'YAML/JSON File',
      description: 'Importar de arquivo YAML ou JSON local',
      icon: FileText,
    },
    {
      value: 'ecs',
      label: 'AWS ECS Task Definition',
      description: 'Converter Task Definition do ECS para Kubernetes',
      icon: Cloud,
    },
    {
      value: 'url',
      label: 'URL Remote',
      description: 'Importar de URL remota (GitHub, GitLab, etc.)',
      icon: Globe,
    },
    {
      value: 'template',
      label: 'Template Predefinido',
      description: 'Usar template de DaemonSet comum',
      icon: Container,
    },
    {
      value: 'docker',
      label: 'Docker Image',
      description: 'Criar DaemonSet a partir de imagem Docker',
      icon: Database,
    },
    {
      value: 'git',
      label: 'Repositório Git',
      description: 'Clonar e deployar de repositório Git',
      icon: GitBranch,
    },
  ];

  const handleContinue = () => {
    if (selectedImportType) {
      // Navegar para a próxima etapa baseada no tipo selecionado
      navigate(`/workloads/daemonsets/import/${selectedImportType}`);
    }
  };

  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">
              <Upload className="h-8 w-8 mr-3 text-blue-600" />
              Assistente de Importação
            </h1>
            <p className="text-muted-foreground">
              Escolha o tipo de importação para criar um novo DaemonSet
            </p>
          </div>
        </div>
      </div>

      {/* Wizard Steps */}
      <div className="flex items-center space-x-4 text-sm">
        <div className="flex items-center">
          <div className="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-medium">
            1
          </div>
          <span className="ml-2 font-medium">Tipo de Importação</span>
        </div>
        <div className="h-px bg-gray-300 flex-1" />
        <div className="flex items-center">
          <div className="w-8 h-8 bg-gray-200 text-gray-600 rounded-full flex items-center justify-center font-medium">
            2
          </div>
          <span className="ml-2 text-gray-600">Configuração</span>
        </div>
        <div className="h-px bg-gray-300 flex-1" />
        <div className="flex items-center">
          <div className="w-8 h-8 bg-gray-200 text-gray-600 rounded-full flex items-center justify-center font-medium">
            3
          </div>
          <span className="ml-2 text-gray-600">Revisão</span>
        </div>
      </div>

      {/* Import Type Selection */}
      <Card>
        <CardHeader>
          <CardTitle>Selecione o Tipo de Importação</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <Select onValueChange={setSelectedImportType}>
            <SelectTrigger className="w-full">
              <SelectValue placeholder="Escolha como você deseja importar o DaemonSet..." />
            </SelectTrigger>
            <SelectContent>
              {importTypes.map((type) => (
                <SelectItem key={type.value} value={type.value}>
                  <div className="flex items-center">
                    <type.icon className="h-4 w-4 mr-2" />
                    {type.label}
                  </div>
                </SelectItem>
              ))}
            </SelectContent>
          </Select>

          {/* Detailed Options */}
          {selectedImportType && (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-6">
              {importTypes
                .filter((type) => type.value === selectedImportType)
                .map((type) => {
                  const IconComponent = type.icon;
                  return (
                    <Card
                      key={type.value}
                      className="border-2 border-blue-500 bg-blue-50"
                    >
                      <CardHeader className="pb-3">
                        <CardTitle className="flex items-center text-lg">
                          <IconComponent className="h-5 w-5 mr-2 text-blue-600" />
                          {type.label}
                        </CardTitle>
                      </CardHeader>
                      <CardContent>
                        <p className="text-sm text-muted-foreground">
                          {type.description}
                        </p>
                      </CardContent>
                    </Card>
                  );
                })}
            </div>
          )}

          {/* All Options Preview */}
          {!selectedImportType && (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-6">
              {importTypes.map((type) => {
                const IconComponent = type.icon;
                return (
                  <Card
                    key={type.value}
                    className="cursor-pointer hover:shadow-md transition-shadow"
                    onClick={() => setSelectedImportType(type.value)}
                  >
                    <CardHeader className="pb-3">
                      <CardTitle className="flex items-center text-lg">
                        <IconComponent className="h-5 w-5 mr-2 text-gray-600" />
                        {type.label}
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <p className="text-sm text-muted-foreground">
                        {type.description}
                      </p>
                    </CardContent>
                  </Card>
                );
              })}
            </div>
          )}
        </CardContent>
      </Card>

      {/* Navigation */}
      <div className="flex justify-end">
        <Button onClick={handleContinue} disabled={!selectedImportType}>
          Continuar
          <ArrowLeft className="h-4 w-4 ml-2 rotate-180" />
        </Button>
      </div>
    </div>
  );
}
