'use client';
import { useLocale, useTranslations } from 'next-intl';
import { Box, Paper, Stack, Typography } from '@mui/material';
import { AppButton, AppIcon, AppLoading, StatusChip, StepperHeader } from '@/components';
import { ROUTES } from '@/constants';
import { useVerificationStatus } from '@/services/verification';
import { displaySteps, stepLabelKey, stepStatusChip } from '../verificationSteps';

/**
 * B6 — under review. A focused view of the **same cached `VerificationStatus`** B3 reads (one query, two
 * views — never a second fetch). Shows the waiting message + the 24–48h expectation + a condensed
 * mini-checklist (reusing the shared `StatusChip`) of what is passed vs in-review vs pending. "مشاهده
 * وضعیت" returns to the canonical B3 hub.
 */
export default function UnderReviewPage() {
  const t = useTranslations('verification');
  const locale = useLocale();
  const { data: status, isLoading } = useVerificationStatus();

  if (isLoading) return <AppLoading />;

  const steps = displaySteps(status);
  const isApproved = status?.status === 'approved';

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 560 }}>
      <Box sx={{ overflowX: 'auto' }}>
        <StepperHeader steps={[t('journey_identity'), t('journey_credentials'), t('journey_review')]} activeStep={2} />
      </Box>

      <Paper
        elevation={0}
        sx={{
          p: 3,
          borderRadius: 2,
          border: '1px solid',
          borderColor: 'divider',
          borderInlineStartWidth: 4,
          borderInlineStartColor: isApproved ? 'var(--bal-success)' : 'var(--bal-warning)',
          display: 'flex',
          flexDirection: 'column',
          gap: 1,
        }}
      >
        <Stack direction="row" sx={{ gap: 1.5, alignItems: 'center' }}>
          <AppIcon icon={isApproved ? 'verified' : 'pending'} size={28} color={isApproved ? 'var(--bal-success)' : 'var(--bal-warning)'} />
          <Typography variant="h6" component="h1">
            {isApproved ? t('review_approved_title') : t('review_title')}
          </Typography>
        </Stack>
        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
          {isApproved ? t('review_approved_body') : t('review_body')}
        </Typography>
        {!isApproved ? (
          <Typography variant="body2" sx={{ fontWeight: 500, color: 'var(--bal-warning)' }}>
            {t('review_eta')}
          </Typography>
        ) : null}
      </Paper>

      <Stack sx={{ gap: 1 }}>
        <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
          {t('review_summary_title')}
        </Typography>
        {steps.map((step) => {
          const chip = stepStatusChip(step.status);
          const label = t.has(stepLabelKey(step.code)) ? t(stepLabelKey(step.code)) : step.displayName;
          return (
            <Stack
              key={step.code}
              direction="row"
              sx={{ gap: 1, alignItems: 'center', justifyContent: 'space-between', py: 0.5 }}
            >
              <Typography variant="body2">{label}</Typography>
              <StatusChip status={chip.kind} label={t(chip.labelKey)} sx={{ flexShrink: 0 }} />
            </Stack>
          );
        })}
      </Stack>

      <AppButton
        color="primary"
        variant="contained"
        startIcon="verification"
        to={`/${locale}${ROUTES.NURSE_VERIFICATION}`}
        sx={{ alignSelf: 'flex-start' }}
      >
        {t('review_view_status')}
      </AppButton>
    </Box>
  );
}
