'use client'
import { FunctionComponent } from 'react';
import { keyframes } from '@emotion/react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import AppIcon from '../AppIcon';

export type TimelineNodeState = 'completed' | 'current' | 'pending' | 'failed';

export interface TimelineNode {
  /** Stable key — also exposed as `data-node` for tests. */
  key: string;
  /** Already-translated label. */
  label: string;
  /** Already-translated, formatted timestamp (e.g. a Shamsi date/time). */
  timestamp?: string;
  /** Already-translated freeform note (a channel, a reference). */
  note?: string;
  state: TimelineNodeState;
}

export interface StatusTimelineProps {
  nodes: TimelineNode[];
}

const pulse = keyframes`
  0%, 100% { box-shadow: 0 0 0 0 var(--bal-primary-soft); }
  50% { box-shadow: 0 0 0 6px var(--bal-primary-soft); }
`;

const DOT_SIZE = 22;

function dotStyle(state: TimelineNodeState) {
  switch (state) {
    case 'completed':
      return { bg: 'var(--bal-primary)', border: 'var(--bal-primary)' };
    case 'current':
      return { bg: 'var(--bal-bg-paper)', border: 'var(--bal-primary)' };
    case 'failed':
      return { bg: 'var(--bal-error)', border: 'var(--bal-error)' };
    case 'pending':
    default:
      return { bg: 'var(--bal-bg-paper)', border: 'var(--bal-divider)' };
  }
}

/**
 * A designed vertical status timeline: node = label + optional timestamp + optional note, with four
 * states — `completed` (filled), `current` (an animated ring, respecting `prefers-reduced-motion`),
 * `pending` (outlined), and `failed` (a distinct terminal marker, never styled as if progress continues
 * past it). Replaces `StepperHeader` misused as a status display (the refund progress card, the booking
 * lifecycle) — `StepperHeader` itself stays reserved for real multi-step wizards.
 * @component StatusTimeline
 */
const StatusTimeline: FunctionComponent<StatusTimelineProps> = ({ nodes }) => (
  <Stack data-status-timeline sx={{ gap: 0 }}>
    {nodes.map((node, index) => {
      const isLast = index === nodes.length - 1;
      const { bg, border } = dotStyle(node.state);
      return (
        <Stack key={node.key} direction="row" sx={{ gap: 1.5 }} data-node={node.key} data-node-state={node.state}>
          <Stack sx={{ alignItems: 'center', width: DOT_SIZE }}>
            <Box
              sx={{
                width: DOT_SIZE,
                height: DOT_SIZE,
                borderRadius: '50%',
                flexShrink: 0,
                bgcolor: bg,
                border: '2px solid',
                borderColor: border,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                ...(node.state === 'current' && {
                  '@media (prefers-reduced-motion: no-preference)': {
                    animation: `${pulse} 1.6s ease-in-out infinite`,
                  },
                }),
              }}
            >
              {node.state === 'completed' && <AppIcon icon="verified" size={14} color="var(--bal-primary-contrast)" />}
              {node.state === 'current' && (
                <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: 'var(--bal-primary)' }} />
              )}
              {node.state === 'failed' && <AppIcon icon="close" size={14} color="var(--bal-error-contrast)" />}
            </Box>
            {!isLast && (
              <Box
                sx={{
                  width: 2,
                  flex: 1,
                  minHeight: 28,
                  bgcolor: node.state === 'completed' ? 'var(--bal-primary)' : 'var(--bal-divider)',
                }}
              />
            )}
          </Stack>
          <Stack sx={{ pb: isLast ? 0 : 2.5, gap: 0.25, pt: 0.25 }}>
            <Typography
              variant="body2"
              sx={{
                fontWeight: node.state === 'current' ? 700 : 500,
                color: node.state === 'pending' ? 'text.secondary' : 'text.primary',
              }}
            >
              {node.label}
            </Typography>
            {node.timestamp ? (
              <Typography variant="caption" sx={{ color: 'text.secondary' }}>
                {node.timestamp}
              </Typography>
            ) : null}
            {node.note ? (
              <Typography variant="caption" sx={{ color: 'text.secondary' }}>
                {node.note}
              </Typography>
            ) : null}
          </Stack>
        </Stack>
      );
    })}
  </Stack>
);

export default StatusTimeline;
