"use client";

import { useAttendance } from "@/hooks/use-api";
import { PageHeader } from "@/components/ui/PageHeader";
import { Badge } from "@/components/ui/badge";

export default function AttendancePage() {
  const { data: attendance = [], isLoading } = useAttendance();

  if (isLoading) {
    return (
      <div className="space-y-8">
        <PageHeader
          title="Attendance"
          description="Monitor gym check-ins and check-outs"
          breadcrumbs={[{ label: "Attendance" }]}
        />
        <div className="card-modern">
          <div className="animate-pulse space-y-4">
            {[...Array(5)].map((_, i) => (
              <div key={i} className="h-12 bg-muted rounded" />
            ))}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-8">
      <PageHeader
        title="Attendance"
        description="Monitor gym check-ins and check-outs"
        breadcrumbs={[{ label: "Attendance" }]}
      />

      <div className="card-modern">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-border">
                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
                  Client
                </th>
                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
                  Type
                </th>
                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
                  Check In
                </th>
                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
                  Check Out
                </th>
                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
                  Status
                </th>
              </tr>
            </thead>
            <tbody>
              {attendance.map((record) => (
                <tr
                  key={record.id}
                  className="border-b border-border/50 hover:bg-muted/50 transition-colors"
                >
                  <td className="py-3 px-4 text-sm">
                    {record.userId.substring(0, 8)}...
                  </td>
                  <td className="py-3 px-4 text-sm capitalize text-muted-foreground">
                    {record.type}
                  </td>
                  <td className="py-3 px-4 text-sm text-muted-foreground">
                    {new Date(record.checkIn).toLocaleString()}
                  </td>
                  <td className="py-3 px-4 text-sm text-muted-foreground">
                    {record.checkOut
                      ? new Date(record.checkOut).toLocaleString()
                      : "-"}
                  </td>
                  <td className="py-3 px-4">
                    <Badge variant={record.checkOut ? "gray" : "success"}>
                      {record.checkOut ? "Completed" : "Active"}
                    </Badge>
                  </td>
                </tr>
              ))}
              {attendance.length === 0 && (
                <tr>
                  <td
                    colSpan={5}
                    className="py-8 text-center text-muted-foreground"
                  >
                    No attendance records found
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}