pn-new-crm/src/app/(portal)/portal/documents/page.tsx

import { redirect } from 'next/navigation';
import { FileText } from 'lucide-react';
import type { Metadata } from 'next';

import { getPortalSession } from '@/lib/portal/auth';
import { getClientDocuments } from '@/lib/services/portal.service';
import { Badge } from '@/components/ui/badge';
import { DocumentDownloadButton } from './document-download-button';

export const metadata: Metadata = { title: 'Documents' };

const DOC_TYPE_LABELS: Record<string, string> = {
  eoi: 'Expression of Interest',
  contract: 'Contract',
  nda: 'NDA',
  reservation_agreement: 'Reservation Agreement',
  other: 'Document',
};

const STATUS_COLORS: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
  draft: 'secondary',
  sent: 'default',
  partially_signed: 'default',
  completed: 'outline',
  expired: 'destructive',
  cancelled: 'destructive',
};

export default async function PortalDocumentsPage() {
  const session = await getPortalSession();
  if (!session) redirect('/portal/login');

  const documents = await getClientDocuments(session.clientId, session.portId);

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-semibold text-gray-900">Documents</h1>
        <p className="text-sm text-gray-500 mt-1">Your contracts, EOIs, and signed agreements</p>
      </div>

      {documents.length === 0 ? (
        <div className="bg-white rounded-lg border p-12 text-center">
          <FileText className="h-10 w-10 text-gray-300 mx-auto mb-3" />
          <p className="text-gray-500 font-medium">No documents on file</p>
          <p className="text-sm text-gray-400 mt-1">Documents shared with you will appear here.</p>
        </div>
      ) : (
        <div className="space-y-3">
          {documents.map((doc) => (
            <div key={doc.id} className="bg-white rounded-lg border p-5">
              <div className="flex items-start gap-4">
                <FileText className="h-5 w-5 text-gray-400 mt-0.5 flex-shrink-0" />
                <div className="flex-1 min-w-0">
                  <div className="flex items-start justify-between gap-4 flex-wrap">
                    <div className="flex-1 min-w-0">
                      <p className="font-medium text-gray-900 truncate">{doc.title}</p>
                      <p className="text-sm text-gray-500 mt-0.5">
                        {DOC_TYPE_LABELS[doc.documentType] ?? doc.documentType}
                      </p>
                    </div>
                    <div className="flex items-center gap-2 flex-shrink-0">
                      <Badge variant={STATUS_COLORS[doc.status] ?? 'default'}>
                        {doc.status.replace(/_/g, ' ')}
                      </Badge>
                    </div>
                  </div>

                  {doc.signers.length > 0 && (
                    <div className="mt-3 space-y-1">
                      <p className="text-xs text-gray-400 font-medium uppercase tracking-wide">
                        Signers
                      </p>
                      {doc.signers.map((signer, idx) => (
                        <div key={idx} className="flex items-center gap-2 text-sm">
                          <span
                            className={
                              signer.status === 'signed'
                                ? 'text-green-600'
                                : signer.status === 'declined'
                                  ? 'text-red-500'
                                  : 'text-gray-500'
                            }
                          >
                            {signer.status === 'signed'
                              ? '✓'
                              : signer.status === 'declined'
                                ? '✗'
                                : '○'}
                          </span>
                          <span className="text-gray-700">{signer.signerName}</span>
                          <span className="text-gray-400 capitalize">
                            ({signer.signerRole.replace(/_/g, ' ')})
                          </span>
                        </div>
                      ))}
                    </div>
                  )}

                  <div className="flex items-center justify-between mt-3">
                    <p className="text-xs text-gray-400">
                      {new Date(doc.createdAt).toLocaleDateString('en-US', {
                        year: 'numeric',
                        month: 'short',
                        day: 'numeric',
                      })}
                    </p>
                    {(doc.hasSignedFile || doc.status === 'completed') && (
                      <DocumentDownloadButton documentId={doc.id} />
                    )}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}