import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { Bot, Zap, Brain, Activity, ChevronRight, Info, ChevronDown, ChevronUp, TrendingUp, BarChart2, Target, Repeat, AlertTriangle, Users, Sparkles, XCircle, AlertOctagon, ShieldAlert } from 'lucide-react';
import type { AnalysisData, HeatmapDataPoint, SubFactor, DrilldownDataPoint, OriginalQueueMetrics, AgenticTier, AgenticScoreBreakdown } from '../../types';
import {
  Card,
  Badge,
  TierBadge,
  SectionHeader,
  DistributionBar,
  Collapsible,
} from '../ui';
import {
  cn,
  COLORS,
  STATUS_CLASSES,
  TIER_CLASSES,
  getStatusFromScore,
  formatCurrency,
  formatNumber,
  formatPercent,
} from '../../config/designSystem';

// ============================================
// RED FLAGS CONFIGURATION AND DETECTION
// ============================================

// v3.5: Configuración de Red Flags
interface RedFlagConfig {
  id: string;
  label: string;
  shortLabel: string;
  threshold: number;
  operator: '>' | '<';
  getValue: (queue: OriginalQueueMetrics) => number;
  format: (value: number) => string;
  color: string;
  description: string;
}

const RED_FLAG_CONFIGS: RedFlagConfig[] = [
  {
    id: 'cv_high',
    label: 'CV AHT Crítico',
    shortLabel: 'CV',
    threshold: 120,
    operator: '>',
    getValue: (q) => q.cv_aht,
    format: (v) => `${v.toFixed(0)}%`,
    color: 'red',
    description: 'Variabilidad extrema - procesos impredecibles'
  },
  {
    id: 'transfer_high',
    label: 'Transfer Excesivo',
    shortLabel: 'Transfer',
    threshold: 50,
    operator: '>',
    getValue: (q) => q.transfer_rate,
    format: (v) => `${v.toFixed(0)}%`,
    color: 'orange',
    description: 'Alta complejidad - requiere escalado frecuente'
  },
  {
    id: 'volume_low',
    label: 'Volumen Insuficiente',
    shortLabel: 'Vol',
    threshold: 50,
    operator: '<',
    getValue: (q) => q.volume,
    format: (v) => v.toLocaleString(),
    color: 'slate',
    description: 'ROI negativo - volumen no justifica inversión'
  },
  {
    id: 'valid_low',
    label: 'Calidad Datos Baja',
    shortLabel: 'Valid',
    threshold: 30,
    operator: '<',
    getValue: (q) => q.volume > 0 ? (q.volumeValid / q.volume) * 100 : 0,
    format: (v) => `${v.toFixed(0)}%`,
    color: 'amber',
    description: 'Datos poco fiables - métricas distorsionadas'
  }
];

// v3.5: Detectar red flags de una cola
interface DetectedRedFlag {
  config: RedFlagConfig;
  value: number;
}

function detectRedFlags(queue: OriginalQueueMetrics): DetectedRedFlag[] {
  const flags: DetectedRedFlag[] = [];

  for (const config of RED_FLAG_CONFIGS) {
    const value = config.getValue(queue);
    const hasFlag = config.operator === '>'
      ? value > config.threshold
      : value < config.threshold;

    if (hasFlag) {
      flags.push({ config, value });
    }
  }

  return flags;
}

// v3.5: Componente de badge de Red Flag individual
function RedFlagBadge({ flag, size = 'sm' }: { flag: DetectedRedFlag; size?: 'sm' | 'md' }) {
  const sizeClasses = size === 'md' ? 'px-2 py-1 text-xs' : 'px-1.5 py-0.5 text-[10px]';

  return (
    <span
      className={`inline-flex items-center gap-1 ${sizeClasses} rounded bg-red-100 text-red-700 font-medium`}
      title={`${flag.config.label}: ${flag.config.format(flag.value)} (umbral: ${flag.config.operator}${flag.config.threshold})`}
    >
      <XCircle className="w-3 h-3" />
      {flag.config.shortLabel}: {flag.config.format(flag.value)}
    </span>
  );
}

// v3.5: Componente de lista de Red Flags de una cola
function RedFlagsList({ queue, compact = false }: { queue: OriginalQueueMetrics; compact?: boolean }) {
  const flags = detectRedFlags(queue);

  if (flags.length === 0) return null;

  if (compact) {
    return (
      <div className="flex flex-wrap gap-1">
        {flags.map(flag => (
          <RedFlagBadge key={flag.config.id} flag={flag} size="sm" />
        ))}
      </div>
    );
  }

  return (
    <div className="space-y-1">
      {flags.map(flag => (
        <div key={flag.config.id} className="flex items-center gap-2 text-xs">
          <XCircle className="w-3 h-3 text-red-500 flex-shrink-0" />
          <span className="text-red-700 font-medium">{flag.config.label}:</span>
          <span className="text-red-600">{flag.config.format(flag.value)}</span>
          <span className="text-gray-400">(umbral: {flag.config.operator}{flag.config.threshold})</span>
        </div>
      ))}
    </div>
  );
}

interface AgenticReadinessTabProps {
  data: AnalysisData;
  onTabChange?: (tab: string) => void;
}

// Factor configuration with weights (must sum to 1.0)
interface FactorConfig {
  id: string;
  title: string;
  weight: number;
  icon: React.ElementType;
  color: string;
  description: string;
  methodology: string;
  benchmark: string;
  implications: { high: string; low: string };
}

const FACTOR_CONFIGS: FactorConfig[] = [
  {
    id: 'predictibilidad',
    title: 'Predictibilidad',
    weight: 0.30,
    icon: Brain,
    color: '#6D84E3',
    description: 'Consistencia en tiempos de gestión',
    methodology: 'Score = 10 - (CV_AHT / 10). CV AHT < 30% → Score > 7',
    benchmark: 'CV AHT óptimo < 25%',
    implications: { high: 'Tiempos consistentes, ideal para IA', low: 'Requiere estandarización' }
  },
  {
    id: 'complejidad_inversa',
    title: 'Simplicidad',
    weight: 0.20,
    icon: Zap,
    color: '#10B981',
    description: 'Bajo nivel de juicio humano requerido',
    methodology: 'Score = 10 - (Tasa_Transfer × 0.4). Transfer <10% → Score > 6',
    benchmark: 'Transferencias óptimas <10%',
    implications: { high: 'Procesos simples, automatizables', low: 'Alta complejidad, requiere copilot' }
  },
  {
    id: 'repetitividad',
    title: 'Volumen',
    weight: 0.25,
    icon: Repeat,
    color: '#F59E0B',
    description: 'Escala para justificar inversión',
    methodology: 'Score = log10(Volumen) normalizado. >5000 → 10, <100 → 2',
    benchmark: 'ROI positivo requiere >500/mes',
    implications: { high: 'Alto volumen justifica inversión', low: 'Considerar soluciones compartidas' }
  },
  {
    id: 'roi_potencial',
    title: 'ROI Potencial',
    weight: 0.25,
    icon: TrendingUp,
    color: '#8B5CF6',
    description: 'Retorno económico esperado',
    methodology: 'Score basado en coste anual total. >€500K → 10',
    benchmark: 'ROI >150% a 12 meses',
    implications: { high: 'Caso de negocio sólido', low: 'ROI marginal, evaluar otros beneficios' }
  }
];

// v3.4: Helper para obtener estilo de Tier
function getTierStyle(tier: AgenticTier): { bg: string; text: string; icon: React.ReactNode; label: string } {
  switch (tier) {
    case 'AUTOMATE':
      return {
        bg: 'bg-emerald-100',
        text: 'text-emerald-700',
        icon: <Sparkles className="w-3 h-3" />,
        label: 'Automatizar'
      };
    case 'ASSIST':
      return {
        bg: 'bg-blue-100',
        text: 'text-blue-700',
        icon: <Bot className="w-3 h-3" />,
        label: 'Asistir'
      };
    case 'AUGMENT':
      return {
        bg: 'bg-amber-100',
        text: 'text-amber-700',
        icon: <TrendingUp className="w-3 h-3" />,
        label: 'Optimizar'
      };
    case 'HUMAN-ONLY':
      return {
        bg: 'bg-gray-100',
        text: 'text-gray-600',
        icon: <Users className="w-3 h-3" />,
        label: 'Humano'
      };
    default:
      return {
        bg: 'bg-gray-100',
        text: 'text-gray-600',
        icon: null,
        label: tier
      };
  }
}

// v3.4: Componente de badge de Tier
function TierBadge({ tier, size = 'sm' }: { tier: AgenticTier; size?: 'sm' | 'md' }) {
  const style = getTierStyle(tier);
  const sizeClasses = size === 'md' ? 'px-2.5 py-1 text-xs' : 'px-2 py-0.5 text-xs';

  return (
    <span className={`inline-flex items-center gap-1 ${sizeClasses} rounded font-medium ${style.bg} ${style.text}`}>
      {style.icon}
      {style.label}
    </span>
  );
}

// v3.4: Componente de desglose de score
function ScoreBreakdownTooltip({ breakdown }: { breakdown: AgenticScoreBreakdown }) {
  return (
    <div className="text-xs space-y-1">
      <div className="flex justify-between gap-4">
        <span>Predictibilidad (30%)</span>
        <span className="font-medium">{breakdown.predictibilidad.toFixed(1)}</span>
      </div>
      <div className="flex justify-between gap-4">
        <span>Resolutividad (25%)</span>
        <span className="font-medium">{breakdown.resolutividad.toFixed(1)}</span>
      </div>
      <div className="flex justify-between gap-4">
        <span>Volumen (25%)</span>
        <span className="font-medium">{breakdown.volumen.toFixed(1)}</span>
      </div>
      <div className="flex justify-between gap-4">
        <span>Calidad Datos (10%)</span>
        <span className="font-medium">{breakdown.calidadDatos.toFixed(1)}</span>
      </div>
      <div className="flex justify-between gap-4">
        <span>Simplicidad (10%)</span>
        <span className="font-medium">{breakdown.simplicidad.toFixed(1)}</span>
      </div>
    </div>
  );
}

// Tooltip component for methodology
function InfoTooltip({ content, children }: { content: React.ReactNode; children: React.ReactNode }) {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div className="relative inline-block">
      <div
        onMouseEnter={() => setIsVisible(true)}
        onMouseLeave={() => setIsVisible(false)}
        className="cursor-help"
      >
        {children}
      </div>
      {isVisible && (
        <div className="absolute z-50 bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 p-3 bg-gray-800 text-white text-xs rounded-lg shadow-lg">
          {content}
          <div className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-slate-800" />
        </div>
      )}
    </div>
  );
}

// Calcular factores desde datos reales
function calculateFactorsFromData(heatmapData: HeatmapDataPoint[]): { id: string; score: number; detail: string }[] {
  if (heatmapData.length === 0) return [];

  const totalVolume = heatmapData.reduce((sum, h) => sum + h.volume, 0) || 1;

  // Predictibilidad: basada en CV AHT promedio ponderado
  const avgCvAht = heatmapData.reduce((sum, h) => sum + (h.variability.cv_aht * h.volume), 0) / totalVolume;
  const predictScore = Math.max(0, Math.min(10, 10 - (avgCvAht / 10)));

  // Simplicidad: basada en tasa de transferencias promedio ponderada
  const avgTransfer = heatmapData.reduce((sum, h) => sum + (h.variability.transfer_rate * h.volume), 0) / totalVolume;
  const simplicityScore = Math.max(0, Math.min(10, 10 - (avgTransfer * 0.4)));

  // Volumen: basado en volumen total (escala logarítmica)
  const volScore = totalVolume > 50000 ? 10 :
                   totalVolume > 20000 ? 9 :
                   totalVolume > 10000 ? 8 :
                   totalVolume > 5000 ? 7 :
                   totalVolume > 2000 ? 6 :
                   totalVolume > 1000 ? 5 :
                   totalVolume > 500 ? 4 :
                   totalVolume > 100 ? 3 : 2;

  // ROI potencial: basado en coste anual total
  const totalCost = heatmapData.reduce((sum, h) => sum + (h.annual_cost || h.volume * h.aht_seconds * 0.005), 0);
  const roiScore = totalCost > 1000000 ? 10 :
                   totalCost > 500000 ? 9 :
                   totalCost > 300000 ? 8 :
                   totalCost > 200000 ? 7 :
                   totalCost > 100000 ? 6 :
                   totalCost > 50000 ? 5 : 4;

  return [
    { id: 'predictibilidad', score: predictScore, detail: `CV AHT: ${avgCvAht.toFixed(0)}%` },
    { id: 'complejidad_inversa', score: simplicityScore, detail: `Transfer: ${avgTransfer.toFixed(0)}%` },
    { id: 'repetitividad', score: volScore, detail: `${totalVolume.toLocaleString()} int.` },
    { id: 'roi_potencial', score: roiScore, detail: `€${(totalCost/1000).toFixed(0)}K` }
  ];
}

// Calculate weighted global score from factors
function calculateWeightedScore(factors: { id: string; score: number }[]): number {
  if (factors.length === 0) return 5;

  let weightedSum = 0;
  let totalWeight = 0;

  for (const factor of factors) {
    const config = FACTOR_CONFIGS.find(c => c.id === factor.id);
    if (config) {
      weightedSum += factor.score * config.weight;
      totalWeight += config.weight;
    }
  }

  return totalWeight > 0 ? weightedSum / totalWeight * 10 : 5; // Normalize to ensure weights sum correctly
}

// v3.4: Tipo para datos de Tier
interface TierDataType {
  AUTOMATE: { count: number; volume: number };
  ASSIST: { count: number; volume: number };
  AUGMENT: { count: number; volume: number };
  'HUMAN-ONLY': { count: number; volume: number };
}

// Colores corporativos
const COLORS = {
  primary: '#6d84e3',
  dark: '#3f3f3f',
  medium: '#b1b1b0',
  light: '#e4e3e3',
  white: '#ffffff'
};

// ============================================
// v3.10: OPPORTUNITY BUBBLE CHART
// ============================================

// Colores por tier para el bubble chart
const TIER_BUBBLE_COLORS: Record<AgenticTier, { fill: string; stroke: string }> = {
  'AUTOMATE': { fill: '#10b981', stroke: '#059669' },  // Emerald
  'ASSIST': { fill: '#6d84e3', stroke: '#4f63b8' },    // Primary blue
  'AUGMENT': { fill: '#f59e0b', stroke: '#d97706' },   // Amber
  'HUMAN-ONLY': { fill: '#94a3b8', stroke: '#64748b' } // Slate
};

// Calcular radio con escala logarítmica
function calcularRadioBurbuja(volumen: number, maxVolumen: number): number {
  const minRadio = 6;
  const maxRadio = 35;
  if (volumen <= 0 || maxVolumen <= 0) return minRadio;
  const escala = Math.log10(volumen + 1) / Math.log10(maxVolumen + 1);
  return minRadio + (maxRadio - minRadio) * escala;
}

// Calcular ahorro TCO por cola
function calcularAhorroTCO(queue: OriginalQueueMetrics): number {
  // CPI Config similar a RoadmapTab
  const CPI_HUMANO = 2.33;
  const CPI_BOT = 0.15;
  const CPI_ASSIST = 1.50;
  const CPI_AUGMENT = 2.00;

  const ratesByTier: Record<AgenticTier, { rate: number; cpi: number }> = {
    'AUTOMATE': { rate: 0.70, cpi: CPI_BOT },
    'ASSIST': { rate: 0.30, cpi: CPI_ASSIST },
    'AUGMENT': { rate: 0.15, cpi: CPI_AUGMENT },
    'HUMAN-ONLY': { rate: 0, cpi: CPI_HUMANO }
  };

  const config = ratesByTier[queue.tier];
  // Ahorro anual = volumen × 12 × rate × (CPI_humano - CPI_target)
  const ahorroAnual = queue.volume * 12 * config.rate * (CPI_HUMANO - config.cpi);
  return Math.round(ahorroAnual);
}

