'use client';
import { FunctionComponent, ReactNode } from 'react';
import { Box, Stack, Typography } from '@mui/material';
import AppIcon from '../AppIcon';
import SurfaceCard from '../SurfaceCard';

export interface FormSectionProps {
  /** Already-translated section heading — names one coherent group of fields. */
  title: string;
  /** Already-translated one-line explanation of *why* this group is being asked for. */
  description?: string;
  /** Registered `AppIcon` name for the leading glyph. */
  icon?: string;
  /**
   * Short status line rendered end-aligned in the header — a completion count, an "optional" marker,
   * whatever tells the reader where they stand without opening the group.
   */
  status?: ReactNode;
  /** Renders the group as explicitly skippable. */
  optional?: boolean;
  /** Already-translated «اختیاری» label; required when `optional` is set. */
  optionalLabel?: string;
  children: ReactNode;
}

/**
 * One labelled group of fields inside a form.
 *
 * The problem it solves: this app's longer forms (nurse profile, credentials, the variant builder)
 * were flat runs of ten-plus `TextField`s with nothing between them — no grouping, no explanation of
 * what any stretch of fields was *for*, and no sense of how much was left. Everything looked equally
 * important and equally mandatory, which is the worst possible shape for a form a nurse fills in once
 * under pressure to get listed.
 *
 * A section is a `SurfaceCard` with a heading, a one-line rationale, and an optional status/optional
 * marker. Grouping is the cheapest legibility win available: it turns "a wall of inputs" into "four
 * questions", makes optional groups visibly skippable, and gives errors somewhere to be attributed to.
 * Presentational — no state, caller-owned i18n.
 * @component FormSection
 */
const FormSection: FunctionComponent<FormSectionProps> = ({
  title,
  description,
  icon,
  status,
  optional = false,
  optionalLabel,
  children,
}) => (
  <SurfaceCard padding="md" data-form-section={title}>
    <Stack sx={{ gap: 2 }}>
      <Stack direction="row" sx={{ gap: 1.5, alignItems: 'flex-start' }}>
        {icon ? (
          <Box
            sx={{
              flexShrink: 0,
              width: 34,
              height: 34,
              display: 'grid',
              placeItems: 'center',
              borderRadius: 'var(--bal-radius-sm)',
              bgcolor: 'var(--bal-primary-soft)',
            }}
          >
            <AppIcon icon={icon} size={18} color="var(--bal-primary)" aria-hidden="true" />
          </Box>
        ) : null}

        <Stack sx={{ gap: 0.25, flexGrow: 1, minWidth: 0 }}>
          <Stack direction="row" sx={{ gap: 1, alignItems: 'baseline', justifyContent: 'space-between' }}>
            <Typography variant="subtitle1" component="h2" sx={{ fontWeight: 700 }}>
              {title}
            </Typography>
            {optional && optionalLabel ? (
              <Typography variant="caption" sx={{ color: 'text.secondary', flexShrink: 0 }}>
                {optionalLabel}
              </Typography>
            ) : (
              status
            )}
          </Stack>
          {description ? (
            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
              {description}
            </Typography>
          ) : null}
        </Stack>
      </Stack>

      <Stack sx={{ gap: 2 }}>{children}</Stack>
    </Stack>
  </SurfaceCard>
);

export default FormSection;
