'use client';
import { FunctionComponent, ReactNode } from 'react';
import { useTranslations } from 'next-intl';
import { Divider, Paper, Stack, Typography } from '@mui/material';
import AppIcon from '@/components/common/AppIcon';
import type { CareInstructionsDto } from '@/services/bookings/types';

export interface CareInstructionsCardProps {
  /** The decrypted stage-2 record — supplied only by the gated read (assigned nurse / admin, confirmed+). */
  data: CareInstructionsDto;
}

/**
 * The decrypted care-instructions card — conditions / medications / allergies / special instructions /
 * emergency contact. This is the **read side** of the two-stage clinical disclosure: it is only ever
 * mounted by the booking-detail view once the viewer is confirmed to be the assigned nurse (or admin) on
 * a `confirmed`+ booking. The card itself is presentational; the gate (and the "never even fetch" rule)
 * lives in the view + `useCareInstructions`.
 * @component CareInstructionsCard
 */
const CareInstructionsCard: FunctionComponent<CareInstructionsCardProps> = ({ data }) => {
  const t = useTranslations('booking');

  const emergency =
    data.emergencyContactName || data.emergencyContactPhone
      ? [data.emergencyContactName, data.emergencyContactPhone].filter(Boolean).join(' · ')
      : null;

  const isEmpty =
    !data.currentConditions &&
    !data.medications &&
    !data.allergies &&
    !data.specialInstructions &&
    !emergency;

  return (
    <Paper
      elevation={0}
      sx={{
        p: 2.5,
        border: '1px solid',
        borderColor: 'divider',
        borderRadius: 2,
        borderInlineStartWidth: 4,
        borderInlineStartColor: 'var(--bal-primary)',
      }}
    >
      <Stack sx={{ gap: 0.5, mb: 1.5 }}>
        <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
          <AppIcon icon="clinical" size={20} color="var(--bal-primary)" />
          <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
            {t('care_title')}
          </Typography>
        </Stack>
        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
          {t('care_subtitle')}
        </Typography>
      </Stack>

      {isEmpty ? (
        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
          {t('care_empty')}
        </Typography>
      ) : (
        <Stack divider={<Divider />} sx={{ gap: 1.5 }}>
          <CareRow icon="clinical" label={t('care_conditions')} value={data.currentConditions} noneLabel={t('care_none')} />
          <CareRow icon="medication" label={t('care_medications')} value={data.medications} noneLabel={t('care_none')} />
          <CareRow icon="warning" label={t('care_allergies')} value={data.allergies} noneLabel={t('care_none')} />
          <CareRow icon="info" label={t('care_instructions_label')} value={data.specialInstructions} noneLabel={t('care_none')} />
          <CareRow icon="emergency" label={t('care_emergency')} value={emergency} noneLabel={t('care_none')} ltrValue />
        </Stack>
      )}
    </Paper>
  );
};

function CareRow({
  icon,
  label,
  value,
  noneLabel,
  ltrValue = false,
}: {
  icon: string;
  label: string;
  value: string | null;
  noneLabel: string;
  ltrValue?: boolean;
}): ReactNode {
  return (
    <Stack direction="row" sx={{ gap: 1.25, alignItems: 'flex-start' }}>
      <AppIcon icon={icon} size={18} color="var(--bal-text-secondary)" />
      <Stack sx={{ gap: 0.25, minWidth: 0 }}>
        <Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 700 }}>
          {label}
        </Typography>
        <Typography
          variant="body2"
          {...(ltrValue && value ? { dir: 'ltr' as const } : {})}
          sx={{ color: value ? 'text.primary' : 'text.secondary', whiteSpace: 'pre-line' }}
        >
          {value || noneLabel}
        </Typography>
      </Stack>
    </Stack>
  );
}

export default CareInstructionsCard;
