<?php

namespace App\Services;

/**
 * Renderiza gráficos en HTML/CSS puro para PDFs
 * (DomPDF no puede renderizar Chart.js)
 */
class PDFGraphicRenderer
{
    /**
     * Genera el HTML/CSS para un gráfico de barras agrupadas
     * Muestra: Debilidades, En Proceso, Fortalezas por sección
     */
    public static function renderBarChart($secciones)
    {
        $html = '<div class="pdf-chart-container">';
        $html .= '<div class="chart-wrapper">';
        
        // Encontrar el máximo valor para escalar las barras
        $maxValue = 0;
        foreach ($secciones as $seccion) {
            $maxValue = max($maxValue, $seccion['debilidades'] ?? 0, $seccion['en_proceso'] ?? 0, $seccion['fortalezas'] ?? 0);
        }
        
        // Evitar división por cero
        if ($maxValue === 0) $maxValue = 1;
        
        // Escala para el gráfico
        $scale = 100 / $maxValue;
        
        // Colores para las barras
        $colors = [
            'debilidades' => '#ef4444',      // rojo
            'en_proceso' => '#f97316',       // naranja
            'fortalezas' => '#10b981'        // verde
        ];
        
        // Tabla-style chart
        $html .= '<table class="chart-table">';
        $html .= '<thead><tr>';
        $html .= '<th class="chart-label">Sección</th>';
        $html .= '<th class="chart-col">Debilidades</th>';
        $html .= '<th class="chart-col">En Proceso</th>';
        $html .= '<th class="chart-col">Fortalezas</th>';
        $html .= '</tr></thead>';
        $html .= '<tbody>';
        
        foreach ($secciones as $seccion) {
            $nombre = $seccion['nombre'] ?? 'Sin nombre';
            $debilidades = intval($seccion['debilidades'] ?? 0);
            $enProceso = intval($seccion['en_proceso'] ?? 0);
            $fortalezas = intval($seccion['fortalezas'] ?? 0);
            
            $html .= '<tr>';
            $html .= '<td class="chart-label">' . htmlspecialchars($nombre) . '</td>';
            
            // Columna Debilidades
            $widthD = $debilidades * $scale;
            $html .= '<td class="chart-col">';
            $html .= '<div class="bar-container">';
            $html .= '<div class="bar" style="width: ' . $widthD . '%; background-color: ' . $colors['debilidades'] . ';">';
            if ($debilidades > 0) {
                $html .= '<span class="bar-label">' . $debilidades . '</span>';
            }
            $html .= '</div>';
            $html .= '</div>';
            $html .= '</td>';
            
            // Columna En Proceso
            $widthE = $enProceso * $scale;
            $html .= '<td class="chart-col">';
            $html .= '<div class="bar-container">';
            $html .= '<div class="bar" style="width: ' . $widthE . '%; background-color: ' . $colors['en_proceso'] . ';">';
            if ($enProceso > 0) {
                $html .= '<span class="bar-label">' . $enProceso . '</span>';
            }
            $html .= '</div>';
            $html .= '</div>';
            $html .= '</td>';
            
            // Columna Fortalezas
            $widthF = $fortalezas * $scale;
            $html .= '<td class="chart-col">';
            $html .= '<div class="bar-container">';
            $html .= '<div class="bar" style="width: ' . $widthF . '%; background-color: ' . $colors['fortalezas'] . ';">';
            if ($fortalezas > 0) {
                $html .= '<span class="bar-label">' . $fortalezas . '</span>';
            }
            $html .= '</div>';
            $html .= '</div>';
            $html .= '</td>';
            
            $html .= '</tr>';
        }
        
        $html .= '</tbody>';
        $html .= '</table>';
        $html .= '</div>';
        $html .= '</div>';
        
        return $html;
    }
    
    /**
     * CSS para el gráfico PDF
     */
    public static function getStyles()
    {
        return <<<'CSS'
        <style>
            .pdf-chart-container {
                width: 100%;
                overflow-x: auto;
                margin: 1.5rem 0;
            }
            
            .chart-wrapper {
                min-width: 100%;
            }
            
            .chart-table {
                width: 100%;
                border-collapse: collapse;
                font-family: Arial, sans-serif;
                font-size: 12px;
            }
            
            .chart-table thead {
                background-color: #f3f4f6;
                border-bottom: 2px solid #d1d5db;
            }
            
            .chart-table th {
                padding: 10px;
                text-align: left;
                font-weight: 600;
                color: #374151;
                border: 1px solid #e5e7eb;
            }
            
            .chart-table td {
                padding: 10px;
                border: 1px solid #e5e7eb;
            }
            
            .chart-label {
                font-weight: 500;
                color: #1f2937;
                min-width: 120px;
            }
            
            .chart-col {
                width: 25%;
            }
            
            .bar-container {
                width: 100%;
                height: 30px;
                background-color: #f9fafb;
                border-radius: 4px;
                overflow: hidden;
                position: relative;
            }
            
            .bar {
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding-right: 5px;
                position: relative;
                min-width: 20px;
            }
            
            .bar-label {
                color: white;
                font-weight: bold;
                font-size: 11px;
                z-index: 2;
            }
        </style>
        CSS;
    }
}
