'use client';
import { FunctionComponent } from 'react';
import { useTranslations } from 'next-intl';
import { Stack, Typography } from '@mui/material';
import AppIcon from '@/components/common/AppIcon';
import StatusChip from '@/components/StatusChip';
import StatusTimeline, { type TimelineNode, type TimelineNodeState } from '@/components/common/StatusTimeline';
import {
  BOOKING_TIMELINE_ORDER,
  bookingTimelineActiveIndex,
  type BookingStatus,
} from '@/services/bookings/types';
import { BOOKING_STATUS_KIND } from '../statusKind';

export interface BookingStatusTimelineProps {
  /** Server truth — the single source. The timeline never advances/infers a step client-side. */
  status: BookingStatus;
}

/** `completed`/`disputed`/`closed` sit at the "completed" index but mean "done", never "in progress". */
function nodeState(index: number, activeIndex: number, status: BookingStatus): TimelineNodeState {
  if (index < activeIndex) return 'completed';
  if (index > activeIndex) return 'pending';
  return status === 'completed' || status === 'disputed' || status === 'closed' ? 'completed' : 'current';
}

/**
 * The both-roles booking status timeline — the grown-up version of the f7 C5 3-step tracker. It renders
 * the canonical happy path `pending_payment → confirmed → in_progress → completed` over the shared
 * `StatusTimeline`, with the current-status chip above it. Terminal branches are shown **distinctly**:
 * `cancelled` replaces the timeline with a neutral terminal row (a progress line would mislead);
 * `disputed`/`closed` keep the timeline (they follow completion, rendered as fully completed) and
 * surface through the chip. **Reflects `BookingDetailDto.status` exactly** — it is never advanced on the
 * client.
 * @component BookingStatusTimeline
 */
const BookingStatusTimeline: FunctionComponent<BookingStatusTimelineProps> = ({ status }) => {
  const t = useTranslations('booking');
  const activeIndex = bookingTimelineActiveIndex(status);
  const nodes: TimelineNode[] = BOOKING_TIMELINE_ORDER.map((s, index) => ({
    key: s,
    label: t(`bstatus_${s}`),
    state: nodeState(index, activeIndex, status),
  }));

  return (
    <Stack sx={{ gap: 1.5 }} data-booking-status={status}>
      <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 1.5, flexWrap: 'wrap' }}>
        <Typography variant="subtitle2" sx={{ fontWeight: 700, color: 'text.secondary' }}>
          {t('timeline_title')}
        </Typography>
        <StatusChip status={BOOKING_STATUS_KIND[status]} label={t(`bstatus_${status}`)} />
      </Stack>

      {status === 'cancelled' ? (
        <Stack
          direction="row"
          sx={{ gap: 1, alignItems: 'center', px: 1.5, py: 1.25, borderRadius: 2, bgcolor: 'var(--bal-primary-soft)' }}
        >
          <AppIcon icon="rejected" size={20} color="var(--bal-text-secondary)" />
          <Typography variant="body2" sx={{ fontWeight: 500, color: 'text.secondary' }}>
            {t('bstatus_cancelled')}
          </Typography>
        </Stack>
      ) : (
        <StatusTimeline nodes={nodes} />
      )}
    </Stack>
  );
};

export default BookingStatusTimeline;
