import { API_URL } from '@/lib/api';
interface DocumentFile {
  id: number;
  originalName: string;
  mimeType: string;
  fileSize: number;
  uploadedBy: string;
  uploadedAt: string;
}

interface Props {
  document: DocumentFile;
  onDelete: (id: number) => void;
}

export default function DocumentCard({
  document,
  onDelete,
}: Props) {
  function getFileType(mime: string) {
    if (mime.includes("pdf")) return "PDF Document";
    if (mime.includes("word")) return "Word Document";

    if (
      mime.includes("spreadsheet") ||
      mime.includes("excel")
    ) {
      return "Excel Spreadsheet";
    }

    if (mime.startsWith("image")) return "Image";
    if (mime.startsWith("video")) return "Video";

    if (
      mime.includes("zip") ||
      mime.includes("compressed")
    ) {
      return "ZIP Archive";
    }

    if (mime.includes("dicom")) return "DICOM File";
    if (mime.includes("stl")) return "STL Model";

    return "Document";
  }

  function getIcon(mime: string) {
    if (mime.includes("pdf")) return "📄";
    if (mime.includes("word")) return "📝";

    if (
      mime.includes("spreadsheet") ||
      mime.includes("excel")
    ) {
      return "📊";
    }

    if (mime.startsWith("image")) return "🖼️";
    if (mime.startsWith("video")) return "🎥";

    if (
      mime.includes("zip") ||
      mime.includes("compressed")
    ) {
      return "🗜️";
    }

    if (mime.includes("dicom")) return "🦷";
    if (mime.includes("stl")) return "🦷";

    return "📎";
  }

  const size = (
    document.fileSize /
    1024 /
    1024
  ).toFixed(2);

  return (
    <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition hover:shadow-md">
      <div className="space-y-2">
        <h3
          title={document.originalName}
          className="truncate font-semibold text-slate-900"
        >
          {getIcon(document.mimeType)}{" "}
          {document.originalName}
        </h3>

        <p className="text-sm text-slate-500">
          {getFileType(document.mimeType)} • {size} MB
        </p>

        <p className="text-xs text-slate-400">
          Uploaded by {document.uploadedBy}
        </p>

        <p className="text-xs text-slate-400">
          {new Date(
            document.uploadedAt
          ).toLocaleString()}
        </p>
      </div>

      <div className="mt-5 flex gap-3">
        <a
          href={`${API_URL}/api/documents/${document.id}/download`}
          className="rounded-lg border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-700 transition hover:bg-slate-50"
        >
          Download
        </a>

        <button
          onClick={() =>
            onDelete(document.id)
          }
          className="rounded-lg bg-red-50 px-4 py-2 text-sm font-semibold text-red-600 transition hover:bg-red-100"
        >
          Delete
        </button>
      </div>
    </div>
  );
}