"use client";

import type { DashboardData } from "../lib/types";

export function AggregateHeader({ data }: { data: DashboardData }) {
  const totalEndpoints = data.services.reduce((sum, s) => sum + s.endpoints.total, 0);
  const totalUsed = data.services.reduce((sum, s) => sum + s.endpoints.used.count, 0);
  const totalUnused = data.services.reduce((sum, s) => sum + s.endpoints.unused.count, 0);
  const totalDeadFuncs = data.services.reduce((sum, s) => sum + s.functions.dead, 0);
  const totalFuncs = data.services.reduce((sum, s) => sum + s.functions.total, 0);

  const unusedPct = totalEndpoints > 0 ? Math.round((totalUnused / totalEndpoints) * 1000) / 10 : 0;
  const deadFuncPct = totalFuncs > 0 ? Math.round((totalDeadFuncs / totalFuncs) * 1000) / 10 : 0;

  const cards = [
    {
      label: "Services",
      value: data.services.length,
      total: null as number | null,
      percentage: null as number | null,
      suffix: null as string | null,
      color: "text-text-primary",
    },
    {
      label: "Total Endpoints",
      value: totalEndpoints,
      total: null,
      percentage: null,
      suffix: null,
      color: "text-text-primary",
    },
    {
      label: "Used",
      value: totalUsed,
      total: totalEndpoints,
      percentage: totalEndpoints > 0 ? Math.round((totalUsed / totalEndpoints) * 1000) / 10 : 0,
      suffix: "used",
      color: "text-success",
      barColor: "bg-success",
    },
    {
      label: "Unused",
      value: totalUnused,
      total: totalEndpoints,
      percentage: unusedPct,
      suffix: "unused",
      color: "text-danger",
      barColor: "bg-danger",
    },
    {
      label: "Dead Functions",
      value: totalDeadFuncs,
      total: totalFuncs,
      percentage: deadFuncPct,
      suffix: "dead",
      color: "text-warning",
      barColor: "bg-warning",
    },
  ];

  return (
    <div className="grid grid-cols-5 gap-4">
      {cards.map((card) => (
        <div
          key={card.label}
          className="bg-surface border border-border rounded-lg p-5 transition-colors hover:bg-raised"
        >
          <div className="text-xs font-medium uppercase tracking-wider text-text-secondary mb-2">
            {card.label}
          </div>
          <div className="flex items-baseline gap-1 mb-3">
            <span className={`text-3xl font-bold ${card.color}`}>
              {card.value}
            </span>
            {card.total !== null && (
              <span className="text-text-secondary text-sm">
                / {card.total}
              </span>
            )}
          </div>
          {card.percentage !== null && (
            <>
              <div className="w-full h-1.5 rounded-full bg-border overflow-hidden mb-1.5">
                <div
                  className={`h-full rounded-full ${card.barColor} transition-all`}
                  style={{ width: `${Math.min(card.percentage, 100)}%` }}
                />
              </div>
              <div className="text-sm text-text-secondary">
                {card.percentage}% {card.suffix}
              </div>
            </>
          )}
        </div>
      ))}
    </div>
  );
}