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,
  Key,
  Lock,
  Shield,
  Database,
  FileText,
  Container,
  Globe,
  Settings,
  Certificate,
  UserCheck,
  Eye,
  EyeOff,
} from 'lucide-react';

function SecretCreatePage() {
  const navigate = useNavigate();
  const [selectedSecretType, setSelectedSecretType] = useState<string>('');

  const secretTypes = [
    {
      value: 'generic',
      label: 'Generic Secret',
      description:
        'Dados arbitrários como chaves de API, tokens, configurações',
      icon: Key,
      color: 'bg-blue-50 border-blue-200 hover:bg-blue-100',
      iconColor: 'text-blue-600',
    },
    {
      value: 'docker-registry',
      label: 'Docker Registry',
      description: 'Credenciais para autenticação em registry Docker privado',
      icon: Container,
      color: 'bg-purple-50 border-purple-200 hover:bg-purple-100',
      iconColor: 'text-purple-600',
    },
    {
      value: 'tls',
      label: 'TLS Certificate',
      description: 'Certificados TLS/SSL para HTTPS e comunicação segura',
      icon: Certificate,
      color: 'bg-green-50 border-green-200 hover:bg-green-100',
      iconColor: 'text-green-600',
    },
    {
      value: 'ssh-auth',
      label: 'SSH Authentication',
      description: 'Chaves SSH para autenticação em repositórios Git',
      icon: Shield,
      color: 'bg-orange-50 border-orange-200 hover:bg-orange-100',
      iconColor: 'text-orange-600',
    },
    {
      value: 'basic-auth',
      label: 'Basic Authentication',
      description: 'Credenciais básicas de usuário e senha',
      icon: UserCheck,
      color: 'bg-yellow-50 border-yellow-200 hover:bg-yellow-100',
      iconColor: 'text-yellow-600',
    },
    {
      value: 'service-account-token',
      label: 'Service Account Token',
      description: 'Token para autenticação de Service Account',
      icon: Settings,
      color: 'bg-indigo-50 border-indigo-200 hover:bg-indigo-100',
      iconColor: 'text-indigo-600',
    },
  ];

  const handleContinue = () => {
    if (selectedSecretType) {
      // Navegar para a próxima etapa baseada no tipo selecionado
      navigate(`/secrets/new/${selectedSecretType}`);
    }
  };

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

      {/* Secret Type Selection */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <Shield className="h-5 w-5 mr-2" />
            Tipos de Secret Disponíveis
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {secretTypes.map((type) => {
              const IconComponent = type.icon;
              return (
                <div
                  key={type.value}
                  className={`p-6 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
                    selectedSecretType === type.value
                      ? `${type.color} border-current shadow-md`
                      : 'bg-white border-gray-200 hover:border-gray-300 hover:shadow-sm'
                  }`}
                  onClick={() => setSelectedSecretType(type.value)}
                >
                  <div className="flex items-start space-x-4">
                    <div className={`p-3 rounded-lg ${type.color}`}>
                      <Key className={`h-6 w-6 ${type.iconColor}`} />
                    </div>
                    <div className="flex-1 min-w-0">
                      <h3 className="font-semibold text-gray-900 mb-1">
                        {type.label}
                      </h3>
                      <p className="text-sm text-gray-600 leading-relaxed">
                        {type.description}
                      </p>
                    </div>
                  </div>
                  {selectedSecretType === type.value && (
                    <div className="mt-4 pt-4 border-t border-current/20">
                      <div className="flex items-center text-sm font-medium text-current">
                        <Key className="h-4 w-4 mr-1" />
                        Selecionado
                      </div>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </CardContent>
      </Card>

      {/* Navigation */}
      <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>
        <Button onClick={handleContinue} disabled={!selectedSecretType}>
          Continuar
        </Button>
      </div>
    </div>
  );
}

export default SecretCreatePage;
