import React, { useEffect, useState } from 'react';
import {
  IonButton,
  IonContent,
  IonHeader,
  IonIcon,
  IonPage,
  IonTitle,
  IonToolbar,
  useIonViewWillEnter,
} from '@ionic/react';
import { checkmarkCircle } from 'ionicons/icons';
import { useHistory } from 'react-router-dom';
import { LAST_ORDER_STORAGE_KEY } from './Home';
import {
  setStatusBarBackground,
  setStatusBarStyle,
  Style,
} from '../utils/statusBar';

type OrderInfo = {
  id: string;
  orderNumber: string;
  total: number;
  itemCount: number;
  status: string;
};

const OrderConfirmation: React.FC = () => {
  const history = useHistory();
  const [order, setOrder] = useState<OrderInfo | null>(null);

  useIonViewWillEnter(() => {
    setStatusBarStyle(Style.Dark);
    setStatusBarBackground('#ffffff');
  });

  useEffect(() => {
    try {
      const savedOrder = localStorage.getItem(LAST_ORDER_STORAGE_KEY);
      if (!savedOrder) {
        setOrder(null);
        return;
      }

      setOrder(JSON.parse(savedOrder) as OrderInfo);
    } catch {
      setOrder(null);
    }
  }, []);

  return (
    <IonPage>
      <IonHeader className="ion-no-border">
        <IonToolbar>
          <IonTitle>Order placed</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <div className="confirmation-card">
          <IonIcon icon={checkmarkCircle} color="success" />
          <h1>Thanks for your order!</h1>
          <p className="muted-text">
            Your order has been placed successfully and is now being prepared.
          </p>

          {order ? (
            <div className="confirmation-details">
              <div>
                <span>Order number</span>
                <strong>{order.orderNumber}</strong>
              </div>
              <div>
                <span>Status</span>
                <strong>{order.status.replaceAll('_', ' ')}</strong>
              </div>
              <div>
                <span>Items</span>
                <strong>{order.itemCount}</strong>
              </div>
              <div>
                <span>Total paid</span>
                <strong>${order.total.toFixed(2)}</strong>
              </div>
            </div>
          ) : (
            <p className="muted-text">
              We could not load the order summary, but your next browse session
              is ready.
            </p>
          )}

          {order && (
            <IonButton
              expand="block"
              onClick={() => history.replace(`/orders/${order.id}`)}
            >
              Track this order
            </IonButton>
          )}
          <IonButton
            fill="outline"
            expand="block"
            onClick={() => history.replace('/orders')}
          >
            View all orders
          </IonButton>
          <IonButton
            fill="clear"
            expand="block"
            onClick={() => history.replace('/home')}
          >
            Continue shopping
          </IonButton>
        </div>
      </IonContent>
    </IonPage>
  );
};

export default OrderConfirmation;