import { Eye } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { Button } from "@/shared/common/ui/button";
import type { AllRecord } from "@/user-management/all-records/types";

const displayValue = (value?: string | { en?: string; am?: string }) =>
  typeof value === "string" ? value : value?.en || value?.am || "—";

const AllRecordsTable = ({ records }: { records: AllRecord[] }) => {
  const navigate = useNavigate();
  return (
    <div className="overflow-x-auto rounded-lg border dark:border-slate-700">
      <table className="w-full text-left text-sm">
        <thead className="bg-slate-50 text-xs uppercase text-slate-500 dark:bg-slate-800">
          <tr>
            <th className="px-5 py-3">Reference</th>
            <th className="px-5 py-3">Subject</th>
            <th className="px-5 py-3">Record type</th>
            <th className="px-5 py-3">Sender</th>
            <th className="px-5 py-3">Status</th>
            <th className="px-5 py-3">Created</th>
            <th className="px-5 py-3">Action</th>
          </tr>
        </thead>
        <tbody className="divide-y bg-white dark:divide-slate-700 dark:bg-slate-900">
          {records.map((record) => (
            <tr key={record.id}>
              <td className="px-5 py-4 font-medium">
                {record.referenceNumber || "—"}
              </td>
              <td className="max-w-xs truncate px-5 py-4">
                {displayValue(record.subject)}
              </td>
              <td className="px-5 py-4">{displayValue(record.recordType)}</td>
              <td className="px-5 py-4">{displayValue(record.sender)}</td>
              <td className="px-5 py-4 capitalize">{record.status || "—"}</td>
              <td className="px-5 py-4">
                {record.createdAt
                  ? new Date(record.createdAt).toLocaleDateString()
                  : "—"}
              </td>
              <td className="px-5 py-4">
                <Button
                  size="sm"
                  variant="outline"
                  className="gap-2"
                  onClick={() =>
                    navigate(`/user-management/all-records/${record.id}`)
                  }
                >
                  <Eye className="h-4 w-4" /> View Details
                </Button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default AllRecordsTable;