// Interfaz para datos de burbuja
interface BubbleData {
  id: string;
  name: string;
  skillName: string;
  score: number;
  tier: AgenticTier;
  volume: number;
  ahorro: number;
  cv: number;
  fcr: number;
  transfer: number;
  x: number;  // Posición X (score)
  y: number;  // Posición Y (ahorro)
  radius: number;
}

// Componente del Bubble Chart de Oportunidades
function OpportunityBubbleChart({ drilldownData }: { drilldownData: DrilldownDataPoint[] }) {
  // Estados para filtros
  const [tierFilter, setTierFilter] = useState<'Todos' | AgenticTier>('Todos');
  const [minAhorro, setMinAhorro] = useState<number>(0);
  const [minVolumen, setMinVolumen] = useState<number>(0);
  const [hoveredBubble, setHoveredBubble] = useState<BubbleData | null>(null);
  const [selectedBubble, setSelectedBubble] = useState<BubbleData | null>(null);

  // Responsive chart dimensions
  const containerRef = React.useRef<HTMLDivElement>(null);
  const [containerWidth, setContainerWidth] = React.useState(700);

  React.useEffect(() => {
    const updateWidth = () => {
      if (containerRef.current) {
        const width = containerRef.current.offsetWidth;
        setContainerWidth(Math.max(320, width - 32)); // min 320px, account for padding
      }
    };
    updateWidth();
    window.addEventListener('resize', updateWidth);
    return () => window.removeEventListener('resize', updateWidth);
  }, []);

  // Dimensiones del chart - responsive
  const chartWidth = containerWidth;
  const chartHeight = Math.min(400, containerWidth * 0.6); // aspect ratio ~1.67:1
  const margin = {
    top: 30,
    right: containerWidth < 500 ? 15 : 30,
    bottom: 50,
    left: containerWidth < 500 ? 45 : 70
  };
  const innerWidth = chartWidth - margin.left - margin.right;
  const innerHeight = chartHeight - margin.top - margin.bottom;

  // Extraer todas las colas y calcular ahorro
  const allQueues = React.useMemo(() => {
    return drilldownData.flatMap(skill =>
      skill.originalQueues.map(q => ({
        ...q,
        skillName: skill.skill,
        ahorro: calcularAhorroTCO(q)
      }))
    );
  }, [drilldownData]);

  // Filtrar colas según criterios
  const filteredQueues = React.useMemo(() => {
    return allQueues
      .filter(q => q.tier !== 'HUMAN-ONLY') // Excluir HUMAN-ONLY (no tienen ahorro)
      .filter(q => q.ahorro > minAhorro)
      .filter(q => q.volume >= minVolumen)
      .filter(q => tierFilter === 'Todos' || q.tier === tierFilter)
      .sort((a, b) => b.ahorro - a.ahorro) // Ordenar por ahorro descendente
      .slice(0, 20); // Mostrar hasta 20 burbujas
  }, [allQueues, tierFilter, minAhorro, minVolumen]);

  // Calcular escalas
  const maxVolumen = Math.max(...allQueues.map(q => q.volume), 1);
  const maxAhorro = Math.max(...filteredQueues.map(q => q.ahorro), 1);

  // Crear datos de burbujas con posiciones
  const bubbleData: BubbleData[] = React.useMemo(() => {
    return filteredQueues.map(q => ({
      id: q.original_queue_id,
      name: q.original_queue_id,
      skillName: q.skillName,
      score: q.agenticScore,
      tier: q.tier,
      volume: q.volume,
      ahorro: q.ahorro,
      cv: q.cv_aht,
      fcr: q.fcr_rate,
      transfer: q.transfer_rate,
      // Escala X: score 0-10 -> 0-innerWidth
      x: (q.agenticScore / 10) * innerWidth,
      // Escala Y: ahorro 0-max -> innerHeight-0 (invertido para que arriba sea más)
      y: innerHeight - (q.ahorro / maxAhorro) * innerHeight,
      radius: calcularRadioBurbuja(q.volume, maxVolumen)
    }));
  }, [filteredQueues, maxVolumen, maxAhorro, innerWidth, innerHeight]);

  // v3.12: Contadores por cuadrante sincronizados con filtros
  // Umbrales fijos para score, umbral relativo para ahorro (30% del max visible)
  const SCORE_AUTOMATE = 7.5;
  const SCORE_ASSIST = 5.5;
  const AHORRO_THRESHOLD_PCT = 0.3;

  const quadrantStats = React.useMemo(() => {
    const ahorroThreshold = maxAhorro * AHORRO_THRESHOLD_PCT;

    // Cuadrantes basados en posición visual
    const quickWins = bubbleData.filter(b =>
      b.score >= SCORE_AUTOMATE && b.ahorro >= ahorroThreshold
    );
    const highPotential = bubbleData.filter(b =>
      b.score >= SCORE_ASSIST && b.score < SCORE_AUTOMATE && b.ahorro >= ahorroThreshold
    );
    const lowHanging = bubbleData.filter(b =>
      b.score >= SCORE_AUTOMATE && b.ahorro < ahorroThreshold
    );
    const nurture = bubbleData.filter(b =>
      b.score < SCORE_ASSIST
    );
    const backlog = bubbleData.filter(b =>
      b.score >= SCORE_ASSIST && b.score < SCORE_AUTOMATE && b.ahorro < ahorroThreshold
    );

    const sumAhorro = (items: BubbleData[]) => items.reduce((sum, b) => sum + b.ahorro, 0);

    return {
      quickWins: { items: quickWins, count: quickWins.length, ahorro: sumAhorro(quickWins) },
      highPotential: { items: highPotential, count: highPotential.length, ahorro: sumAhorro(highPotential) },
      lowHanging: { items: lowHanging, count: lowHanging.length, ahorro: sumAhorro(lowHanging) },
      nurture: { items: nurture, count: nurture.length, ahorro: sumAhorro(nurture) },
      backlog: { items: backlog, count: backlog.length, ahorro: sumAhorro(backlog) },
      total: bubbleData.length,
      totalAhorro: sumAhorro(bubbleData),
      ahorroThreshold
    };
  }, [bubbleData, maxAhorro]);

  const sumAhorro = (items: BubbleData[]) => items.reduce((sum, b) => sum + b.ahorro, 0);

  // Indicador de filtros activos
  const hasActiveFilters = minAhorro > 0 || minVolumen > 0 || tierFilter !== 'Todos';

  const formatCurrency = (val: number) => {
    if (val >= 1000000) return `€${(val / 1000000).toFixed(1)}M`;
    if (val >= 1000) return `€${Math.round(val / 1000)}K`;
    return `€${val}`;
  };

  const formatVolume = (v: number) => {
    if (v >= 1000000) return `${(v / 1000000).toFixed(1)}M`;
    if (v >= 1000) return `${Math.round(v / 1000)}K`;
    return v.toString();
  };

  // Umbral de score para línea vertical AUTOMATE
  const automateThresholdX = (7.5 / 10) * innerWidth;
  const assistThresholdX = (5.5 / 10) * innerWidth;

  return (
    <div ref={containerRef} className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
      {/* Header */}
      <div className="px-3 sm:px-4 py-3 border-b" style={{ backgroundColor: COLORS.light }}>
        <div className="flex items-center justify-between gap-2">
          <div className="flex items-center gap-2 min-w-0">
            <Target className="w-5 h-5 flex-shrink-0" style={{ color: COLORS.primary }} />
            <h3 className="font-bold text-sm sm:text-base truncate" style={{ color: COLORS.dark }}>
              Mapa de Oportunidades
            </h3>
          </div>
          <span className="text-xs px-2 py-1 rounded-full font-medium flex-shrink-0" style={{ backgroundColor: COLORS.primary, color: 'white' }}>
            {bubbleData.length} colas
          </span>
        </div>
        <p className="text-[10px] sm:text-xs mt-1" style={{ color: COLORS.medium }}>
          Tamaño = Volumen · Color = Tier · Posición = Score vs Ahorro TCO
        </p>
      </div>

      {/* Filtros */}
      <div className="px-3 sm:px-4 py-2 border-b border-gray-100 flex flex-wrap gap-2 sm:gap-4 items-center bg-gray-50/50">
        <div className="flex items-center gap-2">
          <span className="text-xs font-medium" style={{ color: COLORS.dark }}>Tier:</span>
          <select
            value={tierFilter}
            onChange={(e) => setTierFilter(e.target.value as 'Todos' | AgenticTier)}
            className="text-xs border border-gray-200 rounded px-2 py-1"
          >
            <option value="Todos">Todos</option>
            <option value="AUTOMATE">AUTOMATE</option>
            <option value="ASSIST">ASSIST</option>
            <option value="AUGMENT">AUGMENT</option>
          </select>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-xs font-medium" style={{ color: COLORS.dark }}>Ahorro mín:</span>
          <select
            value={minAhorro}
            onChange={(e) => setMinAhorro(Number(e.target.value))}
            className="text-xs border border-gray-200 rounded px-2 py-1"
          >
            <option value={0}>€0</option>
            <option value={10000}>€10K</option>
            <option value={50000}>€50K</option>
            <option value={100000}>€100K</option>
          </select>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-xs font-medium" style={{ color: COLORS.dark }}>Volumen mín:</span>
          <select
            value={minVolumen}
            onChange={(e) => setMinVolumen(Number(e.target.value))}
            className="text-xs border border-gray-200 rounded px-2 py-1"
          >
            <option value={0}>0</option>
            <option value={1000}>1K</option>
            <option value={5000}>5K</option>
            <option value={10000}>10K</option>
          </select>
        </div>

        {/* v3.12: Indicador de filtros activos con resumen de cuadrantes */}
        {hasActiveFilters && (
          <div className="ml-auto flex items-center gap-2 text-xs bg-amber-50 text-amber-700 px-2 py-1 rounded border border-amber-200">
            <span className="font-medium">Filtros activos:</span>
            {minAhorro > 0 && <span>Ahorro ≥€{minAhorro >= 1000 ? `${minAhorro/1000}K` : minAhorro}</span>}
            {minVolumen > 0 && <span>Vol ≥{minVolumen >= 1000 ? `${minVolumen/1000}K` : minVolumen}</span>}
            {tierFilter !== 'Todos' && <span>Tier: {tierFilter}</span>}
            <span className="text-amber-500">|</span>
            <span>{quadrantStats.total} de {allQueues.filter(q => q.tier !== 'HUMAN-ONLY').length} colas</span>
          </div>
        )}
      </div>

      {/* SVG Chart */}
      <div className="px-2 sm:px-4 py-4 relative overflow-x-auto">
        <svg width={chartWidth} height={chartHeight} className="mx-auto min-w-[320px]">
          {/* Definiciones para gradientes y filtros */}
          <defs>
            <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
              <feDropShadow dx="1" dy="1" stdDeviation="2" floodOpacity="0.2" />
            </filter>
          </defs>

          <g transform={`translate(${margin.left}, ${margin.top})`}>
            {/* Fondo de cuadrantes */}
            {/* Quick Wins (top-right) */}
            <rect
              x={automateThresholdX}
              y={0}
              width={innerWidth - automateThresholdX}
              height={innerHeight * 0.7}
              fill="#dcfce7"
              opacity={0.3}
            />
            {/* High Potential (top-center) */}
            <rect
              x={assistThresholdX}
              y={0}
              width={automateThresholdX - assistThresholdX}
              height={innerHeight * 0.7}
              fill="#dbeafe"
              opacity={0.3}
            />
            {/* Nurture (left) */}
            <rect
              x={0}
              y={0}
              width={assistThresholdX}
              height={innerHeight}
              fill="#fef3c7"
              opacity={0.2}
            />

            {/* Líneas de umbral verticales */}
            <line
              x1={automateThresholdX}
              y1={0}
              x2={automateThresholdX}
              y2={innerHeight}
              stroke="#10b981"
              strokeWidth={2}
              strokeDasharray="6,3"
              opacity={0.7}
            />
            <line
              x1={assistThresholdX}
              y1={0}
              x2={assistThresholdX}
              y2={innerHeight}
              stroke="#6d84e3"
              strokeWidth={1.5}
              strokeDasharray="4,4"
              opacity={0.5}
            />

            {/* v3.12: Etiquetas de cuadrante sincronizadas con filtros */}
            {/* Quick Wins (top-right) */}
            <text x={automateThresholdX + 10} y={15} fontSize={10} fill="#059669" fontWeight="bold">
              🎯 QUICK WINS
            </text>
            <text x={automateThresholdX + 10} y={28} fontSize={9} fill="#059669">
              {quadrantStats.quickWins.count} colas · {formatCurrency(quadrantStats.quickWins.ahorro)}
            </text>

            {/* Alto Potencial (top-center) */}
            <text x={assistThresholdX + 10} y={15} fontSize={10} fill="#4f63b8" fontWeight="bold">
              ⚡ ALTO POTENCIAL
            </text>
            <text x={assistThresholdX + 10} y={28} fontSize={9} fill="#4f63b8">
              {quadrantStats.highPotential.count} colas · {formatCurrency(quadrantStats.highPotential.ahorro)}
            </text>

            {/* Desarrollar / Nurture (left column) */}
            <text x={10} y={15} fontSize={10} fill="#92400e" fontWeight="bold">
              📈 DESARROLLAR
            </text>
            <text x={10} y={28} fontSize={9} fill="#92400e">
              {quadrantStats.nurture.count} colas · {formatCurrency(quadrantStats.nurture.ahorro)}
            </text>

            {/* Low Hanging Fruit (bottom-right) - Fácil pero bajo ahorro */}
            {quadrantStats.lowHanging.count > 0 && (
              <>
                <text x={automateThresholdX + 10} y={innerHeight * 0.75 + 15} fontSize={9} fill="#6b7280" fontWeight="medium">
                  ✅ FÁCIL IMPL.
                </text>
                <text x={automateThresholdX + 10} y={innerHeight * 0.75 + 27} fontSize={8} fill="#9ca3af">
                  {quadrantStats.lowHanging.count} · {formatCurrency(quadrantStats.lowHanging.ahorro)}
                </text>
              </>
            )}

            {/* Backlog (bottom-center) */}
            {quadrantStats.backlog.count > 0 && (
              <>
                <text x={assistThresholdX + 10} y={innerHeight * 0.75 + 15} fontSize={9} fill="#6b7280" fontWeight="medium">
                  📋 BACKLOG
                </text>
                <text x={assistThresholdX + 10} y={innerHeight * 0.75 + 27} fontSize={8} fill="#9ca3af">
                  {quadrantStats.backlog.count} · {formatCurrency(quadrantStats.backlog.ahorro)}
                </text>
              </>
            )}

            {/* Ejes */}
            {/* Eje X */}
            <line x1={0} y1={innerHeight} x2={innerWidth} y2={innerHeight} stroke={COLORS.medium} strokeWidth={1} />
            {/* Ticks X */}
            {[0, 2, 4, 5.5, 6, 7.5, 8, 10].map(score => {
              const x = (score / 10) * innerWidth;
              return (
                <g key={score}>
                  <line x1={x} y1={innerHeight} x2={x} y2={innerHeight + 5} stroke={COLORS.medium} />
                  <text
                    x={x}
                    y={innerHeight + 18}
                    textAnchor="middle"
                    fontSize={10}
                    fill={score === 7.5 ? '#059669' : score === 5.5 ? '#4f63b8' : COLORS.dark}
                    fontWeight={score === 7.5 || score === 5.5 ? 'bold' : 'normal'}
                  >
                    {score}
                  </text>
                </g>
              );
            })}
            <text x={innerWidth / 2} y={innerHeight + 38} textAnchor="middle" fontSize={11} fill={COLORS.dark} fontWeight="medium">
              Agentic Score
            </text>

            {/* Eje Y */}
            <line x1={0} y1={0} x2={0} y2={innerHeight} stroke={COLORS.medium} strokeWidth={1} />
            {/* Ticks Y */}
            {[0, 0.25, 0.5, 0.75, 1].map(pct => {
              const y = innerHeight - pct * innerHeight;
              const value = pct * maxAhorro;
              return (
                <g key={pct}>
                  <line x1={-5} y1={y} x2={0} y2={y} stroke={COLORS.medium} />
                  <text x={-10} y={y + 4} textAnchor="end" fontSize={9} fill={COLORS.dark}>
                    {formatCurrency(value)}
                  </text>
                </g>
              );
            })}
            <text
              x={-45}
              y={innerHeight / 2}
              textAnchor="middle"
              fontSize={11}
              fill={COLORS.dark}
              fontWeight="medium"
              transform={`rotate(-90, -45, ${innerHeight / 2})`}
            >
              Ahorro TCO Anual
            </text>

            {/* Burbujas */}
            {bubbleData.map((bubble, idx) => (
              <g
                key={bubble.id}
                onMouseEnter={() => setHoveredBubble(bubble)}
                onMouseLeave={() => setHoveredBubble(null)}
                onClick={() => setSelectedBubble(bubble)}
                style={{ cursor: 'pointer' }}
              >
                <circle
                  cx={bubble.x}
                  cy={bubble.y}
                  r={bubble.radius}
                  fill={TIER_BUBBLE_COLORS[bubble.tier].fill}
                  stroke={hoveredBubble?.id === bubble.id ? COLORS.dark : TIER_BUBBLE_COLORS[bubble.tier].stroke}
                  strokeWidth={hoveredBubble?.id === bubble.id ? 3 : 1.5}
                  opacity={hoveredBubble && hoveredBubble.id !== bubble.id ? 0.4 : 0.85}
                  filter={hoveredBubble?.id === bubble.id ? 'url(#shadow)' : undefined}
                  style={{ transition: 'all 0.2s ease' }}
                />
                {/* Etiqueta si burbuja es grande */}
                {bubble.radius > 18 && (
                  <text
                    x={bubble.x}
                    y={bubble.y + 3}
                    textAnchor="middle"
                    fontSize={8}
                    fill="white"
                    fontWeight="bold"
                    style={{ pointerEvents: 'none' }}
                  >
                    {bubble.name.length > 8 ? bubble.name.substring(0, 6) + '…' : bubble.name}
                  </text>
                )}
              </g>
            ))}

            {/* Mensaje si no hay datos */}
            {bubbleData.length === 0 && (
              <text x={innerWidth / 2} y={innerHeight / 2} textAnchor="middle" fontSize={14} fill={COLORS.medium}>
                No hay colas que cumplan los filtros seleccionados
              </text>
            )}
          </g>
        </svg>

        {/* Tooltip flotante */}
        {hoveredBubble && (
          <div
            className="absolute z-10 bg-white rounded-lg shadow-lg border border-gray-200 p-3 pointer-events-none"
            style={{
              left: Math.min(margin.left + hoveredBubble.x + 20, chartWidth - 200),
              top: Math.min(margin.top + hoveredBubble.y - 10, chartHeight - 150),
              minWidth: 180
            }}
          >
            <div className="flex items-center justify-between gap-2 mb-2 pb-2 border-b border-gray-100">
              <span className="font-bold text-sm" style={{ color: COLORS.dark }}>{hoveredBubble.name}</span>
              <span
                className="text-[10px] px-2 py-0.5 rounded-full font-medium text-white"
                style={{ backgroundColor: TIER_BUBBLE_COLORS[hoveredBubble.tier].fill }}
              >
                {hoveredBubble.tier}
              </span>
            </div>
            <div className="space-y-1 text-xs">
              <div className="flex justify-between">
                <span style={{ color: COLORS.medium }}>Score:</span>
                <span className="font-semibold" style={{ color: COLORS.dark }}>{hoveredBubble.score.toFixed(1)}</span>
              </div>
              <div className="flex justify-between">
                <span style={{ color: COLORS.medium }}>Volumen:</span>
                <span className="font-semibold" style={{ color: COLORS.dark }}>{formatVolume(hoveredBubble.volume)}/mes</span>
              </div>
              <div className="flex justify-between">
                <span style={{ color: COLORS.medium }}>Ahorro:</span>
                <span className="font-semibold text-emerald-600">{formatCurrency(hoveredBubble.ahorro)}/año</span>
              </div>
              <div className="flex justify-between">
                <span style={{ color: COLORS.medium }}>CV AHT:</span>
                <span className={`font-semibold ${hoveredBubble.cv > 120 ? 'text-red-500' : hoveredBubble.cv > 75 ? 'text-amber-500' : 'text-emerald-500'}`}>
                  {hoveredBubble.cv.toFixed(0)}%
                </span>
              </div>
              <div className="flex justify-between">
                <span style={{ color: COLORS.medium }}>FCR:</span>
                <span className="font-semibold" style={{ color: COLORS.dark }}>{hoveredBubble.fcr.toFixed(0)}%</span>
              </div>
            </div>
            <p className="text-[10px] text-center mt-2 pt-2 border-t border-gray-100" style={{ color: COLORS.medium }}>
              Click para ver detalle
            </p>
          </div>
        )}
      </div>

      {/* Leyenda */}
      <div className="px-4 py-3 border-t border-gray-100 bg-gray-50/50">
        <div className="flex flex-wrap justify-between gap-4">
          {/* Leyenda de colores */}
          <div>
            <p className="text-[10px] font-bold mb-1.5" style={{ color: COLORS.dark }}>COLOR = TIER</p>
            <div className="flex gap-3">
              {(['AUTOMATE', 'ASSIST', 'AUGMENT'] as AgenticTier[]).map(tier => (
                <div key={tier} className="flex items-center gap-1">
                  <div
                    className="w-3 h-3 rounded-full"
                    style={{ backgroundColor: TIER_BUBBLE_COLORS[tier].fill }}
                  />
                  <span className="text-[10px]" style={{ color: COLORS.dark }}>
                    {tier === 'AUTOMATE' ? '≥7.5' : tier === 'ASSIST' ? '≥5.5' : '≥3.5'}
                  </span>
                </div>
              ))}
            </div>
          </div>

          {/* Leyenda de tamaños */}
          <div>
            <p className="text-[10px] font-bold mb-1.5" style={{ color: COLORS.dark }}>TAMAÑO = VOLUMEN</p>
            <div className="flex items-center gap-3">
              <div className="flex items-center gap-1">
                <div className="w-2 h-2 rounded-full bg-gray-400" />
                <span className="text-[10px]" style={{ color: COLORS.dark }}>&lt;1K</span>
              </div>
              <div className="flex items-center gap-1">
                <div className="w-3.5 h-3.5 rounded-full bg-gray-400" />
                <span className="text-[10px]" style={{ color: COLORS.dark }}>1K-10K</span>
              </div>
              <div className="flex items-center gap-1">
                <div className="w-5 h-5 rounded-full bg-gray-400" />
                <span className="text-[10px]" style={{ color: COLORS.dark }}>&gt;10K</span>
              </div>
            </div>
          </div>

          {/* v3.12: Resumen con breakdown de cuadrantes */}
          <div className="flex items-center gap-4">
            {/* Breakdown de cuadrantes */}
            <div className="flex flex-wrap gap-x-3 gap-y-1 text-[10px]">
              <span className="text-emerald-600 font-medium">
                🎯 {quadrantStats.quickWins.count}
              </span>
              <span className="text-blue-600 font-medium">
                ⚡ {quadrantStats.highPotential.count}
              </span>
              <span className="text-amber-600 font-medium">
                📈 {quadrantStats.nurture.count}
              </span>
              {quadrantStats.lowHanging.count > 0 && (
                <span className="text-gray-500 font-medium">
                  ✅ {quadrantStats.lowHanging.count}
                </span>
              )}
              {quadrantStats.backlog.count > 0 && (
                <span className="text-gray-400 font-medium">
                  📋 {quadrantStats.backlog.count}
                </span>
              )}
              <span className="text-gray-400">
                = {quadrantStats.total} total
              </span>
            </div>

            {/* Ahorro total */}
            <div className="text-right border-l border-gray-200 pl-4">
              <p className="text-[10px] font-bold mb-0.5" style={{ color: COLORS.dark }}>AHORRO VISIBLE</p>
              <p className="text-base font-bold text-emerald-600">{formatCurrency(quadrantStats.totalAhorro)}</p>
            </div>
          </div>
        </div>
      </div>

      {/* Modal de detalle */}
      {selectedBubble && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30" onClick={() => setSelectedBubble(null)}>
          <div className="bg-white rounded-xl shadow-2xl p-6 max-w-md w-full mx-4" onClick={e => e.stopPropagation()}>
            <div className="flex items-center justify-between mb-4">
              <h4 className="font-bold text-lg" style={{ color: COLORS.dark }}>{selectedBubble.name}</h4>
              <button onClick={() => setSelectedBubble(null)} className="text-gray-400 hover:text-gray-600">
                <XCircle className="w-5 h-5" />
              </button>
            </div>

            <div className="space-y-3">
              <div className="flex items-center gap-2">
                <span
                  className="px-2 py-1 rounded-full text-xs font-medium text-white"
                  style={{ backgroundColor: TIER_BUBBLE_COLORS[selectedBubble.tier].fill }}
                >
                  {selectedBubble.tier}
                </span>
                <span className="text-sm" style={{ color: COLORS.medium }}>
                  Skill: {selectedBubble.skillName}
                </span>
              </div>

              <div className="grid grid-cols-2 gap-3 py-3 border-y border-gray-100">
                <div>
                  <p className="text-xs" style={{ color: COLORS.medium }}>Agentic Score</p>
                  <p className="text-xl font-bold" style={{ color: COLORS.primary }}>{selectedBubble.score.toFixed(1)}</p>
                </div>
                <div>
                  <p className="text-xs" style={{ color: COLORS.medium }}>Ahorro Anual</p>
                  <p className="text-xl font-bold text-emerald-600">{formatCurrency(selectedBubble.ahorro)}</p>
                </div>
                <div>
                  <p className="text-xs" style={{ color: COLORS.medium }}>Volumen/mes</p>
                  <p className="text-lg font-semibold" style={{ color: COLORS.dark }}>{formatVolume(selectedBubble.volume)}</p>
                </div>
                <div>
                  <p className="text-xs" style={{ color: COLORS.medium }}>CV AHT</p>
                  <p className={`text-lg font-semibold ${selectedBubble.cv > 120 ? 'text-red-500' : selectedBubble.cv > 75 ? 'text-amber-500' : 'text-emerald-500'}`}>
                    {selectedBubble.cv.toFixed(0)}%
                  </p>
                </div>
                <div>
                  <p className="text-xs" style={{ color: COLORS.medium }}>FCR</p>
                  <p className="text-lg font-semibold" style={{ color: COLORS.dark }}>{selectedBubble.fcr.toFixed(0)}%</p>
                </div>
                <div>
                  <p className="text-xs" style={{ color: COLORS.medium }}>Transfer Rate</p>
                  <p className={`text-lg font-semibold ${selectedBubble.transfer > 50 ? 'text-red-500' : selectedBubble.transfer > 30 ? 'text-amber-500' : 'text-gray-700'}`}>
                    {selectedBubble.transfer.toFixed(0)}%
                  </p>
                </div>
              </div>

              <div className="bg-gray-50 rounded-lg p-3">
                <p className="text-xs font-medium mb-1" style={{ color: COLORS.dark }}>
                  {selectedBubble.tier === 'AUTOMATE' ? '🎯 Candidato a Quick Win' :
                   selectedBubble.tier === 'ASSIST' ? '⚡ Alto Potencial con Copilot' :
                   '📈 Requiere estandarización previa'}
                </p>
                <p className="text-xs" style={{ color: COLORS.medium }}>
                  {selectedBubble.tier === 'AUTOMATE'
                    ? 'Score ≥7.5 indica procesos maduros listos para automatización completa.'
                    : selectedBubble.tier === 'ASSIST'
                    ? 'Score 5.5-7.5 se beneficia de asistencia IA (Copilot) para elevar a Tier 1.'
                    : 'Score <5.5 requiere trabajo previo de estandarización antes de automatizar.'}
                </p>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ========== Cabecera Agentic Readiness Score con colores corporativos ==========
function AgenticReadinessHeader({
  tierData,
  totalVolume,
  totalQueues
}: {
  tierData: TierDataType;
  totalVolume: number;
  totalQueues: number;
}) {
  // Calcular volumen automatizable (AUTOMATE + ASSIST)
  const automatizableVolume = tierData.AUTOMATE.volume + tierData.ASSIST.volume;
  const automatizablePct = totalVolume > 0 ? (automatizableVolume / totalVolume) * 100 : 0;

  // Porcentajes por tier
  const tierPcts = {
    AUTOMATE: totalVolume > 0 ? (tierData.AUTOMATE.volume / totalVolume) * 100 : 0,
    ASSIST: totalVolume > 0 ? (tierData.ASSIST.volume / totalVolume) * 100 : 0,
    AUGMENT: totalVolume > 0 ? (tierData.AUGMENT.volume / totalVolume) * 100 : 0,
    'HUMAN-ONLY': totalVolume > 0 ? (tierData['HUMAN-ONLY'].volume / totalVolume) * 100 : 0
  };

  // Formatear volumen
  const formatVolume = (v: number) => {
    if (v >= 1000000) return `${(v / 1000000).toFixed(1)}M`;
    if (v >= 1000) return `${Math.round(v / 1000)}K`;
    return v.toLocaleString();
  };

  // Tier card config con colores corporativos
  const tierConfigs = [
    { key: 'AUTOMATE', label: 'AUTOMATE', emoji: '🤖', sublabel: 'Full IA', color: COLORS.primary },
    { key: 'ASSIST', label: 'ASSIST', emoji: '🤝', sublabel: 'Copilot', color: COLORS.dark },
    { key: 'AUGMENT', label: 'AUGMENT', emoji: '📚', sublabel: 'Tools', color: COLORS.medium },
    { key: 'HUMAN-ONLY', label: 'HUMAN', emoji: '👤', sublabel: 'Manual', color: COLORS.medium }
  ];

  // Calcular porcentaje de colas AUTOMATE
  const pctColasAutomate = totalQueues > 0 ? (tierData.AUTOMATE.count / totalQueues) * 100 : 0;

  // Generar interpretación que explica la diferencia volumen vs colas
  const getInterpretation = () => {
    // El score principal (88%) se basa en VOLUMEN de interacciones
    // El % de colas AUTOMATE (26%) es diferente porque hay pocas colas de alto volumen
    return `El ${Math.round(automatizablePct)}% representa el volumen de interacciones automatizables (AUTOMATE + ASSIST). ` +
           `Solo el ${Math.round(pctColasAutomate)}% de las colas (${tierData.AUTOMATE.count} de ${totalQueues}) son AUTOMATE, ` +
           `pero concentran ${Math.round(tierPcts.AUTOMATE)}% del volumen total. ` +
           `Esto indica pocas colas de alto volumen automatizables - oportunidad concentrada en Quick Wins de alto impacto.`;
  };

  return (
    <Card padding="none">
      {/* Header */}
      <div className="px-5 py-3 bg-gray-50 border-b border-gray-200">
        <h2 className="font-semibold text-gray-900 flex items-center gap-2">
          <Bot className="w-4 h-4 text-blue-600" />
          Agentic Readiness Score
        </h2>
      </div>

      <div className="p-5">
        {/* Score Principal - Centrado */}
        <div className="text-center mb-6">
          <div className="inline-block px-8 py-4 rounded-xl border-2" style={{ borderColor: COLORS.primary, backgroundColor: `${COLORS.primary}10` }}>
            <div className="text-5xl font-bold" style={{ color: COLORS.primary }}>
              {Math.round(automatizablePct)}%
            </div>
            <div className="text-sm font-semibold mt-1" style={{ color: COLORS.dark }}>
              Volumen Automatizable
            </div>
            <div className="text-xs" style={{ color: COLORS.medium }}>
              (Tier AUTOMATE + ASSIST)
            </div>
          </div>
        </div>

        {/* 4 Tier Cards */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
          {tierConfigs.map(config => {
            const tierKey = config.key as keyof TierDataType;
            const data = tierData[tierKey];
            const pct = tierPcts[tierKey];

            return (
              <div
                key={config.key}
                className="rounded-lg border p-3 text-center"
                style={{ backgroundColor: COLORS.light, borderColor: COLORS.medium }}
              >
                <div className="text-xs font-bold mb-1" style={{ color: config.color }}>
                  {config.label}
                </div>
                <div className="text-2xl font-bold" style={{ color: config.color }}>
                  {Math.round(pct)}%
                </div>
                <div className="text-xs mt-1" style={{ color: COLORS.medium }}>
                  {formatVolume(data.volume)} int
                </div>
                <div className="text-sm mt-1" style={{ color: COLORS.dark }}>
                  {config.emoji} {config.sublabel}
                </div>
                <div className="text-xs mt-0.5" style={{ color: COLORS.medium }}>
                  {data.count} colas
                </div>
              </div>
            );
          })}
        </div>

        {/* Barra de distribución visual */}
        <div className="mb-4">
          <div className="flex h-3 rounded-full overflow-hidden" style={{ backgroundColor: COLORS.light }}>
            {tierPcts.AUTOMATE > 0 && (
              <div
                style={{ width: `${tierPcts.AUTOMATE}%`, backgroundColor: COLORS.primary }}
                title={`AUTOMATE: ${Math.round(tierPcts.AUTOMATE)}%`}
              />
            )}
            {tierPcts.ASSIST > 0 && (
              <div
                style={{ width: `${tierPcts.ASSIST}%`, backgroundColor: COLORS.dark }}
                title={`ASSIST: ${Math.round(tierPcts.ASSIST)}%`}
              />
            )}
            {tierPcts.AUGMENT > 0 && (
              <div
                style={{ width: `${tierPcts.AUGMENT}%`, backgroundColor: COLORS.medium }}
                title={`AUGMENT: ${Math.round(tierPcts.AUGMENT)}%`}
              />
            )}
            {tierPcts['HUMAN-ONLY'] > 0 && (
              <div
                style={{ width: `${tierPcts['HUMAN-ONLY']}%`, backgroundColor: COLORS.light }}
                title={`HUMAN: ${Math.round(tierPcts['HUMAN-ONLY'])}%`}
              />
            )}
          </div>
          <div className="flex justify-between text-[10px] mt-1" style={{ color: COLORS.medium }}>
            <span>0%</span>
            <span>50%</span>
            <span>100%</span>
          </div>
        </div>

        {/* Interpretación condensada en una línea */}
        <div className="pt-3" style={{ borderTop: `2px solid ${COLORS.light}` }}>
          <p className="text-xs" style={{ color: COLORS.dark }}>
            <span className="font-semibold" style={{ color: COLORS.primary }}>📊 Interpretación: </span>
            {getInterpretation()}
          </p>
        </div>

        {/* Footer con totales */}
        <div className="mt-3 pt-3 flex items-center justify-between text-xs" style={{ borderTop: `1px solid ${COLORS.light}`, color: COLORS.medium }}>
          <span>
            Total: <strong style={{ color: COLORS.dark }}>{formatVolume(totalVolume)}</strong> interacciones
          </span>
          <span>
            <strong style={{ color: COLORS.dark }}>{totalQueues}</strong> colas analizadas
          </span>
        </div>
      </div>
    </Card>
  );
}

// ========== Sección de Factores del Score Global ==========
function GlobalFactorsSection({
  drilldownData,
  tierData,
  totalVolume
}: {
  drilldownData: DrilldownDataPoint[];
  tierData: TierDataType;
  totalVolume: number;
}) {
  const allQueues = drilldownData.flatMap(skill => skill.originalQueues);

  // Calcular métricas globales ponderadas por volumen
  const totalQueueVolume = allQueues.reduce((sum, q) => sum + q.volume, 0);

  // CV AHT promedio ponderado
  const avgCV = totalQueueVolume > 0
    ? allQueues.reduce((sum, q) => sum + q.cv_aht * q.volume, 0) / totalQueueVolume
    : 0;

  // FCR promedio ponderado
  const avgFCR = totalQueueVolume > 0
    ? allQueues.reduce((sum, q) => sum + q.fcr_rate * q.volume, 0) / totalQueueVolume
    : 0;

  // Transfer rate promedio ponderado
  const avgTransfer = totalQueueVolume > 0
    ? allQueues.reduce((sum, q) => sum + q.transfer_rate * q.volume, 0) / totalQueueVolume
    : 0;

  // AHT promedio ponderado
  const avgAHT = totalQueueVolume > 0
    ? allQueues.reduce((sum, q) => sum + q.aht_mean * q.volume, 0) / totalQueueVolume
    : 0;

  // Calidad de datos: % registros válidos (aproximación)
  const validRecordsRatio = allQueues.length > 0
    ? allQueues.reduce((sum, q) => sum + (q.volumeValid / Math.max(1, q.volume)) * q.volume, 0) / totalQueueVolume
    : 0;
  const dataQualityPct = Math.round(validRecordsRatio * 100);

  // Calcular scores de cada factor (0-10)
  // Predictibilidad: basado en CV AHT (CV < 75% = bueno)
  const predictabilityScore = Math.max(0, Math.min(10, 10 - (avgCV / 20)));

  // Resolutividad: FCR (60%) + Transfer inverso (40%)
  const fcrComponent = (avgFCR / 100) * 10 * 0.6;
  const transferComponent = Math.max(0, (1 - avgTransfer / 50)) * 10 * 0.4;
  const resolutionScore = Math.min(10, fcrComponent + transferComponent);

  // Volumen: logarítmico basado en volumen del periodo
  const volumeScore = Math.min(10, Math.log10(totalQueueVolume + 1) * 2.5);

  // Calidad datos: % válidos
  const dataQualityScore = dataQualityPct / 10;

  // Simplicidad: basado en AHT (< 180s = 10, > 600s = 0)
  const simplicityScore = Math.max(0, Math.min(10, 10 - ((avgAHT - 180) / 60)));

  // Score global ponderado
  const weights = { predictability: 0.30, resolution: 0.25, volume: 0.25, dataQuality: 0.10, simplicity: 0.10 };
  const globalScore = (
    predictabilityScore * weights.predictability +
    resolutionScore * weights.resolution +
    volumeScore * weights.volume +
    dataQualityScore * weights.dataQuality +
    simplicityScore * weights.simplicity
  );

  // Automatizable %
  const automatizableVolume = tierData.AUTOMATE.volume + tierData.ASSIST.volume;
  const automatizablePct = totalVolume > 0 ? Math.round((automatizableVolume / totalVolume) * 100) : 0;

  const getStatus = (score: number): { emoji: string; label: string; color: string } => {
    if (score >= 7) return { emoji: '🟢', label: 'Alto', color: COLORS.primary };
    if (score >= 5) return { emoji: '🟡', label: 'Medio', color: COLORS.dark };
    if (score >= 3) return { emoji: '🟠', label: 'Bajo', color: COLORS.medium };
    return { emoji: '🔴', label: 'Crítico', color: COLORS.medium };
  };

  const getGlobalLabel = (score: number): string => {
    if (score >= 7) return 'Listo para automatización';
    if (score >= 5) return 'Potencial moderado';
    if (score >= 3) return 'Requiere optimización';
    return 'No preparado';
  };

  const formatVolume = (v: number) => {
    if (v >= 1000000) return `${(v / 1000000).toFixed(2)}M`;
    if (v >= 1000) return `${(v / 1000).toFixed(0)}K`;
    return v.toLocaleString();
  };

  const factors = [
    {
      name: 'Predictibilidad',
      score: predictabilityScore,
      weight: '30%',
      metric: `CV ${avgCV.toFixed(0)}%`,
      status: getStatus(predictabilityScore)
    },
    {
      name: 'Resolutividad',
      score: resolutionScore,
      weight: '25%',
      metric: `FCR ${avgFCR.toFixed(0)}%/Tr ${avgTransfer.toFixed(0)}%`,
      status: getStatus(resolutionScore)
    },
    {
      name: 'Volumen',
      score: volumeScore,
      weight: '25%',
      metric: `${formatVolume(totalQueueVolume)} int`,
      status: getStatus(volumeScore)
    },
    {
      name: 'Calidad Datos',
      score: dataQualityScore,
      weight: '10%',
      metric: `${dataQualityPct}% VALID`,
      status: getStatus(dataQualityScore)
    },
    {
      name: 'Simplicidad',
      score: simplicityScore,
      weight: '10%',
      metric: `AHT ${Math.round(avgAHT)}s`,
      status: getStatus(simplicityScore)
    }
  ];

  return (
    <div className="rounded-lg border border-gray-200 overflow-hidden bg-white">
      {/* Header */}
      <div className="px-5 py-3 bg-gray-50 border-b border-gray-200">
        <h2 className="font-semibold text-gray-900">
          Factores del Score (Nivel Operación Global)
        </h2>
      </div>

      <div className="p-5">
        {/* Nota explicativa */}
        <div className="mb-4 p-3 rounded-lg" style={{ backgroundColor: COLORS.light }}>
          <p className="text-xs" style={{ color: COLORS.dark }}>
            <span className="font-semibold">⚠️ NOTA:</span> Estos factores son promedios globales.
            El scoring por cola usa estos mismos factores calculados individualmente para cada cola.
          </p>
        </div>

        {/* Tabla de factores */}
        <div className="overflow-x-auto mb-4">
          <table className="w-full text-sm">
            <thead>
              <tr style={{ color: COLORS.medium }}>
                <th className="text-left py-2 font-medium">Factor</th>
                <th className="text-right py-2 font-medium">Score</th>
                <th className="text-right py-2 font-medium">Peso</th>
                <th className="text-right py-2 font-medium">Métrica Real</th>
                <th className="text-center py-2 font-medium">Status</th>
              </tr>
            </thead>
            <tbody>
              {factors.map((factor, idx) => (
                <tr key={factor.name} style={{ borderTop: `1px solid ${COLORS.light}` }}>
                  <td className="py-2 font-medium" style={{ color: COLORS.dark }}>{factor.name}</td>
                  <td className="py-2 text-right font-bold" style={{ color: factor.status.color }}>
                    {factor.score.toFixed(1)}
                  </td>
                  <td className="py-2 text-right" style={{ color: COLORS.medium }}>{factor.weight}</td>
                  <td className="py-2 text-right font-mono text-xs" style={{ color: COLORS.dark }}>{factor.metric}</td>
                  <td className="py-2 text-center">
                    <span className="text-xs">
                      {factor.status.emoji} <span style={{ color: factor.status.color }}>{factor.status.label}</span>
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
            <tfoot>
              <tr style={{ borderTop: `2px solid ${COLORS.medium}` }}>
                <td className="py-3 font-bold" style={{ color: COLORS.dark }}>SCORE GLOBAL</td>
                <td className="py-3 text-right font-bold text-lg" style={{ color: COLORS.primary }}>
                  {globalScore.toFixed(1)}
                </td>
                <td className="py-3" colSpan={2}></td>
                <td className="py-3 text-center text-xs" style={{ color: COLORS.dark }}>
                  {getGlobalLabel(globalScore)}
                </td>
              </tr>
            </tfoot>
          </table>
        </div>

        {/* Insight explicativo */}
        <div className="p-3 rounded-lg" style={{ backgroundColor: COLORS.light }}>
          <p className="text-xs" style={{ color: COLORS.dark }}>
            <span className="font-semibold" style={{ color: COLORS.primary }}>💡 </span>
            El score global ({globalScore.toFixed(1)}) refleja la operación completa.
            Sin embargo, <strong>{automatizablePct}%</strong> del volumen está en colas individuales
            que SÍ cumplen criterios de automatización.
          </p>
        </div>
      </div>
    </div>
  );
}

// ========== Clasificación por Skill con distribución por Tier ==========
function SkillClassificationSection({ drilldownData }: { drilldownData: DrilldownDataPoint[] }) {
  // Calcular métricas por skill
  const skillData = drilldownData.map(skill => {
    const queues = skill.originalQueues;
    const totalVolume = queues.reduce((sum, q) => sum + q.volume, 0);

    // Contar colas y volumen por tier
    const tierStats = {
      AUTOMATE: {
        count: queues.filter(q => q.tier === 'AUTOMATE').length,
        volume: queues.filter(q => q.tier === 'AUTOMATE').reduce((s, q) => s + q.volume, 0)
      },
      ASSIST: {
        count: queues.filter(q => q.tier === 'ASSIST').length,
        volume: queues.filter(q => q.tier === 'ASSIST').reduce((s, q) => s + q.volume, 0)
      },
      AUGMENT: {
        count: queues.filter(q => q.tier === 'AUGMENT').length,
        volume: queues.filter(q => q.tier === 'AUGMENT').reduce((s, q) => s + q.volume, 0)
      },
      'HUMAN-ONLY': {
        count: queues.filter(q => q.tier === 'HUMAN-ONLY').length,
        volume: queues.filter(q => q.tier === 'HUMAN-ONLY').reduce((s, q) => s + q.volume, 0)
      }
    };

    // Porcentajes por volumen
    const tierPcts = {
      AUTOMATE: totalVolume > 0 ? (tierStats.AUTOMATE.volume / totalVolume) * 100 : 0,
      ASSIST: totalVolume > 0 ? (tierStats.ASSIST.volume / totalVolume) * 100 : 0,
      AUGMENT: totalVolume > 0 ? (tierStats.AUGMENT.volume / totalVolume) * 100 : 0,
      'HUMAN-ONLY': totalVolume > 0 ? (tierStats['HUMAN-ONLY'].volume / totalVolume) * 100 : 0
    };

    // Tier dominante por volumen
    const dominantTier = Object.entries(tierPcts).reduce((max, [tier, pct]) =>
      pct > max.pct ? { tier, pct } : max
    , { tier: 'HUMAN-ONLY', pct: 0 });

    // Volumen en T1+T2
    const t1t2Pct = tierPcts.AUTOMATE + tierPcts.ASSIST;

    // Determinar acción recomendada
    let action = '';
    let isWarning = false;
    if (tierPcts.AUTOMATE >= 50) {
      action = '→ Wave 4: Bot Full';
    } else if (t1t2Pct >= 60) {
      action = '→ Wave 3: Copilot';
    } else if (tierPcts.AUGMENT >= 30) {
      action = '→ Wave 2: Tools';
    } else if (tierPcts['HUMAN-ONLY'] >= 50) {
      action = '→ Wave 1: Foundation';
      isWarning = true;
    } else {
      action = '→ Wave 2: Copilot';
    }

    return {
      skill: skill.skill,
      volume: totalVolume,
      tierStats,
      tierPcts,
      dominantTier,
      t1t2Pct,
      action,
      isWarning
    };
  }).sort((a, b) => b.volume - a.volume);

  // Identificar quick wins y alertas
  const quickWins = skillData.filter(s => s.tierPcts.AUTOMATE >= 40 || s.t1t2Pct >= 70);
  const alerts = skillData.filter(s => s.tierPcts['HUMAN-ONLY'] >= 50);

  const formatVolume = (v: number) => {
    if (v >= 1000000) return `${(v / 1000000).toFixed(1)}M`;
    if (v >= 1000) return `${Math.round(v / 1000)}K`;
    return v.toLocaleString();
  };

  return (
    <div className="rounded-lg border overflow-hidden" style={{ backgroundColor: COLORS.white, borderColor: COLORS.medium }}>
      {/* Header */}
      <div className="px-5 py-3" style={{ backgroundColor: COLORS.dark }}>
        <h2 className="font-bold text-sm" style={{ color: COLORS.white }}>
          CLASIFICACIÓN POR SKILL
        </h2>
      </div>

      <div className="p-5">
        {/* Tabla */}
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr style={{ color: COLORS.medium }}>
                <th className="text-left py-2 font-medium">Skill</th>
                <th className="text-right py-2 font-medium">Volumen</th>
                <th className="text-center py-2 font-medium" colSpan={4}>Distribución Colas por Tier</th>
                <th className="text-left py-2 font-medium pl-4">Acción</th>
              </tr>
              <tr style={{ color: COLORS.medium }} className="text-xs">
                <th></th>
                <th></th>
                <th className="text-center py-1">AUTO</th>
                <th className="text-center py-1">ASIST</th>
                <th className="text-center py-1">AUGM</th>
                <th className="text-center py-1">HUMAN</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {skillData.map((skill, idx) => (
                <tr key={skill.skill} style={{ borderTop: idx > 0 ? `1px solid ${COLORS.light}` : undefined }}>
                  {/* Skill name */}
                  <td className="py-3 font-medium" style={{ color: COLORS.dark }}>
                    {skill.skill}
                  </td>

                  {/* Volume */}
                  <td className="py-3 text-right font-bold" style={{ color: COLORS.dark }}>
                    {formatVolume(skill.volume)}
                  </td>

                  {/* Tier counts */}
                  <td className="py-3 text-center">
                    <div className="font-bold" style={{ color: skill.tierPcts.AUTOMATE >= 30 ? COLORS.primary : COLORS.medium }}>
                      {skill.tierStats.AUTOMATE.count}
                    </div>
                    <div className="text-[10px]" style={{ color: COLORS.medium }}>
                      ({Math.round(skill.tierPcts.AUTOMATE)}%)
                    </div>
                  </td>
                  <td className="py-3 text-center">
                    <div className="font-bold" style={{ color: skill.tierPcts.ASSIST >= 30 ? COLORS.dark : COLORS.medium }}>
                      {skill.tierStats.ASSIST.count}
                    </div>
                    <div className="text-[10px]" style={{ color: COLORS.medium }}>
                      ({Math.round(skill.tierPcts.ASSIST)}%)
                    </div>
                  </td>
                  <td className="py-3 text-center">
                    <div className="font-bold" style={{ color: COLORS.medium }}>
                      {skill.tierStats.AUGMENT.count}
                    </div>
                    <div className="text-[10px]" style={{ color: COLORS.medium }}>
                      ({Math.round(skill.tierPcts.AUGMENT)}%)
                    </div>
                  </td>
                  <td className="py-3 text-center">
                    <div className="font-bold" style={{ color: skill.tierPcts['HUMAN-ONLY'] >= 50 ? COLORS.dark : COLORS.medium }}>
                      {skill.tierStats['HUMAN-ONLY'].count}
                    </div>
                    <div className="text-[10px]" style={{ color: COLORS.medium }}>
                      ({Math.round(skill.tierPcts['HUMAN-ONLY'])}%)
                    </div>
                  </td>

                  {/* Action */}
                  <td className="py-3 pl-4">
                    <div className="font-medium text-xs" style={{ color: skill.isWarning ? COLORS.dark : COLORS.primary }}>
                      {skill.action}
                    </div>
                    <div className="text-[10px] mt-0.5" style={{ color: COLORS.medium }}>
                      {skill.tierPcts['HUMAN-ONLY'] >= 50 ? (
                        <span>Vol en T4: {Math.round(skill.tierPcts['HUMAN-ONLY'])}% ⚠️</span>
                      ) : (
                        <span>Vol en T1+T2: {Math.round(skill.t1t2Pct)}%</span>
                      )}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Insights */}
        <div className="mt-4 pt-4 space-y-2" style={{ borderTop: `2px solid ${COLORS.light}` }}>
          {quickWins.length > 0 && (
            <p className="text-xs" style={{ color: COLORS.dark }}>
              <span style={{ color: COLORS.primary }}>🎯 Quick Wins:</span>{' '}
              {quickWins.map(s => s.skill).join(' + ')} tienen &gt;60% volumen en T1+T2
            </p>
          )}
          {alerts.length > 0 && (
            <p className="text-xs" style={{ color: COLORS.dark }}>
              <span>⚠️ Atención:</span>{' '}
              {alerts.map(s => `${s.skill} tiene ${Math.round(s.tierPcts['HUMAN-ONLY'])}% en HUMAN`).join('; ')} → priorizar en Wave 1
            </p>
          )}
          {quickWins.length === 0 && alerts.length === 0 && (
            <p className="text-xs" style={{ color: COLORS.medium }}>
              Distribución equilibrada entre tiers. Revisar colas individuales para priorización.
            </p>
          )}
        </div>
      </div>
    </div>
  );
}

// Skills Heatmap/Table (fallback cuando no hay drilldownData)
function SkillsReadinessTable({ heatmapData }: { heatmapData: HeatmapDataPoint[] }) {
  const sortedData = [...heatmapData].sort((a, b) => b.automation_readiness - a.automation_readiness);

  const formatVolume = (v: number) => v >= 1000 ? `${Math.round(v / 1000)}K` : v.toString();

  return (
    <div className="rounded-lg border overflow-hidden" style={{ backgroundColor: COLORS.white, borderColor: COLORS.medium }}>
      <div className="px-5 py-3" style={{ backgroundColor: COLORS.dark }}>
        <h3 className="font-bold text-sm" style={{ color: COLORS.white }}>Análisis por Skill</h3>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr style={{ color: COLORS.medium }}>
              <th className="px-4 py-2 text-left font-medium">Skill</th>
              <th className="px-4 py-2 text-right font-medium">Volumen</th>
              <th className="px-4 py-2 text-right font-medium">AHT</th>
              <th className="px-4 py-2 text-right font-medium">CV AHT</th>
              <th className="px-4 py-2 text-center font-medium">Score</th>
            </tr>
          </thead>
          <tbody>
            {sortedData.map((item, idx) => (
              <tr key={item.skill} style={{ borderTop: idx > 0 ? `1px solid ${COLORS.light}` : undefined }}>
                <td className="px-4 py-3 font-medium" style={{ color: COLORS.dark }}>{item.skill}</td>
                <td className="px-4 py-3 text-right" style={{ color: COLORS.dark }}>{formatVolume(item.volume)}</td>
                <td className="px-4 py-3 text-right" style={{ color: COLORS.medium }}>{item.aht_seconds}s</td>
                <td className="px-4 py-3 text-right" style={{ color: item.variability.cv_aht > 75 ? COLORS.dark : COLORS.medium }}>
                  {item.variability.cv_aht.toFixed(0)}%
                </td>
                <td className="px-4 py-3 text-center">
                  <span className="px-2 py-1 rounded text-xs font-bold" style={{ backgroundColor: COLORS.light, color: COLORS.primary }}>
                    {(item.automation_readiness / 10).toFixed(1)}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// Formatear AHT en formato mm:ss
function formatAHT(seconds: number): string {
  const mins = Math.floor(seconds / 60);
  const secs = Math.round(seconds % 60);
  return `${mins}:${secs.toString().padStart(2, '0')}`;
}

// Formatear moneda
function formatCurrency(value: number): string {
  if (value >= 1000000) return `€${(value / 1000000).toFixed(1)}M`;
  if (value >= 1000) return `€${Math.round(value / 1000)}K`;
  return `€${value.toLocaleString()}`;
}

// v3.4: Fila expandible por queue_skill (muestra original_queue_id al expandir con Tiers)
function ExpandableSkillRow({
  dataPoint,
  idx,
  isExpanded,
  onToggle
}: {
  dataPoint: DrilldownDataPoint;
  idx: number;
  isExpanded: boolean;
  onToggle: () => void;
}) {
  // v3.4: Contar colas por Tier
  const tierCounts = {
    AUTOMATE: dataPoint.originalQueues.filter(q => q.tier === 'AUTOMATE').length,
    ASSIST: dataPoint.originalQueues.filter(q => q.tier === 'ASSIST').length,
    AUGMENT: dataPoint.originalQueues.filter(q => q.tier === 'AUGMENT').length,
    'HUMAN-ONLY': dataPoint.originalQueues.filter(q => q.tier === 'HUMAN-ONLY').length
  };

  // Tier dominante del skill (por volumen)
  const tierVolumes = {
    AUTOMATE: dataPoint.originalQueues.filter(q => q.tier === 'AUTOMATE').reduce((s, q) => s + q.volume, 0),
    ASSIST: dataPoint.originalQueues.filter(q => q.tier === 'ASSIST').reduce((s, q) => s + q.volume, 0),
    AUGMENT: dataPoint.originalQueues.filter(q => q.tier === 'AUGMENT').reduce((s, q) => s + q.volume, 0),
    'HUMAN-ONLY': dataPoint.originalQueues.filter(q => q.tier === 'HUMAN-ONLY').reduce((s, q) => s + q.volume, 0)
  };

  const dominantTier = (Object.keys(tierVolumes) as AgenticTier[]).reduce((a, b) =>
    tierVolumes[a] > tierVolumes[b] ? a : b
  );

  const potentialSavings = dataPoint.annualCost ? Math.round(dataPoint.annualCost * 0.35 / 12) : 0;
  const automateQueues = tierCounts.AUTOMATE;

  return (
    <>
      <motion.tr
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: idx * 0.05 }}
        className={`hover:bg-emerald-50/50 cursor-pointer ${isExpanded ? 'bg-emerald-50/40 border-l-4 border-l-emerald-500' : ''}`}
        onClick={onToggle}
      >
        <td className="px-3 py-3 text-left">
          <button className="flex items-center gap-1 text-gray-400 hover:text-gray-600">
            {isExpanded ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
          </button>
        </td>
        <td className="px-3 py-3">
          <div className="flex items-center gap-2">
            <span className="text-sm font-semibold text-gray-800">{dataPoint.skill}</span>
            <span className="px-1.5 py-0.5 bg-gray-100 text-gray-500 text-xs rounded">
              {dataPoint.originalQueues.length} colas
            </span>
            {/* v3.4: Mostrar tiers disponibles */}
            {automateQueues > 0 && (
              <span className="px-1.5 py-0.5 bg-emerald-100 text-emerald-600 text-xs rounded flex items-center gap-1">
                <Sparkles className="w-3 h-3" />
                {automateQueues} AUTOMATE
              </span>
            )}
            {tierCounts.ASSIST > 0 && (
              <span className="px-1.5 py-0.5 bg-blue-100 text-blue-600 text-xs rounded">
                {tierCounts.ASSIST} ASSIST
              </span>
            )}
          </div>
        </td>
        <td className="px-3 py-3 text-sm text-gray-700 text-right font-semibold">{dataPoint.volume.toLocaleString()}</td>
        <td className="px-3 py-3 text-sm text-gray-600 text-right">{formatAHT(dataPoint.aht_mean)}</td>
        <td className="px-3 py-3 text-right">
          <span className={`text-sm font-semibold ${dataPoint.cv_aht < 75 ? 'text-emerald-600' : 'text-amber-600'}`}>
            {dataPoint.cv_aht.toFixed(0)}%
          </span>
        </td>
        <td className="px-3 py-3 text-right">
          <span className="text-sm text-emerald-600 font-medium">{formatCurrency(potentialSavings)}/mes</span>
        </td>
        <td className="px-3 py-3 text-center">
          <TierBadge tier={dominantTier} />
        </td>
      </motion.tr>

      {/* Fila expandida con tabla de original_queue_id */}
      {isExpanded && (
        <motion.tr
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          className="bg-emerald-50/20"
        >
          <td colSpan={7} className="p-0">
            <div className="border-l-4 border-l-emerald-300 ml-3">
              {/* Header de resumen con Tiers */}
              <div className="px-6 py-3 bg-emerald-50/50 border-b border-emerald-100">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-4 text-xs">
                    <span className="text-gray-600">
                      <strong className="text-gray-800">{dataPoint.originalQueues.length}</strong> colas
                    </span>
                    <span className="text-gray-400">|</span>
                    {/* v3.4: Mostrar distribución por Tier */}
                    {tierCounts.AUTOMATE > 0 && (
                      <span className="text-emerald-600 flex items-center gap-1">
                        <Sparkles className="w-3 h-3" />
                        <strong>{tierCounts.AUTOMATE}</strong> AUTOMATE
                      </span>
                    )}
                    {tierCounts.ASSIST > 0 && (
                      <span className="text-blue-600">
                        <strong>{tierCounts.ASSIST}</strong> ASSIST
                      </span>
                    )}
                    {tierCounts.AUGMENT > 0 && (
                      <span className="text-amber-600">
                        <strong>{tierCounts.AUGMENT}</strong> AUGMENT
                      </span>
                    )}
                    {tierCounts['HUMAN-ONLY'] > 0 && (
                      <span className="text-gray-500">
                        <strong>{tierCounts['HUMAN-ONLY']}</strong> HUMAN
                      </span>
                    )}
                    <span className="text-gray-400">|</span>
                    <span className="text-gray-600">
                      Coste: <strong className="text-gray-800">{formatCurrency(dataPoint.annualCost || 0)}/año</strong>
                    </span>
                    <span className="text-gray-400">|</span>
                    <span className="text-gray-600">
                      Ahorro: <strong className="text-emerald-600">{formatCurrency(potentialSavings * 12)}/año</strong>
                    </span>
                  </div>
                  <div className="flex items-center gap-2 text-xs text-gray-500">
                    <span>FCR: {dataPoint.fcr_rate.toFixed(0)}%</span>
                    <span className="text-gray-300">|</span>
                    <span>Transfer: {dataPoint.transfer_rate.toFixed(0)}%</span>
                  </div>
                </div>
              </div>

              {/* Tabla de colas (original_queue_id) con Tiers */}
              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="text-xs text-gray-500 uppercase tracking-wider bg-gray-50/80 border-b border-gray-200">
                      <th className="px-4 py-2 text-left font-medium">Cola (original_queue_id)</th>
                      <th className="px-3 py-2 text-right font-medium">Volumen</th>
                      <th className="px-3 py-2 text-right font-medium">AHT</th>
                      <th className="px-3 py-2 text-right font-medium">CV</th>
                      <th className="px-3 py-2 text-right font-medium">Transfer</th>
                      <th className="px-3 py-2 text-right font-medium">FCR</th>
                      <th className="px-3 py-2 text-center font-medium">Score</th>
                      <th className="px-3 py-2 text-center font-medium">Tier</th>
                      <th className="px-3 py-2 text-left font-medium">Red Flags</th>
                      <th className="px-3 py-2 text-right font-medium">Ahorro/mes</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100">
                    {dataPoint.originalQueues.map((queue, queueIdx) => {
                      const queueMonthlySavings = queue.annualCost ? Math.round(queue.annualCost * 0.35 / 12) : 0;
                      const tierStyle = getTierStyle(queue.tier);
                      const redFlags = detectRedFlags(queue);

                      return (
                        <tr
                          key={`${queue.original_queue_id}-${queueIdx}`}
                          className={`hover:bg-white/50 ${queue.tier === 'AUTOMATE' ? 'bg-emerald-50/30' : queue.tier === 'ASSIST' ? 'bg-blue-50/20' : queue.tier === 'HUMAN-ONLY' && redFlags.length > 0 ? 'bg-red-50/20' : ''}`}
                        >
                          <td className="px-4 py-2 font-medium text-gray-800 max-w-[250px]">
                            <div className="flex items-center gap-2">
                              <span className="truncate block" title={queue.original_queue_id}>
                                {queue.original_queue_id}
                              </span>
                              {/* Mostrar motivo del tier en tooltip */}
                              {queue.tierMotivo && (
                                <InfoTooltip content={<div className="text-xs">{queue.tierMotivo}</div>}>
                                  <Info className="w-3 h-3 text-gray-400" />
                                </InfoTooltip>
                              )}
                            </div>
                          </td>
                          <td className="px-3 py-2 text-gray-700 text-right">{queue.volume.toLocaleString()}</td>
                          <td className="px-3 py-2 text-gray-600 text-right">{formatAHT(queue.aht_mean)}</td>
                          <td className="px-3 py-2 text-right">
                            <span className={`font-medium ${queue.cv_aht < 75 ? 'text-emerald-600' : queue.cv_aht < 90 ? 'text-blue-600' : queue.cv_aht > 120 ? 'text-red-600' : 'text-amber-600'}`}>
                              {queue.cv_aht.toFixed(0)}%
                            </span>
                          </td>
                          <td className="px-3 py-2 text-right">
                            <span className={`font-medium ${queue.transfer_rate > 50 ? 'text-red-600' : queue.transfer_rate > 30 ? 'text-amber-600' : 'text-gray-600'}`}>
                              {queue.transfer_rate.toFixed(0)}%
                            </span>
                          </td>
                          <td className="px-3 py-2 text-gray-600 text-right">{queue.fcr_rate.toFixed(0)}%</td>
                          <td className="px-3 py-2 text-center">
                            {queue.scoreBreakdown ? (
                              <InfoTooltip content={<ScoreBreakdownTooltip breakdown={queue.scoreBreakdown} />}>
                                <span className={`px-1.5 py-0.5 rounded text-xs font-medium cursor-help ${tierStyle.bg} ${tierStyle.text}`}>
                                  {queue.agenticScore.toFixed(1)}
                                </span>
                              </InfoTooltip>
                            ) : (
                              <span className={`px-1.5 py-0.5 rounded text-xs font-medium ${tierStyle.bg} ${tierStyle.text}`}>
                                {queue.agenticScore.toFixed(1)}
                              </span>
                            )}
                          </td>
                          <td className="px-3 py-2 text-center">
                            <TierBadge tier={queue.tier} />
                          </td>
                          <td className="px-3 py-2">
                            {redFlags.length > 0 ? (
                              <div className="flex flex-wrap gap-1">
                                {redFlags.map(flag => (
                                  <RedFlagBadge key={flag.config.id} flag={flag} size="sm" />
                                ))}
                              </div>
                            ) : (
                              <span className="text-xs text-gray-400">—</span>
                            )}
                          </td>
                          <td className="px-3 py-2 text-right text-emerald-600 font-medium">
                            {formatCurrency(queueMonthlySavings)}
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                  {/* Fila de totales */}
                  <tfoot>
                    <tr className="bg-emerald-50/50 font-semibold text-gray-700 border-t-2 border-emerald-200">
                      <td className="px-4 py-2">TOTAL ({dataPoint.originalQueues.length} colas)</td>
                      <td className="px-3 py-2 text-right">{dataPoint.volume.toLocaleString()}</td>
                      <td className="px-3 py-2 text-right">{formatAHT(dataPoint.aht_mean)}</td>
                      <td className="px-3 py-2 text-right text-emerald-600">{dataPoint.cv_aht.toFixed(0)}%</td>
                      <td className="px-3 py-2 text-right">{dataPoint.transfer_rate.toFixed(0)}%</td>
                      <td className="px-3 py-2 text-right">{dataPoint.fcr_rate.toFixed(0)}%</td>
                      <td className="px-3 py-2 text-center">
                        <span className="px-1.5 py-0.5 rounded text-xs bg-gray-200 text-gray-700">
                          {dataPoint.agenticScore.toFixed(1)}
                        </span>
                      </td>
                      <td className="px-3 py-2 text-center">
                        <TierBadge tier={dominantTier} />
                      </td>
                      <td className="px-3 py-2 text-gray-400 text-xs">—</td>
                      <td className="px-3 py-2 text-right text-emerald-600">{formatCurrency(potentialSavings)}</td>
                    </tr>
                  </tfoot>
                </table>
              </div>
            </div>
          </td>
        </motion.tr>
      )}
    </>
  );
}

// v3.4: Sección de Candidatos Prioritarios - Por queue_skill con drill-down a original_queue_id
function PriorityCandidatesSection({ drilldownData }: { drilldownData: DrilldownDataPoint[] }) {
  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());

  // Filtrar skills que tienen al menos una cola AUTOMATE
  const candidateSkills = drilldownData.filter(d => d.isPriorityCandidate);

  // Toggle expansión de fila
  const toggleRow = (skill: string) => {
    const newExpanded = new Set(expandedRows);
    if (newExpanded.has(skill)) {
      newExpanded.delete(skill);
    } else {
      newExpanded.add(skill);
    }
    setExpandedRows(newExpanded);
  };

  // Calcular totales
  const totalVolume = candidateSkills.reduce((sum, c) => sum + c.volume, 0);
  const totalCost = candidateSkills.reduce((sum, c) => sum + (c.annualCost || 0), 0);
  const potentialMonthlySavings = Math.round(totalCost * 0.35 / 12);

  // v3.4: Contar colas por Tier en todos los skills con candidatos
  const allQueuesInCandidates = candidateSkills.flatMap(s => s.originalQueues);
  const tierCounts = {
    AUTOMATE: allQueuesInCandidates.filter(q => q.tier === 'AUTOMATE').length,
    ASSIST: allQueuesInCandidates.filter(q => q.tier === 'ASSIST').length,
    AUGMENT: allQueuesInCandidates.filter(q => q.tier === 'AUGMENT').length,
    'HUMAN-ONLY': allQueuesInCandidates.filter(q => q.tier === 'HUMAN-ONLY').length
  };

  // Volumen por Tier
  const tierVolumes = {
    AUTOMATE: allQueuesInCandidates.filter(q => q.tier === 'AUTOMATE').reduce((s, q) => s + q.volume, 0),
    ASSIST: allQueuesInCandidates.filter(q => q.tier === 'ASSIST').reduce((s, q) => s + q.volume, 0),
    AUGMENT: allQueuesInCandidates.filter(q => q.tier === 'AUGMENT').reduce((s, q) => s + q.volume, 0),
    'HUMAN-ONLY': allQueuesInCandidates.filter(q => q.tier === 'HUMAN-ONLY').reduce((s, q) => s + q.volume, 0)
  };

  if (drilldownData.length === 0) {
    return null;
  }

  return (
    <div className="bg-white rounded-lg border-2 border-emerald-200 overflow-hidden shadow-sm">
      {/* Header */}
      <div className="px-5 py-4 border-b bg-gradient-to-r from-emerald-50 to-emerald-100/50">
        <div className="flex items-center justify-between">
          <div>
            <h3 className="text-lg font-bold text-emerald-800 flex items-center gap-2">
              <Sparkles className="w-5 h-5" />
              CLASIFICACIÓN POR TIER DE AUTOMATIZACIÓN
            </h3>
            <p className="text-sm text-emerald-600 mt-1">
              Skills con colas clasificadas como AUTOMATE (score ≥ 7.5, CV ≤ 75%, transfer ≤ 20%)
            </p>
          </div>
          <div className="text-right">
            <span className="text-3xl font-bold text-emerald-700">{tierCounts.AUTOMATE}</span>
            <p className="text-sm text-emerald-600">colas AUTOMATE en {candidateSkills.length} skills</p>
          </div>
        </div>
      </div>

      {/* v3.4: Resumen por Tier */}
      <div className="px-5 py-3 bg-emerald-50/50 border-b border-emerald-100">
        <div className="flex items-center justify-between text-sm">
          <div className="flex gap-4 flex-wrap">
            <div className="flex items-center gap-1.5 px-2 py-1 bg-emerald-100 rounded">
              <Sparkles className="w-3.5 h-3.5 text-emerald-600" />
              <span className="text-emerald-700">
                <strong>{tierCounts.AUTOMATE}</strong> AUTOMATE ({tierVolumes.AUTOMATE.toLocaleString()} int)
              </span>
            </div>
            <div className="flex items-center gap-1.5 px-2 py-1 bg-blue-100 rounded">
              <Bot className="w-3.5 h-3.5 text-blue-600" />
              <span className="text-blue-700">
                <strong>{tierCounts.ASSIST}</strong> ASSIST ({tierVolumes.ASSIST.toLocaleString()} int)
              </span>
            </div>
            <div className="flex items-center gap-1.5 px-2 py-1 bg-amber-100 rounded">
              <TrendingUp className="w-3.5 h-3.5 text-amber-600" />
              <span className="text-amber-700">
                <strong>{tierCounts.AUGMENT}</strong> AUGMENT ({tierVolumes.AUGMENT.toLocaleString()} int)
              </span>
            </div>
            {tierCounts['HUMAN-ONLY'] > 0 && (
              <div className="flex items-center gap-1.5 px-2 py-1 bg-gray-100 rounded">
                <Users className="w-3.5 h-3.5 text-gray-500" />
                <span className="text-gray-600">
                  <strong>{tierCounts['HUMAN-ONLY']}</strong> HUMAN ({tierVolumes['HUMAN-ONLY'].toLocaleString()} int)
                </span>
              </div>
            )}
          </div>
          <div className="text-right">
            <span className="text-emerald-600 font-bold text-base">{formatCurrency(potentialMonthlySavings)} ahorro/mes potencial</span>
          </div>
        </div>
      </div>

      {/* Tabla por queue_skill */}
      {candidateSkills.length > 0 ? (
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="text-xs text-gray-500 uppercase tracking-wider bg-gray-50 border-b border-gray-200">
                <th className="px-3 py-2.5 text-left font-medium w-8"></th>
                <th className="px-3 py-2.5 text-left font-medium">Queue Skill (Estratégico)</th>
                <th className="px-3 py-2.5 text-right font-medium">Volumen</th>
                <th className="px-3 py-2.5 text-right font-medium">AHT Prom.</th>
                <th className="px-3 py-2.5 text-right font-medium">CV Prom.</th>
                <th className="px-3 py-2.5 text-right font-medium">Ahorro Potencial</th>
                <th className="px-3 py-2.5 text-center font-medium">Tier Dom.</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {candidateSkills.map((dataPoint, idx) => (
                <ExpandableSkillRow
                  key={dataPoint.skill}
                  dataPoint={dataPoint}
                  idx={idx}
                  isExpanded={expandedRows.has(dataPoint.skill)}
                  onToggle={() => toggleRow(dataPoint.skill)}
                />
              ))}
            </tbody>
          </table>
        </div>
      ) : (
        <div className="p-8 text-center text-gray-500">
          <Sparkles className="w-12 h-12 mx-auto mb-3 text-gray-300" />
          <p className="font-medium">No se encontraron colas clasificadas como AUTOMATE</p>
          <p className="text-sm mt-1">Todas las colas requieren optimización antes de automatizar</p>
        </div>
      )}

      {/* Footer */}
      <div className="px-5 py-3 bg-gray-50 border-t border-gray-200">
        <div className="flex items-center justify-between">
          <p className="text-xs text-gray-500">
            <span className="font-medium">{candidateSkills.length}</span> de {drilldownData.length} skills
            tienen al menos una cola tier AUTOMATE
          </p>
          <p className="text-xs text-gray-400">
            Haz clic en un skill para ver las colas individuales con desglose de score
          </p>
        </div>
      </div>
    </div>
  );
}

// v3.6: Sección de Colas HUMAN-ONLY con Red Flags - Contextualizada
function HumanOnlyRedFlagsSection({ drilldownData }: { drilldownData: DrilldownDataPoint[] }) {
  const [showTable, setShowTable] = useState(false);

  // Extraer todas las colas
  const allQueues = drilldownData.flatMap(skill =>
    skill.originalQueues.map(q => ({ ...q, skillName: skill.skill }))
  );

  // Extraer todas las colas HUMAN-ONLY
  const humanOnlyQueues = allQueues.filter(q => q.tier === 'HUMAN-ONLY');

  // Colas con red flags (la mayoría de HUMAN-ONLY tendrán red flags por definición)
  const queuesWithFlags = humanOnlyQueues.map(q => ({
    queue: q,
    flags: detectRedFlags(q)
  })).filter(qf => qf.flags.length > 0);

  // Ordenar por volumen (mayor primero para priorizar)
  queuesWithFlags.sort((a, b) => b.queue.volume - a.queue.volume);

  if (queuesWithFlags.length === 0) {
    return null;
  }

  // Calcular totales
  const totalVolumeAllQueues = allQueues.reduce((sum, q) => sum + q.volume, 0);
  const totalVolumeRedFlags = queuesWithFlags.reduce((sum, qf) => sum + qf.queue.volume, 0);
  const pctVolumeRedFlags = totalVolumeAllQueues > 0 ? (totalVolumeRedFlags / totalVolumeAllQueues) * 100 : 0;

  // v3.11: Coste usando modelo CPI (consistente con Roadmap y Executive Summary)
  const CPI_HUMANO_RF = 2.33;  // €/interacción (coste unitario humano)
  const costeAnualRedFlags = Math.round(totalVolumeRedFlags * 12 * CPI_HUMANO_RF);
  const costeAnualTotal = Math.round(totalVolumeAllQueues * 12 * CPI_HUMANO_RF);
  const pctCosteRedFlags = costeAnualTotal > 0 ? (costeAnualRedFlags / costeAnualTotal) * 100 : 0;

  // Estadísticas detalladas por tipo de red flag
  const flagStats = RED_FLAG_CONFIGS.map(config => {
    const matchingQueues = queuesWithFlags.filter(qf =>
      qf.flags.some(f => f.config.id === config.id)
    );
    const queueCount = matchingQueues.length;
    const volumeAffected = matchingQueues.reduce((sum, qf) => sum + qf.queue.volume, 0);
    const pctTotal = totalVolumeAllQueues > 0 ? (volumeAffected / totalVolumeAllQueues) * 100 : 0;

    // Acción recomendada por tipo
    let action = '';
    switch (config.id) {
      case 'cv_high':
        action = 'Estandarizar procesos';
        break;
      case 'transfer_high':
        action = 'Simplificar flujo / capacitar';
        break;
      case 'volume_low':
        action = 'Consolidar con similar';
        break;
      case 'valid_low':
        action = 'Mejorar captura datos';
        break;
    }

    return {
      config,
      queueCount,
      volumeAffected,
      pctTotal,
      action
    };
  }).filter(s => s.queueCount > 0);

  // Insight contextual
  const isHighCountLowVolume = queuesWithFlags.length > 20 && pctVolumeRedFlags < 15;
  const isLowCountHighVolume = queuesWithFlags.length < 10 && pctVolumeRedFlags > 20;
  const dominantFlag = flagStats.reduce((a, b) => a.volumeAffected > b.volumeAffected ? a : b, flagStats[0]);

  // Mostrar top 15 en tabla
  const displayQueues = queuesWithFlags.slice(0, 15);

  return (
    <Card>
      {/* Header */}
      <div className="flex items-center justify-between mb-4">
        <div>
          <h3 className="font-semibold text-gray-900 flex items-center gap-2">
            <AlertOctagon className="w-5 h-5 text-amber-500" />
            Skills con Red Flags
          </h3>
          <p className="text-sm text-gray-500 mt-1">
            Colas que requieren intervención antes de automatizar
          </p>
        </div>
        <Badge
          label={`${queuesWithFlags.length} colas`}
          variant="warning"
        />
      </div>

      {/* RESUMEN DE IMPACTO */}
      <div className="grid grid-cols-3 gap-4 mb-4">
        <div className="text-center p-3 rounded-lg bg-gray-50 border border-gray-200">
          <div className="text-2xl font-bold text-gray-800">
            {queuesWithFlags.length}
          </div>
          <div className="text-xs text-gray-500">Colas Afectadas</div>
          <div className="text-xs text-gray-400 mt-1">
            {Math.round((queuesWithFlags.length / allQueues.length) * 100)}% del total
          </div>
        </div>
        <div className="text-center p-3 rounded-lg bg-gray-50 border border-gray-200">
          <div className="text-2xl font-bold text-gray-800">
            {totalVolumeRedFlags >= 1000 ? `${(totalVolumeRedFlags/1000).toFixed(0)}K` : totalVolumeRedFlags}
          </div>
          <div className="text-xs text-gray-500">Volumen Afectado</div>
          <div className="text-xs text-gray-400 mt-1">
            {pctVolumeRedFlags.toFixed(1)}% del total
          </div>
        </div>
        <div className="text-center p-3 rounded-lg bg-amber-50 border border-amber-200">
          <div className="text-2xl font-bold text-amber-700">
            {costeAnualRedFlags >= 1000000
              ? `€${(costeAnualRedFlags / 1000000).toFixed(1)}M`
              : `€${(costeAnualRedFlags / 1000).toFixed(0)}K`}
          </div>
          <div className="text-xs text-amber-600">Coste Bloqueado/año</div>
        </div>
      </div>

      {/* INSIGHT */}
      <div className="p-3 rounded-lg bg-blue-50 border border-blue-200 mb-4">
        <div className="text-sm text-blue-800">
          <strong>Insight:</strong>{' '}
          {isHighCountLowVolume && (
            <>
              Muchas colas ({queuesWithFlags.length}) pero bajo volumen ({pctVolumeRedFlags.toFixed(1)}%).
              Prioridad: Consolidar colas similares para ganar escala.
            </>
          )}
          {isLowCountHighVolume && (
            <>
              Pocas colas ({queuesWithFlags.length}) concentran alto volumen ({pctVolumeRedFlags.toFixed(1)}%).
              Prioridad: Atacar estas colas primero para máximo impacto.
            </>
          )}
          {!isHighCountLowVolume && !isLowCountHighVolume && dominantFlag && (
            <>
              Red flag dominante: <strong>{dominantFlag.config.label}</strong> ({dominantFlag.queueCount} colas).
              Acción: {dominantFlag.action}.
            </>
          )}
        </div>
      </div>

      {/* DISTRIBUCIÓN DE RED FLAGS */}
      <div className="px-5 py-4 border-b" style={{ borderColor: COLORS.light }}>
        <h4 className="text-sm font-semibold mb-3" style={{ color: COLORS.dark }}>
          DISTRIBUCIÓN DE RED FLAGS
        </h4>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="text-xs uppercase tracking-wider" style={{ color: COLORS.medium }}>
                <th className="px-3 py-2 text-left font-medium">Red Flag</th>
                <th className="px-3 py-2 text-right font-medium">Colas</th>
                <th className="px-3 py-2 text-right font-medium">Vol. Afectado</th>
                <th className="px-3 py-2 text-right font-medium">% Total</th>
                <th className="px-3 py-2 text-left font-medium">Acción Recomendada</th>
              </tr>
            </thead>
            <tbody className="divide-y" style={{ borderColor: COLORS.light }}>
              {flagStats.map(stat => (
                <tr key={stat.config.id} className="hover:bg-gray-50">
                  <td className="px-3 py-2.5">
                    <div className="flex items-center gap-2">
                      <XCircle className="w-4 h-4" style={{ color: COLORS.medium }} />
                      <span className="font-medium" style={{ color: COLORS.dark }}>{stat.config.label}</span>
                    </div>
                    <span className="text-xs" style={{ color: COLORS.medium }}>{stat.config.description}</span>
                  </td>
                  <td className="px-3 py-2.5 text-right font-medium" style={{ color: COLORS.dark }}>
                    {stat.queueCount}
                  </td>
                  <td className="px-3 py-2.5 text-right" style={{ color: COLORS.dark }}>
                    {stat.volumeAffected.toLocaleString()}
                  </td>
                  <td className="px-3 py-2.5 text-right">
                    <span
                      className={`font-medium ${stat.pctTotal > 10 ? 'text-red-600' : ''}`}
                      style={{ color: stat.pctTotal <= 10 ? COLORS.medium : undefined }}
                    >
                      {stat.pctTotal.toFixed(1)}%
                    </span>
                  </td>
                  <td className="px-3 py-2.5">
                    <span className="text-xs px-2 py-1 rounded" style={{ backgroundColor: COLORS.light, color: COLORS.dark }}>
                      {stat.action}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* PRIORIDAD */}
      <div className="px-5 py-3 border-b flex items-start gap-3" style={{ backgroundColor: COLORS.light, borderColor: COLORS.light }}>
        <span className="text-lg">⚠️</span>
        <div className="text-sm" style={{ color: COLORS.dark }}>
          <strong>PRIORIDAD:</strong>{' '}
          {flagStats.find(s => s.config.id === 'cv_high')?.queueCount && flagStats.find(s => s.config.id === 'cv_high')!.queueCount > 0 ? (
            <>
              Resolver primero colas con <strong>CV &gt;120%</strong> — son las más impredecibles y bloquean cualquier automatización efectiva.
            </>
          ) : flagStats.find(s => s.config.id === 'transfer_high')?.queueCount && flagStats.find(s => s.config.id === 'transfer_high')!.queueCount > 0 ? (
            <>
              Priorizar colas con <strong>Transfer &gt;50%</strong> — alta dependencia de escalado indica complejidad que debe simplificarse.
            </>
          ) : flagStats.find(s => s.config.id === 'volume_low')?.queueCount && flagStats.find(s => s.config.id === 'volume_low')!.queueCount > 0 ? (
            <>
              Consolidar colas con <strong>Vol &lt;50</strong> — el bajo volumen no justifica inversión individual.
            </>
          ) : (
            <>
              Mejorar calidad de datos antes de cualquier iniciativa de automatización.
            </>
          )}
        </div>
      </div>

      {/* Botón para ver detalle de colas */}
      <div className="px-5 py-3" style={{ backgroundColor: '#fafafa' }}>
        <button
          onClick={() => setShowTable(!showTable)}
          className="text-sm flex items-center gap-2 hover:opacity-80"
          style={{ color: COLORS.primary }}
        >
          {showTable ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
          {showTable ? 'Ocultar detalle de colas' : `Ver detalle de ${queuesWithFlags.length} colas con red flags`}
        </button>
      </div>

      {/* Tabla de colas con Red Flags (colapsable) */}
      {showTable && (
        <div className="border-t overflow-x-auto" style={{ borderColor: COLORS.light }}>
          <table className="w-full text-sm">
            <thead>
              <tr className="text-xs uppercase tracking-wider" style={{ backgroundColor: COLORS.light, color: COLORS.medium }}>
                <th className="px-3 py-2.5 text-left font-medium">Cola</th>
                <th className="px-3 py-2.5 text-left font-medium">Skill</th>
                <th className="px-3 py-2.5 text-right font-medium">Volumen</th>
                <th className="px-3 py-2.5 text-right font-medium">CV AHT</th>
                <th className="px-3 py-2.5 text-right font-medium">Transfer</th>
                <th className="px-3 py-2.5 text-left font-medium">Red Flags</th>
              </tr>
            </thead>
            <tbody className="divide-y" style={{ borderColor: COLORS.light }}>
              {displayQueues.map((qf, idx) => (
                <motion.tr
                  key={`${qf.queue.original_queue_id}-${idx}`}
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ delay: idx * 0.02 }}
                  className="hover:bg-gray-50"
                >
                  <td className="px-3 py-2.5 font-medium max-w-[200px]" style={{ color: COLORS.dark }}>
                    <span className="truncate block" title={qf.queue.original_queue_id}>
                      {qf.queue.original_queue_id}
                    </span>
                  </td>
                  <td className="px-3 py-2.5 text-xs max-w-[150px]" style={{ color: COLORS.medium }}>
                    <span className="truncate block" title={(qf.queue as any).skillName}>
                      {(qf.queue as any).skillName}
                    </span>
                  </td>
                  <td className="px-3 py-2.5 text-right" style={{ color: COLORS.dark }}>
                    {qf.queue.volume.toLocaleString()}
                  </td>
                  <td className="px-3 py-2.5 text-right">
                    <span className={`font-medium ${qf.queue.cv_aht > 120 ? 'text-red-600' : ''}`} style={{ color: qf.queue.cv_aht <= 120 ? COLORS.dark : undefined }}>
                      {qf.queue.cv_aht.toFixed(0)}%
                    </span>
                  </td>
                  <td className="px-3 py-2.5 text-right">
                    <span className={`font-medium ${qf.queue.transfer_rate > 50 ? 'text-red-600' : ''}`} style={{ color: qf.queue.transfer_rate <= 50 ? COLORS.dark : undefined }}>
                      {qf.queue.transfer_rate.toFixed(0)}%
                    </span>
                  </td>
                  <td className="px-3 py-2.5">
                    <div className="flex flex-wrap gap-1">
                      {qf.flags.map(flag => (
                        <RedFlagBadge key={flag.config.id} flag={flag} size="sm" />
                      ))}
                    </div>
                  </td>
                </motion.tr>
              ))}
            </tbody>
          </table>
          {queuesWithFlags.length > 15 && (
            <div className="px-5 py-2 text-xs text-center" style={{ backgroundColor: COLORS.light, color: COLORS.medium }}>
              Mostrando top 15 de {queuesWithFlags.length} colas (ordenadas por volumen)
            </div>
          )}
        </div>
      )}
    </Card>
  );
}

// v3.11: Umbrales para highlighting de métricas
const METRIC_THRESHOLDS = {
  fcr: { critical: 50, warning: 60, good: 70, benchmark: 68 },
  cv_aht: { critical: 100, warning: 75, good: 60 },
  transfer: { critical: 25, warning: 15, good: 10, benchmark: 12 }
};

// v3.11: Evaluar métrica y devolver estilo + mensaje
function getMetricStatus(value: number, metric: 'fcr' | 'cv_aht' | 'transfer'): {
  className: string;
  isCritical: boolean;
  message: string;
} {
  const thresholds = METRIC_THRESHOLDS[metric];

  if (metric === 'fcr') {
    // Mayor es mejor
    if (value < thresholds.critical) {
      return {
        className: 'text-red-600 font-bold',
        isCritical: true,
        message: `FCR ${value.toFixed(0)}% muy por debajo del benchmark (${thresholds.benchmark}%)`
      };
    }
    if (value < thresholds.warning) {
      return { className: 'text-amber-600 font-medium', isCritical: false, message: '' };
    }
    return { className: 'text-emerald-600', isCritical: false, message: '' };
  }

  // Para CV y Transfer, menor es mejor
  if (value > thresholds.critical) {
    return {
      className: 'text-red-600 font-bold',
      isCritical: true,
      message: metric === 'cv_aht'
        ? `CV ${value.toFixed(0)}% indica proceso muy inestable/impredecible`
        : `Transfer ${value.toFixed(0)}% muy alto — revisar routing y capacitación`
    };
  }
  if (value > thresholds.warning) {
    return { className: 'text-amber-600 font-medium', isCritical: false, message: '' };
  }
  return { className: 'text-gray-600', isCritical: false, message: '' };
}

// v3.11: Componente para métricas con highlighting condicional
function MetricCell({
  value,
  metric,
  suffix = '%'
}: {
  value: number;
  metric: 'fcr' | 'cv_aht' | 'transfer';
  suffix?: string;
}) {
  const status = getMetricStatus(value, metric);

  return (
    <td className="px-3 py-2 text-right">
      <span className={`inline-flex items-center gap-1 ${status.className}`}>
        {value.toFixed(0)}{suffix}
        {status.isCritical && (
          <AlertTriangle
            className="w-3 h-3"
            title={status.message}
          />
        )}
      </span>
    </td>
  );
}

// v3.4: Sección secundaria de Skills sin colas AUTOMATE (requieren optimización)
function SkillsToOptimizeSection({ drilldownData }: { drilldownData: DrilldownDataPoint[] }) {
  const [showAll, setShowAll] = useState(false);

  // Filtrar skills sin colas AUTOMATE
  const skillsToOptimize = drilldownData.filter(d => !d.isPriorityCandidate);

  if (skillsToOptimize.length === 0) {
    return null;
  }

  // Mostrar top 20 o todos
  const displaySkills = showAll ? skillsToOptimize : skillsToOptimize.slice(0, 20);

  // Calcular totales
  const totalVolume = skillsToOptimize.reduce((sum, s) => sum + s.volume, 0);
  const totalCost = skillsToOptimize.reduce((sum, s) => sum + (s.annualCost || 0), 0);

  // v3.4: Contar colas por Tier en skills a optimizar
  const allQueuesInOptimize = skillsToOptimize.flatMap(s => s.originalQueues);
  const tierCounts = {
    ASSIST: allQueuesInOptimize.filter(q => q.tier === 'ASSIST').length,
    AUGMENT: allQueuesInOptimize.filter(q => q.tier === 'AUGMENT').length,
    'HUMAN-ONLY': allQueuesInOptimize.filter(q => q.tier === 'HUMAN-ONLY').length
  };

  return (
    <div className="bg-white rounded-lg border border-amber-200 overflow-hidden">
      {/* Header */}
      <div className="px-5 py-3 border-b bg-gradient-to-r from-amber-50 to-amber-100/30">
        <div className="flex items-center justify-between">
          <div>
            <h3 className="font-semibold text-amber-800 flex items-center gap-2">
              <Activity className="w-4 h-4" />
              Skills sin colas AUTOMATE
            </h3>
            <p className="text-xs text-amber-600 mt-0.5">
              Procesos tier ASSIST/AUGMENT/HUMAN — requieren optimización antes de automatizar
            </p>
          </div>
          <div className="text-right">
            <span className="text-xl font-bold text-amber-700">{skillsToOptimize.length}</span>
            <p className="text-xs text-amber-600">skills</p>
          </div>
        </div>
      </div>

      {/* v3.4: Resumen por Tier */}
      <div className="px-5 py-2 bg-amber-50/30 border-b border-amber-100 text-xs">
        <div className="flex gap-4 flex-wrap items-center">
          <div className="flex items-center gap-1.5 px-2 py-0.5 bg-blue-100 rounded">
            <Bot className="w-3 h-3 text-blue-600" />
            <span className="text-blue-700"><strong>{tierCounts.ASSIST}</strong> ASSIST</span>
          </div>
          <div className="flex items-center gap-1.5 px-2 py-0.5 bg-amber-100 rounded">
            <TrendingUp className="w-3 h-3 text-amber-600" />
            <span className="text-amber-700"><strong>{tierCounts.AUGMENT}</strong> AUGMENT</span>
          </div>
          {tierCounts['HUMAN-ONLY'] > 0 && (
            <div className="flex items-center gap-1.5 px-2 py-0.5 bg-gray-100 rounded">
              <Users className="w-3 h-3 text-gray-500" />
              <span className="text-gray-600"><strong>{tierCounts['HUMAN-ONLY']}</strong> HUMAN</span>
            </div>
          )}
          <span className="text-gray-400 mx-2">|</span>
          <span className="text-gray-600">
            Volumen: <strong>{totalVolume.toLocaleString()}</strong>
          </span>
          <span className="text-gray-600">
            Coste: <strong>{formatCurrency(totalCost)}</strong>
          </span>
        </div>
      </div>

      {/* Tabla */}
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="text-xs text-gray-500 uppercase tracking-wider bg-gray-50">
              <th className="px-3 py-2 text-left font-medium">Queue Skill</th>
              <th className="px-3 py-2 text-center font-medium">Colas</th>
              <th className="px-3 py-2 text-right font-medium">Volumen</th>
              <th className="px-3 py-2 text-right font-medium">AHT</th>
              <th className="px-3 py-2 text-right font-medium">CV AHT</th>
              <th className="px-3 py-2 text-right font-medium">Transfer</th>
              <th className="px-3 py-2 text-right font-medium">FCR</th>
              <th className="px-3 py-2 text-center font-medium">Tier Dom.</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100">
            {displaySkills.map((item, idx) => {
              // v3.4: Calcular tier dominante del skill
              const skillTierVolumes = {
                ASSIST: item.originalQueues.filter(q => q.tier === 'ASSIST').reduce((s, q) => s + q.volume, 0),
                AUGMENT: item.originalQueues.filter(q => q.tier === 'AUGMENT').reduce((s, q) => s + q.volume, 0),
                'HUMAN-ONLY': item.originalQueues.filter(q => q.tier === 'HUMAN-ONLY').reduce((s, q) => s + q.volume, 0)
              };
              const dominantTier = (Object.keys(skillTierVolumes) as ('ASSIST' | 'AUGMENT' | 'HUMAN-ONLY')[])
                .reduce((a, b) => skillTierVolumes[a] > skillTierVolumes[b] ? a : b) as AgenticTier;

              return (
                <tr key={`${item.skill}-${idx}`} className="hover:bg-amber-50/30">
                  <td className="px-3 py-2 font-medium text-gray-800 max-w-[200px] truncate" title={item.skill}>
                    {item.skill}
                  </td>
                  <td className="px-3 py-2 text-gray-500 text-center text-xs">
                    {item.originalQueues.length}
                  </td>
                  <td className="px-3 py-2 text-gray-600 text-right">{item.volume.toLocaleString()}</td>
                  <td className="px-3 py-2 text-gray-600 text-right">{formatAHT(item.aht_mean)}</td>
                  <MetricCell value={item.cv_aht} metric="cv_aht" />
                  <MetricCell value={item.transfer_rate} metric="transfer" />
                  <MetricCell value={item.fcr_rate} metric="fcr" />
                  <td className="px-3 py-2 text-center">
                    <TierBadge tier={dominantTier} />
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {/* Footer */}
      {skillsToOptimize.length > 20 && (
        <div className="px-5 py-2 bg-gray-50 border-t border-gray-200">
          <button
            onClick={() => setShowAll(!showAll)}
            className="text-xs text-[#6D84E3] hover:underline flex items-center gap-1"
          >
            {showAll ? (
              <>
                <ChevronUp className="w-3 h-3" /> Mostrar menos
              </>
            ) : (
              <>
                <ChevronDown className="w-3 h-3" /> Ver todos ({skillsToOptimize.length})
              </>
            )}
          </button>
        </div>
      )}
    </div>
  );
}

// v3.6: Sección de conexión con Roadmap
function RoadmapConnectionSection({ drilldownData }: { drilldownData: DrilldownDataPoint[] }) {
  // Extraer todas las colas
  const allQueues = drilldownData.flatMap(skill =>
    skill.originalQueues.map(q => ({ ...q, skillName: skill.skill }))
  );

  const totalVolume = allQueues.reduce((sum, q) => sum + q.volume, 0);

  // AUTOMATE queues (Quick Wins)
  const automateQueues = allQueues.filter(q => q.tier === 'AUTOMATE');
  const automateVolume = automateQueues.reduce((sum, q) => sum + q.volume, 0);

  // ASSIST queues (Wave 1 target)
  const assistQueues = allQueues.filter(q => q.tier === 'ASSIST');
  const assistVolume = assistQueues.reduce((sum, q) => sum + q.volume, 0);
  const assistPct = totalVolume > 0 ? (assistVolume / totalVolume) * 100 : 0;

  // HUMAN-ONLY queues with high transfer (Wave 1 focus)
  const humanOnlyHighTransfer = allQueues.filter(q =>
    q.tier === 'HUMAN-ONLY' && q.transfer_rate > 50
  );

  // v3.10: Cálculo de ahorros alineado con modelo TCO del Roadmap
  // Fórmula: Vol × 12 × Rate × (CPI_humano - CPI_target)
  const CPI_HUMANO = 2.33;
  const CPI_BOT = 0.15;
  const CPI_ASSIST_TARGET = 1.50;
  const RATE_AUTOMATE = 0.70;  // 70% contención
  const RATE_ASSIST = 0.30;    // 30% deflection

  // Quick Wins (AUTOMATE): 70% de interacciones pueden ser atendidas por bot
  const annualSavingsAutomate = Math.round(automateVolume * 12 * RATE_AUTOMATE * (CPI_HUMANO - CPI_BOT));
  const monthlySavingsAutomate = Math.round(annualSavingsAutomate / 12);

  // Potential savings from ASSIST (si implementan Copilot): 30% deflection
  const potentialAnnualAssist = Math.round(assistVolume * 12 * RATE_ASSIST * (CPI_HUMANO - CPI_ASSIST_TARGET));

  // Get top skills with AUTOMATE queues
  const skillsWithAutomate = drilldownData
    .filter(skill => skill.originalQueues.some(q => q.tier === 'AUTOMATE'))
    .map(skill => skill.skill)
    .slice(0, 3);

  // Get top skills needing Wave 1 (high HUMAN-ONLY %)
  const skillsNeedingWave1 = drilldownData
    .map(skill => {
      const humanVolume = skill.originalQueues
        .filter(q => q.tier === 'HUMAN-ONLY')
        .reduce((s, q) => s + q.volume, 0);
      const skillVolume = skill.originalQueues.reduce((s, q) => s + q.volume, 0);
      const humanPct = skillVolume > 0 ? (humanVolume / skillVolume) * 100 : 0;
      return { skill: skill.skill, humanPct };
    })
    .filter(s => s.humanPct > 50)
    .sort((a, b) => b.humanPct - a.humanPct)
    .slice(0, 2);

  // Don't render if no data
  if (automateQueues.length === 0 && assistQueues.length === 0) {
    return null;
  }

  return (
    <div className="bg-white rounded-lg border overflow-hidden shadow-sm" style={{ borderColor: COLORS.medium }}>
      {/* Header */}
      <div className="px-5 py-4 border-b" style={{ backgroundColor: COLORS.primary, borderColor: COLORS.primary }}>
        <h3 className="text-lg font-bold text-white flex items-center gap-2">
          <ChevronRight className="w-5 h-5" />
          PRÓXIMOS PASOS → ROADMAP
        </h3>
      </div>

      <div className="p-5 space-y-4">
        <p className="text-sm font-medium" style={{ color: COLORS.dark }}>
          BASADO EN ESTE ANÁLISIS:
        </p>

        {/* Quick Wins */}
        {automateQueues.length > 0 && (
          <div className="rounded-lg p-4 border" style={{ backgroundColor: '#f0fdf4', borderColor: '#86efac' }}>
            <div className="flex items-center gap-2 mb-2">
              <span className="text-lg">✅</span>
              <span className="font-bold text-emerald-800">QUICK WINS INMEDIATOS (sin Wave 1)</span>
            </div>
            <div className="space-y-1 text-sm text-emerald-700">
              <p>
                <strong>{automateQueues.length} colas AUTOMATE</strong> con{' '}
                <strong>{(automateVolume / 1000).toFixed(0)}K interacciones/mes</strong>
              </p>
              <p
                className="cursor-help"
                title={`Cálculo: ${automateVolume.toLocaleString()} int × 12 meses × 70% contención × €2.18/int = €${(annualSavingsAutomate / 1000000).toFixed(1)}M`}
              >
                Ahorro potencial: <strong className="text-emerald-800">€{(annualSavingsAutomate / 1000000).toFixed(1)}M/año</strong>
                <span className="text-emerald-600 ml-1 text-xs">(70% contención × €2.18/int)</span>
              </p>
              {skillsWithAutomate.length > 0 && (
                <p>
                  Skills: <strong>{skillsWithAutomate.join(', ')}</strong>
                </p>
              )}
              <p className="pt-1 text-emerald-600 italic text-xs">
                → Alineado con Wave 4 del Roadmap. Pueden implementarse en paralelo a Wave 1.
              </p>
            </div>
          </div>
        )}

        {/* Wave 1: Foundation */}
        {assistQueues.length > 0 && (
          <div className="rounded-lg p-4 border" style={{ backgroundColor: COLORS.light, borderColor: COLORS.medium }}>
            <div className="flex items-center gap-2 mb-2">
              <span className="text-lg">🔧</span>
              <span className="font-bold" style={{ color: COLORS.dark }}>
                WAVE 1-3: FOUNDATION → ASSIST ({assistQueues.length} colas)
              </span>
            </div>
            <div className="space-y-1 text-sm" style={{ color: COLORS.dark }}>
              <p>
                <strong>{(assistVolume / 1000).toFixed(0)}K interacciones/mes</strong> en tier ASSIST
              </p>
              {skillsNeedingWave1.length > 0 && (
                <p>
                  <strong>Foco Wave 1:</strong> Reducir transfer en{' '}
                  <strong>{skillsNeedingWave1.map(s => s.skill).join(' & ')}</strong>{' '}
                  ({Math.round(skillsNeedingWave1[0]?.humanPct || 0)}% HUMAN)
                </p>
              )}
              <p
                className="cursor-help"
                title={`Cálculo: ${assistVolume.toLocaleString()} int × 12 meses × 30% deflection × €0.83/int`}
              >
                <strong>Potencial con Copilot:</strong>{' '}
                <strong style={{ color: COLORS.primary }}>
                  €{potentialAnnualAssist >= 1000000
                    ? `${(potentialAnnualAssist / 1000000).toFixed(1)}M`
                    : `${(potentialAnnualAssist / 1000).toFixed(0)}K`
                  }/año
                </strong>
                <span className="ml-1 text-xs" style={{ color: COLORS.medium }}>(30% deflection × €0.83/int)</span>
              </p>
              <p className="pt-1 italic text-xs" style={{ color: COLORS.medium }}>
                → Requiere Wave 1 (Foundation) para habilitar Copilot en Wave 3
              </p>
            </div>
          </div>
        )}

        {/* Link to Roadmap */}
        <div className="flex items-center gap-2 pt-2">
          <span className="text-lg">👉</span>
          <span className="text-sm font-medium" style={{ color: COLORS.primary }}>
            Ver pestaña Roadmap para plan detallado
          </span>
        </div>
      </div>
    </div>
  );
}

export function AgenticReadinessTab({ data, onTabChange }: AgenticReadinessTabProps) {
  // Debug: Log drilldown data status
  console.log('🔍 AgenticReadinessTab - drilldownData:', {
    exists: !!data.drilldownData,
    length: data.drilldownData?.length || 0,
    sample: data.drilldownData?.slice(0, 2)
  });

  // Calculate factors from real data (para mostrar detalle de dimensiones)
  const factors = calculateFactorsFromData(data.heatmapData);

  // v3.4: Extraer todas las colas (original_queue_id) de drilldownData
  const allQueues = data.drilldownData?.flatMap(skill => skill.originalQueues) || [];
  const totalQueues = allQueues.length;

  // v3.4: Calcular conteos y volúmenes por Tier
  const tierData = {
    AUTOMATE: {
      count: allQueues.filter(q => q.tier === 'AUTOMATE').length,
      volume: allQueues.filter(q => q.tier === 'AUTOMATE').reduce((s, q) => s + q.volume, 0)
    },
    ASSIST: {
      count: allQueues.filter(q => q.tier === 'ASSIST').length,
      volume: allQueues.filter(q => q.tier === 'ASSIST').reduce((s, q) => s + q.volume, 0)
    },
    AUGMENT: {
      count: allQueues.filter(q => q.tier === 'AUGMENT').length,
      volume: allQueues.filter(q => q.tier === 'AUGMENT').reduce((s, q) => s + q.volume, 0)
    },
    'HUMAN-ONLY': {
      count: allQueues.filter(q => q.tier === 'HUMAN-ONLY').length,
      volume: allQueues.filter(q => q.tier === 'HUMAN-ONLY').reduce((s, q) => s + q.volume, 0)
    }
  };

  // v3.4: Agentic Readiness Score = Volumen en colas AUTOMATE / Volumen Total
  const totalVolume = allQueues.reduce((sum, q) => sum + q.volume, 0);
  const automatizableVolume = tierData.AUTOMATE.volume;
  const agenticReadinessPercent = totalVolume > 0
    ? (automatizableVolume / totalVolume) * 100
    : 0;

  // Count skills (queue_skill level)
  const totalSkills = data.drilldownData?.length || data.heatmapData.length;

  return (
    <div className="space-y-6">
      {/* Cabecera Agentic Readiness Score - Rediseñada */}
      <AgenticReadinessHeader
        tierData={tierData}
        totalVolume={totalVolume}
        totalQueues={totalQueues}
      />

      {/* Factores del Score Global */}
      {data.drilldownData && data.drilldownData.length > 0 && (
        <GlobalFactorsSection
          drilldownData={data.drilldownData}
          tierData={tierData}
          totalVolume={totalVolume}
        />
      )}

      {/* v3.10: Mapa de Oportunidades de Automatización (Bubble Chart) */}
      {data.drilldownData && data.drilldownData.length > 0 && (
        <OpportunityBubbleChart drilldownData={data.drilldownData} />
      )}

      {/* v3.1: Primero lo positivo - Candidatos Prioritarios (panel principal expandible) */}
      {data.drilldownData && data.drilldownData.length > 0 ? (
        <>
          <PriorityCandidatesSection drilldownData={data.drilldownData} />
          <SkillsToOptimizeSection drilldownData={data.drilldownData} />
          {/* v3.5: Red Flags para colas HUMAN-ONLY */}
          <HumanOnlyRedFlagsSection drilldownData={data.drilldownData} />
        </>
      ) : (
        /* Fallback a tabla por Línea de Negocio si no hay drilldown data */
        <SkillsReadinessTable heatmapData={data.heatmapData} />
      )}

      {/* Link al Roadmap */}
      {onTabChange && (
        <div className="text-center pt-4">
          <button
            onClick={() => onTabChange('roadmap')}
            className="text-sm text-blue-600 hover:text-blue-800 hover:underline"
          >
            Ver pestaña Roadmap para plan detallado →
          </button>
        </div>
      )}
    </div>
  );
}

export default AgenticReadinessTab;