'use client';
import { FunctionComponent } from 'react';
import { useLocale, useTranslations } from 'next-intl';
import Divider from '@mui/material/Divider';
import Skeleton from '@mui/material/Skeleton';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import AccentCard from '../common/AccentCard';
import AppButton from '../common/AppButton';
import AppIcon from '../common/AppIcon';
import ErrorState from '../common/ErrorState';
import StatusChip from '../StatusChip';
import { useActivationChecklist, type ActivationRow } from './useActivationChecklist';

/**
 * The unified "راه‌اندازی" tracker — replaces the four scattered go-live nags (the profile
 * blocked-until-verified banner, `PublishGate`, the coverage empty warning, the bank empty state)
 * with one tracker composing five already-cached queries. **Two-tier honesty**: the first four rows
 * are exactly the server's `is_searchable` gate; the bank row is labelled separately as "getting
 * paid" — it is never part of search visibility. Collapses to a compact "فعال در جستجو" confirmation
 * once every row passes and the nurse is actively accepting bookings. Mounted on `/nurse/services`
 * (above the offerings list) and in the dashboard's `DashboardActivationSlot` — one shared component,
 * never forked.
 * @component ActivationChecklist
 */
const ActivationChecklist: FunctionComponent = () => {
  const t = useTranslations('activation');
  const state = useActivationChecklist();

  if (state.isLoading) return <Skeleton variant="rounded" height={220} sx={{ borderRadius: 2 }} />;
  if (state.isError) {
    return <ErrorState message={t('load_error')} retryLabel={t('retry')} onRetry={state.retry} />;
  }

  if (state.isFullyLive) {
    return (
      <AccentCard tone="success" padding="sm" data-activation-state="live">
        <Stack direction="row" sx={{ gap: 1.5, alignItems: 'center' }}>
          <AppIcon icon="verified" size={22} color="var(--bal-success)" />
          <Stack sx={{ gap: 0.25 }}>
            <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
              {t('live_title')}
            </Typography>
            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
              {t('live_body')}
            </Typography>
          </Stack>
        </Stack>
      </AccentCard>
    );
  }

  return (
    <AccentCard tone="primary" padding="md" data-activation-state="incomplete">
      <Stack sx={{ gap: 1.5 }}>
        <Stack sx={{ gap: 0.25 }}>
          <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
            {t('title')}
          </Typography>
          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
            {t('subtitle_visibility')}
          </Typography>
        </Stack>

        <Stack sx={{ gap: 1 }}>
          {state.searchRows.map((row) => (
            <ActivationRowItem key={row.key} row={row} />
          ))}
        </Stack>

        <Divider />

        <Stack sx={{ gap: 0.5 }}>
          <ActivationRowItem row={state.bankRow} />
          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
            {t('row_bank_hint')}
          </Typography>
        </Stack>
      </Stack>
    </AccentCard>
  );
};

const ActivationRowItem: FunctionComponent<{ row: ActivationRow }> = ({ row }) => {
  const t = useTranslations('activation');
  const locale = useLocale();
  return (
    <Stack
      direction="row"
      sx={{ gap: 1, alignItems: 'center', justifyContent: 'space-between' }}
      data-activation-row={row.key}
      data-passed={row.passed}
    >
      <StatusChip status={row.passed ? 'verified' : 'pending'} label={t(row.labelKey)} />
      {!row.passed ? (
        <AppButton variant="text" color="primary" size="small" endIcon="forward" to={`/${locale}${row.href}`}>
          {t('row_fix')}
        </AppButton>
      ) : null}
    </Stack>
  );
};

export default ActivationChecklist;
