/**
 * Trouve-KA — distribution des codes HTTP en barres CSS
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 */

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { formatNumber } from "@/lib/format";

/**
 * Couleur de statut par classe HTTP. Palette de statut réservée (jamais une
 * couleur de série) : chaque barre porte son code et sa valeur en texte —
 * la couleur n'est jamais le seul canal d'information.
 */
function barClass(code: string): string {
  if (code.startsWith("2")) return "bg-status-good";
  if (code.startsWith("3")) return "bg-viz-blue";
  if (code.startsWith("4")) return "bg-status-warning";
  if (code.startsWith("5")) return "bg-status-critical";
  return "bg-ink-3";
}

interface HttpBarsProps {
  data: Record<string, number>;
}

export function HttpBars({ data }: HttpBarsProps) {
  const entries = Object.entries(data).sort(([a], [b]) => a.localeCompare(b));
  const max = Math.max(1, ...entries.map(([, count]) => count));

  return (
    <Card>
      <CardHeader>
        <CardTitle>Distribution des codes HTTP</CardTitle>
      </CardHeader>
      <CardContent>
        {entries.length === 0 ? (
          <p className="text-sm text-ink-2">Aucune donnée pour l'instant.</p>
        ) : (
          <ul className="space-y-2.5">
            {entries.map(([code, count]) => (
              <li key={code} className="flex items-center gap-3">
                <span className="gk-mono w-10 shrink-0 text-sm font-bold tabular-nums text-ink">
                  {code}
                </span>
                <span className="h-2.5 flex-1 overflow-hidden rounded-r bg-surface-2 ring-1 ring-inset ring-line">
                  <span
                    className={`block h-full rounded-r ${barClass(code)}`}
                    style={{ width: `${Math.max(1, (count / max) * 100)}%` }}
                  />
                </span>
                <span className="gk-mono w-20 shrink-0 text-right text-sm tabular-nums text-ink-2">
                  {formatNumber(count)}
                </span>
              </li>
            ))}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}