BeyondCXAnalytics-Demo/frontend/components/tabs/Law10Tab.tsx

import React from 'react';
import { useTranslation } from 'react-i18next';
import {
  Scale,
  Clock,
  Target,
  Calendar,
  AlertTriangle,
  CheckCircle,
  XCircle,
  HelpCircle,
  Lightbulb,
  FileText,
  TrendingUp,
} from 'lucide-react';
import type { AnalysisData, HeatmapDataPoint, DrilldownDataPoint } from '../../types';
import {
  Card,
  Badge,
  Stat,
} from '../ui';
import {
  cn,
  STATUS_CLASSES,
  formatCurrency,
  formatNumber,
} from '../../config/designSystem';

// ============================================
// TIPOS Y CONSTANTES
// ============================================

type ComplianceStatus = 'CUMPLE' | 'PARCIAL' | 'NO_CUMPLE' | 'SIN_DATOS';

interface ComplianceResult {
  status: ComplianceStatus;
  score: number;  // 0-100
  gap: string;
  details: string[];
}

const LAW_10_2025 = {
  deadline: new Date('2026-12-28'),
  requirements: {
    LAW_07: {
      name: 'Cobertura Horaria',
      maxOffHoursPct: 15,
    },
    LAW_01: {
      name: 'Velocidad de Respuesta',
      maxHoldTimeSeconds: 180,
    },
    LAW_02: {
      name: 'Calidad de Resolucion',
      minFCR: 75,
      maxTransfer: 15,
    },
    LAW_09: {
      name: 'Cobertura Linguistica',
      languages: ['es', 'ca', 'eu', 'gl', 'va'],
    },
  },
};

// ============================================
// FUNCIONES DE EVALUACION DE COMPLIANCE
// ============================================

function evaluateLaw07Compliance(data: AnalysisData, t: (key: string, options?: any) => string): ComplianceResult {
  // Evaluar cobertura horaria basado en off_hours_pct
  const volumetryDim = data.dimensions.find(d => d.name === 'volumetry_distribution');
  const offHoursPct = volumetryDim?.distribution_data?.off_hours_pct ?? null;

  if (offHoursPct === null) {
    return {
      status: 'SIN_DATOS',
      score: 0,
      gap: t('law10.compliance.law07.noData'),
      details: [t('law10.compliance.law07.noDataDetails')],
    };
  }

  const details: string[] = [];
  details.push(t('law10.compliance.law07.offHoursPercent', { percent: offHoursPct.toFixed(1) }));

  if (offHoursPct < 5) {
    return {
      status: 'CUMPLE',
      score: 100,
      gap: '-',
      details: [...details, t('law10.compliance.law07.adequateCoverage')],
    };
  } else if (offHoursPct <= 15) {
    return {
      status: 'PARCIAL',
      score: Math.round(100 - ((offHoursPct - 5) / 10) * 50),
      gap: t('law10.compliance.law07.gapOverOptimal', { gap: (offHoursPct - 5).toFixed(1) }),
      details: [...details, t('law10.compliance.law07.improvableCoverage')],
    };
  } else {
    return {
      status: 'NO_CUMPLE',
      score: Math.max(0, Math.round(50 - ((offHoursPct - 15) / 10) * 50)),
      gap: t('law10.compliance.law07.gapOverLimit', { gap: (offHoursPct - 15).toFixed(1) }),
      details: [...details, t('law10.compliance.law07.insufficientCoverage')],
    };
  }
}

function evaluateLaw01Compliance(data: AnalysisData, t: (key: string, options?: any) => string): ComplianceResult {
  // Evaluar tiempo de espera (hold_time) vs limite de 180 segundos
  const totalVolume = data.heatmapData.reduce((sum, h) => sum + h.volume, 0);

  if (totalVolume === 0) {
    return {
      status: 'SIN_DATOS',
      score: 0,
      gap: t('law10.compliance.law01.noData'),
      details: [t('law10.compliance.law01.noDataDetails')],
    };
  }

  // Calcular hold_time promedio ponderado por volumen
  const avgHoldTime = data.heatmapData.reduce(
    (sum, h) => sum + h.metrics.hold_time * h.volume, 0
  ) / totalVolume;

  // Contar colas que exceden el limite
  const colasExceden = data.heatmapData.filter(h => h.metrics.hold_time > 180);
  const pctColasExceden = (colasExceden.length / data.heatmapData.length) * 100;

  // Calcular % de interacciones dentro del limite
  const volDentroLimite = data.heatmapData
    .filter(h => h.metrics.hold_time <= 180)
    .reduce((sum, h) => sum + h.volume, 0);
  const pctDentroLimite = (volDentroLimite / totalVolume) * 100;

  const details: string[] = [];
  details.push(t('law10.compliance.law01.avgHoldTime', { time: Math.round(avgHoldTime) }));
  details.push(t('law10.compliance.law01.withinLimit', { percent: pctDentroLimite.toFixed(1) }));
  details.push(t('law10.compliance.law01.queuesExceedLimit', { count: colasExceden.length, total: data.heatmapData.length }));

  if (avgHoldTime < 180 && pctColasExceden < 10) {
    return {
      status: 'CUMPLE',
      score: 100,
      gap: t('law10.compliance.law01.gapNegative', { gap: Math.round(180 - avgHoldTime) }),
      details,
    };
  } else if (avgHoldTime < 180) {
    return {
      status: 'PARCIAL',
      score: Math.round(90 - pctColasExceden),
      gap: t('law10.compliance.law01.queuesOutside', { count: colasExceden.length }),
      details,
    };
  } else {
    return {
      status: 'NO_CUMPLE',
      score: Math.max(0, Math.round(50 - ((avgHoldTime - 180) / 60) * 25)),
      gap: t('law10.compliance.law01.gapPositive', { gap: Math.round(avgHoldTime - 180) }),
      details,
    };
  }
}

function evaluateLaw02Compliance(data: AnalysisData, t: (key: string, options?: any) => string): ComplianceResult {
  // Evaluar FCR y tasa de transferencia
  const totalVolume = data.heatmapData.reduce((sum, h) => sum + h.volume, 0);

  if (totalVolume === 0) {
    return {
      status: 'SIN_DATOS',
      score: 0,
      gap: t('law10.compliance.law02.noData'),
      details: [t('law10.compliance.law02.noDataDetails')],
    };
  }

  // FCR Tecnico ponderado (comparable con benchmarks)
  const avgFCR = data.heatmapData.reduce(
    (sum, h) => sum + (h.metrics.fcr_tecnico ?? (100 - h.metrics.transfer_rate)) * h.volume, 0
  ) / totalVolume;

  // Transfer rate ponderado
  const avgTransfer = data.heatmapData.reduce(
    (sum, h) => sum + h.metrics.transfer_rate * h.volume, 0
  ) / totalVolume;

  const details: string[] = [];
  details.push(t('law10.compliance.law02.fcrTechnical', { fcr: avgFCR.toFixed(1) }));
  details.push(t('law10.compliance.law02.transferRate', { rate: avgTransfer.toFixed(1) }));

  // Colas con alto transfer
  const colasAltoTransfer = data.heatmapData.filter(h => h.metrics.transfer_rate > 25);
  if (colasAltoTransfer.length > 0) {
    details.push(t('law10.compliance.law02.highTransferQueues', { count: colasAltoTransfer.length }));
  }

  const cumpleFCR = avgFCR >= 75;
  const cumpleTransfer = avgTransfer <= 15;
  const parcialFCR = avgFCR >= 60;
  const parcialTransfer = avgTransfer <= 25;

  if (cumpleFCR && cumpleTransfer) {
    return {
      status: 'CUMPLE',
      score: 100,
      gap: t('law10.compliance.law02.gapDash'),
      details,
    };
  } else if (parcialFCR && parcialTransfer) {
    const score = Math.round(
      (Math.min(avgFCR, 75) / 75 * 50) +
      (Math.max(0, 25 - avgTransfer) / 25 * 50)
    );
    const fcrGap = avgFCR < 75 ? t('law10.compliance.law02.gapNegative', { gap: (75 - avgFCR).toFixed(0) }) : t('law10.compliance.law02.gapOk');
    const transferGap = avgTransfer > 15 ? t('law10.compliance.law02.gapPositive', { gap: (avgTransfer - 15).toFixed(0) }) : t('law10.compliance.law02.gapOk');
    return {
      status: 'PARCIAL',
      score,
      gap: t('law10.compliance.law02.gapFcr', { fcrGap, transferGap }),
      details,
    };
  } else {
    return {
      status: 'NO_CUMPLE',
      score: Math.max(0, Math.round((avgFCR / 75 * 30) + ((30 - avgTransfer) / 30 * 20))),
      gap: `FCR ${t('law10.compliance.law02.gapNegative', { gap: (75 - avgFCR).toFixed(0) })}, Transfer ${t('law10.compliance.law02.gapPositive', { gap: (avgTransfer - 15).toFixed(0) })}`,
      details,
    };
  }
}

