import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

export default async function AttendancePage() {
  const attendance = await prisma.attendance.findMany({
    include: { employee: { include: { user: { select: { name: true } } } } },
    orderBy: { timestamp: "desc" },
    take: 100,
  });

  return (
    <div className="p-8">
      <h1 className="text-2xl font-semibold mb-6">Attendance</h1>
      <div className="rounded-xl border border-slate-800 overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-slate-900 text-slate-400 text-left">
            <tr>
              <th className="px-4 py-3">Employee</th>
              <th className="px-4 py-3">Event</th>
              <th className="px-4 py-3">Time</th>
              <th className="px-4 py-3">Location</th>
            </tr>
          </thead>
          <tbody>
            {attendance.map((a) => (
              <tr key={a.id} className="border-t border-slate-800">
                <td className="px-4 py-3">{a.employee.user.name}</td>
                <td className="px-4 py-3">{a.eventType.replace("_", " ")}</td>
                <td className="px-4 py-3 text-slate-400">{new Date(a.timestamp).toLocaleString()}</td>
                <td className="px-4 py-3 text-slate-400">
                  {a.latitude != null ? `${a.latitude.toFixed(4)}, ${a.longitude?.toFixed(4)}` : "—"}
                </td>
              </tr>
            ))}
            {attendance.length === 0 && (
              <tr>
                <td colSpan={4} className="px-4 py-8 text-center text-slate-500">
                  No attendance events yet.
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}