import { FunctionComponent } from 'react';
import { Avatar, Skeleton, Stack, Typography } from '@mui/material';
import TrustBadge from '../TrustBadge';
import type { BadgeState } from '@/services/verification/types';

export interface ProfileSummaryProps {
  /** Already-resolved display name (caller composes first/last name — i18n-free). */
  displayName: string;
  /** The server-masked phone (e.g. `0912*****33`) — rendered as a `dir="ltr"` island. */
  phone?: string;
  /** Already-translated role/fine-grained-role label (e.g. "پرستار", "مالی"). */
  roleLabel?: string;
  avatarUrl?: string | null;
  /** Renders a `TrustBadge` next to the name when set (nurse identity only). */
  trustState?: BadgeState;
  /** True while the identity is still resolving — renders skeleton placeholders instead of text. */
  loading?: boolean;
  /** Dense horizontal chip form for the admin/partner TopBar identity slot; default is the vertical card. */
  compact?: boolean;
}

/**
 * The one identity card for authenticated chrome — avatar, name, masked phone, role label, and an
 * optional `TrustBadge`. Replaces the starter `UserInfo` (`user?: any`, eternal "Current User").
 * Presentational: the caller (each shell) sources data from `useMe`/the profiles domain and passes
 * it down, so this component never fetches on its own.
 * @component ProfileSummary
 */
const ProfileSummary: FunctionComponent<ProfileSummaryProps> = ({
  displayName,
  phone,
  roleLabel,
  avatarUrl,
  trustState,
  loading = false,
  compact = false,
}) => {
  const avatarSize = compact ? 32 : 56;

  if (loading) {
    return (
      <Stack direction={compact ? 'row' : 'column'} sx={{ alignItems: 'center', gap: 1.5, width: '100%' }}>
        <Skeleton variant="circular" width={avatarSize} height={avatarSize} />
        <Stack sx={{ alignItems: compact ? 'flex-start' : 'center', gap: 0.5, minWidth: 0 }}>
          <Skeleton variant="text" width={compact ? 80 : 120} />
          {!compact && <Skeleton variant="text" width={90} />}
        </Stack>
      </Stack>
    );
  }

  const avatar = <Avatar src={avatarUrl ?? undefined} alt={displayName} sx={{ width: avatarSize, height: avatarSize }} />;

  if (compact) {
    return (
      <Stack direction="row" sx={{ alignItems: 'center', gap: 1, minWidth: 0 }}>
        {avatar}
        <Stack sx={{ minWidth: 0 }}>
          <Typography variant="subtitle2" noWrap sx={{ fontWeight: 700, lineHeight: 1.2 }}>
            {displayName}
          </Typography>
          {roleLabel && (
            <Typography variant="caption" noWrap sx={{ color: 'text.secondary', lineHeight: 1.2 }}>
              {roleLabel}
            </Typography>
          )}
        </Stack>
      </Stack>
    );
  }

  return (
    <Stack sx={{ alignItems: 'center', gap: 1, width: '100%', textAlign: 'center' }}>
      {avatar}
      <Stack direction="row" sx={{ alignItems: 'center', gap: 0.75, flexWrap: 'wrap', justifyContent: 'center' }}>
        <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
          {displayName}
        </Typography>
        {trustState && <TrustBadge state={trustState} />}
      </Stack>
      {phone && (
        <Typography variant="body2" dir="ltr" sx={{ color: 'text.secondary' }}>
          {phone}
        </Typography>
      )}
      {roleLabel && (
        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
          {roleLabel}
        </Typography>
      )}
    </Stack>
  );
};

export default ProfileSummary;
