import { useState, useEffect, useMemo, CSSProperties } from 'react';
import { Card, Typography, Alert, List, Row, Col, Divider, Button, message, Spin } from 'antd';
import { CheckCircleFilled, SendOutlined, ShoppingOutlined } from '@ant-design/icons';
import { useNavigate, useParams } from 'react-router-dom';
import { useApi } from '@/hooks/useApi';
import { OrdersService } from '@/services/orders';
import { ROUTES } from '@/constants/routes';
import { parseError } from '@/utils/errorHandler';

interface OrderItem {
  id: string;
  order_id: string;
  listing_id: string;
  card_id: string;
  quantity: number;
  price: number;
  condition: string;
  card_name?: string;
  card_image_url?: string;
  created_at: string;
  updated_at: string;
}

interface OrderDetails {
  id: string;
  order_number: string;
  buyer_id: string;
  seller_id: string;
  status: string;
  subtotal: number;
  shipping_cost: number;
  tax_amount: number;
  platform_fee: number;
  total_amount: number;
  shipping_address_id: string;
  billing_address_id: string;
  notes: string | null;
  buyer_email: string;
  seller_email: string;
  seller_store_name: string | null;
  order_items: OrderItem[];
  payment_status: string | null;
  shipment_tracking_number: string | null;
  shipping_address_line1: string;
  billing_address_line1: string;
  created_at: string;
  updated_at: string;
}

