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 {
  ArrowLeft,
  FileText,
  Upload,
  Map,
  Settings,
  Code,
  Database,
  Globe,
  CheckCircle,
} from 'lucide-react';

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

  const importTypes = [
    {
      value: 'env',
      label: 'Arquivo .env',
      description: 'Importar variáveis de ambiente de arquivo .env',
      icon: FileText,
      color: 'text-green-600',
      bgColor: 'bg-green-50 border-green-200',
    },
    {
      value: 'json',
      label: 'Arquivo JSON',
      description: 'Importar configurações de arquivo JSON',
      icon: Code,
      color: 'text-blue-600',
      bgColor: 'bg-blue-50 border-blue-200',
    },
    {
      value: 'yaml',
      label: 'Arquivo YAML',
      description: 'Importar configurações de arquivo YAML',
      icon: Settings,
      color: 'text-orange-600',
      bgColor: 'bg-orange-50 border-orange-200',
    },
    {
      value: 'properties',
      label: 'Arquivo .properties',
      description: 'Importar propriedades Java (.properties)',
      icon: Database,
      color: 'text-purple-600',
      bgColor: 'bg-purple-50 border-purple-200',
    },
    {
      value: 'ini',
      label: 'Arquivo .ini',
      description: 'Importar configurações de arquivo INI',
      icon: FileText,
      color: 'text-indigo-600',
      bgColor: 'bg-indigo-50 border-indigo-200',
    },
    {
      value: 'url',
      label: 'URL Remota',
      description: 'Importar de URL remota (GitHub, GitLab, etc.)',
      icon: Globe,
      color: 'text-teal-600',
      bgColor: 'bg-teal-50 border-teal-200',
    },
  ];

  const handleContinue = () => {
    if (selectedImportType) {
      // Navegar para a próxima etapa baseada no tipo selecionado
      navigate(`/storage/configmaps/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" />
              Importar ConfigMap
            </h1>
            <p className="text-muted-foreground">
              Escolha o tipo de arquivo ou fonte para importar seu ConfigMap
            </p>
          </div>
        </div>
      </div>

      {/* Import Types */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {importTypes.map((type) => {
          const Icon = type.icon;
          const isSelected = selectedImportType === type.value;

          return (
            <Card
              key={type.value}
              className={`cursor-pointer transition-all duration-200 hover:shadow-lg ${
                isSelected
                  ? `ring-2 ring-blue-500 ${type.bgColor}`
                  : 'hover:shadow-md'
              }`}
              onClick={() => setSelectedImportType(type.value)}
            >
              <CardHeader className="pb-3">
                <div className="flex items-center justify-between">
                  <Icon className={`h-8 w-8 ${type.color}`} />
                  {isSelected && (
                    <CheckCircle className="h-6 w-6 text-blue-600" />
                  )}
                </div>
                <CardTitle className="text-lg">{type.label}</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  {type.description}
                </p>
              </CardContent>
            </Card>
          );
        })}
      </div>

      {/* Selected Type Info */}
      {selectedImportType && (
        <Card className="border-blue-200 bg-blue-50">
          <CardHeader>
            <CardTitle className="flex items-center text-blue-700">
              <Map className="h-5 w-5 mr-2" />
              Tipo Selecionado
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between">
              <div>
                <p className="font-medium text-blue-900">
                  {
                    importTypes.find((t) => t.value === selectedImportType)
                      ?.label
                  }
                </p>
                <p className="text-sm text-blue-700">
                  {
                    importTypes.find((t) => t.value === selectedImportType)
                      ?.description
                  }
                </p>
              </div>
              <Button
                onClick={handleContinue}
                className="bg-blue-600 hover:bg-blue-700"
              >
                Continuar
                <ArrowLeft className="h-4 w-4 ml-2 rotate-180" />
              </Button>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Instructions */}
      <Card className="border-gray-200">
        <CardHeader>
          <CardTitle className="flex items-center text-gray-700">
            <FileText className="h-5 w-5 mr-2" />
            Instruções
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-3 text-sm text-gray-600">
            <p>
              <strong>📄 .env:</strong> Perfeito para variáveis de ambiente
              (KEY=value)
            </p>
            <p>
              <strong>📋 JSON:</strong> Ideal para configurações estruturadas
            </p>
            <p>
              <strong>⚙️ YAML:</strong> Formato legível para configurações
              complexas
            </p>
            <p>
              <strong>☕ .properties:</strong> Padrão Java para configurações
            </p>
            <p>
              <strong>🔧 .ini:</strong> Formato de configuração Windows/Linux
            </p>
            <p>
              <strong>🌐 URL:</strong> Importar diretamente de repositórios
              remotos
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

export default ConfigMapImportPage;
