'use client';
import { FunctionComponent } from 'react';
import Button from '@mui/material/Button';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { useTranslations } from 'next-intl';
import { AppIcon } from '@/components/common';

export interface EmergencyBannerProps {
  /** The emergency-contact name (from the booking's post-confirmation care instructions), if loaded. */
  contactName?: string | null;
  /** The emergency-contact phone — the **only** sanctioned click-to-call surface; omit if not available. */
  contactPhone?: string | null;
  /** Opens the support-ticket flow ("…then open a ticket"). */
  onOpenTicket: () => void;
}

/**
 * The emergency **operational playbook** — not a real-time feature. "For emergencies, call the emergency
 * contact, then open a ticket." When a `contactPhone` is available (the nurse's post-confirmation care read),
 * it surfaces a `tel:` **click-to-call** — the platform's only sanctioned out-of-band surface; the platform
 * **never** exposes a general phone number or a contact directory. When the contact can't be loaded (e.g. the
 * customer/support-entry side, which is not entitled to the clinical read), the banner still renders with a
 * path to open a support ticket. `tel:` only — no VoIP/calling seam (telephony is out-of-platform by design).
 * The caller decides when to render it (post-confirmation only; nothing pre-confirmation).
 * @component EmergencyBanner
 */
const EmergencyBanner: FunctionComponent<EmergencyBannerProps> = ({ contactName, contactPhone, onOpenTicket }) => {
  const t = useTranslations('tickets');
  const phone = contactPhone?.trim() || null;
  const name = contactName?.trim() || null;

  return (
    <Paper
      elevation={0}
      data-testid="emergency-banner"
      sx={{
        p: 2,
        borderRadius: 2,
        border: '1px solid',
        borderColor: 'var(--bal-error)',
        borderInlineStart: '4px solid var(--bal-error)',
        bgcolor: 'var(--bal-bg-paper)',
      }}
    >
      <Stack direction="row" sx={{ gap: 1, alignItems: 'flex-start' }}>
        <AppIcon icon="emergency" size={22} color="var(--bal-error)" />
        <Stack sx={{ gap: 1, flexGrow: 1 }}>
          <Typography variant="subtitle2" sx={{ fontWeight: 800, color: 'var(--bal-error)' }}>
            {t('emergency_title')}
          </Typography>
          <Typography variant="body2" sx={{ color: 'var(--bal-text-secondary)' }}>
            {t('emergency_body')}
          </Typography>

          <Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap', alignItems: 'center', mt: 0.5 }}>
            {phone ? (
              <Button
                component="a"
                href={`tel:${phone}`}
                variant="contained"
                data-testid="emergency-call"
                startIcon={<AppIcon icon="emergency" size={18} color="var(--bal-error-contrast)" />}
                sx={{
                  bgcolor: 'var(--bal-error)',
                  color: 'var(--bal-error-contrast)',
                  fontWeight: 700,
                  '&:hover': { bgcolor: 'var(--bal-error)', filter: 'brightness(0.95)' },
                }}
              >
                {name ? t('emergency_call', { name }) : t('emergency_call_generic')}
              </Button>
            ) : null}
            <Button
              variant="text"
              onClick={onOpenTicket}
              startIcon={<AppIcon icon="support" size={18} color="var(--bal-primary)" />}
              sx={{ color: 'var(--bal-primary)', fontWeight: 700 }}
            >
              {t('emergency_open_ticket')}
            </Button>
          </Stack>
        </Stack>
      </Stack>
    </Paper>
  );
};

export default EmergencyBanner;
