pn-new-crm/src/components/companies/company-files-tab.tsx

'use client';

import { useState } from 'react';
import { useQueryClient } from '@tanstack/react-query';

import { FileGrid } from '@/components/files/file-grid';
import { FileUploadZone } from '@/components/files/file-upload-zone';
import { FilePreviewDialog } from '@/components/files/file-preview-dialog';
import { PermissionGate } from '@/components/shared/permission-gate';
import { usePaginatedQuery } from '@/hooks/use-paginated-query';
import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
import { useConfirmation } from '@/hooks/use-confirmation';
import { apiFetch } from '@/lib/api/client';
import type { FileRow } from '@/components/files/file-grid';

interface CompanyFilesTabProps {
  companyId: string;
}

export function CompanyFilesTab({ companyId }: CompanyFilesTabProps) {
  const queryClient = useQueryClient();
  const [previewFile, setPreviewFile] = useState<FileRow | null>(null);
  const { confirm, dialog: confirmDialog } = useConfirmation();

  const { data, isLoading } = usePaginatedQuery<FileRow>({
    queryKey: ['files', { companyId }],
    endpoint: `/api/v1/files?companyId=${encodeURIComponent(companyId)}`,
    filterDefinitions: [],
  });

  useRealtimeInvalidation({
    'file:uploaded': [['files', { companyId }]],
    'file:updated': [['files', { companyId }]],
    'file:deleted': [['files', { companyId }]],
  });

  const handleDownload = async (file: FileRow) => {
    try {
      const res = await apiFetch<{ data: { url: string; filename: string } }>(
        `/api/v1/files/${file.id}/download`,
      );
      const a = document.createElement('a');
      a.href = res.data.url;
      a.download = res.data.filename;
      a.click();
    } catch {
      // silent
    }
  };

  const handleDelete = async (file: FileRow) => {
    const ok = await confirm({
      title: 'Delete file',
      description: `Delete "${file.filename}"? This cannot be undone.`,
      confirmLabel: 'Delete',
    });
    if (!ok) return;
    try {
      await apiFetch(`/api/v1/files/${file.id}`, { method: 'DELETE' });
      queryClient.invalidateQueries({ queryKey: ['files', { companyId }] });
    } catch {
      // silent
    }
  };

  return (
    <div className="space-y-4">
      <PermissionGate resource="files" action="upload">
        <FileUploadZone
          companyId={companyId}
          onUploadComplete={() => {
            queryClient.invalidateQueries({ queryKey: ['files', { companyId }] });
          }}
        />
      </PermissionGate>

      <FileGrid
        files={data}
        onDownload={handleDownload}
        onPreview={setPreviewFile}
        onRename={() => {}}
        onDelete={handleDelete}
        isLoading={isLoading}
      />

      <FilePreviewDialog
        open={!!previewFile}
        onOpenChange={(open) => !open && setPreviewFile(null)}
        fileId={previewFile?.id}
        fileName={previewFile?.filename}
        mimeType={previewFile?.mimeType ?? undefined}
      />
      {confirmDialog}
    </div>
  );
}