baya-monorepo/client/src/app/[locale]/(private-routes)/(customer)/addresses/page.tsx

'use client';
import { useState } from 'react';
import { useLocale, useTranslations } from 'next-intl';
import { useSnackbar } from 'notistack';
import {
  Box,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Paper,
  Skeleton,
  Stack,
  Typography,
} from '@mui/material';
import { AppButton, AppIcon } from '@/components';
import { AddressCard, AddressForm } from '@/components/geography';
import {
  useAddresses,
  useCreateAddress,
  useUpdateAddress,
  useDeleteAddress,
  useSetPrimaryAddress,
} from '@/services/addresses';
import type { CreateAddressInput, CustomerAddress } from '@/services/addresses/types';

/**
 * The customer address book — a cached, invalidate-on-mutation list of the customer's saved
 * addresses with add/edit (the cascading dropdowns + map pin in a dialog), soft-delete (confirm),
 * and set-primary (exactly one badge). Loading skeleton + empty state both handled. The chosen
 * address later feeds the f7 booking request.
 */
export default function AddressesPage() {
  const t = useTranslations('address');
  const tc = useTranslations('common');
  const locale = useLocale();
  const { enqueueSnackbar } = useSnackbar();

  const { data, isLoading } = useAddresses();
  const createAddress = useCreateAddress();
  const updateAddress = useUpdateAddress();
  const deleteAddress = useDeleteAddress();
  const setPrimary = useSetPrimaryAddress();

  const [formOpen, setFormOpen] = useState(false);
  const [editing, setEditing] = useState<CustomerAddress | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<CustomerAddress | null>(null);

  const openAdd = () => {
    setEditing(null);
    setFormOpen(true);
  };
  const openEdit = (address: CustomerAddress) => {
    setEditing(address);
    setFormOpen(true);
  };
  const closeForm = () => setFormOpen(false);

  // Address district is optional granularity: show "city · district" when set, else just the city.
  const regionLabel = (address: CustomerAddress) => {
    const city = locale === 'en' ? address.cityNameEn : address.cityNameFa;
    if (address.districtId == null) return city;
    const district = locale === 'en' ? address.districtNameEn : address.districtNameFa;
    return `${city} · ${district}`;
  };

  const handleSubmit = (input: CreateAddressInput) => {
    const onSuccess = () => {
      closeForm();
      enqueueSnackbar(t('saved'), { variant: 'success' });
    };
    const onError = () => enqueueSnackbar(t('save_error'), { variant: 'error' });
    if (editing) {
      updateAddress.mutate({ id: editing.id, input }, { onSuccess, onError });
    } else {
      createAddress.mutate(input, { onSuccess, onError });
    }
  };

  const confirmDelete = () => {
    if (!deleteTarget) return;
    const id = deleteTarget.id;
    setDeleteTarget(null);
    deleteAddress.mutate(id, {
      onSuccess: () => enqueueSnackbar(t('deleted'), { variant: 'success' }),
      onError: () => enqueueSnackbar(t('unavailable'), { variant: 'error' }),
    });
  };

  const addresses = data?.items ?? [];
  const isEmpty = !isLoading && addresses.length === 0;

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
      <Stack direction="row" sx={{ alignItems: 'flex-start', justifyContent: 'space-between', gap: 2 }}>
        <Box>
          <Typography variant="h5" component="h1">
            {t('title')}
          </Typography>
          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
            {t('subtitle')}
          </Typography>
        </Box>
        {!isEmpty ? (
          <AppButton color="primary" variant="contained" startIcon="add" onClick={openAdd} sx={{ m: 0, flexShrink: 0 }}>
            {t('add')}
          </AppButton>
        ) : null}
      </Stack>

      {isLoading ? (
        <Stack sx={{ gap: 1.5 }}>
          {[0, 1].map((key) => (
            <Skeleton key={key} variant="rounded" height={104} />
          ))}
        </Stack>
      ) : isEmpty ? (
        <Paper
          elevation={0}
          sx={{
            p: 4,
            textAlign: 'center',
            border: '1px dashed',
            borderColor: 'divider',
            borderRadius: 2,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            gap: 1.5,
          }}
        >
          <AppIcon icon="location" size={40} color="var(--bal-primary)" />
          <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
            {t('empty_title')}
          </Typography>
          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
            {t('empty_body')}
          </Typography>
          <AppButton color="primary" variant="contained" startIcon="add" onClick={openAdd} sx={{ mt: 1 }}>
            {t('add')}
          </AppButton>
        </Paper>
      ) : (
        <Stack sx={{ gap: 1.5 }}>
          {addresses.map((address) => (
            <AddressCard
              key={address.id}
              title={address.title}
              regionLabel={regionLabel(address)}
              addressLine={address.addressLine}
              isPrimary={address.isPrimary}
              primaryLabel={t('primary')}
              onEdit={() => openEdit(address)}
              onDelete={() => setDeleteTarget(address)}
              onSetPrimary={() =>
                setPrimary.mutate(address.id, {
                  onSuccess: () => enqueueSnackbar(t('primary_set'), { variant: 'success' }),
                  onError: () => enqueueSnackbar(t('unavailable'), { variant: 'error' }),
                })
              }
              settingPrimary={setPrimary.isPending}
              editLabel={t('edit')}
              deleteLabel={t('delete')}
              setPrimaryLabel={t('set_primary')}
            />
          ))}
        </Stack>
      )}

      <Dialog open={formOpen} onClose={closeForm} fullWidth maxWidth="sm">
        <DialogTitle>{editing ? t('edit_title') : t('add_title')}</DialogTitle>
        <DialogContent>
          <Box sx={{ pt: 1 }}>
            <AddressForm
              key={editing?.id ?? 'new'}
              initial={
                editing
                  ? {
                      title: editing.title,
                      provinceId: editing.provinceId,
                      cityId: editing.cityId,
                      districtId: editing.districtId,
                      addressLine: editing.addressLine,
                      latitude: editing.latitude,
                      longitude: editing.longitude,
                      isPrimary: editing.isPrimary,
                    }
                  : undefined
              }
              submitting={createAddress.isPending || updateAddress.isPending}
              onSubmit={handleSubmit}
              onCancel={closeForm}
            />
          </Box>
        </DialogContent>
      </Dialog>

      <Dialog open={Boolean(deleteTarget)} onClose={() => setDeleteTarget(null)}>
        <DialogTitle>{t('delete_title')}</DialogTitle>
        <DialogContent>
          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
            {t('delete_body')}
          </Typography>
        </DialogContent>
        <DialogActions>
          <AppButton variant="text" onClick={() => setDeleteTarget(null)}>
            {tc('cancel')}
          </AppButton>
          <AppButton color="error" variant="contained" onClick={confirmDelete}>
            {t('delete_confirm')}
          </AppButton>
        </DialogActions>
      </Dialog>
    </Box>
  );
}