"use client";

import { useSessions } from "@/lib/hooks";
import { platformBadgeClass } from "@/lib/utils";

export function PlatformBreakdown() {
  const { data } = useSessions(50);
  const items = data?.items || [];

  if (items.length === 0) return null;

  const counts: Record<string, number> = {};
  for (const s of items) {
    counts[s.source] = (counts[s.source] || 0) + 1;
  }

  const sorted = Object.entries(counts).sort((a, b) => b[1] - a[1]);
  const total = items.length;

  return (
    <div className="card p-4">
      <div className="section-label mb-3">Platforms</div>
      <div className="space-y-2">
        {sorted.map(([platform, count]) => {
          const pct = Math.round((count / total) * 100);
          return (
            <div key={platform} className="flex items-center gap-3">
              <span className={`badge ${platformBadgeClass(platform)} w-16 text-center`}>
                {platform}
              </span>
              <div className="flex-1 h-1.5 rounded-full" style={{ background: "var(--border)" }}>
                <div
                  className="h-full rounded-full transition-all"
                  style={{ width: pct + "%", background: "var(--accent)" }}
                />
              </div>
              <span className="text-[11px] font-mono w-8 text-right" style={{ color: "var(--text-3)" }}>
                {count}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}