import { useRef, useState } from 'react';
import {
  Alert,
  Badge,
  Box,
  Button,
  Card,
  Divider,
  FileButton,
  Group,
  Paper,
  SimpleGrid,
  Stack,
  Text,
  TextInput,
  Title,
  rem,
} from '@mantine/core';
import {
  IconAlertTriangle,
  IconArrowLeft,
  IconArrowRight,
  IconBook2,
  IconCheck,
  IconCircleCheck,
  IconCreditCard,
  IconHeart,
  IconId,
  IconInfoCircle,
  IconShieldCheck,
  IconTrash,
  IconUpload,
} from '@tabler/icons-react';
import { useNavigate } from 'react-router-dom';
import { notify } from '@ema-platform/ui';

// ---------------------------------------------------------------------------
// Steps
// ---------------------------------------------------------------------------
const STEPS = [
  { label: 'Relevant Certificate' },
  { label: 'Medical Certificate' },
  { label: 'Payment' },
  { label: 'Review & Submit' },
];


// ---------------------------------------------------------------------------
// Fee table — Seaman Book + BTC shown separately, paid together
// ---------------------------------------------------------------------------
const FEES = [
  { label: 'Seaman Book — Application Fee',          amount: 500 },
  { label: 'Seaman Book — Document Verification Fee',amount: 200 },
  { label: 'Basic Training Certificate (BTC) — Application Fee', amount: 300 },
  { label: 'BTC — Document Verification Fee',        amount: 100 },
  { label: 'BSID — Application Fee',                amount: 100 },
  { label: 'BSID — Card Production Fee',            amount: 150 },
];
const TOTAL = FEES.reduce((s, f) => s + f.amount, 0);

// ---------------------------------------------------------------------------
// Step indicator
// ---------------------------------------------------------------------------
function StepIndicator({ active, completed }: { active: number; completed: number[] }) {
  return (
    <Box mb={32}>
      <Group gap={0} align="center" wrap="nowrap">
        {STEPS.map((step, i) => {
          const isDone = completed.includes(i);
          const isCurrent = active === i;
          return (
            <Group key={i} gap={0} align="center" style={{ flex: i < STEPS.length - 1 ? 1 : 'none' }}>
              <Stack gap={4} align="center" style={{ minWidth: rem(40) }}>
                <Box style={{
                  width: rem(40), height: rem(40), borderRadius: '50%',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  backgroundColor: isDone ? 'var(--mantine-color-blue-8)' : isCurrent ? 'var(--mantine-color-blue-7)' : 'var(--mantine-color-gray-1)',
                  border: isCurrent ? '2.5px solid var(--mantine-color-blue-5)' : '2px solid transparent',
                  boxShadow: isCurrent || isDone ? '0 2px 8px rgba(34,139,230,0.2)' : 'none',
                  flexShrink: 0, transition: 'all 0.2s ease',
                }}>
                  {isDone ? <IconCheck size={18} color="white" stroke={2.5} /> : (
                    <Text fw={700} fz="sm" c={isCurrent ? 'white' : 'gray.5'}>{i + 1}</Text>
                  )}
                </Box>
                <Text fz="xs" fw={isCurrent ? 700 : 400} c={isCurrent ? 'blue.7' : 'dimmed'} style={{ whiteSpace: 'nowrap' }}>
                  {isDone ? `${step.label} ✓` : step.label}
                </Text>
              </Stack>
              {i < STEPS.length - 1 && (
                <Box style={{
                  flex: 1, height: rem(2),
                  backgroundColor: isDone ? 'var(--mantine-color-blue-8)' : 'var(--mantine-color-gray-2)',
                  marginBottom: rem(22),
                }} />
              )}
            </Group>
          );
        })}
      </Group>
    </Box>
  );
}

function SectionHead({ title }: { title: string }) {
  return (
    <>
      <Divider mt="md" mb="xs" />
      <Text fw={600} fz="sm" tt="uppercase" c="gray.6">{title}</Text>
    </>
  );
}

function ReviewRow({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <Text fz="xs" c="dimmed" tt="uppercase" fw={600} lh={1.2}>{label}</Text>
      <Text fz="sm" mt={2}>{value || '—'}</Text>
    </div>
  );
}


