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

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

import { getPortalSession } from '@/lib/portal/auth';
import { getClientInterests } from '@/lib/services/portal.service';
import { Badge } from '@/components/ui/badge';
import { stageLabel, safeStage, type PipelineStage } from '@/lib/constants';

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

const STAGE_VARIANT: Record<PipelineStage, 'default' | 'secondary' | 'destructive' | 'outline'> = {
  open: 'secondary',
  details_sent: 'secondary',
  in_communication: 'default',
  eoi_sent: 'default',
  eoi_signed: 'default',
  deposit_10pct: 'default',
  contract_sent: 'default',
  contract_signed: 'default',
  completed: 'outline',
};

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

  const interests = await getClientInterests(session.clientId, session.portId);

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-semibold text-gray-900">Berth Interests</h1>
        <p className="text-sm text-gray-500 mt-1">Your berth enquiries and applications</p>
      </div>

      {interests.length === 0 ? (
        <div className="bg-white rounded-lg border p-12 text-center">
          <Anchor className="h-10 w-10 text-gray-300 mx-auto mb-3" />
          <p className="text-gray-500 font-medium">No interests on file</p>
          <p className="text-sm text-gray-400 mt-1">
            Contact your port representative to discuss available berths.
          </p>
        </div>
      ) : (
        <div className="space-y-3">
          {interests.map((interest) => (
            <div key={interest.id} className="bg-white rounded-lg border p-5">
              <div className="flex items-start justify-between gap-4">
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 mb-1">
                    {interest.berthMooringNumber ? (
                      <span className="font-medium text-gray-900">
                        Berth {interest.berthMooringNumber}
                      </span>
                    ) : (
                      <span className="font-medium text-gray-900">General Interest</span>
                    )}
                    {interest.berthArea && (
                      <span className="text-sm text-gray-400">— {interest.berthArea}</span>
                    )}
                  </div>
                  {interest.leadCategory && (
                    <p className="text-sm text-gray-500 capitalize">
                      {interest.leadCategory.replace(/_/g, ' ')}
                    </p>
                  )}
                  <div className="flex flex-wrap gap-2 mt-2 text-xs text-gray-400">
                    {interest.dateFirstContact && (
                      <span>
                        First contact:{' '}
                        {new Date(interest.dateFirstContact).toLocaleDateString('en-US', {
                          year: 'numeric',
                          month: 'short',
                          day: 'numeric',
                        })}
                      </span>
                    )}
                    {interest.eoiStatus && (
                      <span>EOI: {interest.eoiStatus.replace(/_/g, ' ')}</span>
                    )}
                    {interest.contractStatus && (
                      <span>Contract: {interest.contractStatus.replace(/_/g, ' ')}</span>
                    )}
                  </div>
                </div>
                <Badge variant={STAGE_VARIANT[safeStage(interest.pipelineStage)]}>
                  {stageLabel(interest.pipelineStage)}
                </Badge>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}