import { FaseYAML, ICONOS } from './types';

interface ChecklistBlockProps {
  fase: FaseYAML;
}

export function ChecklistBlock({ fase }: ChecklistBlockProps) {
  return (
    <div className="space-y-3">
      {fase.items?.map((item, index) => (
        <div
          key={index}
          className={`flex items-start gap-3 p-3 rounded-lg border transition-all ${
            item.critico
              ? 'bg-red-50/50 border-red-200 dark:bg-red-950/30 dark:border-red-800'
              : 'bg-card border-border hover:border-primary/50'
          }`}
        >
          <div
            className={`w-6 h-6 rounded-full flex items-center justify-center text-sm ${
              item.critico
                ? 'bg-red-500 text-white'
                : 'bg-muted text-muted-foreground'
            }`}
          >
            {item.critico ? '!' : index + 1}
          </div>
          <div className="flex-1">
            <span
              className={`text-sm ${item.critico ? 'text-red-700 dark:text-red-300 font-medium' : 'text-foreground'}`}
            >
              {item.texto}
            </span>
            {item.nota && (
              <p className="text-xs text-muted-foreground mt-1">{item.nota}</p>
            )}
          </div>
        </div>
      ))}
    </div>
  );
}

interface DecisionBlockProps {
  fase: FaseYAML;
  onNavigate?: (destino: string) => void;
}

export function DecisionBlock({ fase, onNavigate }: DecisionBlockProps) {
  return (
    <div className="space-y-4">
      {fase.descripcion && (
        <p className="text-sm text-muted-foreground">{fase.descripcion}</p>
      )}
      
      <div className="p-4 bg-primary/10 border border-primary/30 rounded-lg">
        <p className="text-lg font-semibold text-foreground text-center">
          {fase.pregunta}
        </p>
      </div>

      <div className="grid grid-cols-2 gap-3">
        {fase.ramas?.map((rama, index) => (
          <button
            key={index}
            onClick={() => onNavigate?.(rama.destino)}
            className={`p-4 rounded-lg border-2 transition-all hover:scale-[1.02] ${
              index === 0
                ? 'bg-green-50 border-green-300 dark:bg-green-950/30 dark:border-green-700 hover:border-green-500'
                : 'bg-red-50 border-red-300 dark:bg-red-950/30 dark:border-red-700 hover:border-red-500'
            }`}
          >
            <span
              className={`text-lg font-bold ${
                index === 0 ? 'text-green-700 dark:text-green-400' : 'text-red-700 dark:text-red-400'
              }`}
            >
              {rama.condicion.toUpperCase()}
            </span>
            <p className="text-xs text-muted-foreground mt-1">→ Ir a fase {rama.destino}</p>
          </button>
        ))}
      </div>
    </div>
  );
}

interface TecnicaBlockProps {
  fase: FaseYAML;
}

export function TecnicaBlock({ fase }: TecnicaBlockProps) {
  return (
    <div className="space-y-4">
      {fase.descripcion && (
        <p className="text-sm text-muted-foreground">{fase.descripcion}</p>
      )}

      <div className="grid gap-2">
        {fase.parametros?.map((param, index) => (
          <div
            key={index}
            className={`flex justify-between items-center p-3 rounded-lg ${
              param.destacado
                ? 'bg-primary/10 border border-primary/30'
                : 'bg-muted/50 border border-border'
            }`}
          >
            <span className="text-sm text-muted-foreground">{param.label}</span>
            <span
              className={`font-mono font-semibold ${
                param.destacado ? 'text-primary' : 'text-foreground'
              }`}
            >
              {param.valor}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

interface InfoBlockProps {
  fase: FaseYAML;
}

export function InfoBlock({ fase }: InfoBlockProps) {
  return (
    <div className="space-y-2">
      {fase.descripcion && (
        <p className="text-sm text-muted-foreground">{fase.descripcion}</p>
      )}
    </div>
  );
}

export function FaseBlock({ fase, onNavigate }: { fase: FaseYAML; onNavigate?: (id: string) => void }) {
  const icono = ICONOS[fase.icono] || '📋';

  return (
    <div className="space-y-3">
      <div className="flex items-center gap-3">
        <span className="text-2xl">{icono}</span>
        <div>
          <h3 className="font-semibold text-foreground">{fase.nombre}</h3>
          <span className="text-xs px-2 py-0.5 rounded bg-muted text-muted-foreground capitalize">
            {fase.tipo}
          </span>
        </div>
      </div>

      {fase.tipo === 'checklist' && <ChecklistBlock fase={fase} />}
      {fase.tipo === 'decision' && <DecisionBlock fase={fase} onNavigate={onNavigate} />}
      {fase.tipo === 'tecnica' && <TecnicaBlock fase={fase} />}
      {fase.tipo === 'info' && <InfoBlock fase={fase} />}
    </div>
  );
}