'use client';
import { FunctionComponent } from 'react';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { AppButton, AppIconButton } from '@/components/common';
import StatusChip from '@/components/StatusChip';

export interface AddressCardProps {
  title: string;
  /** Localised "city · district" (or "city · whole city") label, computed by the caller. */
  regionLabel: string;
  addressLine?: string | null;
  isPrimary: boolean;
  primaryLabel: string;
  onEdit: () => void;
  onDelete: () => void;
  onSetPrimary: () => void;
  editLabel: string;
  deleteLabel: string;
  setPrimaryLabel: string;
  /** Disables the set-primary action while its mutation is in flight. */
  settingPrimary?: boolean;
}

/**
 * Address summary card for the address book — title + a primary badge (the f0 `StatusChip`),
 * the region label and street line, with edit / delete / set-as-primary actions. Presentational:
 * all display text is translated by the caller. The set-primary action shows only on non-primary
 * cards so the UI never presents two primaries.
 * @component AddressCard
 */
const AddressCard: FunctionComponent<AddressCardProps> = ({
  title,
  regionLabel,
  addressLine,
  isPrimary,
  primaryLabel,
  onEdit,
  onDelete,
  onSetPrimary,
  editLabel,
  deleteLabel,
  setPrimaryLabel,
  settingPrimary = false,
}) => (
  <Paper elevation={0} sx={{ p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
    <Stack direction="row" sx={{ alignItems: 'flex-start', gap: 1 }}>
      <Stack sx={{ flexGrow: 1, gap: 0.75, minWidth: 0 }}>
        <Stack direction="row" sx={{ alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
          <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
            {title}
          </Typography>
          {isPrimary ? <StatusChip status="verified" label={primaryLabel} /> : null}
        </Stack>

        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
          {regionLabel}
        </Typography>

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

        {!isPrimary ? (
          <AppButton
            variant="text"
            color="primary"
            disabled={settingPrimary}
            onClick={onSetPrimary}
            sx={{ mt: 0.25, alignSelf: 'flex-start' }}
          >
            {setPrimaryLabel}
          </AppButton>
        ) : null}
      </Stack>

      <Stack direction="row" sx={{ flexShrink: 0 }}>
        <AppIconButton icon="edit" title={editLabel} aria-label={editLabel} size="small" onClick={onEdit} />
        <AppIconButton icon="delete" title={deleteLabel} aria-label={deleteLabel} size="small" onClick={onDelete} />
      </Stack>
    </Stack>
  </Paper>
);

export default AddressCard;
