import React from 'react';
import Box from '@mui/material/Box';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import type { SxProps, Theme } from '@mui/material/styles';
import { WizardLayout } from '../../templates/WizardLayout';
import { Typography } from '../../atoms/Typography';
import { Button } from '../../atoms/Button';

// ─── Types ───────────────────────────────────────────────────────────────────

/** Next step link shown on the confirmation page */
export interface ConfirmationLink {
  label: string;
  href?: string;
  onClick?: () => void;
}

/** Props for the ConfirmationStep page component */
export interface ConfirmationStepProps {
  /** Whether this is a pre-planning flow (different copy) */
  isPrePlanning?: boolean;
  /** User's email address (shown in confirmation text) */
  email?: string;
  /** User's phone number (shown in at-need confirmation) */
  phone?: string;
  /** Expected callback timeframe (at-need) */
  callbackTimeframe?: string;
  /** Navigation links to next steps */
  nextSteps?: ConfirmationLink[];
  /** Callback for "View your plan" */
  onViewPlan?: () => void;
  /** Navigation bar */
  navigation?: React.ReactNode;
  /** Hide the help bar */
  hideHelpBar?: boolean;
  /** MUI sx prop */
  sx?: SxProps<Theme>;
}

// ─── Component ───────────────────────────────────────────────────────────────

/**
 * Step 15 — Confirmation / Plan View for the FA arrangement wizard.
 *
 * Terminal confirmation page. Different copy for at-need vs pre-planning.
 * Confirming and orienting — not celebratory.
 *
 * At-need: "Your arrangement has been submitted" + callback info
 * Pre-planning: "Your plan has been saved" + return-anytime info
 *
 * No progress indicator. No back button. Links to post-plan flows.
 *
 * Pure presentation component — props in, callbacks out.
 *
 * Spec: documentation/steps/steps/15_view.yaml
 */
export const ConfirmationStep: React.FC<ConfirmationStepProps> = ({
  isPrePlanning = false,
  email,
  phone,
  callbackTimeframe = 'within 2 hours',
  nextSteps = [],
  onViewPlan,
  navigation,
  hideHelpBar,
  sx,
}) => {
  return (
    <WizardLayout variant="centered-form" navigation={navigation} hideHelpBar={hideHelpBar} sx={sx}>
      <Box sx={{ textAlign: 'center', py: 4 }}>
        {/* Success icon — muted, not celebratory */}
        <CheckCircleOutlineIcon
          sx={{
            fontSize: 64,
            color: 'var(--fa-color-brand-500)',
            mb: 3,
            opacity: 0.8,
          }}
          aria-hidden
        />

        {/* Heading */}
        <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
          {isPrePlanning ? 'Your plan has been saved' : 'Your arrangement has been submitted'}
        </Typography>

        {/* Body text */}
        {isPrePlanning ? (
          <Box sx={{ maxWidth: 480, mx: 'auto', mb: 4 }}>
            <Typography variant="body1" color="text.secondary">
              You can return and update it anytime.
              {email && ` We've sent a copy to ${email}.`}
            </Typography>
            <Typography variant="body1" color="text.secondary" sx={{ mt: 2 }}>
              When the time comes, your family can contact us and we&apos;ll have everything ready.
            </Typography>
          </Box>
        ) : (
          <Box sx={{ maxWidth: 480, mx: 'auto', mb: 4 }}>
            <Typography variant="body1" color="text.secondary">
              A funeral arranger will call you
              {phone && ` on ${phone}`} {callbackTimeframe} to confirm the details.
              {email && ` A confirmation has been sent to ${email}.`}
            </Typography>
            <Typography variant="body1" color="text.secondary" sx={{ mt: 2 }}>
              If you need to make changes before then, call us on{' '}
              <Box
                component="a"
                href="tel:1300000000"
                sx={{
                  color: 'var(--fa-color-text-brand)',
                  textDecoration: 'underline',
                  fontSize: 'inherit',
                }}
              >
                1300 000 000
              </Box>
              .
            </Typography>
          </Box>
        )}

        {/* View plan CTA */}
        {onViewPlan && (
          <Button variant="contained" size="large" onClick={onViewPlan} sx={{ mb: 4 }}>
            View your plan
          </Button>
        )}

        {/* Next steps */}
        {nextSteps.length > 0 && (
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, alignItems: 'center' }}>
            {nextSteps.map((link) => (
              <Button
                key={link.label}
                variant="text"
                color="secondary"
                onClick={link.onClick}
                href={link.href}
              >
                {link.label}
              </Button>
            ))}
          </Box>
        )}
      </Box>
    </WizardLayout>
  );
};

ConfirmationStep.displayName = 'ConfirmationStep';
export default ConfirmationStep;