const OrderConfirmationPage = () => {
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();
  const { orderId } = useParams<{ orderId: string }>();

  const [orderDetails, setOrderDetails] = useState<OrderDetails | null>(null);
  const [loading, setLoading] = useState<boolean>(true);

  const { data, loading: fetchLoading, error, execute: fetchOrderDetails } = useApi(OrdersService.getDetails);

  useEffect(() => {
    if (orderId) {
      void fetchOrderDetails(orderId);
    }
  }, [orderId, fetchOrderDetails]);

  useEffect(() => {
    if (data) {
      setOrderDetails(data as OrderDetails);
      setLoading(false);
    }
  }, [data]);

  useEffect(() => {
    if (error) {
      const { message: errorMessage } = parseError(error);
      messageApi.error(errorMessage);
      setLoading(false);
    }
  }, [error, messageApi]);

  const orderNumber = useMemo(() => orderDetails?.order_number || '', [orderDetails]);
  const orderItems = useMemo(() => orderDetails?.order_items || [], [orderDetails]);
  const totalAmount = useMemo(() => orderDetails?.total_amount || 0, [orderDetails]);
  const subtotal = useMemo(() => orderDetails?.subtotal || 0, [orderDetails]);
  const shippingCost = useMemo(() => orderDetails?.shipping_cost || 0, [orderDetails]);
  const taxAmount = useMemo(() => orderDetails?.tax_amount || 0, [orderDetails]);
  const orderStatus = useMemo(() => orderDetails?.status || 'PENDING', [orderDetails]);
  const shippingAddressLine = useMemo(() => orderDetails?.shipping_address_line1 || '', [orderDetails]);
  const sellerStoreName = useMemo(() => orderDetails?.seller_store_name || 'Seller', [orderDetails]);
  const buyerEmail = useMemo(() => orderDetails?.buyer_email || '', [orderDetails]);

  const trackOrder = () => {
    navigate(ROUTES.ACCOUNT_ORDERS.replace(':orderId', orderId || ''));
  };

  const continueShopping = () => {
    navigate(ROUTES.SEARCH);
  };

  const viewOrderDetails = () => {
    navigate(ROUTES.ACCOUNT_ORDERS.replace(':orderId', orderId || ''));
  };

  const viewMyOrders = () => {
    navigate(ROUTES.ACCOUNT_ORDERS);
  };

  const mainContainerStyle: CSSProperties = {
    minHeight: '100vh',
    width: '100%',
    backgroundColor: '#f5f5f5',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: '40px 16px'
  };

  const contentWrapperStyle: CSSProperties = {
    maxWidth: '800px',
    width: '100%'
  };

  const successSectionStyle: CSSProperties = {
    textAlign: 'center',
    marginBottom: '24px'
  };

  const successIconStyle: CSSProperties = {
    fontSize: '72px',
    color: '#52c41a',
    marginBottom: '16px'
  };

  const successTitleStyle: CSSProperties = {
    marginBottom: '8px',
    color: '#1a1a1a'
  };

  const successMessageStyle: CSSProperties = {
    fontSize: '16px',
    display: 'block',
    marginBottom: '8px'
  };

  const orderNumberLabelStyle: CSSProperties = {
    fontSize: '13px',
    display: 'block',
    marginBottom: '4px'
  };

  const orderNumberDisplayStyle: CSSProperties = {
    color: '#E3350D',
    marginBottom: '0'
  };

  const emailNoticeStyle: CSSProperties = {
    marginBottom: '24px'
  };

  const orderSummaryCardStyle: CSSProperties = {
    marginBottom: '24px'
  };

  const itemsListStyle: CSSProperties = {
    marginBottom: '16px'
  };

  const orderDetailsSectionStyle: CSSProperties = {
    marginBottom: '24px'
  };

  const shippingTitleStyle: CSSProperties = {
    display: 'block',
    marginBottom: '8px',
    color: '#666'
  };

  const shippingAddressTextStyle: CSSProperties = {
    marginBottom: '0'
  };

  const paymentTitleStyle: CSSProperties = {
    display: 'block',
    marginBottom: '8px',
    color: '#666'
  };

  const paymentMethodTextStyle: CSSProperties = {
    marginBottom: '0'
  };

  const sellerTitleStyle: CSSProperties = {
    display: 'block',
    marginBottom: '8px',
    color: '#666'
  };

  const sellerNameTextStyle: CSSProperties = {
    marginBottom: '0'
  };

  const deliveryTitleStyle: CSSProperties = {
    display: 'block',
    marginBottom: '8px',
    color: '#666'
  };

  const deliveryEstimateTextStyle: CSSProperties = {
    marginBottom: '0'
  };

  const pricingCardStyle: CSSProperties = {
    marginBottom: '24px'
  };

  const subtotalRowStyle: CSSProperties = {
    display: 'flex',
    justifyContent: 'space-between',
    marginBottom: '8px'
  };

  const shippingCostRowStyle: CSSProperties = {
    display: 'flex',
    justifyContent: 'space-between',
    marginBottom: '8px'
  };

  const taxRowStyle: CSSProperties = {
    display: 'flex',
    justifyContent: 'space-between',
    marginBottom: '12px'
  };

  const totalDividerStyle: CSSProperties = {
    margin: '8px 0'
  };

  const totalRowStyle: CSSProperties = {
    display: 'flex',
    justifyContent: 'space-between'
  };

  const totalLabelStyle: CSSProperties = {
    fontSize: '18px'
  };

  const totalValueStyle: CSSProperties = {
    fontSize: '18px',
    color: '#E3350D'
  };

  const actionsSectionStyle: CSSProperties = {
    display: 'flex',
    gap: '16px',
    justifyContent: 'center',
    flexWrap: 'wrap',
    marginBottom: '24px'
  };

  const trackOrderButtonStyle: CSSProperties = {
    minWidth: '180px',
    height: '48px'
  };

  const continueShoppingButtonStyle: CSSProperties = {
    minWidth: '180px',
    height: '48px'
  };

  const linksSectionStyle: CSSProperties = {
    textAlign: 'center',
    display: 'flex',
    gap: '24px',
    justifyContent: 'center',
    flexWrap: 'wrap'
  };

  if (loading || fetchLoading) {
    return (
      <div style={mainContainerStyle}>
        {contextHolder}
        <Spin size="large" />
      </div>
    );
  }

  if (error) {
    return (
      <div style={mainContainerStyle}>
        {contextHolder}
        <Alert
          type="error"
          message="Failed to load order details"
          description="Please try again later or contact support."
          showIcon
        />
      </div>
    );
  }

  return (
    <div style={mainContainerStyle}>
      {contextHolder}
      <div style={contentWrapperStyle}>
        <Card bordered={false} style={successSectionStyle}>
          <CheckCircleFilled style={successIconStyle} />
          <Typography.Title level={2} style={successTitleStyle}>
            Order Confirmed!
          </Typography.Title>
          <Typography.Text type="secondary" style={successMessageStyle}>
            Thank you for your purchase! Your order has been placed successfully.
          </Typography.Text>
          <Typography.Text type="secondary" style={orderNumberLabelStyle}>
            Order Number
          </Typography.Text>
          <Typography.Title level={4} copyable style={orderNumberDisplayStyle}>
            {orderNumber}
          </Typography.Title>
        </Card>

        <Alert
          type="info"
          showIcon
          message="Confirmation email sent"
          description="A confirmation email with your order details has been sent to your email address. Please check your inbox."
          style={emailNoticeStyle}
        />

        <Card title="Order Summary" bordered={false} style={orderSummaryCardStyle}>
          <List
            itemLayout="horizontal"
            size="large"
            dataSource={orderItems}
            style={itemsListStyle}
            renderItem={(item: OrderItem) => (
              <List.Item>
                <List.Item.Meta
                  title={item.card_name || 'Pokemon Card'}
                  description={item.condition}
                />
                <div>${item.price} × {item.quantity}</div>
              </List.Item>
            )}
          />
        </Card>

        <Card title="Order Details" bordered={false} style={orderDetailsSectionStyle}>
          <Row gutter={[24, 24]}>
            <Col xs={24} sm={12}>
              <Typography.Text strong style={shippingTitleStyle}>
                Shipping Address
              </Typography.Text>
              <Typography.Paragraph style={shippingAddressTextStyle}>
                {shippingAddressLine}
              </Typography.Paragraph>
            </Col>
            <Col xs={24} sm={12}>
              <Typography.Text strong style={paymentTitleStyle}>
                Payment Method
              </Typography.Text>
              <Typography.Paragraph style={paymentMethodTextStyle}>
                Card ending in ••••
              </Typography.Paragraph>
            </Col>
            <Col xs={24} sm={12}>
              <Typography.Text strong style={sellerTitleStyle}>
                Seller
              </Typography.Text>
              <Typography.Paragraph style={sellerNameTextStyle}>
                {sellerStoreName}
              </Typography.Paragraph>
            </Col>
            <Col xs={24} sm={12}>
              <Typography.Text strong style={deliveryTitleStyle}>
                Estimated Delivery
              </Typography.Text>
              <Typography.Paragraph style={deliveryEstimateTextStyle}>
                5–7 business days
              </Typography.Paragraph>
            </Col>
          </Row>
        </Card>

        <Card title="Payment Summary" bordered={false} style={pricingCardStyle}>
          <div style={subtotalRowStyle}>
            <Typography.Text>Subtotal</Typography.Text>
            <Typography.Text>${subtotal}</Typography.Text>
          </div>
          <div style={shippingCostRowStyle}>
            <Typography.Text>Shipping</Typography.Text>
            <Typography.Text>${shippingCost}</Typography.Text>
          </div>
          <div style={taxRowStyle}>
            <Typography.Text>Tax</Typography.Text>
            <Typography.Text>${taxAmount}</Typography.Text>
          </div>
          <Divider style={totalDividerStyle} />
          <div style={totalRowStyle}>
            <Typography.Text strong style={totalLabelStyle}>
              Total Charged
            </Typography.Text>
            <Typography.Text strong style={totalValueStyle}>
              ${totalAmount}
            </Typography.Text>
          </div>
        </Card>

        <div style={actionsSectionStyle}>
          <Button
            type="primary"
            size="large"
            icon={<SendOutlined />}
            onClick={trackOrder}
            style={trackOrderButtonStyle}
          >
            Track Order
          </Button>
          <Button
            type="default"
            size="large"
            icon={<ShoppingOutlined />}
            onClick={continueShopping}
            style={continueShoppingButtonStyle}
          >
            Continue Shopping
          </Button>
        </div>

        <div style={linksSectionStyle}>
          <Button type="link" onClick={viewOrderDetails}>
            View Order Details
          </Button>
          <Button type="link" onClick={viewMyOrders}>
            View All My Orders
          </Button>
        </div>
      </div>
    </div>
  );
};

export default OrderConfirmationPage;