'use client';
import { FunctionComponent, useState } from 'react';
import Box from '@mui/material/Box';
import ButtonBase from '@mui/material/ButtonBase';
import Collapse from '@mui/material/Collapse';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { useTranslations } from 'next-intl';
import AppButton from '@/components/common/AppButton';
import { AppIcon } from '@/components/common';

export interface EmergencyPlaybookRowProps {
  /** Opens the support-ticket flow ("…then open a ticket"). */
  onOpenTicket: () => void;
}

/**
 * The ticket-inbox emergency affordance (§3.4) — a compact, neutral, collapsed-by-default row (not the
 * alarm-red `EmergencyBanner`, which stays reserved for the surface that actually has a `tel:` contact:
 * the nurse's post-confirmation booking detail). Expands to the playbook copy + an "open a ticket" action.
 * The inbox never has a phone number to show, so its copy never instructs calling one.
 * @component EmergencyPlaybookRow
 */
const EmergencyPlaybookRow: FunctionComponent<EmergencyPlaybookRowProps> = ({ onOpenTicket }) => {
  const t = useTranslations('tickets');
  const [expanded, setExpanded] = useState(false);

  return (
    <Box
      data-testid="emergency-playbook-row"
      sx={{ borderRadius: 'var(--bal-radius-md)', border: '1px solid', borderColor: 'divider', bgcolor: 'var(--bal-bg-paper)' }}
    >
      <ButtonBase
        onClick={() => setExpanded((current) => !current)}
        aria-expanded={expanded}
        data-testid="emergency-playbook-toggle"
        sx={{ display: 'flex', width: '100%', justifyContent: 'flex-start', p: 1.5, gap: 1, textAlign: 'start' }}
      >
        <AppIcon icon="info" size={20} color="var(--bal-text-secondary)" />
        <Typography variant="subtitle2" sx={{ fontWeight: 700, flexGrow: 1, color: 'var(--bal-text-secondary)' }}>
          {t('emergency_row_title')}
        </Typography>
        <AppIcon
          icon="expand"
          size={20}
          color="var(--bal-text-secondary)"
          style={{ transform: expanded ? 'rotate(180deg)' : undefined, transition: 'transform var(--bal-motion-fast) var(--bal-easing-standard)' }}
        />
      </ButtonBase>
      <Collapse in={expanded}>
        <Stack sx={{ gap: 1, px: 1.5, pb: 1.5 }}>
          <Typography variant="body2" sx={{ color: 'var(--bal-text-secondary)' }}>
            {t('emergency_row_body')}
          </Typography>
          <AppButton
            variant="text"
            color="primary"
            startIcon="support"
            onClick={onOpenTicket}
            sx={{ alignSelf: 'flex-start' }}
          >
            {t('emergency_open_ticket')}
          </AppButton>
        </Stack>
      </Collapse>
    </Box>
  );
};

export default EmergencyPlaybookRow;
