<script lang="ts">
  import { useConvexClient } from "convex-svelte";
  import { api } from "@sgse-app/backend/convex/_generated/api";
  import { onMount } from "svelte";

  const client = useConvexClient();

  type Row = { _id: string; nome: string; valor: number; count: number };
  let rows: Array<Row> = $state<Array<Row>>([]);
  let isLoading = $state(true);
  let notice = $state<{ kind: "error" | "success"; text: string } | null>(null);
  let containerWidth = $state(1200);

  onMount(async () => {
    try {
      const simbolos = await client.query(api.simbolos.getAll, {} as any);
      const funcionarios = await client.query(api.funcionarios.getAll, {} as any);
      const counts: Record<string, number> = {};
      for (const f of funcionarios) counts[f.simboloId] = (counts[f.simboloId] ?? 0) + 1;
      rows = simbolos.map((s: any) => ({
        _id: String(s._id),
        nome: s.nome as string,
        valor: Number(s.valor || 0),
        count: counts[String(s._id)] ?? 0,
      }));
    } catch (e) {
      notice = { kind: "error", text: "Falha ao carregar dados de relatórios." };
    } finally {
      isLoading = false;
    }
  });

  // Dimensões responsivas
  $effect(() => {
    const updateSize = () => {
      const container = document.querySelector('.chart-container');
      if (container) {
        containerWidth = Math.min(container.clientWidth - 32, 1200);
      }
    };
    
    updateSize();
    window.addEventListener('resize', updateSize);
    
    return () => window.removeEventListener('resize', updateSize);
  });

  const chartHeight = 350;
  const padding = { top: 20, right: 20, bottom: 80, left: 70 };
  
  let chartWidth = $derived(containerWidth);

  function getMax<T>(arr: Array<T>, sel: (t: T) => number): number {
    let m = 0;
    for (const a of arr) m = Math.max(m, sel(a));
    return m;
  }
  
  function scaleY(v: number, max: number): number {
    if (max <= 0) return 0;
    const innerH = chartHeight - padding.top - padding.bottom;
    return (v / max) * innerH;
  }
  
  function getX(i: number, n: number): number {
    const innerW = chartWidth - padding.left - padding.right;
    return padding.left + (innerW / (n - 1)) * i;
  }

  function createAreaPath(data: Array<Row>, getValue: (r: Row) => number, max: number): string {
    if (data.length === 0) return "";
    const n = data.length;
    let path = `M ${getX(0, n)} ${chartHeight - padding.bottom}`;
    
    for (let i = 0; i < n; i++) {
      const x = getX(i, n);
      const y = chartHeight - padding.bottom - scaleY(getValue(data[i]), max);
      path += ` L ${x} ${y}`;
    }
    
    path += ` L ${getX(n - 1, n)} ${chartHeight - padding.bottom}`;
    path += " Z";
    return path;
  }
</script>

