import type { AttendanceAnalytics } from "@/types/analytics";

export function AdminAttendanceProgress({ data }: { data: AttendanceAnalytics["by_event"] }) {
  return (
    <div className="rounded-xl border border-kolabora-neutral-dark/10 p-4">
      <p className="text-sm font-medium text-kolabora-neutral-dark">Attendance per Event</p>
      {data.length === 0 ? (
        <p className="mt-8 text-center text-sm text-kolabora-neutral-dark/60">
          No attendance data for this period yet.
        </p>
      ) : (
        <div className="mt-3 flex flex-col gap-4">
          {data.map((row) => {
            const rate = Math.max(0, Math.min(100, row.rate));
            const fillColor = rate >= 70 ? "bg-kolabora-primary" : "bg-kolabora-tertiary";
            return (
              <div key={row.event_id}>
                <div className="flex items-center justify-between gap-3 text-sm">
                  <span className="truncate font-medium">{row.title}</span>
                  <span className="shrink-0 text-kolabora-neutral-dark/60">
                    {row.checked_in}/{row.valid_tickets} &middot; {rate.toLocaleString("en-US")}%
                  </span>
                </div>
                <div className="mt-1.5 h-2 w-full overflow-hidden rounded-full bg-kolabora-neutral-dark/10">
                  <div
                    className={`h-full rounded-full transition-[width] duration-300 ${fillColor}`}
                    style={{ width: `${rate}%` }}
                  />
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}