'use client';
import { FunctionComponent } from 'react';
import { Stack } from '@mui/material';
import type { BookingSessionDto } from '@/services/bookings/types';
import SessionCard from '../SessionCard';

export interface SessionListProps {
  sessions: BookingSessionDto[];
  /** Render the nurse EVV check-in/out CTA on each card. */
  showEvvControls?: boolean;
  showPayout?: boolean;
  /** The session whose EVV mutation is in flight (per-card busy state). */
  busySessionId?: number | null;
  /** The session currently acquiring GPS (pre-mutation). */
  acquiringSessionId?: number | null;
  onCheckIn?: (session: BookingSessionDto) => void;
  onCheckOut?: (session: BookingSessionDto) => void;
}

/**
 * The session schedule list — one `SessionCard` per `BookingSessionDto`. A **single-visit booking renders
 * exactly one card through this same path** (no special case). Per-session busy state is derived from the
 * container's controller so only the acting card shows the spinner.
 * @component SessionList
 */
const SessionList: FunctionComponent<SessionListProps> = ({
  sessions,
  showEvvControls = false,
  showPayout = false,
  busySessionId = null,
  acquiringSessionId = null,
  onCheckIn,
  onCheckOut,
}) => (
  <Stack sx={{ gap: 1.5 }}>
    {sessions.map((session) => (
      <SessionCard
        key={session.id}
        sessionIndex={session.sessionIndex}
        scheduledDate={session.scheduledDate}
        scheduledTimeStart={session.scheduledTimeStart}
        scheduledTimeEnd={session.scheduledTimeEnd}
        status={session.status}
        evvStatus={session.evvStatus}
        checkInAt={session.checkInAt}
        checkOutAt={session.checkOutAt}
        checkInAddressMatch={session.checkInAddressMatch}
        visitPayoutAmount={session.visitPayoutAmount}
        showPayout={showPayout}
        showEvvControls={showEvvControls}
        evvPending={busySessionId === session.id}
        acquiringLocation={acquiringSessionId === session.id}
        onCheckIn={onCheckIn ? () => onCheckIn(session) : undefined}
        onCheckOut={onCheckOut ? () => onCheckOut(session) : undefined}
      />
    ))}
  </Stack>
);

export default SessionList;
