'use client';
import { FunctionComponent } from 'react';
import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';

export interface PatientHeaderProps {
  /** The patient's display name. */
  displayName: string;
  /** Translated relation label; omitted when the patient has no relation set. */
  relationLabel?: string;
  /** Translated gender label. */
  genderLabel: string;
  /** Translated age label (e.g. "70 yrs"); omitted when the birth date is unknown. */
  ageLabel?: string;
  /** Translated condition labels; empty renders the "no conditions" line. */
  conditionLabels: string[];
  noConditionsLabel: string;
}

/**
 * The patient identity block — bold name + relation chip, a secondary "age · gender" meta line, and outlined
 * condition chips (or a "no conditions" caption). Extracted from `PatientCard` so the E1 list card and the E2
 * record viewer render the exact same header. Purely presentational; the caller translates every label and
 * tolerates a missing relation / empty conditions (both are client-augmented, may be empty on a real read).
 * @component PatientHeader
 */
const PatientHeader: FunctionComponent<PatientHeaderProps> = ({
  displayName,
  relationLabel,
  genderLabel,
  ageLabel,
  conditionLabels,
  noConditionsLabel,
}) => {
  const meta = [ageLabel, genderLabel].filter(Boolean).join(' · ');

  return (
    <Stack sx={{ gap: 0.75, minWidth: 0 }}>
      <Stack direction="row" sx={{ alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
        <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
          {displayName}
        </Typography>
        {relationLabel ? (
          <Chip size="small" label={relationLabel} sx={{ bgcolor: 'var(--bal-primary-soft)', fontWeight: 500 }} />
        ) : null}
      </Stack>

      {meta ? (
        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
          {meta}
        </Typography>
      ) : null}

      {conditionLabels.length > 0 ? (
        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mt: 0.25 }}>
          {conditionLabels.map((label) => (
            <Chip key={label} size="small" variant="outlined" label={label} />
          ))}
        </Box>
      ) : (
        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
          {noConditionsLabel}
        </Typography>
      )}
    </Stack>
  );
};

export default PatientHeader;
