import type { AttendanceAnalytics } from "@/types/analytics";
import { AnalyticsExportButtons } from "@/components/analytics/export-buttons";

export function AttendanceSection({ data, exportUrl }: { data: AttendanceAnalytics; exportUrl?: string }) {
  return (
    <div>
      <div className="flex items-center justify-between">
        <h2 className="text-lg font-semibold">Attendance Analytics</h2>
        {exportUrl && <AnalyticsExportButtons baseUrl={exportUrl} />}
      </div>
      <div className="mt-3 rounded-xl border border-kolabora-neutral-dark/10 p-4">
        <p className="text-sm text-kolabora-neutral-dark/70">Overall Attendance Rate</p>
        <p className="mt-1 text-2xl font-semibold">{data.overall_rate}%</p>
      </div>

      <div className="mt-4">
        <p className="text-sm font-medium text-kolabora-neutral-dark/70">Per Event</p>
        <div className="mt-2 flex flex-col divide-y divide-kolabora-neutral-dark/10 rounded-xl border border-kolabora-neutral-dark/10">
          {data.by_event.length === 0 && (
            <p className="px-4 py-6 text-center text-sm text-kolabora-neutral-dark/70">
              No attendance data yet.
            </p>
          )}
          {data.by_event.map((row) => (
            <div key={row.event_id} className="flex items-center justify-between gap-4 px-4 py-3 text-sm">
              <div className="flex-1">
                <p>{row.title}</p>
                <div className="mt-1 h-2 w-full overflow-hidden rounded-full bg-kolabora-neutral-dark/10">
                  <div
                    className="h-full rounded-full bg-kolabora-primary"
                    style={{ width: `${Math.min(100, row.rate)}%` }}
                  />
                </div>
              </div>
              <span className="shrink-0 font-medium">
                {row.checked_in}/{row.valid_tickets} ({row.rate}%)
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}