'use client';
import { useLocale, useTranslations } from 'next-intl';
import { Box, Stack, Typography } from '@mui/material';
import { AppButton, AppIcon, AppLoading, StatusChip, StatusTimeline, SurfaceCard } from '@/components';
import type { TimelineNode } from '@/components';
import { CONTENT_MAX_WIDTH } from '@/components/config';
import { ROUTES } from '@/constants';
import { formatShamsiDate } from '@/utils';
import { useVerificationStatus } from '@/services/verification';
import { displaySteps, stepLabelKey, stepStatusChip } from '../verificationSteps';
import VerificationJourneyHeader from '../VerificationJourneyHeader';

/**
 * B6 — under review. A focused view of the **same cached `VerificationStatus`** B3 reads (one query,
 * two views — never a second fetch). ui-phase-8: the same journey header as B4/B5, a Shamsi submitted
 * timestamp when the server serves one (REQ-055, mock-tolerant — omitted rather than faked), a
 * what-happens-next `StatusTimeline` (بررسی توسط کارشناس → نتیجه در ۲۴–۴۸ ساعت → فعال‌سازی نشان), and
 * the condensed mini-checklist of what is passed vs in-review vs pending.
 */
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';

  const timelineNodes: TimelineNode[] = [
    {
      key: 'submitted',
      label: t('review_timeline_submitted'),
      timestamp: status?.submittedAt ? formatShamsiDate(status.submittedAt, locale) : undefined,
      state: 'completed',
    },
    {
      key: 'review',
      label: t('review_timeline_review'),
      note: isApproved ? undefined : t('review_eta'),
      state: isApproved ? 'completed' : 'current',
    },
    {
      key: 'activation',
      label: t('review_timeline_activation'),
      state: isApproved ? 'completed' : 'pending',
    },
  ];

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: CONTENT_MAX_WIDTH, mx: 'auto', width: '100%' }}>
      <VerificationJourneyHeader group="review" />

      <SurfaceCard
        padding="md"
        sx={{
          borderInlineStart: '4px solid',
          borderInlineStartColor: isApproved ? 'var(--bal-success)' : 'var(--bal-warning)',
        }}
      >
        <Stack sx={{ 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="h2">
              {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>
        </Stack>
      </SurfaceCard>

      <SurfaceCard padding="md">
        <StatusTimeline nodes={timelineNodes} />
      </SurfaceCard>

      <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>
  );
}
