import { FunctionComponent, ReactNode } from 'react';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import AppIcon from '../AppIcon';

export interface EmptyStateProps {
  /** AppIcon registry name — already-translated copy is the caller's job, the icon is decorative. */
  icon?: string;
  /** Already-translated title. */
  title: string;
  /** Already-translated body — a string for the common case, or a node for richer copy (e.g. a list of
   * suggestions). */
  body?: ReactNode;
  /** Optional call-to-action (e.g. an `AppButton`). */
  action?: ReactNode;
}

/**
 * The calm, branded "nothing here" panel — replaces the dashed-border `Paper` blocks hand-rolled across
 * the app. A flat card (phase-0 surface/radius tokens) with a soft-primary icon roundel, never alarming.
 * Presentational + caller-owned i18n; the illustration set (per-domain artwork) is DEFERRED to phase 12.
 * @component EmptyState
 */
const EmptyState: FunctionComponent<EmptyStateProps> = ({ icon = 'info', title, body, action }) => (
  <Paper
    elevation={0}
    data-empty-state
    sx={{
      p: { xs: 3, sm: 5 },
      textAlign: 'center',
      border: '1px solid',
      borderColor: 'divider',
      borderRadius: 'var(--bal-radius-md)',
      bgcolor: 'var(--bal-bg-paper)',
    }}
  >
    <Stack sx={{ alignItems: 'center', gap: 1.5 }}>
      <Stack
        sx={{
          width: 56,
          height: 56,
          borderRadius: '50%',
          alignItems: 'center',
          justifyContent: 'center',
          bgcolor: 'var(--bal-primary-soft)',
        }}
      >
        <AppIcon icon={icon} size={28} color="var(--bal-primary)" />
      </Stack>
      <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
        {title}
      </Typography>
      {body ? (
        typeof body === 'string' ? (
          <Typography variant="body2" sx={{ color: 'text.secondary', maxWidth: 360 }}>
            {body}
          </Typography>
        ) : (
          <Stack sx={{ color: 'text.secondary', maxWidth: 360 }}>{body}</Stack>
        )
      ) : null}
      {action ? <Stack sx={{ mt: 0.5 }}>{action}</Stack> : null}
    </Stack>
  </Paper>
);

export default EmptyState;
