pn-new-crm/src/components/reports/reports-list.tsx

'use client';

import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { Download, FileText } from 'lucide-react';

import { Button } from '@/components/ui/button';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { ReportStatusBadge } from '@/components/reports/report-status-badge';
import { apiFetch } from '@/lib/api/client';

interface GeneratedReport {
  id: string;
  name: string;
  reportType: string;
  status: 'queued' | 'processing' | 'ready' | 'failed';
  requestedBy: string;
  createdAt: string;
  completedAt: string | null;
  errorMessage: string | null;
  fileId: string | null;
}

interface ReportsResponse {
  data: GeneratedReport[];
  pagination: {
    page: number;
    pageSize: number;
    total: number;
    totalPages: number;
  };
}

const REPORT_TYPE_LABELS: Record<string, string> = {
  pipeline: 'Pipeline Summary',
  revenue: 'Revenue',
  activity: 'Activity Log',
  occupancy: 'Berth Occupancy',
};

export function ReportsList() {
  const [downloadingId, setDownloadingId] = useState<string | null>(null);

  const { data, isLoading } = useQuery<ReportsResponse>({
    queryKey: ['reports'],
    queryFn: () => apiFetch<ReportsResponse>('/api/v1/reports?limit=50'),
    refetchInterval: (query) => {
      const rows = query.state.data?.data ?? [];
      const hasPending = rows.some(
        (r) => r.status === 'queued' || r.status === 'processing',
      );
      return hasPending ? 5000 : false;
    },
  });

  const handleDownload = async (reportId: string) => {
    setDownloadingId(reportId);
    try {
      const result = await apiFetch<{ url: string }>(
        `/api/v1/reports/${reportId}/download`,
      );
      window.open(result.url, '_blank');
    } catch (err) {
      console.error('Download failed', err);
    } finally {
      setDownloadingId(null);
    }
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>Generated Reports</CardTitle>
      </CardHeader>
      <CardContent>
        {isLoading ? (
          <div className="space-y-2">
            {Array.from({ length: 3 }).map((_, i) => (
              <Skeleton key={i} className="h-10 w-full" />
            ))}
          </div>
        ) : !data?.data.length ? (
          <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center">
            <FileText className="mb-2 h-8 w-8 text-muted-foreground" />
            <p className="text-sm font-medium text-muted-foreground">
              No reports generated yet
            </p>
            <p className="text-xs text-muted-foreground">
              Use the form above to generate your first report.
            </p>
          </div>
        ) : (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Name</TableHead>
                <TableHead>Type</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Requested</TableHead>
                <TableHead>Completed</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {data.data.map((report) => (
                <TableRow key={report.id}>
                  <TableCell className="font-medium">{report.name}</TableCell>
                  <TableCell className="text-muted-foreground">
                    {REPORT_TYPE_LABELS[report.reportType] ?? report.reportType}
                  </TableCell>
                  <TableCell>
                    <ReportStatusBadge status={report.status} />
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {new Date(report.createdAt).toLocaleString('en-GB', {
                      dateStyle: 'short',
                      timeStyle: 'short',
                    })}
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {report.completedAt
                      ? new Date(report.completedAt).toLocaleString('en-GB', {
                          dateStyle: 'short',
                          timeStyle: 'short',
                        })
                      : report.status === 'failed' && report.errorMessage
                        ? (
                          <span className="text-destructive text-xs" title={report.errorMessage}>
                            Failed
                          </span>
                        )
                        : '—'}
                  </TableCell>
                  <TableCell className="text-right">
                    {report.status === 'ready' && report.fileId && (
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handleDownload(report.id)}
                        disabled={downloadingId === report.id}
                      >
                        <Download className="mr-1 h-4 w-4" />
                        {downloadingId === report.id ? 'Opening...' : 'Download'}
                      </Button>
                    )}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        )}
      </CardContent>
    </Card>
  );
}