"use client";

import { useEffect, useState } from "react";

interface Attendance {
  id: string;
  date: string;
  status: string;
  course: { title: string };
}

export default function AthleteAttendance() {
  const [records, setRecords] = useState<Attendance[]>([]);

  useEffect(() => {
    fetch("/api/attendance", {
      headers: { Authorization: `Bearer ${localStorage.getItem("auth_token")}` },
    })
      .then((r) => r.json())
      .then(setRecords)
      .catch(() => {});
  }, []);

  return (
    <div>
      <h1 className="text-2xl font-bold text-gray-900 mb-6">حضور و غیاب</h1>
      <div className="rounded-xl border bg-white overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-gray-50 text-gray-600">
            <tr>
              <th className="text-right p-3 font-medium">دوره</th>
              <th className="text-right p-3 font-medium">تاریخ</th>
              <th className="text-right p-3 font-medium">وضعیت</th>
            </tr>
          </thead>
          <tbody className="divide-y">
            {records.length === 0 ? (
              <tr>
                <td colSpan={3} className="p-8 text-center text-gray-500">رکوردی وجود ندارد</td>
              </tr>
            ) : (
              records.map((r) => (
                <tr key={r.id}>
                  <td className="p-3">{r.course.title}</td>
                  <td className="p-3 text-gray-500">{new Date(r.date).toLocaleDateString("fa-IR")}</td>
                  <td className="p-3">
                    <span className={r.status === "present" ? "text-green-600" : "text-red-600"}>
                      {r.status === "present" ? "حاضر" : "غایب"}
                    </span>
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}