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' };

// Portal-friendly labels for signing-process status fields. The audit
// caught raw enum leak ("waiting_for_signatures" with underscores) at
// the client-facing surface. Map every known value to plain English;
// fall back to a Title-Case rendering for any new states.
const PORTAL_SIGNING_LABELS: Record<string, string> = {
  not_started: 'Not started',
  draft: 'Drafted',
  awaiting_them: 'Awaiting their signature',
  awaiting_me: 'Awaiting your signature',
  waiting_for_signatures: 'Waiting for signatures',
  partially_signed: 'Partially signed',
  sent: 'Sent for signing',
  signed: 'Signed',
  completed: 'Signed',
  expired: 'Expired',
  cancelled: 'Cancelled',
  rejected: 'Rejected',
};
function portalSigningLabel(status: string): string {
  if (status in PORTAL_SIGNING_LABELS) return PORTAL_SIGNING_LABELS[status]!;
  return status
    .split('_')
    .map((p) => (p ? p[0]!.toUpperCase() + p.slice(1) : p))
    .join(' ');
}

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>
                  {/* leadCategory ("hot_lead" / "qualified_lead" / etc.)
                      is a staff classification — never render to clients.
                      Privacy + optics: we shouldn't be telling the
                      prospect they're a "hot lead". */}
                  <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: {portalSigningLabel(interest.eoiStatus)}</span>
                    )}
                    {interest.contractStatus && (
                      <span>Contract: {portalSigningLabel(interest.contractStatus)}</span>
                    )}
                  </div>
                </div>
                <Badge variant={STAGE_VARIANT[safeStage(interest.pipelineStage)]}>
                  {stageLabel(interest.pipelineStage)}
                </Badge>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}