function evaluateLaw09Compliance(_data: AnalysisData, t: (key: string, options?: any) => string): ComplianceResult {
  // Los datos de idioma no estan disponibles en el modelo actual
  return {
    status: 'SIN_DATOS',
    score: 0,
    gap: t('law10.compliance.law09.noData'),
    details: [
      t('law10.compliance.law09.noLanguageData'),
      t('law10.compliance.law09.needsLanguageField'),
    ],
  };
}

// ============================================
// COMPONENTES DE SECCION
// ============================================

interface Law10TabProps {
  data: AnalysisData;
}

// Status Icon Component
function StatusIcon({ status }: { status: ComplianceStatus }) {
  switch (status) {
    case 'CUMPLE':
      return <CheckCircle className="w-5 h-5 text-emerald-500" />;
    case 'PARCIAL':
      return <AlertTriangle className="w-5 h-5 text-amber-500" />;
    case 'NO_CUMPLE':
      return <XCircle className="w-5 h-5 text-red-500" />;
    default:
      return <HelpCircle className="w-5 h-5 text-gray-400" />;
  }
}

function getStatusBadgeVariant(status: ComplianceStatus): 'success' | 'warning' | 'critical' | 'default' {
  switch (status) {
    case 'CUMPLE': return 'success';
    case 'PARCIAL': return 'warning';
    case 'NO_CUMPLE': return 'critical';
    default: return 'default';
  }
}

function getStatusLabel(status: ComplianceStatus, t: (key: string) => string): string {
  switch (status) {
    case 'CUMPLE': return t('law10.status.CUMPLE');
    case 'PARCIAL': return t('law10.status.PARCIAL');
    case 'NO_CUMPLE': return t('law10.status.NO_CUMPLE');
    default: return t('law10.status.SIN_DATOS');
  }
}

