'use client';
import { FunctionComponent } from 'react';
import { useTranslations } from 'next-intl';
import { useSnackbar } from 'notistack';
import { Skeleton, Stack, Typography } from '@mui/material';
import { AccentCard, AppButton, AppIcon } from '@/components';
import { useActivationChecklist } from '@/components/ActivationChecklist';
import { useSetAcceptingBookings } from '@/services/profiles';

/**
 * The go-live gate for the nurse's services — **the real switch**, not a snackbar. Reads the same
 * `useActivationChecklist` state `ActivationChecklist` renders (one source of truth, no duplicated
 * search-visibility logic): unmet conditions render guidance naming exactly what's missing; met but
 * paused renders the real `set_accepting_bookings` CTA; live renders the on state + a pause action.
 * Success copy fires only after the mutation actually succeeds — this replaces the old
 * `enqueueSnackbar('published')` no-op.
 */
const PublishGate: FunctionComponent = () => {
  const t = useTranslations('verification');
  const tActivation = useTranslations('activation');
  const { enqueueSnackbar } = useSnackbar();
  const state = useActivationChecklist();
  const setAccepting = useSetAcceptingBookings();

  if (state.isLoading) return <Skeleton variant="rounded" height={96} sx={{ borderRadius: 'var(--bal-radius-md)' }} />;
  if (state.isError) return null; // ActivationChecklist (mounted alongside) already surfaces the error + retry.

  const toggle = (accepting: boolean) => {
    setAccepting.mutate(accepting, {
      onSuccess: () =>
        enqueueSnackbar(accepting ? t('publish_accepting_success') : t('publish_paused_success'), {
          variant: 'success',
        }),
      onError: () => enqueueSnackbar(t('publish_toggle_error'), { variant: 'error' }),
    });
  };

  const live = state.isSearchVisible && state.isAcceptingBookings;

  return (
    <AccentCard tone={live ? 'success' : state.isSearchVisible ? 'primary' : 'warning'} padding="md">
      <Stack sx={{ gap: 1 }}>
        <Stack direction="row" sx={{ gap: 1.5, alignItems: 'flex-start' }}>
          <AppIcon
            icon={live ? 'verified' : state.isSearchVisible ? 'publish' : 'warning'}
            size={24}
            color={live ? 'var(--bal-success)' : state.isSearchVisible ? 'var(--bal-primary)' : 'var(--bal-warning)'}
          />
          <Stack sx={{ gap: 0.5, flexGrow: 1 }}>
            <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
              {live
                ? t('publish_live_title')
                : state.isSearchVisible
                  ? t('publish_ready_title')
                  : t('publish_blocked_title')}
            </Typography>
            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
              {live
                ? t('publish_live_body')
                : state.isSearchVisible
                  ? t('publish_ready_body')
                  : t('publish_unmet_intro', {
                      items: state.searchRows
                        .filter((row) => !row.passed)
                        .map((row) => tActivation(row.labelKey))
                        .join('، '),
                    })}
            </Typography>
          </Stack>
        </Stack>

        <Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
          {live ? (
            <AppButton
              color="inherit"
              variant="outlined"
              startIcon="pending"
              onClick={() => toggle(false)}
              disabled={setAccepting.isPending}
            >
              {setAccepting.isPending ? t('publish_toggling') : t('publish_pause_accepting')}
            </AppButton>
          ) : state.isSearchVisible ? (
            <AppButton
              color="primary"
              variant="contained"
              startIcon="publish"
              onClick={() => toggle(true)}
              disabled={setAccepting.isPending}
            >
              {setAccepting.isPending ? t('publish_toggling') : t('publish_start_accepting')}
            </AppButton>
          ) : null}
        </Stack>
      </Stack>
    </AccentCard>
  );
};

export default PublishGate;