'use client';
import { FunctionComponent } from 'react';
import { useLocale, useTranslations } from 'next-intl';
import { Stack, Typography } from '@mui/material';
import AppIcon from '@/components/common/AppIcon';
import { formatClock } from '../format';

/**
 * The advisory address-match result driving the banner variant:
 *  - `true`  → in range · «موقعیت تایید شد (EVV)» (success-tokened)
 *  - `false` → out of range, under review · «موقعیت خارج از محدوده (در حال بررسی)» (**warning**-tokened, NOT error)
 *  - `null`  → GPS unavailable/denied · «موقعیت ثبت نشد» (neutral/info-tokened)
 */
export type EvvMatchState = boolean | null;

export interface EvvStatusBannerProps {
  /** The server `checkInAt` — the banner clock renders from this, never a client clock. */
  checkInAtIso: string;
  /** Advisory match; a mismatch is a warning banner, **never a block**. */
  addressMatch: EvvMatchState;
}

type BannerTone = 'success' | 'warning' | 'info';

interface BannerStyle {
  tone: BannerTone;
  bg: string;
  fg: string;
  icon: string;
  messageKey: 'evv_banner_in_range' | 'evv_banner_out_of_range' | 'evv_banner_no_gps';
}

// Colors resolve from the semantic --bal-* tokens (both schemes), so the banner switches with the color
// scheme. Out-of-range uses the **warning** token (amber), never the error token — a mismatch is advisory.
function styleFor(match: EvvMatchState): BannerStyle {
  if (match === true) {
    return { tone: 'success', bg: 'var(--bal-success)', fg: 'var(--bal-success-contrast)', icon: 'verified', messageKey: 'evv_banner_in_range' };
  }
  if (match === false) {
    return { tone: 'warning', bg: 'var(--bal-warning)', fg: 'var(--bal-warning-contrast)', icon: 'warning', messageKey: 'evv_banner_out_of_range' };
  }
  return { tone: 'info', bg: 'var(--bal-info)', fg: 'var(--bal-info-contrast)', icon: 'gps', messageKey: 'evv_banner_no_gps' };
}

/**
 * The EVV check-in banner — «ورود ثبت شد {time} · موقعیت تایید شد (EVV)» in range, the advisory
 * out-of-range variant when the GPS mismatched, and a neutral variant when GPS was unavailable. A
 * tokenised status banner (never an error), shown wherever an open/closed check-in exists (the
 * booking-detail session card and the nurse day surface both use it). Presentational — time and match are
 * supplied by the caller from server truth.
 * @component EvvStatusBanner
 */
const EvvStatusBanner: FunctionComponent<EvvStatusBannerProps> = ({ checkInAtIso, addressMatch }) => {
  const t = useTranslations('booking');
  const locale = useLocale();
  const style = styleFor(addressMatch);
  const time = formatClock(checkInAtIso, locale);

  return (
    <Stack
      direction="row"
      data-evv-match={String(addressMatch)}
      data-evv-tone={style.tone}
      sx={{
        gap: 1,
        alignItems: 'center',
        px: 1.5,
        py: 1,
        borderRadius: 2,
        backgroundColor: style.bg,
        color: style.fg,
      }}
    >
      <AppIcon icon={style.icon} size={18} color={style.fg} />
      <Typography variant="body2" sx={{ fontWeight: 700, color: style.fg }}>
        {t(style.messageKey, { time })}
      </Typography>
    </Stack>
  );
};

export default EvvStatusBanner;
