import { formatDate } from "@/lib/format";
import type { TrashedItem } from "@/types/retention";
import { TrashActionButton } from "@/components/retention/trash-action-button";

export function TrashTable({
  items,
  restoreEndpoint,
  permanentDeleteEndpoint,
}: {
  items: TrashedItem[];
  restoreEndpoint: string;
  permanentDeleteEndpoint?: string;
}) {
  const columnCount = permanentDeleteEndpoint ? 5 : 4;

  return (
    <div className="scroll-fade-x overflow-x-auto rounded-xl border border-kolabora-neutral-dark/10">
      <table className="w-full text-left text-sm">
        <thead className="bg-kolabora-neutral-dark/5 text-xs uppercase text-kolabora-neutral-dark/70">
          <tr>
            <th className="px-4 py-2">Name</th>
            <th className="px-4 py-2">Context</th>
            <th className="px-4 py-2">Deleted On</th>
            {permanentDeleteEndpoint && <th className="px-4 py-2">Retention (BR-033)</th>}
            <th className="px-4 py-2">Action</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-kolabora-neutral-dark/10">
          {items.length === 0 && (
            <tr>
              <td colSpan={columnCount} className="px-4 py-6 text-center text-kolabora-neutral-dark/70">
                No deleted data.
              </td>
            </tr>
          )}
          {items.map((item) => (
            <tr key={`${item.type}-${item.id}`}>
              <td className="px-4 py-2 font-medium">{item.label}</td>
              <td className="px-4 py-2 text-kolabora-neutral-dark/70">{item.context ?? "-"}</td>
              <td className="px-4 py-2">{formatDate(item.deleted_at)}</td>
              {permanentDeleteEndpoint && (
                <td className="px-4 py-2">
                  {item.permanent_delete_eligible ? (
                    <span className="font-medium text-green-600">Can be permanently deleted</span>
                  ) : (
                    <span className="text-kolabora-neutral-dark/70">
                      Available {formatDate(item.permanent_delete_eligible_at)}
                    </span>
                  )}
                </td>
              )}
              <td className="px-4 py-2">
                <div className="flex flex-wrap gap-2">
                  <TrashActionButton
                    endpoint={restoreEndpoint}
                    type={item.type}
                    id={item.id}
                    label="Restore"
                    variant="primary"
                  />
                  {permanentDeleteEndpoint && (
                    <TrashActionButton
                      endpoint={permanentDeleteEndpoint}
                      type={item.type}
                      id={item.id}
                      label="Delete Permanently"
                      variant="danger"
                      disabled={!item.permanent_delete_eligible}
                      confirmMessage="Are you sure you want to PERMANENTLY delete this data? This action cannot be undone."
                    />
                  )}
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}