pn-new-crm/src/components/clients/client-tenancies-tab.tsx

'use client';

import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';

import { TenancyList, type TenancyRow } from '@/components/tenancies/tenancy-list';
import { Button } from '@/components/ui/button';
import { apiFetch } from '@/lib/api/client';

interface ClientTenanciesTabProps {
  clientId: string;
  activeTenancies: Array<{
    id: string;
    berthId: string;
    yachtId: string;
    startDate: string | Date;
    tenureType: string;
    status: string;
  }>;
}

interface TenancyListResponse {
  data: TenancyRow[];
  pagination?: { total: number };
}

export function ClientTenanciesTab({ clientId, activeTenancies }: ClientTenanciesTabProps) {
  const [showHistory, setShowHistory] = useState(false);

  const activeRows: TenancyRow[] = activeTenancies.map((r) => ({
    id: r.id,
    berthId: r.berthId,
    portId: '',
    clientId,
    yachtId: r.yachtId,
    status: r.status as TenancyRow['status'],
    startDate: typeof r.startDate === 'string' ? r.startDate : r.startDate.toISOString(),
    endDate: null,
    tenureType: r.tenureType,
    contractFileId: null,
    notes: null,
    createdAt: '',
  }));

  // Lazy-load history (ended + cancelled). Two parallel queries because
  // the API takes one status at a time; combining once both resolve.
  const endedQuery = useQuery({
    queryKey: ['tenancies', { clientId, status: 'ended' }],
    queryFn: () =>
      apiFetch<TenancyListResponse>(
        `/api/v1/tenancies?clientId=${encodeURIComponent(clientId)}&status=ended&pageSize=50`,
      ),
    enabled: showHistory,
  });
  const cancelledQuery = useQuery({
    queryKey: ['tenancies', { clientId, status: 'cancelled' }],
    queryFn: () =>
      apiFetch<TenancyListResponse>(
        `/api/v1/tenancies?clientId=${encodeURIComponent(clientId)}&status=cancelled&pageSize=50`,
      ),
    enabled: showHistory,
  });

  const historyRows: TenancyRow[] = [
    ...(endedQuery.data?.data ?? []),
    ...(cancelledQuery.data?.data ?? []),
  ].sort((a, b) => (a.startDate < b.startDate ? 1 : -1));

  const isHistoryLoading = showHistory && (endedQuery.isLoading || cancelledQuery.isLoading);

  return (
    <div className="space-y-6">
      <div>
        <div className="flex items-center justify-between">
          <h3 className="text-sm font-medium">Active tenancies</h3>
        </div>
        <TenancyList
          tenancies={activeRows}
          showBerth
          emptyMessage="This client has no active tenancies."
        />
      </div>

      <div>
        <div className="flex items-center justify-between mb-2">
          <h3 className="text-sm font-medium">History</h3>
          <Button
            size="sm"
            variant="outline"
            onClick={() => setShowHistory((v) => !v)}
            disabled={isHistoryLoading}
          >
            {showHistory ? 'Hide history' : 'Show history'}
          </Button>
        </div>
        {showHistory ? (
          isHistoryLoading ? (
            <p className="text-xs text-muted-foreground">Loading…</p>
          ) : (
            <TenancyList
              tenancies={historyRows}
              showBerth
              emptyMessage="No ended or cancelled tenancies."
            />
          )
        ) : (
          <p className="text-xs text-muted-foreground">
            Click &ldquo;Show history&rdquo; to load ended and cancelled tenancies.
          </p>
        )}
      </div>
    </div>
  );
}