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

import { getPortalSession } from '@/lib/portal/auth';
import { getPortalUserReservations } from '@/lib/services/portal.service';
import { Badge } from '@/components/ui/badge';

export const metadata: Metadata = { title: 'My Reservations' };

const STATUS_COLORS: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
  pending: 'secondary',
  active: 'default',
  ended: 'outline',
  cancelled: 'destructive',
};

const TENURE_LABELS: Record<string, string> = {
  permanent: 'Permanent',
  fixed_term: 'Fixed term',
  seasonal: 'Seasonal',
};

function formatDate(d: Date | string): string {
  return new Date(d).toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
  });
}

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

  const reservations = await getPortalUserReservations(session.clientId, session.portId);

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-semibold text-gray-900">My Reservations</h1>
        <p className="text-sm text-gray-500 mt-1">Your current and pending berth reservations</p>
      </div>

      {reservations.length === 0 ? (
        <div className="bg-white rounded-lg border p-12 text-center">
          <CalendarCheck className="h-10 w-10 text-gray-300 mx-auto mb-3" />
          <p className="text-gray-500 font-medium">No active reservations</p>
          <p className="text-sm text-gray-400 mt-1">
            Contact your port representative to discuss reservations.
          </p>
        </div>
      ) : (
        <div className="space-y-3">
          {reservations.map((r) => (
            <div key={r.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">
                    <span className="font-medium text-gray-900">{r.yachtName ?? 'Yacht'}</span>
                    {r.berthMooringNumber && (
                      <span className="text-sm text-gray-400">— Berth {r.berthMooringNumber}</span>
                    )}
                  </div>
                  <p className="text-sm text-gray-500">
                    {TENURE_LABELS[r.tenureType] ?? r.tenureType}
                  </p>
                  <div className="flex flex-wrap gap-3 mt-2 text-xs text-gray-400">
                    <span>
                      From {formatDate(r.startDate)}
                      {r.endDate ? ` to ${formatDate(r.endDate)}` : ' · ongoing'}
                    </span>
                  </div>
                </div>
                <Badge variant={STATUS_COLORS[r.status] ?? 'default'}>{r.status}</Badge>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}