"use client";

import { useEffect, useState } from "react";
import DocumentUploader from "./DocumentUploader";
import DocumentCard from "./DocumentCard";
import { API_URL } from '@/lib/api';

interface DocumentFile {
  id: number;
  originalName: string;
  mimeType: string;
  fileSize: number;
  uploadedBy: string;
  uploadedAt: string;
}

interface Props {
  entityType: string;
  entityId: number;
  onCountChange?: (count: number) => void;
}

export default function DocumentsTab({ entityType, entityId, onCountChange }: Props) {
  const [documents, setDocuments] = useState<DocumentFile[]>([]);

  async function loadDocuments() {
    const res = await fetch(
      `${API_URL}/api/documents/${entityType}/${entityId}`
    );
    const data = await res.json();
    setDocuments(data);
    onCountChange?.(data.length);
  }

  async function deleteDocument(id: number) {
    await fetch(`${API_URL}/api/documents/${id}`, { method: "DELETE" });
    loadDocuments();
  }

  useEffect(() => {
    loadDocuments();
  }, [entityType, entityId]);

  return (
    <div className="space-y-6">
      <DocumentUploader
        entityType={entityType}
        entityId={entityId}
        onUploaded={loadDocuments}
      />
      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        {documents.map((document) => (
          <DocumentCard
            key={document.id}
            document={document}
            onDelete={deleteDocument}
          />
        ))}
      </div>
    </div>
  );
}