import { Card } from "@/components/ui/card";
import { formatInteger } from "@/lib/utils";

export function BrandBreakdown({
  rows,
}: {
  rows: Array<{ brand: string; sent: number }>;
}) {
  const maxSent = rows.reduce((max, row) => Math.max(max, Number(row.sent ?? 0)), 0);

  return (
    <Card className="overflow-hidden bg-[linear-gradient(160deg,#ffffff_0%,#f5faff_72%,#fff7ef_100%)]">
      <div className="flex items-center justify-between gap-3">
        <h3 className="text-sm font-semibold text-slate-900">Otsuka Brand / VEEVA Document Mix</h3>
        <span className="caption rounded-full border border-[#f7993a]/35 bg-[#fff4e8] px-2.5 py-1 text-[10px] uppercase tracking-[0.16em] text-[#b46820]">
          Split
        </span>
      </div>
      {rows.length === 0 ? (
        <div className="mt-4 rounded-2xl border border-dashed border-slate-300 bg-white/80 px-4 py-5 text-sm text-slate-500">
          No brand breakdown available yet.
        </div>
      ) : (
        <div className="mt-4 space-y-3">
          {rows.map((row, index) => {
            const width =
              maxSent > 0
                ? `${Math.max(6, Math.round((Number(row.sent ?? 0) / maxSent) * 100))}%`
                : "6%";

            return (
              <div
                key={row.brand}
                className="rounded-2xl border border-[#dbe7f5] bg-white/95 p-3 shadow-[0_16px_24px_-22px_rgba(38,99,172,0.6)] transition duration-300 hover:-translate-y-0.5 hover:border-[#c8dbef]"
              >
                <div className="flex items-center justify-between gap-3">
                  <p className="text-sm font-semibold text-slate-800">{row.brand}</p>
                  <p className="caption text-xs uppercase tracking-[0.14em] text-[#2663AC]">
                    {formatInteger(row.sent)} sends
                  </p>
                </div>
                <div className="mt-2 h-2 overflow-hidden rounded-full bg-slate-100">
                  <div
                    className="h-full rounded-full bg-[linear-gradient(90deg,#2663AC_0%,#7aa6d7_65%,#f7993a_100%)]"
                    style={{ width }}
                  />
                </div>
                <p className="mt-1 caption text-[10px] uppercase tracking-[0.14em] text-slate-400">
                  Rank {index + 1}
                </p>
              </div>
            );
          })}
        </div>
      )}
    </Card>
  );
}