import { useParams } from 'react-router-dom';
import { VisualProtocolRenderer } from '../protocols/yaml/VisualProtocolRenderer';
import { useProtocolList } from '../hooks/useProtocol';
import { Link } from 'react-router-dom';
import { Loader2 } from 'lucide-react';

const Protocolo = () => {
  const { id } = useParams<{ id: string }>();
  const { list, loading } = useProtocolList();

  if (!id) {
    // Mostrar lista de protocolos disponibles
    if (loading) {
      return (
        <div className="flex items-center justify-center py-12">
          <Loader2 className="w-8 h-8 animate-spin text-primary" />
        </div>
      );
    }

    return (
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold text-foreground mb-1">Protocolos</h1>
          <p className="text-muted-foreground text-sm">
            Selecciona un protocolo para ver su contenido
          </p>
        </div>

        <div className="grid gap-3">
          {list.map((protocol) => (
            <Link
              key={protocol.id}
              to={`/protocolo/${protocol.id}`}
              className="p-4 bg-card border border-border rounded-lg hover:border-primary/50 transition-colors"
            >
              <div className="flex items-center justify-between">
                <div>
                  <h3 className="font-semibold text-foreground">{protocol.titulo}</h3>
                  <p className="text-sm text-muted-foreground capitalize">{protocol.categoria.replace('-', ' ')}</p>
                </div>
                <span className={`px-2 py-1 text-xs rounded-full ${
                  protocol.urgencia === 'critica' 
                    ? 'bg-red-500/20 text-red-500'
                    : protocol.urgencia === 'alta'
                    ? 'bg-orange-500/20 text-orange-500'
                    : 'bg-yellow-500/20 text-yellow-500'
                }`}>
                  {protocol.urgencia}
                </span>
              </div>
            </Link>
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <VisualProtocolRenderer protocolId={id} />
    </div>
  );
};

export default Protocolo;