'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';
import { InitialsAvatar } from '@/components/common';

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 direction="row" sx={{ gap: 1.25, minWidth: 0 }}>
      <InitialsAvatar name={displayName} />
      <Stack sx={{ gap: 0.75, minWidth: 0, flexGrow: 1 }}>
        <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>
    </Stack>
  );
};

export default PatientHeader;