import { useEffect } from 'react'
import { Link, Navigate, useLocation } from 'react-router-dom'
import { useCheckout } from '../../context/CheckoutContext'
import type { Order } from '../../services/orderService'
import { getWebsiteUrl } from '../../services/websiteService'
import { formatIrtPrice } from '../../utils/irtPrice'
import orderSucceedImg from '../../assets/order-succeed.png'
import styles from './CheckoutSteps.module.css'

export function CheckoutSuccessStep() {
  const location = useLocation()
  const { placedOrder, setPlacedOrder, resetCheckout } = useCheckout()
  const orderFromNav = (location.state as { order?: Order } | null)?.order
  const order = placedOrder ?? orderFromNav ?? null
  const websiteUrl = getWebsiteUrl()

  useEffect(() => {
    if (!placedOrder && orderFromNav) {
      setPlacedOrder(orderFromNav)
    }
  }, [placedOrder, orderFromNav, setPlacedOrder])

  if (!order) {
    return <Navigate to="/checkout/cart" replace />
  }

  return (
    <div className={`${styles.stepContent} ${styles.successContent}`}>
      <div className={styles.successIcon}>
        <img
          src={orderSucceedImg}
          alt="سفارش با موفقیت ثبت شد"
          className={styles.successImage}
        />
      </div>

      <div className={styles.successHeader}>
        <h1 className={styles.stepTitle}>سفارش ثبت شد</h1>
        <p className={styles.stepDesc}>از خرید شما سپاسگزاریم — سفارش دریافت شد.</p>
      </div>

      <dl className={styles.successMeta}>
        <div className={styles.successMetaRow}>
          <dt>شماره سفارش</dt>
          <dd className={styles.successMetaValue}>{order.orderNumber}</dd>
        </div>
        <div className={styles.successMetaRow}>
          <dt>مبلغ</dt>
          <dd className={styles.successMetaValue}>{formatIrtPrice(order.total)}</dd>
        </div>
        <div className={styles.successMetaRow}>
          <dt>وضعیت</dt>
          <dd>در انتظار تأیید</dd>
        </div>
      </dl>

      <div className={styles.successActions}>
        <Link to="/" className={styles.successDarkBtn} onClick={() => resetCheckout()}>
          رفتن به داشبورد مدیریت
        </Link>
        <a href={websiteUrl} className={styles.successNeutralBtn} onClick={() => resetCheckout()}>
          بازگشت به وبسایت
        </a>
      </div>
    </div>
  )
}