// ---------------------------------------------------------------------------
// Main page
// ---------------------------------------------------------------------------
export function SeamanBookApplicationPage() {
  const navigate = useNavigate();
  const [active, setActive] = useState(0);
  const [completed, setCompleted] = useState<number[]>([]);
  const [submitting, setSubmitting] = useState(false);

  // Relevant Certificate
  const [relCertNumber, setRelCertNumber] = useState('');
  const [relIssuer, setRelIssuer] = useState('');
  const [relIssueDate, setRelIssueDate] = useState('');
  const [relExpiryDate, setRelExpiryDate] = useState('');
  const [relFile, setRelFile] = useState<File | null>(null);
  const relResetRef = useRef<() => void>(null);

  // Medical
  const [medCertNumber, setMedCertNumber] = useState('');
  const [medIssuer, setMedIssuer] = useState('');
  const [medIssueDate, setMedIssueDate] = useState('');
  const [medExpiryDate, setMedExpiryDate] = useState('');
  const [medFile, setMedFile] = useState<File | null>(null);
  const medResetRef = useRef<() => void>(null);

  // Payment
  const [paymentMethod, setPaymentMethod] = useState<'cbe' | 'telebirr' | null>(null);
  const [paymentRef, setPaymentRef] = useState('');
  const [paymentDate, setPaymentDate] = useState('');
  const [paymentFile, setPaymentFile] = useState<File | null>(null);
  const payResetRef = useRef<() => void>(null);

  // Validation
  const relComplete = !!relFile && !!relCertNumber.trim() && !!relIssuer.trim() && !!relIssueDate && !!relExpiryDate;
  const medComplete = !!medFile && !!medCertNumber.trim() && !!medIssuer.trim() && !!medIssueDate && !!medExpiryDate;
  const payComplete = !!paymentMethod && !!paymentRef.trim() && !!paymentDate;

  const canNext = () => {
    if (active === 0) return relComplete;
    if (active === 1) return medComplete;
    if (active === 2) return payComplete;
    return true;
  };

  const next = () => {
    setCompleted((prev) => prev.includes(active) ? prev : [...prev, active]);
    setActive((c) => c + 1);
  };
  const prev = () => setActive((c) => c - 1);

  const handleSubmit = async () => {
    setSubmitting(true);
    try {
      await new Promise((r) => setTimeout(r, 1400));
      notify.success('Application submitted! Reference: SB-BTC-2025-001');
      navigate('/seaman-book');
    } catch {
      notify.error('Submission failed. Please try again.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Stack gap="md">
      <div>
        <Title order={3}>Seaman Book, BTC & BSID Application</Title>
        <Text fz="sm" c="dimmed">
          One application covers your Seaman Book, Basic Training Certificate (BTC), and BSID — Step {active + 1} of {STEPS.length}
        </Text>
      </div>

      {/* What you will receive banner */}
      <Paper withBorder radius="md" p="md" bg="blue.0" style={{ borderColor: 'var(--mantine-color-blue-2)' }}>
        <Group gap="lg" wrap="wrap">
          <Group gap="xs">
            <IconBook2 size={18} color="var(--mantine-color-blue-6)" stroke={1.5} />
            <Text fz="sm" fw={600} c="blue.8">Seaman Book</Text>
          </Group>
          <Text fz="sm" c="dimmed">+</Text>
          <Group gap="xs">
            <IconShieldCheck size={18} color="var(--mantine-color-teal-6)" stroke={1.5} />
            <Text fz="sm" fw={600} c="teal.8">Basic Training Certificate (BTC)</Text>
          </Group>
          <Text fz="sm" c="dimmed">+</Text>
          <Group gap="xs">
            <IconId size={18} color="var(--mantine-color-violet-6)" stroke={1.5} />
            <Text fz="sm" fw={600} c="violet.8">BSID (Biometric Seafarer ID)</Text>
          </Group>
        </Group>
      </Paper>

      <StepIndicator active={active} completed={completed} />

      <Paper withBorder radius="lg" p="xl">
        <Group justify="space-between" mb="lg">
          <Text fw={700} fz="lg">{STEPS[active]?.label}</Text>
          <Badge variant="light" color="blue" radius="md">Step {active + 1} of {STEPS.length}</Badge>
        </Group>

        {/* ── Step 1: Relevant Certificate ────────────────────────────── */}
        {active === 0 && (
          <Stack gap="md">
            <Alert variant="light" color="blue" icon={<IconInfoCircle size={17} />}>
              Upload your relevant certificate issued by an EMA-approved training institution. This is the prerequisite for your Basic Training Certificate (BTC).
            </Alert>
            <SectionHead title="Relevant Certificate Details" />
            <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
              <TextInput
                label="Certificate Number"
                placeholder="e.g. CERT-2024-001"
                required
                value={relCertNumber}
                onChange={(e) => setRelCertNumber(e.currentTarget.value)}
              />
              <TextInput
                label="Issuing Institution"
                placeholder="e.g. Bahirdar Maritime School"
                required
                value={relIssuer}
                onChange={(e) => setRelIssuer(e.currentTarget.value)}
              />
            </SimpleGrid>
            <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
              <TextInput
                label="Issue Date"
                type="date"
                required
                value={relIssueDate}
                onChange={(e) => setRelIssueDate(e.currentTarget.value)}
              />
              <TextInput
                label="Expiry Date"
                type="date"
                required
                value={relExpiryDate}
                onChange={(e) => setRelExpiryDate(e.currentTarget.value)}
              />
            </SimpleGrid>
            <SectionHead title="Upload Certificate" />
            <Card
              withBorder
              radius="md"
              p="md"
              style={{
                borderStyle: relFile ? 'solid' : 'dashed',
                borderColor: relFile ? 'var(--mantine-color-teal-5)' : 'var(--mantine-color-default-border)',
                maxWidth: rem(420),
              }}
            >
              <Group gap="sm" mb="sm" wrap="nowrap">
                <Box style={{
                  width: rem(40), height: rem(40), borderRadius: rem(8),
                  background: relFile ? 'var(--mantine-color-teal-light)' : 'var(--mantine-color-blue-light)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                }}>
                  <IconShieldCheck size={20} color={relFile ? 'var(--mantine-color-teal-6)' : 'var(--mantine-color-blue-6)'} stroke={1.5} />
                </Box>
                <div>
                  <Text fw={600} fz="sm">Relevant Certificate <Text span c="red">*</Text></Text>
                  <Text fz="xs" c="dimmed">PDF, JPG or PNG — max 5MB</Text>
                </div>
              </Group>
              {relFile ? (
                <Group gap="xs">
                  <IconCircleCheck size={15} color="var(--mantine-color-teal-6)" />
                  <Text fz="xs" c="teal.7" style={{ flex: 1 }} truncate>{relFile.name}</Text>
                  <Button size="xs" variant="subtle" color="red" onClick={() => { setRelFile(null); relResetRef.current?.(); }}>
                    <IconTrash size={13} />
                  </Button>
                </Group>
              ) : (
                <FileButton resetRef={relResetRef} onChange={setRelFile} accept="application/pdf,image/jpeg,image/png">
                  {(props) => (
                    <Button size="sm" variant="default" leftSection={<IconUpload size={14} />} fullWidth {...props}>
                      Choose File
                    </Button>
                  )}
                </FileButton>
              )}
            </Card>
          </Stack>
        )}

        {/* ── Step 2: Medical ─────────────────────────────────────────── */}
        {active === 1 && (
          <Stack gap="md">
            <Alert variant="light" color="blue" icon={<IconInfoCircle size={17} />}>
              Upload your valid medical certificate from an EMA-approved medical centre. Required for both Seaman Book and BTC issuance.
            </Alert>
            <SectionHead title="Medical Certificate Details" />
            <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
              <TextInput label="Certificate Number" placeholder="e.g. MC-2024-001" required value={medCertNumber} onChange={(e) => setMedCertNumber(e.currentTarget.value)} />
              <TextInput label="Issuing Medical Centre" placeholder="e.g. EMA Medical Centre" required value={medIssuer} onChange={(e) => setMedIssuer(e.currentTarget.value)} />
            </SimpleGrid>
            <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
              <TextInput label="Issue Date" type="date" required value={medIssueDate} onChange={(e) => setMedIssueDate(e.currentTarget.value)} />
              <TextInput label="Expiry Date" type="date" required value={medExpiryDate} onChange={(e) => setMedExpiryDate(e.currentTarget.value)} />
            </SimpleGrid>
            <SectionHead title="Upload Certificate" />
            <Card withBorder radius="md" p="md" style={{
              borderStyle: medFile ? 'solid' : 'dashed',
              borderColor: medFile ? 'var(--mantine-color-teal-5)' : 'var(--mantine-color-default-border)',
              maxWidth: rem(420),
            }}>
              <Group gap="sm" mb="sm" wrap="nowrap">
                <Box style={{
                  width: rem(40), height: rem(40), borderRadius: rem(8),
                  background: medFile ? 'var(--mantine-color-teal-light)' : 'var(--mantine-color-blue-light)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                }}>
                  <IconHeart size={20} color={medFile ? 'var(--mantine-color-teal-6)' : 'var(--mantine-color-blue-6)'} stroke={1.5} />
                </Box>
                <div>
                  <Text fw={600} fz="sm">Medical Certificate <Text span c="red">*</Text></Text>
                  <Text fz="xs" c="dimmed">PDF, JPG or PNG — max 5MB</Text>
                </div>
              </Group>
              {medFile ? (
                <Group gap="xs">
                  <IconCircleCheck size={15} color="var(--mantine-color-teal-6)" />
                  <Text fz="xs" c="teal.7" style={{ flex: 1 }} truncate>{medFile.name}</Text>
                  <Button size="xs" variant="subtle" color="red" onClick={() => { setMedFile(null); medResetRef.current?.(); }}>
                    <IconTrash size={13} />
                  </Button>
                </Group>
              ) : (
                <FileButton resetRef={medResetRef} onChange={setMedFile} accept="application/pdf,image/jpeg,image/png">
                  {(props) => (
                    <Button size="sm" variant="default" leftSection={<IconUpload size={14} />} fullWidth {...props}>
                      Choose File
                    </Button>
                  )}
                </FileButton>
              )}
            </Card>
            <Alert variant="light" color="yellow" icon={<IconAlertTriangle size={17} />}>
              Only certificates from <strong>EMA-approved medical centres</strong> are accepted.
            </Alert>
          </Stack>
        )}

        {/* ── Step 3: Payment ─────────────────────────────────────────── */}
        {active === 2 && (
          <Stack gap="md">
            {/* Fee breakdown — SB + BTC shown separately */}
            <Paper withBorder radius="md" p="md" bg="gray.0">
              <Text fw={700} fz="sm" mb="xs">Fee Breakdown</Text>
              <Text fz="xs" c="dimmed" mb="md">Your payment covers both the Seaman Book and Basic Training Certificate (BTC).</Text>

              {/* SB fees */}
              <Text fz="xs" fw={700} tt="uppercase" c="blue.7" mb={6}>Seaman Book</Text>
              {FEES.filter(f => f.label.startsWith('Seaman Book')).map(({ label, amount }) => (
                <Group key={label} justify="space-between" mb={4}>
                  <Text fz="sm">{label.replace('Seaman Book — ', '')}</Text>
                  <Text fz="sm" fw={500}>ETB {amount.toFixed(2)}</Text>
                </Group>
              ))}

              <Divider my="xs" />

              {/* BTC fees */}
              <Text fz="xs" fw={700} tt="uppercase" c="teal.7" mb={6}>Basic Training Certificate (BTC)</Text>
              {FEES.filter(f => f.label.startsWith('Basic Training') || f.label.startsWith('BTC')).map(({ label, amount }) => (
                <Group key={label} justify="space-between" mb={4}>
                  <Text fz="sm">{label.replace('Basic Training Certificate (BTC) — ', '').replace('BTC — ', '')}</Text>
                  <Text fz="sm" fw={500}>ETB {amount.toFixed(2)}</Text>
                </Group>
              ))}

              <Divider my="xs" />

              {/* BSID fees */}
              <Divider my="xs" />
              <Text fz="xs" fw={700} tt="uppercase" c="violet.7" mb={6}>BSID (Biometric Seafarer ID)</Text>
              {FEES.filter(f => f.label.startsWith('BSID')).map(({ label, amount }) => (
                <Group key={label} justify="space-between" mb={4}>
                  <Text fz="sm">{label.replace('BSID — ', '')}</Text>
                  <Text fz="sm" fw={500}>ETB {amount.toFixed(2)}</Text>
                </Group>
              ))}

              <Divider mt="xs" mb="sm" />
              <Group justify="space-between">
                <Text fz="sm" fw={800}>Total Amount Due</Text>
                <Text fz="md" fw={800} c="blue">ETB {TOTAL.toFixed(2)}</Text>
              </Group>
            </Paper>

            <SectionHead title="Select Payment Method" />
            <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md" style={{ maxWidth: rem(600) }}>
              {/* CBE */}
              <Card withBorder radius="md" p="md" onClick={() => { setPaymentMethod('cbe'); setPaymentRef(''); }}
                style={{
                  cursor: 'pointer',
                  borderColor: paymentMethod === 'cbe' ? 'var(--mantine-color-blue-6)' : 'var(--mantine-color-default-border)',
                  borderWidth: paymentMethod === 'cbe' ? 2 : 1,
                  background: paymentMethod === 'cbe' ? 'var(--mantine-color-blue-light)' : undefined,
                }}>
                <Group gap="sm" wrap="nowrap">
                  <Box style={{
                    width: rem(44), height: rem(44), borderRadius: rem(8), flexShrink: 0,
                    background: 'var(--mantine-color-blue-light)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <IconCreditCard size={22} color="var(--mantine-color-blue-6)" stroke={1.5} />
                  </Box>
                  <div>
                    <Text fw={700} fz="sm">CBE Bank Transfer</Text>
                    <Text fz="xs" c="dimmed">Commercial Bank of Ethiopia</Text>
                  </div>
                  {paymentMethod === 'cbe' && <IconCircleCheck size={18} color="var(--mantine-color-blue-6)" style={{ marginLeft: 'auto' }} />}
                </Group>
              </Card>

              {/* Telebirr */}
              <Card withBorder radius="md" p="md" onClick={() => { setPaymentMethod('telebirr'); setPaymentRef(''); }}
                style={{
                  cursor: 'pointer',
                  borderColor: paymentMethod === 'telebirr' ? 'var(--mantine-color-violet-6)' : 'var(--mantine-color-default-border)',
                  borderWidth: paymentMethod === 'telebirr' ? 2 : 1,
                  background: paymentMethod === 'telebirr' ? 'var(--mantine-color-violet-light)' : undefined,
                }}>
                <Group gap="sm" wrap="nowrap">
                  <Box style={{
                    width: rem(44), height: rem(44), borderRadius: rem(8), flexShrink: 0,
                    background: 'var(--mantine-color-violet-light)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <IconCreditCard size={22} color="var(--mantine-color-violet-6)" stroke={1.5} />
                  </Box>
                  <div>
                    <Text fw={700} fz="sm">Telebirr</Text>
                    <Text fz="xs" c="dimmed">Ethio Telecom Mobile Money</Text>
                  </div>
                  {paymentMethod === 'telebirr' && <IconCircleCheck size={18} color="var(--mantine-color-violet-6)" style={{ marginLeft: 'auto' }} />}
                </Group>
              </Card>
            </SimpleGrid>

            {paymentMethod === 'cbe' && (
              <>
                <Alert variant="light" color="blue" icon={<IconInfoCircle size={15} />}>
                  Transfer <strong>ETB {TOTAL.toFixed(2)}</strong> to CBE Account <strong>1000123456789</strong> (EMA Maritime Authority). Use your full name as description.
                </Alert>
                <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
                  <TextInput label="CBE Transaction Reference" placeholder="e.g. CBE-TXN-20240510-001" required value={paymentRef} onChange={(e) => setPaymentRef(e.currentTarget.value)} />
                  <TextInput label="Payment Date" type="date" required value={paymentDate} onChange={(e) => setPaymentDate(e.currentTarget.value)} />
                </SimpleGrid>
              </>
            )}

            {paymentMethod === 'telebirr' && (
              <>
                <Alert variant="light" color="violet" icon={<IconInfoCircle size={15} />}>
                  Send <strong>ETB {TOTAL.toFixed(2)}</strong> to Telebirr <strong>+251 11 551 0000</strong> (EMA Maritime Authority). Screenshot and upload your confirmation.
                </Alert>
                <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
                  <TextInput label="Telebirr Transaction ID" placeholder="e.g. TLB-2024-001234" required value={paymentRef} onChange={(e) => setPaymentRef(e.currentTarget.value)} />
                  <TextInput label="Payment Date" type="date" required value={paymentDate} onChange={(e) => setPaymentDate(e.currentTarget.value)} />
                </SimpleGrid>
              </>
            )}

            {paymentMethod && (
              <>
                <SectionHead title="Upload Receipt (optional)" />
                <Card withBorder radius="md" p="md" style={{
                  borderStyle: paymentFile ? 'solid' : 'dashed',
                  borderColor: paymentFile ? 'var(--mantine-color-teal-5)' : 'var(--mantine-color-default-border)',
                  maxWidth: rem(420),
                }}>
                  <Group gap="sm" mb="sm" wrap="nowrap">
                    <Box style={{
                      width: rem(40), height: rem(40), borderRadius: rem(8),
                      background: paymentFile ? 'var(--mantine-color-teal-light)' : 'var(--mantine-color-blue-light)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                    }}>
                      <IconCreditCard size={20} color={paymentFile ? 'var(--mantine-color-teal-6)' : 'var(--mantine-color-blue-6)'} stroke={1.5} />
                    </Box>
                    <div>
                      <Text fw={600} fz="sm">{paymentMethod === 'telebirr' ? 'Telebirr Screenshot' : 'Bank Receipt'}</Text>
                      <Text fz="xs" c="dimmed">PDF, JPG or PNG — max 5MB</Text>
                    </div>
                  </Group>
                  {paymentFile ? (
                    <Group gap="xs">
                      <IconCircleCheck size={15} color="var(--mantine-color-teal-6)" />
                      <Text fz="xs" c="teal.7" style={{ flex: 1 }} truncate>{paymentFile.name}</Text>
                      <Button size="xs" variant="subtle" color="red" onClick={() => { setPaymentFile(null); payResetRef.current?.(); }}>
                        <IconTrash size={13} />
                      </Button>
                    </Group>
                  ) : (
                    <FileButton resetRef={payResetRef} onChange={setPaymentFile} accept="application/pdf,image/jpeg,image/png">
                      {(props) => (
                        <Button size="sm" variant="default" leftSection={<IconUpload size={14} />} fullWidth {...props}>
                          Upload Receipt
                        </Button>
                      )}
                    </FileButton>
                  )}
                </Card>
              </>
            )}
          </Stack>
        )}

        {/* ── Step 4: Review ──────────────────────────────────────────── */}
        {active === 3 && (
          <Stack gap="md">
            <Alert variant="light" color="blue" icon={<IconInfoCircle size={17} />}>
              Submitting this application will initiate processing for both your <strong>Seaman Book</strong> and <strong>Basic Training Certificate (BTC)</strong>.
            </Alert>

            <Paper withBorder radius="md" p="md">
              <Text fw={700} fz="sm" mb="sm">Relevant Certificate</Text>
              <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
                <ReviewRow label="Certificate No." value={relCertNumber} />
                <ReviewRow label="Issuing Institution" value={relIssuer} />
                <ReviewRow label="Issue Date" value={relIssueDate} />
                <ReviewRow label="Expiry Date" value={relExpiryDate} />
                <ReviewRow label="Document" value={relFile?.name ?? '—'} />
              </SimpleGrid>
            </Paper>

            <Paper withBorder radius="md" p="md">
              <Text fw={700} fz="sm" mb="sm">Medical Certificate</Text>
              <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
                <ReviewRow label="Certificate No." value={medCertNumber} />
                <ReviewRow label="Issuing Centre" value={medIssuer} />
                <ReviewRow label="Issue Date" value={medIssueDate} />
                <ReviewRow label="Expiry Date" value={medExpiryDate} />
                <ReviewRow label="Document" value={medFile?.name ?? '—'} />
              </SimpleGrid>
            </Paper>

            <Paper withBorder radius="md" p="md">
              <Text fw={700} fz="sm" mb="sm">Payment</Text>
              <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
                <ReviewRow label="Payment Method" value={paymentMethod === 'cbe' ? 'CBE Bank Transfer' : 'Telebirr'} />
                <ReviewRow label="Transaction Reference" value={paymentRef} />
                <ReviewRow label="Payment Date" value={paymentDate} />
                <ReviewRow label="Total Paid" value={`ETB ${TOTAL.toFixed(2)}`} />
                <ReviewRow label="Receipt" value={paymentFile?.name ?? 'Not uploaded'} />
              </SimpleGrid>
            </Paper>
          </Stack>
        )}

        {/* Navigation */}
        <Group justify="space-between" mt="xl">
          <Button variant="default" onClick={() => navigate('/seaman-book')}>Cancel</Button>
          <Group gap="sm">
            {active > 0 && (
              <Button variant="default" leftSection={<IconArrowLeft size={16} />} onClick={prev}>Previous</Button>
            )}
            {active < STEPS.length - 1 ? (
              <Button rightSection={<IconArrowRight size={16} />} onClick={next} disabled={!canNext()}>
                Next Step
              </Button>
            ) : (
              <Button color="blue" leftSection={<IconBook2 size={16} />} onClick={handleSubmit} loading={submitting}>
                Submit Application
              </Button>
            )}
          </Group>
        </Group>
      </Paper>
    </Stack>
  );
}
