'use client';
import { FunctionComponent } from 'react';
import { useLocale, useTranslations } from 'next-intl';
import { Box, Stack, Typography } from '@mui/material';
import { pickCatalogName } from '@/services/catalog/names';
import type { NurseServiceVariant } from '@/services/catalog/types';
import AppButton from '../common/AppButton';
import SurfaceCard from '../common/SurfaceCard';
import StatusChip from '../StatusChip';
import PriceDisplay from '../PriceDisplay';

export interface VariantCardProps {
  variant: NurseServiceVariant;
  /** Open the builder in edit mode for this variant. */
  onEdit: () => void;
  /** Deactivate (when active) or reactivate (when inactive) — soft only, never a delete. */
  onToggleActive: () => void;
}

/**
 * One nurse offering (variant) in the services list: its `display_name`, the category, the price via
 * the money util (`PriceDisplay`), and an active/deactivated distinction (dimmed + a neutral chip +
 * an "can't be booked" hint on inactive rows). Row actions are Edit and Deactivate/Reactivate — there
 * is **no delete affordance**. RTL-safe.
 * @component VariantCard
 */
const VariantCard: FunctionComponent<VariantCardProps> = ({ variant, onEdit, onToggleActive }) => {
  const t = useTranslations('services');
  const locale = useLocale();
  const active = variant.isActive;
  const categoryName = pickCatalogName(
    { nameFa: variant.categoryNameFa, nameEn: variant.categoryNameEn },
    locale,
  );

  return (
    <SurfaceCard
      padding="sm"
      data-active={active}
      sx={{
        // Deactivated rows read as muted/unbookable without hiding their content.
        opacity: active ? 1 : 0.66,
      }}
    >
      <Stack sx={{ gap: 1.5 }}>
        <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'flex-start', gap: 1 }}>
          <Box sx={{ minWidth: 0 }}>
            <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
              {variant.displayName}
            </Typography>
            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
              {categoryName}
            </Typography>
          </Box>
          <StatusChip
            status={active ? 'active' : 'neutral'}
            label={active ? t('active_chip') : t('inactive_chip')}
            sx={{ flexShrink: 0 }}
          />
        </Stack>

        <PriceDisplay
          price={variant.price}
          priceUnit={variant.priceUnit}
          sessionCount={variant.sessionCount}
          showEstimate
        />

        {!active ? (
          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
            {t('inactive_hint')}
          </Typography>
        ) : null}

        <Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
          <AppButton variant="outlined" color="primary" startIcon="edit" onClick={onEdit}>
            {t('edit')}
          </AppButton>
          <AppButton
            variant="text"
            color={active ? 'inherit' : 'primary'}
            startIcon={active ? 'visibilityoff' : 'visibilityon'}
            onClick={onToggleActive}
          >
            {active ? t('deactivate') : t('activate')}
          </AppButton>
        </Stack>
      </Stack>
    </SurfaceCard>
  );
};

export default VariantCard;