<div class="container mx-auto px-4 py-6 max-w-7xl">
  <!-- Breadcrumb -->
  <div class="text-sm breadcrumbs mb-4">
    <ul>
      <li><a href="/" class="hover:text-primary">Dashboard</a></li>
      <li><a href="/recursos-humanos" class="hover:text-primary">Recursos Humanos</a></li>
      <li><a href="/recursos-humanos/funcionarios" class="hover:text-primary">Funcionários</a></li>
      <li class="font-semibold text-primary">Relatórios</li>
    </ul>
  </div>

  <!-- Header -->
  <div class="flex items-center gap-4 mb-8">
    <div class="p-3 bg-primary/10 rounded-xl">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
      </svg>
    </div>
    <div>
      <h1 class="text-3xl font-bold text-base-content">Relatórios de Funcionários</h1>
      <p class="text-base-content/60 mt-1">Análise de distribuição de salários e funcionários por símbolo</p>
    </div>
  </div>

  {#if notice}
    <div class="alert mb-6" class:alert-error={notice.kind === "error"} class:alert-success={notice.kind === "success"}>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <span>{notice.text}</span>
    </div>
  {/if}

  {#if isLoading}
    <div class="flex justify-center items-center py-20">
      <span class="loading loading-spinner loading-lg text-primary"></span>
    </div>
  {:else}
    <div class="space-y-6 chart-container">
      <!-- Gráfico 1: Símbolo x Salário (Valor) - Layer Chart -->
      <div class="card bg-base-100 shadow-lg hover:shadow-xl transition-shadow border border-base-300">
        <div class="card-body p-6">
          <div class="flex items-center gap-3 mb-6">
            <div class="p-2.5 bg-primary/10 rounded-lg">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <div class="flex-1">
              <h3 class="text-lg font-bold text-base-content">Distribuição de Salários por Símbolo</h3>
              <p class="text-sm text-base-content/60 mt-0.5">Valores dos símbolos cadastrados no sistema</p>
            </div>
          </div>
          <div class="w-full overflow-x-auto bg-base-200/30 rounded-xl p-4">
            <svg width={chartWidth} height={chartHeight} role="img" aria-label="Gráfico de área: salário por símbolo">
              {#if rows.length === 0}
                <text x="16" y="32" class="opacity-60">Sem dados</text>
              {:else}
                {@const max = getMax(rows, (r) => r.valor)}
                
                <!-- Grid lines -->
                {#each [0,1,2,3,4,5] as t}
                  {@const val = Math.round((max/5) * t)}
                  {@const y = chartHeight - padding.bottom - scaleY(val, max)}
                  <line x1={padding.left} y1={y} x2={chartWidth - padding.right} y2={y} stroke="currentColor" stroke-opacity="0.1" stroke-dasharray="4,4" />
                  <text x={padding.left - 8} y={y + 4} text-anchor="end" class="text-[10px] opacity-70">{`R$ ${val.toLocaleString('pt-BR')}`}</text>
                {/each}
                
                <!-- Eixos -->
                <line x1={padding.left} y1={chartHeight - padding.bottom} x2={chartWidth - padding.right} y2={chartHeight - padding.bottom} stroke="currentColor" stroke-opacity="0.3" stroke-width="2" />
                <line x1={padding.left} y1={padding.top} x2={padding.left} y2={chartHeight - padding.bottom} stroke="currentColor" stroke-opacity="0.3" stroke-width="2" />
                
                <!-- Area fill (camada) -->
                <path 
                  d={createAreaPath(rows, (r) => r.valor, max)} 
                  fill="url(#gradient-salary)" 
                  opacity="0.7"
                />
                
                <!-- Line -->
                <polyline
                  points={rows.map((r, i) => {
                    const x = getX(i, rows.length);
                    const y = chartHeight - padding.bottom - scaleY(r.valor, max);
                    return `${x},${y}`;
                  }).join(' ')}
                  fill="none"
                  stroke="rgb(59, 130, 246)"
                  stroke-width="3"
                />
                
                <!-- Data points -->
                {#each rows as r, i}
                  {@const x = getX(i, rows.length)}
                  {@const y = chartHeight - padding.bottom - scaleY(r.valor, max)}
                  <circle cx={x} cy={y} r="5" fill="rgb(59, 130, 246)" stroke="white" stroke-width="2" />
                  <text x={x} y={y - 12} text-anchor="middle" class="text-[10px] font-semibold fill-primary">
                    {`R$ ${r.valor.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`}
                  </text>
                {/each}
                
                <!-- Eixo X labels -->
                {#each rows as r, i}
                  {@const x = getX(i, rows.length)}
                  <foreignObject x={x - 40} y={chartHeight - padding.bottom + 15} width="80" height="70">
                    <div class="flex items-center justify-center text-center">
                      <span class="text-[11px] font-medium text-base-content/80 leading-tight" style="word-wrap: break-word; hyphens: auto;">
                        {r.nome}
                      </span>
                    </div>
                  </foreignObject>
                {/each}
                
                <!-- Gradient definition -->
                <defs>
                  <linearGradient id="gradient-salary" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" style="stop-color:rgb(59, 130, 246);stop-opacity:0.8" />
                    <stop offset="100%" style="stop-color:rgb(59, 130, 246);stop-opacity:0.1" />
                  </linearGradient>
                </defs>
              {/if}
            </svg>
          </div>
        </div>
      </div>

      <!-- Gráfico 2: Quantidade de Funcionários por Símbolo - Layer Chart -->
      <div class="card bg-base-100 shadow-lg hover:shadow-xl transition-shadow border border-base-300">
        <div class="card-body p-6">
          <div class="flex items-center gap-3 mb-6">
            <div class="p-2.5 bg-secondary/10 rounded-lg">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
              </svg>
            </div>
            <div class="flex-1">
              <h3 class="text-lg font-bold text-base-content">Distribuição de Funcionários por Símbolo</h3>
              <p class="text-sm text-base-content/60 mt-0.5">Quantidade de funcionários alocados em cada símbolo</p>
            </div>
          </div>
          <div class="w-full overflow-x-auto bg-base-200/30 rounded-xl p-4">
            <svg width={chartWidth} height={chartHeight} role="img" aria-label="Gráfico de área: quantidade por símbolo">
              {#if rows.length === 0}
                <text x="16" y="32" class="opacity-60">Sem dados</text>
              {:else}
                {@const maxC = getMax(rows, (r) => r.count)}
                
                <!-- Grid lines -->
                {#each [0,1,2,3,4,5] as t}
                  {@const val = Math.round((maxC/5) * t)}
                  {@const y = chartHeight - padding.bottom - scaleY(val, Math.max(1, maxC))}
                  <line x1={padding.left} y1={y} x2={chartWidth - padding.right} y2={y} stroke="currentColor" stroke-opacity="0.1" stroke-dasharray="4,4" />
                  <text x={padding.left - 6} y={y + 4} text-anchor="end" class="text-[10px] opacity-70">{val}</text>
                {/each}
                
                <!-- Eixos -->
                <line x1={padding.left} y1={chartHeight - padding.bottom} x2={chartWidth - padding.right} y2={chartHeight - padding.bottom} stroke="currentColor" stroke-opacity="0.3" stroke-width="2" />
                <line x1={padding.left} y1={padding.top} x2={padding.left} y2={chartHeight - padding.bottom} stroke="currentColor" stroke-opacity="0.3" stroke-width="2" />
                
                <!-- Area fill (camada) -->
                <path 
                  d={createAreaPath(rows, (r) => r.count, Math.max(1, maxC))} 
                  fill="url(#gradient-count)" 
                  opacity="0.7"
                />
                
                <!-- Line -->
                <polyline
                  points={rows.map((r, i) => {
                    const x = getX(i, rows.length);
                    const y = chartHeight - padding.bottom - scaleY(r.count, Math.max(1, maxC));
                    return `${x},${y}`;
                  }).join(' ')}
                  fill="none"
                  stroke="rgb(236, 72, 153)"
                  stroke-width="3"
                />
                
                <!-- Data points -->
                {#each rows as r, i}
                  {@const x = getX(i, rows.length)}
                  {@const y = chartHeight - padding.bottom - scaleY(r.count, Math.max(1, maxC))}
                  <circle cx={x} cy={y} r="5" fill="rgb(236, 72, 153)" stroke="white" stroke-width="2" />
                  <text x={x} y={y - 12} text-anchor="middle" class="text-[10px] font-semibold fill-secondary">
                    {r.count}
                  </text>
                {/each}
                
                <!-- Eixo X labels -->
                {#each rows as r, i}
                  {@const x = getX(i, rows.length)}
                  <foreignObject x={x - 40} y={chartHeight - padding.bottom + 15} width="80" height="70">
                    <div class="flex items-center justify-center text-center">
                      <span class="text-[11px] font-medium text-base-content/80 leading-tight" style="word-wrap: break-word; hyphens: auto;">
                        {r.nome}
                      </span>
                    </div>
                  </foreignObject>
                {/each}
                
                <!-- Gradient definition -->
                <defs>
                  <linearGradient id="gradient-count" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" style="stop-color:rgb(236, 72, 153);stop-opacity:0.8" />
                    <stop offset="100%" style="stop-color:rgb(236, 72, 153);stop-opacity:0.1" />
                  </linearGradient>
                </defs>
              {/if}
            </svg>
          </div>
        </div>
      </div>

      <!-- Tabela Resumo -->
      <div class="card bg-base-100 shadow-lg border border-base-300">
        <div class="card-body p-6">
          <div class="flex items-center gap-3 mb-6">
            <div class="p-2.5 bg-accent/10 rounded-lg">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
              </svg>
            </div>
            <div class="flex-1">
              <h3 class="text-lg font-bold text-base-content">Tabela Resumo - Símbolos e Funcionários</h3>
              <p class="text-sm text-base-content/60 mt-0.5">Visão detalhada dos dados apresentados nos gráficos</p>
            </div>
          </div>

          <div class="overflow-x-auto">
            <table class="table table-zebra">
              <thead>
                <tr>
                  <th class="bg-base-200">Símbolo</th>
                  <th class="bg-base-200 text-right">Valor (R$)</th>
                  <th class="bg-base-200 text-right">Funcionários</th>
                  <th class="bg-base-200 text-right">Total (R$)</th>
                </tr>
              </thead>
              <tbody>
                {#if rows.length === 0}
                  <tr>
                    <td colspan="4" class="text-center text-base-content/60 py-8">Nenhum dado disponível</td>
                  </tr>
                {:else}
                  {#each rows as row}
                    <tr class="hover">
                      <td class="font-semibold">{row.nome}</td>
                      <td class="text-right font-mono">
                        {row.valor.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                      </td>
                      <td class="text-right">
                        <span class="badge badge-primary badge-outline">{row.count}</span>
                      </td>
                      <td class="text-right font-mono font-semibold text-primary">
                        {(row.valor * row.count).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                      </td>
                    </tr>
                  {/each}
                  <!-- Total Geral -->
                  <tr class="font-bold bg-base-200 border-t-2 border-base-300">
                    <td>TOTAL GERAL</td>
                    <td class="text-right font-mono">
                      {rows.reduce((sum, r) => sum + r.valor, 0).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                    </td>
                    <td class="text-right">
                      <span class="badge badge-primary">{rows.reduce((sum, r) => sum + r.count, 0)}</span>
                    </td>
                    <td class="text-right font-mono text-primary text-lg">
                      {rows.reduce((sum, r) => sum + (r.valor * r.count), 0).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                    </td>
                  </tr>
                {/if}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  {/if}
</div>