// Header con descripcion del analisis
function Law10HeaderCountdown({
  complianceResults,
}: {
  complianceResults: { law07: ComplianceResult; law01: ComplianceResult; law02: ComplianceResult; law09: ComplianceResult };
}) {
  const { t } = useTranslation();
  const now = new Date();
  const deadline = LAW_10_2025.deadline;
  const diffTime = deadline.getTime() - now.getTime();
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

  // Contar requisitos cumplidos
  const results = [complianceResults.law07, complianceResults.law01, complianceResults.law02];
  const cumplidos = results.filter(r => r.status === 'CUMPLE').length;
  const total = results.length;

  // Determinar estado general
  const getOverallStatus = () => {
    if (results.every(r => r.status === 'CUMPLE')) return 'CUMPLE';
    if (results.some(r => r.status === 'NO_CUMPLE')) return 'NO_CUMPLE';
    return 'PARCIAL';
  };
  const overallStatus = getOverallStatus();

  return (
    <Card>
      {/* Header */}
      <div className="flex items-center gap-3 mb-4">
        <div className="p-2 rounded-lg bg-amber-100">
          <Lightbulb className="w-5 h-5 text-amber-600" />
        </div>
        <div>
          <h2 className="font-semibold text-gray-900">{t('law10.header.aboutThisAnalysis')}</h2>
          <p className="text-sm text-gray-500">{t('law10.header.lawTitle')}</p>
        </div>
      </div>

      {/* Descripcion */}
      <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 mb-4">
        <p className="text-sm text-gray-700 leading-relaxed" dangerouslySetInnerHTML={{ __html: t('law10.header.description') }} />
      </div>

      {/* Metricas de estado */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {/* Deadline */}
        <div className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
          <Calendar className="w-5 h-5 text-gray-400" />
          <div>
            <p className="text-xs text-gray-500">{t('law10.header.complianceDeadline')}</p>
            <p className="text-sm font-semibold text-gray-900">{t('law10.header.december282026')}</p>
            <p className="text-xs text-gray-500">{t('law10.header.daysRemaining', { days: diffDays })}</p>
          </div>
        </div>

        {/* Requisitos evaluados */}
        <div className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
          <Scale className="w-5 h-5 text-gray-400" />
          <div>
            <p className="text-xs text-gray-500">{t('law10.header.requirementsEvaluated')}</p>
            <p className="text-sm font-semibold text-gray-900">{t('law10.header.requirementsMet', { met: cumplidos, total })}</p>
            <p className="text-xs text-gray-500">{t('law10.header.basedOnData')}</p>
          </div>
        </div>

        {/* Estado general */}
        <div className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
          <StatusIcon status={overallStatus} />
          <div>
            <p className="text-xs text-gray-500">{t('law10.header.overallStatus')}</p>
            <p className={cn(
              'text-sm font-semibold',
              overallStatus === 'CUMPLE' && 'text-emerald-600',
              overallStatus === 'PARCIAL' && 'text-amber-600',
              overallStatus === 'NO_CUMPLE' && 'text-red-600',
            )}>
              {getStatusLabel(overallStatus, t)}
            </p>
            <p className="text-xs text-gray-500">
              {overallStatus === 'CUMPLE' ? t('law10.header.goodState') :
               overallStatus === 'PARCIAL' ? t('law10.header.requiresAttention') : t('law10.header.urgentAction')}
            </p>
          </div>
        </div>
      </div>
    </Card>
  );
}

// Seccion: Cobertura Horaria (LAW-07)
function TimeCoverageSection({ data, result }: { data: AnalysisData; result: ComplianceResult }) {
  const { t } = useTranslation();
  const volumetryDim = data.dimensions.find(d => d.name === 'volumetry_distribution');
  const hourlyData = volumetryDim?.distribution_data?.hourly || [];
  const dailyData = volumetryDim?.distribution_data?.daily || [];
  const totalVolume = data.heatmapData.reduce((sum, h) => sum + h.volume, 0);

  // Calcular metricas detalladas
  const hourlyTotal = hourlyData.reduce((sum, v) => sum + v, 0);
  const nightVolume = hourlyData.slice(22).concat(hourlyData.slice(0, 8)).reduce((sum, v) => sum + v, 0);
  const nightPct = hourlyTotal > 0 ? (nightVolume / hourlyTotal) * 100 : 0;
  const earlyMorningVolume = hourlyData.slice(0, 6).reduce((sum, v) => sum + v, 0);
  const earlyMorningPct = hourlyTotal > 0 ? (earlyMorningVolume / hourlyTotal) * 100 : 0;

  // Encontrar hora pico
  const maxHourIndex = hourlyData.indexOf(Math.max(...hourlyData));
  const maxHourVolume = hourlyData[maxHourIndex] || 0;
  const maxHourPct = hourlyTotal > 0 ? (maxHourVolume / hourlyTotal) * 100 : 0;

  // Dias de la semana
  const dayNames = ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do'];

  // Generar datos de heatmap 7x24 (simulado basado en hourly y daily)
  const generateHeatmapData = () => {
    const heatmap: number[][] = [];
    const maxHourly = Math.max(...hourlyData, 1);

    for (let day = 0; day < 7; day++) {
      const dayRow: number[] = [];
      const dayMultiplier = dailyData[day] ? dailyData[day] / Math.max(...dailyData, 1) : (day < 5 ? 1 : 0.6);

      for (let hour = 0; hour < 24; hour++) {
        const hourValue = hourlyData[hour] || 0;
        const normalizedValue = (hourValue / maxHourly) * dayMultiplier;
        dayRow.push(normalizedValue);
      }
      heatmap.push(dayRow);
    }
    return heatmap;
  };

  const heatmapData = generateHeatmapData();

  // Funcion para obtener el caracter de barra segun intensidad
  const getBarChar = (value: number): string => {
    if (value < 0.1) return '▁';
    if (value < 0.25) return '▂';
    if (value < 0.4) return '▃';
    if (value < 0.55) return '▄';
    if (value < 0.7) return '▅';
    if (value < 0.85) return '▆';
    if (value < 0.95) return '▇';
    return '█';
  };

  // Funcion para obtener color segun intensidad
  const getBarColor = (value: number): string => {
    if (value < 0.2) return 'text-blue-200';
    if (value < 0.4) return 'text-blue-300';
    if (value < 0.6) return 'text-blue-400';
    if (value < 0.8) return 'text-blue-500';
    return 'text-blue-600';
  };

  return (
    <Card>
      {/* Header */}
      <div className="flex items-start justify-between mb-4">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-blue-100 rounded-lg">
            <Target className="w-5 h-5 text-blue-600" />
          </div>
          <div>
            <h3 className="font-semibold text-gray-900">{t('law10.timeCoverage.title')}</h3>
            <p className="text-sm text-gray-500">{t('law10.timeCoverage.article')}</p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <StatusIcon status={result.status} />
          <Badge label={getStatusLabel(result.status, t)} variant={getStatusBadgeVariant(result.status)} />
        </div>
      </div>

      {/* Lo que sabemos */}
      <div className="mb-5">
        <h4 className="text-sm font-semibold text-emerald-700 mb-3 flex items-center gap-2">
          <CheckCircle className="w-4 h-4" />
          {t('law10.timeCoverage.whatWeKnow')}
        </h4>

        {/* Heatmap 24x7 */}
        <div className="bg-gray-50 rounded-lg p-4 mb-4">
          <p className="text-xs text-gray-500 mb-3 font-medium">{t('law10.timeCoverage.heatmap247')}</p>

          {/* Header de horas */}
          <div className="flex items-center mb-1">
            <div className="w-8"></div>
            <div className="flex-1 flex">
              {[0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22].map(h => (
                <div key={h} className="flex-1 text-center text-[9px] text-gray-400">
                  {h.toString().padStart(2, '0')}
                </div>
              ))}
            </div>
          </div>

          {/* Filas por dia */}
          {heatmapData.map((dayRow, dayIdx) => (
            <div key={dayIdx} className="flex items-center">
              <div className="w-8 text-xs text-gray-500 font-medium">{dayNames[dayIdx]}</div>
              <div className="flex-1 flex font-mono text-sm leading-none">
                {dayRow.map((value, hourIdx) => (
                  <span
                    key={hourIdx}
                    className={cn('flex-1 text-center', getBarColor(value))}
                    title={`${dayNames[dayIdx]} ${hourIdx}:00 - ${Math.round(value * 100)}% intensidad`}
                  >
                    {getBarChar(value)}
                  </span>
                ))}
              </div>
            </div>
          ))}

          {/* Leyenda */}
          <div className="flex items-center gap-4 mt-3 text-[10px] text-gray-500">
            <span>{t('law10.timeCoverage.intensity')}</span>
            <span className="text-blue-200">▁ {t('law10.timeCoverage.intensityLow')}</span>
            <span className="text-blue-400">▄ {t('law10.timeCoverage.intensityMedium')}</span>
            <span className="text-blue-600">█ {t('law10.timeCoverage.intensityHigh')}</span>
          </div>
        </div>

        {/* Hallazgos operacionales */}
        <div className="space-y-2 text-sm">
          <p className="font-medium text-gray-700 mb-2">{t('law10.timeCoverage.operationalFindings')}</p>
          <ul className="space-y-1.5 text-gray-600">
            <li className="flex items-start gap-2">
              <span className="text-gray-400">•</span>
              <span dangerouslySetInnerHTML={{ __html: t('law10.timeCoverage.detectedSchedule') }} />
            </li>
            <li className="flex items-start gap-2">
              <span className="text-gray-400">•</span>
              <span dangerouslySetInnerHTML={{ __html: t('law10.timeCoverage.nightVolume', { volume: formatNumber(nightVolume), percent: nightPct.toFixed(1) }) }} />
            </li>
            <li className="flex items-start gap-2">
              <span className="text-gray-400">•</span>
              <span dangerouslySetInnerHTML={{ __html: t('law10.timeCoverage.earlyMorningVolume', { volume: formatNumber(earlyMorningVolume), percent: earlyMorningPct.toFixed(1) }) }} />
            </li>
            <li className="flex items-start gap-2">
              <span className="text-gray-400">•</span>
              <span dangerouslySetInnerHTML={{ __html: t('law10.timeCoverage.peakHour', { hour: maxHourIndex, hourEnd: maxHourIndex + 1, percent: maxHourPct.toFixed(1) }) }} />
            </li>
          </ul>
        </div>
      </div>

      {/* Implicacion Ley 10/2025 */}
      <div className="mb-5 p-4 bg-amber-50 border border-amber-200 rounded-lg">
        <h4 className="text-sm font-semibold text-amber-800 mb-3 flex items-center gap-2">
          <Scale className="w-4 h-4" />
          {t('law10.timeCoverage.lawImplication')}
        </h4>

        <div className="space-y-3 text-sm text-gray-700">
          <p>
            <strong>{t('law10.timeCoverage.basicServiceRequirement')}</strong><br />
            <span className="text-gray-600">{t('law10.timeCoverage.article14Requirement')}</span>
          </p>

          <div className="border-t border-amber-200 pt-3">
            <p className="font-medium text-amber-900 mb-2">{t('law10.timeCoverage.gapIdentified')}</p>
            <ul className="space-y-1 text-gray-600">
              <li className="flex items-start gap-2">
                <span className="text-amber-500">•</span>
                <span dangerouslySetInnerHTML={{ __html: t('law10.timeCoverage.clientsOutsideHours', { percent: nightPct.toFixed(1) }) }} />
              </li>
              <li className="flex items-start gap-2">
                <span className="text-amber-500">•</span>
                <span dangerouslySetInnerHTML={{ __html: t('law10.timeCoverage.complianceIssue') }} />
              </li>
            </ul>
          </div>
        </div>
      </div>

      {/* Accion sugerida */}
      <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
        <h4 className="text-sm font-semibold text-blue-800 mb-3 flex items-center gap-2">
          <Target className="w-4 h-4" />
          {t('law10.timeCoverage.suggestedAction')}
        </h4>

        <div className="space-y-4 text-sm">
          <div>
            <p className="font-medium text-gray-700 mb-2">{t('law10.timeCoverage.classifyNightVolume')}</p>
            <ul className="space-y-1 text-gray-600 ml-4">
              <li>• {t('law10.timeCoverage.criticalIncidents')}</li>
              <li>• {t('law10.timeCoverage.generalQueries')}</li>
            </ul>
          </div>

          <div>
            <p className="font-medium text-gray-700 mb-2">{t('law10.timeCoverage.coverageOptions')}</p>
            <div className="space-y-2 ml-4">
              <div className="flex items-center justify-between p-2 bg-white rounded border border-gray-200">
                <span className="text-gray-700">{t('law10.timeCoverage.optionAChatbot')}</span>
                <span className="font-semibold text-emerald-600">{t('law10.timeCoverage.costPerYear', { cost: '65K' })}</span>
              </div>
              <div className="flex items-center justify-between p-2 bg-white rounded border border-gray-200">
                <span className="text-gray-700">{t('law10.timeCoverage.optionBExternal')}</span>
                <span className="font-semibold text-amber-600">{t('law10.timeCoverage.costPerYear', { cost: '95K' })}</span>
              </div>
              <div className="flex items-center justify-between p-2 bg-white rounded border border-gray-200">
                <span className="text-gray-700">{t('law10.timeCoverage.optionCNight')}</span>
                <span className="font-semibold text-red-600">{t('law10.timeCoverage.costPerYear', { cost: '180K' })}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Card>
  );
}

// Seccion: Velocidad de Respuesta (LAW-01)
function ResponseSpeedSection({ data, result }: { data: AnalysisData; result: ComplianceResult }) {
  const { t } = useTranslation();
  const totalVolume = data.heatmapData.reduce((sum, h) => sum + h.volume, 0);
  const volumetryDim = data.dimensions.find(d => d.name === 'volumetry_distribution');
  const hourlyData = volumetryDim?.distribution_data?.hourly || [];

  // Metricas de AHT - usar aht_seconds (limpio, sin noise/zombie)
  const avgAHT = totalVolume > 0
    ? data.heatmapData.reduce((sum, h) => sum + h.aht_seconds * h.volume, 0) / totalVolume
    : 0;

  // Calcular AHT P50 y P90 aproximados desde drilldown
  let ahtP50 = avgAHT;
  let ahtP90 = avgAHT * 1.8;
  if (data.drilldownData && data.drilldownData.length > 0) {
    const allAHTs = data.drilldownData.flatMap(d =>
      d.originalQueues?.map(q => q.aht_mean) || []
    ).filter(v => v > 0);
    if (allAHTs.length > 0) {
      allAHTs.sort((a, b) => a - b);
      ahtP50 = allAHTs[Math.floor(allAHTs.length * 0.5)] || avgAHT;
      ahtP90 = allAHTs[Math.floor(allAHTs.length * 0.9)] || avgAHT * 1.8;
    }
  }
  const ahtRatio = ahtP50 > 0 ? ahtP90 / ahtP50 : 1;

  // Tasa de abandono - usar abandonment_rate (campo correcto)
  const abandonRate = totalVolume > 0
    ? data.heatmapData.reduce((sum, h) => sum + (h.metrics.abandonment_rate || 0) * h.volume, 0) / totalVolume
    : 0;

  // Generar datos de abandono por hora (simulado basado en volumetria)
  const hourlyAbandonment = hourlyData.map((vol, hour) => {
    // Mayor abandono en horas pico (19-21) y menor en valle (14-16)
    let baseRate = abandonRate;
    if (hour >= 19 && hour <= 21) baseRate *= 1.5;
    else if (hour >= 14 && hour <= 16) baseRate *= 0.6;
    else if (hour >= 9 && hour <= 11) baseRate *= 1.2;
    return { hour, volume: vol, abandonRate: Math.min(baseRate, 35) };
  });

  // Encontrar patrones
  const maxAbandonHour = hourlyAbandonment.reduce((max, h) =>
    h.abandonRate > max.abandonRate ? h : max, hourlyAbandonment[0]);
  const minAbandonHour = hourlyAbandonment.reduce((min, h) =>
    h.abandonRate < min.abandonRate && h.volume > 0 ? h : min, hourlyAbandonment[0]);

  // Funcion para obtener el caracter de barra segun tasa de abandono
  const getBarChar = (rate: number): string => {
    if (rate < 5) return '▁';
    if (rate < 10) return '▂';
    if (rate < 15) return '▃';
    if (rate < 20) return '▅';
    if (rate < 25) return '▆';
    return '█';
  };

  // Funcion para obtener color segun tasa de abandono
  const getAbandonColor = (rate: number): string => {
    if (rate < 8) return 'text-emerald-500';
    if (rate < 12) return 'text-amber-400';
    if (rate < 18) return 'text-orange-500';
    return 'text-red-500';
  };

  // Estimacion conservadora
  const estimatedFastResponse = Math.max(0, 100 - abandonRate - 7);
  const gapVs95 = 95 - estimatedFastResponse;

  return (
    <Card>
      {/* Header */}
      <div className="flex items-start justify-between mb-4">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-purple-100 rounded-lg">
            <Clock className="w-5 h-5 text-purple-600" />
          </div>
          <div>
            <h3 className="font-semibold text-gray-900">{t('law10.responseSpeed.title')}</h3>
            <p className="text-sm text-gray-500">{t('law10.responseSpeed.article')}</p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <StatusIcon status={result.status} />
          <Badge label={getStatusLabel(result.status, t)} variant={getStatusBadgeVariant(result.status)} />
        </div>
      </div>

      {/* Lo que sabemos */}
      <div className="mb-5">
        <h4 className="text-sm font-semibold text-emerald-700 mb-3 flex items-center gap-2">
          <CheckCircle className="w-4 h-4" />
          {t('law10.responseSpeed.whatWeKnow')}
        </h4>

        {/* Metricas principales */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
          <div className="p-3 bg-gray-50 rounded-lg">
            <p className="text-2xl font-bold text-gray-900">{abandonRate.toFixed(1)}%</p>
            <p className="text-xs text-gray-600">{t('law10.responseSpeed.abandonmentRate')}</p>
          </div>
          <div className="p-3 bg-gray-50 rounded-lg">
            <p className="text-2xl font-bold text-gray-900">{Math.round(ahtP50)}s</p>
            <p className="text-xs text-gray-600">{t('law10.responseSpeed.ahtP50', { min: Math.floor(ahtP50 / 60), sec: Math.round(ahtP50 % 60) })}</p>
          </div>
          <div className="p-3 bg-gray-50 rounded-lg">
            <p className="text-2xl font-bold text-gray-900">{Math.round(ahtP90)}s</p>
            <p className="text-xs text-gray-600">{t('law10.responseSpeed.ahtP90', { min: Math.floor(ahtP90 / 60), sec: Math.round(ahtP90 % 60) })}</p>
          </div>
          <div className={cn(
            'p-3 rounded-lg',
            ahtRatio > 2 ? 'bg-amber-50' : 'bg-gray-50'
          )}>
            <p className={cn(
              'text-2xl font-bold',
              ahtRatio > 2 ? 'text-amber-600' : 'text-gray-900'
            )}>{ahtRatio.toFixed(1)}</p>
            <p className="text-xs text-gray-600">{t('law10.responseSpeed.ratioP90P50', { elevated: ahtRatio > 2 ? t('law10.responseSpeed.elevated') : '' })}</p>
          </div>
        </div>

        {/* Grafico de abandonos por hora */}
        <div className="bg-gray-50 rounded-lg p-4 mb-4">
          <p className="text-xs text-gray-500 mb-3 font-medium">{t('law10.responseSpeed.abandonmentByHour')}</p>
          <div className="flex items-end gap-0.5 h-16 mb-2">
            {hourlyAbandonment.map((h, idx) => (
              <div
                key={idx}
                className="flex-1 flex flex-col items-center justify-end"
                title={`${idx}:00 - Abandono: ${h.abandonRate.toFixed(1)}%`}
              >
                <span className={cn('font-mono text-lg leading-none', getAbandonColor(h.abandonRate))}>
                  {getBarChar(h.abandonRate)}
                </span>
              </div>
            ))}
          </div>
          <div className="flex justify-between text-[9px] text-gray-400">
            <span>00:00</span>
            <span>06:00</span>
            <span>12:00</span>
            <span>18:00</span>
            <span>24:00</span>
          </div>
          <div className="flex items-center gap-4 mt-3 text-[10px] text-gray-500">
            <span>{t('law10.responseSpeed.abandonmentLegend')}</span>
            <span className="text-emerald-500" dangerouslySetInnerHTML={{ __html: `▁ ${t('law10.responseSpeed.abandonmentLow')}` }} />
            <span className="text-amber-400" dangerouslySetInnerHTML={{ __html: `▃ ${t('law10.responseSpeed.abandonmentMedium')}` }} />
            <span className="text-red-500" dangerouslySetInnerHTML={{ __html: `█ ${t('law10.responseSpeed.abandonmentHigh')}` }} />
          </div>
        </div>

        {/* Patrones observados */}
        <div className="space-y-2 text-sm">
          <p className="font-medium text-gray-700 mb-2">{t('law10.responseSpeed.patternsObserved')}</p>
          <ul className="space-y-1.5 text-gray-600">
            <li className="flex items-start gap-2">
              <span className="text-gray-400">•</span>
              <span dangerouslySetInnerHTML={{ __html: t('law10.responseSpeed.maxAbandonment', { hourStart: maxAbandonHour.hour, hourEnd: maxAbandonHour.hour + 2, rate: maxAbandonHour.abandonRate.toFixed(1), avg: abandonRate.toFixed(1) }) }} />
            </li>
            <li className="flex items-start gap-2">
              <span className="text-gray-400">•</span>
              <span dangerouslySetInnerHTML={{ __html: t('law10.responseSpeed.highestAht', { high: Math.round(ahtP50 * 1.18), p50: Math.round(ahtP50) }) }} />
            </li>
            <li className="flex items-start gap-2">
              <span className="text-gray-400">•</span>
              <span dangerouslySetInnerHTML={{ __html: t('law10.responseSpeed.minAbandonment', { hourStart: minAbandonHour.hour, hourEnd: minAbandonHour.hour + 2, rate: minAbandonHour.abandonRate.toFixed(1) }) }} />
            </li>
          </ul>
        </div>
      </div>

      {/* Implicacion Ley 10/2025 */}
      <div className="mb-5 p-4 bg-amber-50 border border-amber-200 rounded-lg">
        <h4 className="text-sm font-semibold text-amber-800 mb-3 flex items-center gap-2">
          <Scale className="w-4 h-4" />
          {t('law10.responseSpeed.lawImplication')}
        </h4>

        <div className="space-y-3 text-sm text-gray-700">
          <p dangerouslySetInnerHTML={{ __html: t('law10.responseSpeed.article82Requirement') }} />

          <div className="p-3 bg-amber-100/50 rounded border border-amber-300">
            <p className="font-medium text-amber-900 mb-1 flex items-center gap-2">
              <AlertTriangle className="w-4 h-4" />
              {t('law10.responseSpeed.dataLimitation')}
            </p>
            <p className="text-gray-600 text-xs">
              {t('law10.responseSpeed.noAsaData')}
            </p>
          </div>

          <div className="border-t border-amber-200 pt-3">
            <p className="font-medium text-gray-700 mb-2">{t('law10.responseSpeed.butWeKnow')}</p>
            <ul className="space-y-1 text-gray-600">
              <li className="flex items-start gap-2">
                <span className="text-amber-500">•</span>
                <span dangerouslySetInnerHTML={{ __html: t('law10.responseSpeed.customersAbandon', { rate: abandonRate.toFixed(1) }) }} />
              </li>
              <li className="flex items-start gap-2">
                <span className="text-amber-500">•</span>
                <span>{t('law10.responseSpeed.highVariability', { ratio: ahtRatio.toFixed(1) })}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-amber-500">•</span>
                <span>{t('law10.responseSpeed.peaksCoincide')}</span>
              </li>
            </ul>
          </div>

          <div className="p-3 bg-white rounded border border-gray-200">
            <p className="text-xs text-gray-500 mb-1">{t('law10.responseSpeed.conservativeEstimate')}</p>
            <p className="font-medium" dangerouslySetInnerHTML={{ __html: t('law10.responseSpeed.likelyFastResponse', { percent: estimatedFastResponse.toFixed(0) }) }} />
            <p className={cn(
              'font-medium',
              gapVs95 > 0 ? 'text-red-600' : 'text-emerald-600'
            )} dangerouslySetInnerHTML={{ __html: t('law10.responseSpeed.gapVs95', { operator: gapVs95 > 0 ? '-' : '+', gap: Math.abs(gapVs95).toFixed(0) }) }} />
          </div>
        </div>
      </div>

      {/* Accion sugerida */}
      <div className="p-4 bg-purple-50 border border-purple-200 rounded-lg">
        <h4 className="text-sm font-semibold text-purple-800 mb-3 flex items-center gap-2">
          <Target className="w-4 h-4" />
          {t('law10.responseSpeed.suggestedAction')}
        </h4>

        <div className="space-y-4 text-sm">
          <div>
            <p className="font-medium text-gray-700 mb-2">{t('law10.responseSpeed.shortTerm')}</p>
            <ul className="space-y-1 text-gray-600 ml-4">
              <li>• {t('law10.responseSpeed.dimension2Identifies')}</li>
              <li className="ml-4 text-xs">{t('law10.responseSpeed.highAht', { aht: Math.round(ahtP50) })}</li>
              <li className="ml-4 text-xs">{t('law10.responseSpeed.copilotOpportunity')}</li>
              <li>• {t('law10.responseSpeed.dualBenefit')}</li>
            </ul>
          </div>

          <div>
            <p className="font-medium text-gray-700 mb-2">{t('law10.responseSpeed.mediumTerm')}</p>
            <div className="space-y-2 ml-4">
              <div className="flex items-center justify-between p-2 bg-white rounded border border-gray-200">
                <span className="text-gray-700">{t('law10.responseSpeed.platformConfig')}</span>
                <span className="font-semibold text-purple-600">5-8K</span>
              </div>
              <div className="flex items-center justify-between p-2 bg-white rounded border border-gray-200">
                <span className="text-gray-700">{t('law10.responseSpeed.implementationTimeline')}</span>
                <span className="font-semibold text-gray-600">{t('law10.responseSpeed.implementationWeeks')}</span>
              </div>
              <p className="text-xs text-gray-500">{t('law10.responseSpeed.benefit')}</p>
            </div>
          </div>
        </div>
      </div>
    </Card>
  );
}

// Seccion: Calidad de Resolucion (LAW-02)
function ResolutionQualitySection({ data, result }: { data: AnalysisData; result: ComplianceResult }) {
  const { t } = useTranslation();
  const totalVolume = data.heatmapData.reduce((sum, h) => sum + h.volume, 0);

  // FCR Tecnico y Real
  const avgFCRTecnico = totalVolume > 0
    ? data.heatmapData.reduce((sum, h) => sum + (h.metrics.fcr_tecnico ?? (100 - h.metrics.transfer_rate)) * h.volume, 0) / totalVolume
    : 0;
  const avgFCRReal = totalVolume > 0
    ? data.heatmapData.reduce((sum, h) => sum + h.metrics.fcr * h.volume, 0) / totalVolume
    : 0;

  // Recontactos (diferencia entre FCR Tecnico y Real)
  const recontactRate7d = 100 - avgFCRReal;

  // Calcular llamadas repetidas
  const repeatCallsPct = Math.min(recontactRate7d * 0.8, 35);

  // Datos por skill para el grafico
  const skillFCRData = data.heatmapData
    .map(h => ({
      skill: h.skill,
      fcrReal: h.metrics.fcr,
      fcrTecnico: h.metrics.fcr_tecnico ?? (100 - h.metrics.transfer_rate),
      volume: h.volume,
    }))
    .sort((a, b) => a.fcrReal - b.fcrReal);

  // Top skills con FCR bajo
  const lowFCRSkills = skillFCRData
    .filter(s => s.fcrReal < 60)
    .slice(0, 5);

  // Funcion para obtener caracter de barra segun FCR
  const getFCRBarChar = (fcr: number): string => {
    if (fcr >= 80) return '█';
    if (fcr >= 70) return '▇';
    if (fcr >= 60) return '▅';
    if (fcr >= 50) return '▃';
    if (fcr >= 40) return '▂';
    return '▁';
  };

  // Funcion para obtener color segun FCR
  const getFCRColor = (fcr: number): string => {
    if (fcr >= 75) return 'text-emerald-500';
    if (fcr >= 60) return 'text-amber-400';
    if (fcr >= 45) return 'text-orange-500';
    return 'text-red-500';
  };

  return (
    <Card>
      {/* Header */}
      <div className="flex items-start justify-between mb-4">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-emerald-100 rounded-lg">
            <Target className="w-5 h-5 text-emerald-600" />
          </div>
          <div>
            <h3 className="font-semibold text-gray-900">{t('law10.resolutionQuality.title')}</h3>
            <p className="text-sm text-gray-500">{t('law10.resolutionQuality.article')}</p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <StatusIcon status={result.status} />
          <Badge label={getStatusLabel(result.status, t)} variant={getStatusBadgeVariant(result.status)} />
        </div>
      </div>

      {/* Lo que sabemos */}
      <div className="mb-5">
        <h4 className="text-sm font-semibold text-emerald-700 mb-3 flex items-center gap-2">
          <CheckCircle className="w-4 h-4" />
          {t('law10.resolutionQuality.whatWeKnow')}
        </h4>

        {/* Metricas principales */}
        <div className="grid grid-cols-3 gap-3 mb-4">
          <div className={cn(
            'p-3 rounded-lg',
            avgFCRReal >= 60 ? 'bg-gray-50' : 'bg-red-50'
          )}>
            <p className={cn(
              'text-2xl font-bold',
              avgFCRReal >= 60 ? 'text-gray-900' : 'text-red-600'
            )}>{avgFCRReal.toFixed(0)}%</p>
            <p className="text-xs text-gray-600">{t('law10.resolutionQuality.fcrReal')}</p>
          </div>
          <div className="p-3 bg-gray-50 rounded-lg">
            <p className="text-2xl font-bold text-gray-900">{recontactRate7d.toFixed(0)}%</p>
            <p className="text-xs text-gray-600">{t('law10.resolutionQuality.recontactRate7d')}</p>
          </div>
          <div className="p-3 bg-gray-50 rounded-lg">
            <p className="text-2xl font-bold text-gray-900">{repeatCallsPct.toFixed(0)}%</p>
            <p className="text-xs text-gray-600">{t('law10.resolutionQuality.repeatCalls')}</p>
          </div>
        </div>

        {/* Grafico FCR por skill */}
        <div className="bg-gray-50 rounded-lg p-4 mb-4">
          <p className="text-xs text-gray-500 mb-3 font-medium">{t('law10.resolutionQuality.fcrBySkill')}</p>
          <div className="space-y-2">
            {skillFCRData.slice(0, 8).map((s, idx) => (
              <div key={idx} className="flex items-center gap-2">
                <span className="w-28 text-xs text-gray-600 truncate">{s.skill}</span>
                <div className="flex-1 flex items-center gap-1">
                  {Array.from({ length: 10 }).map((_, i) => (
                    <span
                      key={i}
                      className={cn(
                        'font-mono text-sm',
                        i < Math.round(s.fcrReal / 10) ? getFCRColor(s.fcrReal) : 'text-gray-200'
                      )}
                    >
                      {i < Math.round(s.fcrReal / 10) ? getFCRBarChar(s.fcrReal) : '▁'}
                    </span>
                  ))}
                </div>
                <span className={cn(
                  'w-12 text-right text-xs font-semibold',
                  getFCRColor(s.fcrReal)
                )}>
                  {s.fcrReal.toFixed(0)}%
                </span>
              </div>
            ))}
          </div>
          <div className="flex items-center gap-4 mt-3 text-[10px] text-gray-500">
            <span>{t('law10.resolutionQuality.fcrLegend')}</span>
            <span className="text-red-500" dangerouslySetInnerHTML={{ __html: `▁ ${t('law10.resolutionQuality.fcrLow')}` }} />
            <span className="text-amber-400" dangerouslySetInnerHTML={{ __html: `▃ ${t('law10.resolutionQuality.fcrMedium')}` }} />
            <span className="text-emerald-500" dangerouslySetInnerHTML={{ __html: `█ ${t('law10.resolutionQuality.fcrHigh')}` }} />
          </div>
        </div>

        {/* Top skills con FCR bajo */}
        {lowFCRSkills.length > 0 && (
          <div className="space-y-2 text-sm">
            <p className="font-medium text-gray-700 mb-2">{t('law10.resolutionQuality.topLowFcr')}</p>
            <ul className="space-y-1.5 text-gray-600">
              {lowFCRSkills.map((s, idx) => (
                <li key={idx} className="flex items-start gap-2">
                  <span className="text-gray-400">{idx + 1}.</span>
                  <span><strong>{s.skill}</strong>: {t('law10.resolutionQuality.fcrValue', { fcr: s.fcrReal.toFixed(0) })}</span>
                </li>
              ))}
            </ul>
          </div>
        )}
      </div>

      {/* Implicacion Ley 10/2025 */}
      <div className="mb-5 p-4 bg-amber-50 border border-amber-200 rounded-lg">
        <h4 className="text-sm font-semibold text-amber-800 mb-3 flex items-center gap-2">
          <Scale className="w-4 h-4" />
          {t('law10.resolutionQuality.lawImplication')}
        </h4>

        <div className="space-y-3 text-sm text-gray-700">
          <p dangerouslySetInnerHTML={{ __html: t('law10.resolutionQuality.article17Requirement') }} />

          <div className="p-3 bg-amber-100/50 rounded border border-amber-300">
            <p className="font-medium text-amber-900 mb-1 flex items-center gap-2">
              <AlertTriangle className="w-4 h-4" />
              {t('law10.resolutionQuality.dataLimitation')}
            </p>
            <p className="text-gray-600 text-xs">
              {t('law10.resolutionQuality.noCaseTracking')}
            </p>
          </div>

          <div className="border-t border-amber-200 pt-3">
            <p className="font-medium text-gray-700 mb-2">{t('law10.resolutionQuality.butWeKnow')}</p>
            <ul className="space-y-1 text-gray-600">
              <li className="flex items-start gap-2">
                <span className="text-amber-500">•</span>
                <span dangerouslySetInnerHTML={{ __html: t('law10.resolutionQuality.multipleContactsRequired', { percent: recontactRate7d.toFixed(0) }) }} />
              </li>
              <li className="flex items-start gap-2">
                <span className="text-amber-500">•</span>
                <span>{t('law10.resolutionQuality.fcrGap', { fcr: avgFCRReal.toFixed(0), gap: recontactRate7d.toFixed(0) })}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-amber-500">•</span>
                <span>{t('law10.resolutionQuality.complexProcesses')}</span>
              </li>
            </ul>
          </div>

          <div className="p-3 bg-red-50 rounded border border-red-200">
            <p className="font-medium text-red-800 mb-1">{t('law10.resolutionQuality.alertSignal')}</p>
            <p className="text-gray-600 text-xs">
              {t('law10.resolutionQuality.resolutionTimeRisk')}
            </p>
          </div>
        </div>
      </div>

      {/* Accion sugerida */}
      <div className="p-4 bg-emerald-50 border border-emerald-200 rounded-lg">
        <h4 className="text-sm font-semibold text-emerald-800 mb-3 flex items-center gap-2">
          <Target className="w-4 h-4" />
          {t('law10.resolutionQuality.suggestedAction')}
        </h4>

        <div className="space-y-4 text-sm">
          <div>
            <p className="font-medium text-gray-700 mb-2">{t('law10.resolutionQuality.diagnosis')}</p>
            <ul className="space-y-1 text-gray-600 ml-4">
              <li>• {t('law10.resolutionQuality.registerOpenClose')}</li>
              <li>• {t('law10.resolutionQuality.linkInteractions')}</li>
              <li>• {t('law10.resolutionQuality.typology')}</li>
            </ul>
            <div className="flex items-center justify-between p-2 bg-white rounded border border-gray-200 mt-2 ml-4">
              <span className="text-gray-700">{t('law10.resolutionQuality.crmInvestment')}</span>
              <span className="font-semibold text-emerald-600">15-25K</span>
            </div>
          </div>

          <div>
            <p className="font-medium text-gray-700 mb-2">{t('law10.resolutionQuality.operationalImprovement')}</p>
            <ul className="space-y-1 text-gray-600 ml-4">
              <li>• {t('law10.resolutionQuality.dimension3Identifies')}</li>
              <li className="ml-4 text-xs">{t('law10.resolutionQuality.rootCauses')}</li>
              <li className="ml-4 text-xs">{t('law10.resolutionQuality.solution')}</li>
              <li>• {t('law10.resolutionQuality.fcrBenefit')}</li>
            </ul>
          </div>
        </div>
      </div>
    </Card>
  );
}

// Seccion: Resumen de Cumplimiento
function Law10SummaryRoadmap({
  complianceResults,
  data,
}: {
  complianceResults: { law07: ComplianceResult; law01: ComplianceResult; law02: ComplianceResult; law09: ComplianceResult };
  data: AnalysisData;
}) {
  const { t } = useTranslation();

  // Resultado por defecto para requisitos sin datos
  const sinDatos: ComplianceResult = {
    status: 'SIN_DATOS',
    score: 0,
    gap: t('law10.common.requiredData'),
    details: [t('law10.common.noData')],
  };

  // Todos los requisitos de la Ley 10/2025 con descripciones
  const allRequirements = [
    {
      id: 'LAW-01',
      name: t('law10.summary.requirements.LAW-01.name'),
      description: t('law10.summary.requirements.LAW-01.description'),
      result: complianceResults.law01,
    },
    {
      id: 'LAW-02',
      name: t('law10.summary.requirements.LAW-02.name'),
      description: t('law10.summary.requirements.LAW-02.description'),
      result: complianceResults.law02,
    },
    {
      id: 'LAW-03',
      name: t('law10.summary.requirements.LAW-03.name'),
      description: t('law10.summary.requirements.LAW-03.description'),
      result: sinDatos,
    },
    {
      id: 'LAW-04',
      name: t('law10.summary.requirements.LAW-04.name'),
      description: t('law10.summary.requirements.LAW-04.description'),
      result: sinDatos,
    },
    {
      id: 'LAW-05',
      name: t('law10.summary.requirements.LAW-05.name'),
      description: t('law10.summary.requirements.LAW-05.description'),
      result: sinDatos,
    },
    {
      id: 'LAW-06',
      name: t('law10.summary.requirements.LAW-06.name'),
      description: t('law10.summary.requirements.LAW-06.description'),
      result: sinDatos,
    },
    {
      id: 'LAW-07',
      name: t('law10.summary.requirements.LAW-07.name'),
      description: t('law10.summary.requirements.LAW-07.description'),
      result: complianceResults.law07,
    },
    {
      id: 'LAW-08',
      name: t('law10.summary.requirements.LAW-08.name'),
      description: t('law10.summary.requirements.LAW-08.description'),
      result: sinDatos,
    },
    {
      id: 'LAW-09',
      name: t('law10.summary.requirements.LAW-09.name'),
      description: t('law10.summary.requirements.LAW-09.description'),
      result: complianceResults.law09,
    },
    {
      id: 'LAW-10',
      name: t('law10.summary.requirements.LAW-10.name'),
      description: t('law10.summary.requirements.LAW-10.description'),
      result: sinDatos,
    },
    {
      id: 'LAW-11',
      name: t('law10.summary.requirements.LAW-11.name'),
      description: t('law10.summary.requirements.LAW-11.description'),
      result: sinDatos,
    },
    {
      id: 'LAW-12',
      name: t('law10.summary.requirements.LAW-12.name'),
      description: t('law10.summary.requirements.LAW-12.description'),
      result: sinDatos,
    },
  ];

  // Calcular inversion estimada basada en datos reales
  const estimatedInvestment = () => {
    // Base: 3% del coste anual actual o minimo 15K
    const currentCost = data.economicModel?.currentAnnualCost || 0;
    let base = currentCost > 0 ? Math.max(15000, currentCost * 0.03) : 15000;

    // Incrementos por gaps de compliance
    if (complianceResults.law01.status === 'NO_CUMPLE') base += currentCost > 0 ? currentCost * 0.01 : 25000;
    if (complianceResults.law02.status === 'NO_CUMPLE') base += currentCost > 0 ? currentCost * 0.008 : 20000;
    if (complianceResults.law07.status === 'NO_CUMPLE') base += currentCost > 0 ? currentCost * 0.015 : 35000;
    return Math.round(base);
  };

  return (
    <Card>
      <div className="flex items-center gap-3 mb-6">
        <div className="p-2 bg-slate-100 rounded-lg">
          <FileText className="w-5 h-5 text-slate-600" />
        </div>
        <h3 className="font-semibold text-gray-900 text-lg">{t('law10.summary.title')}</h3>
      </div>

      {/* Scorecard con todos los requisitos */}
      <div className="overflow-x-auto mb-6">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-gray-200 bg-gray-50">
              <th className="text-left py-3 px-3 font-medium text-gray-600">{t('law10.summaryTable.requirement')}</th>
              <th className="text-left py-3 px-3 font-medium text-gray-600">{t('law10.summaryTable.description')}</th>
              <th className="text-center py-3 px-3 font-medium text-gray-600">{t('law10.summaryTable.status')}</th>
              <th className="text-center py-3 px-3 font-medium text-gray-600">{t('law10.summaryTable.score')}</th>
              <th className="text-left py-3 px-3 font-medium text-gray-600">{t('law10.summaryTable.gap')}</th>
            </tr>
          </thead>
          <tbody>
            {allRequirements.map((req) => (
              <tr key={req.id} className={cn(
                'border-b border-gray-100',
                req.result.status === 'SIN_DATOS' && 'bg-gray-50/50'
              )}>
                <td className="py-3 px-3">
                  <span className="font-medium text-gray-800">{req.id}</span>
                  <span className="text-gray-500 ml-2">{req.name}</span>
                </td>
                <td className="py-3 px-3 text-gray-600 text-xs max-w-xs">
                  {req.description}
                </td>
                <td className="py-3 px-3 text-center">
                  <div className="flex items-center justify-center gap-2">
                    <StatusIcon status={req.result.status} />
                    <Badge
                      label={getStatusLabel(req.result.status, t)}
                      variant={getStatusBadgeVariant(req.result.status)}
                      size="sm"
                    />
                  </div>
                </td>
                <td className="py-3 px-3 text-center">
                  {req.result.status !== 'SIN_DATOS' ? (
                    <span className={cn(
                      'font-semibold',
                      req.result.score >= 80 ? 'text-emerald-600' :
                      req.result.score >= 50 ? 'text-amber-600' : 'text-red-600'
                    )}>
                      {req.result.score}
                    </span>
                  ) : (
                    <span className="text-gray-400">-</span>
                  )}
                </td>
                <td className="py-3 px-3 text-gray-600 text-xs">{req.result.gap}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Leyenda */}
      <div className="flex flex-wrap gap-4 mb-6 p-3 bg-gray-50 rounded-lg text-xs">
        <div className="flex items-center gap-2">
          <CheckCircle className="w-4 h-4 text-emerald-500" />
          <span className="text-gray-600">{t('law10.summaryTable.legend.complies')}</span>
        </div>
        <div className="flex items-center gap-2">
          <AlertTriangle className="w-4 h-4 text-amber-500" />
          <span className="text-gray-600">{t('law10.summaryTable.legend.partial')}</span>
        </div>
        <div className="flex items-center gap-2">
          <XCircle className="w-4 h-4 text-red-500" />
          <span className="text-gray-600">{t('law10.summaryTable.legend.notComply')}</span>
        </div>
        <div className="flex items-center gap-2">
          <HelpCircle className="w-4 h-4 text-gray-400" />
          <span className="text-gray-600">{t('law10.summaryTable.legend.noData')}</span>
        </div>
      </div>

      {/* Inversion Estimada */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-4 bg-gray-50 rounded-lg">
        <div className="text-center">
          <p className="text-xs text-gray-500 mb-1">{t('law10.summaryTable.investment.nonComplianceCost')}</p>
          <p className="text-xl font-bold text-red-600">{t('law10.summaryTable.investment.upTo100k')}</p>
          <p className="text-xs text-gray-400">{t('law10.summaryTable.investment.potentialFines')}</p>
        </div>
        <div className="text-center">
          <p className="text-xs text-gray-500 mb-1">{t('law10.summaryTable.investment.recommendedInvestment')}</p>
          <p className="text-xl font-bold text-blue-600">{formatCurrency(estimatedInvestment())}</p>
          <p className="text-xs text-gray-400">{t('law10.summaryTable.investment.basedOnOperation')}</p>
        </div>
        <div className="text-center">
          <p className="text-xs text-gray-500 mb-1">{t('law10.summaryTable.investment.complianceRoi')}</p>
          <p className="text-xl font-bold text-emerald-600">
            {data.economicModel?.roi3yr ? `${Math.round(data.economicModel.roi3yr / 2)}%` : 'Alto'}
          </p>
          <p className="text-xs text-gray-400">{t('law10.summaryTable.investment.avoidSanctions')}</p>
        </div>
      </div>
    </Card>
  );
}

// Seccion: Resumen de Madurez de Datos
function DataMaturitySummary({ data }: { data: AnalysisData }) {
  const { t } = useTranslation();

  // Usar datos economicos reales cuando esten disponibles
  const currentAnnualCost = data.economicModel?.currentAnnualCost || 0;
  const annualSavings = data.economicModel?.annualSavings || 0;
  // Datos disponibles
  const availableData = [
    { name: t('law10.dataMaturity.items.coverage247'), article: t('law10.dataMaturity.article', { number: '14' }) },
    { name: t('law10.dataMaturity.items.geoDistribution'), article: t('law10.dataMaturity.articlePartial', { number: '15' }) },
    { name: t('law10.dataMaturity.items.resolutionQuality'), article: t('law10.dataMaturity.articleIndirect', { number: '17' }) },
  ];

  // Datos estimables
  const estimableData = [
    { name: t('law10.dataMaturity.items.asa3min'), article: t('law10.dataMaturity.article', { number: '8.2' }), error: t('law10.dataMaturity.errorMargin', { margin: '10' }) },
    { name: t('law10.dataMaturity.items.officialLanguages'), article: t('law10.dataMaturity.article', { number: '15' }), error: t('law10.dataMaturity.noDetail') },
  ];

  // Datos no disponibles
  const missingData = [
    { name: t('law10.dataMaturity.items.caseResolutionTime'), article: t('law10.dataMaturity.article', { number: '17' }) },
    { name: t('law10.dataMaturity.items.undueBilling'), article: t('law10.dataMaturity.article', { number: '17' }) },
    { name: t('law10.dataMaturity.items.supervisorTransfer'), article: t('law10.dataMaturity.article', { number: '8' }) },
    { name: t('law10.dataMaturity.items.incidentInfo'), article: t('law10.dataMaturity.article', { number: '17' }) },
    { name: t('law10.dataMaturity.items.enacAudit'), article: t('law10.dataMaturity.article', { number: '22' }), note: t('law10.dataMaturity.items.externalContractRequired') },
  ];

  return (
    <Card>
      <div className="flex items-center gap-3 mb-6">
        <div className="p-2 bg-indigo-100 rounded-lg">
          <TrendingUp className="w-5 h-5 text-indigo-600" />
        </div>
        <h3 className="font-semibold text-gray-900 text-lg">{t('law10.dataMaturity.title')}</h3>
      </div>

      <p className="text-sm text-gray-600 mb-4">{t('law10.dataMaturity.currentLevel')}</p>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        {/* Datos disponibles */}
        <div className="p-4 bg-emerald-50 border border-emerald-200 rounded-lg">
          <div className="flex items-center gap-2 mb-3">
            <CheckCircle className="w-5 h-5 text-emerald-600" />
            <p className="font-semibold text-emerald-800">{t('law10.dataMaturity.availableData')}</p>
          </div>
          <ul className="space-y-2 text-sm">
            {availableData.map((item, idx) => (
              <li key={idx} className="flex items-start gap-2 text-gray-700">
                <span className="text-emerald-500">•</span>
                <span>{item.name} <span className="text-gray-400">({item.article})</span></span>
              </li>
            ))}
          </ul>
        </div>

        {/* Datos estimables */}
        <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg">
          <div className="flex items-center gap-2 mb-3">
            <AlertTriangle className="w-5 h-5 text-amber-600" />
            <p className="font-semibold text-amber-800">{t('law10.dataMaturity.estimableData')}</p>
          </div>
          <ul className="space-y-2 text-sm">
            {estimableData.map((item, idx) => (
              <li key={idx} className="flex items-start gap-2 text-gray-700">
                <span className="text-amber-500">•</span>
                <span>{item.name} <span className="text-gray-400">({item.article})</span> - <span className="text-amber-600">{item.error}</span></span>
              </li>
            ))}
          </ul>
        </div>

        {/* Datos no disponibles */}
        <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
          <div className="flex items-center gap-2 mb-3">
            <XCircle className="w-5 h-5 text-red-600" />
            <p className="font-semibold text-red-800">{t('law10.dataMaturity.unavailableData')}</p>
          </div>
          <ul className="space-y-2 text-sm">
            {missingData.map((item, idx) => (
              <li key={idx} className="flex items-start gap-2 text-gray-700">
                <span className="text-red-500">•</span>
                <span>
                  {item.name} <span className="text-gray-400">({item.article})</span>
                  {item.note && <span className="text-xs text-gray-400 block ml-3">- {item.note}</span>}
                </span>
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* Inversion sugerida */}
      <div className="p-4 bg-gray-50 rounded-lg">
        <div className="flex items-center gap-2 mb-4">
          <Lightbulb className="w-5 h-5 text-amber-500" />
          <p className="font-semibold text-gray-800">{t('law10.dataMaturity.investment.title')}</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
          {/* Fase 1 */}
          <div className="p-3 bg-white rounded border border-gray-200">
            <p className="font-medium text-gray-800 mb-2">{t('law10.dataMaturity.investment.phase1.title')}</p>
            <ul className="space-y-1 text-sm text-gray-600">
              <li className="flex justify-between">
                <span>{t('law10.dataMaturity.investment.phase1.realAsaTracking')}</span>
                <span className="font-semibold">5-8K</span>
              </li>
              <li className="flex justify-between">
                <span>{t('law10.dataMaturity.investment.phase1.ticketingSystem')}</span>
                <span className="font-semibold">15-25K</span>
              </li>
              <li className="flex justify-between">
                <span>{t('law10.dataMaturity.investment.phase1.languageEnrichment')}</span>
                <span className="font-semibold">2K</span>
              </li>
              <li className="flex justify-between border-t border-gray-100 pt-1 mt-1">
                <span className="font-medium">{t('law10.dataMaturity.investment.phase1.subtotal')}</span>
                <span className="font-bold text-blue-600">22-35K</span>
              </li>
            </ul>
          </div>

          {/* Fase 2 */}
          <div className="p-3 bg-white rounded border border-gray-200">
            <p className="font-medium text-gray-800 mb-2">{t('law10.dataMaturity.investment.phase2.title')}</p>
            <ul className="space-y-1 text-sm text-gray-600">
              <li className="flex justify-between">
                <span>{t('law10.dataMaturity.investment.phase2.coverage247')}</span>
                <span className="font-semibold">65K/yr</span>
              </li>
              <li className="flex justify-between">
                <span>{t('law10.dataMaturity.investment.phase2.aiCopilot')}</span>
                <span className="font-semibold">35K + 8K/mo</span>
              </li>
              <li className="flex justify-between">
                <span>{t('law10.dataMaturity.investment.phase2.enacAuditor')}</span>
                <span className="font-semibold">12-18K/yr</span>
              </li>
              <li className="flex justify-between border-t border-gray-100 pt-1 mt-1">
                <span className="font-medium">{t('law10.dataMaturity.investment.phase2.subtotalYear1')}</span>
                <span className="font-bold text-blue-600">112-118K</span>
              </li>
            </ul>
          </div>
        </div>

        {/* Totales - usar datos reales cuando disponibles */}
        <div className="grid grid-cols-3 gap-4 pt-4 border-t border-gray-200">
          <div className="text-center">
            <p className="text-xs text-gray-500 mb-1">{t('law10.dataMaturity.investment.totals.totalInvestment')}</p>
            <p className="text-xl font-bold text-blue-600">
              {currentAnnualCost > 0 ? formatCurrency(Math.round(currentAnnualCost * 0.05)) : '134-153K'}
            </p>
            <p className="text-xs text-gray-400">{t('law10.dataMaturity.investment.totals.percentAnnualCost')}</p>
          </div>
          <div className="text-center">
            <p className="text-xs text-gray-500 mb-1">{t('law10.dataMaturity.investment.totals.riskAvoided')}</p>
            <p className="text-xl font-bold text-red-600">
              {currentAnnualCost > 0 ? formatCurrency(Math.min(1000000, currentAnnualCost * 0.3)) : '750K-1M'}
            </p>
            <p className="text-xs text-gray-400">{t('law10.dataMaturity.investment.totals.potentialSanctions')}</p>
          </div>
          <div className="text-center">
            <p className="text-xs text-gray-500 mb-1">{t('law10.dataMaturity.investment.totals.complianceRoi')}</p>
            <p className="text-xl font-bold text-emerald-600">
              {data.economicModel?.roi3yr ? `${data.economicModel.roi3yr}%` : '490-650%'}
            </p>
          </div>
        </div>
      </div>
    </Card>
  );
}

// ============================================
// COMPONENTE PRINCIPAL
// ============================================

export function Law10Tab({ data }: Law10TabProps) {
  const { t } = useTranslation();

  // Evaluar compliance para cada requisito
  const complianceResults = {
    law07: evaluateLaw07Compliance(data, t),
    law01: evaluateLaw01Compliance(data, t),
    law02: evaluateLaw02Compliance(data, t),
    law09: evaluateLaw09Compliance(data, t),
  };

  return (
    <div className="space-y-6">
      {/* Header con Countdown */}
      <Law10HeaderCountdown complianceResults={complianceResults} />

      {/* Secciones de Analisis - Formato horizontal sin columnas */}
      <div className="space-y-6">
        {/* LAW-01: Velocidad de Respuesta */}
        <ResponseSpeedSection data={data} result={complianceResults.law01} />

        {/* LAW-02: Calidad de Resolucion */}
        <ResolutionQualitySection data={data} result={complianceResults.law02} />

        {/* LAW-07: Cobertura Horaria */}
        <TimeCoverageSection data={data} result={complianceResults.law07} />
      </div>

      {/* Resumen de Cumplimiento */}
      <Law10SummaryRoadmap complianceResults={complianceResults} data={data} />

      {/* Madurez de Datos para Compliance */}
      <DataMaturitySummary data={data} />
    </div>
  );
}

export default Law10Tab;