import { useState, useMemo, useEffect, useCallback, CSSProperties } from 'react';
import { Card, Table, Input, Tabs, Button, Breadcrumb, Typography, Empty, Tag, message } from 'antd';
import { UserOutlined, RightOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useApi } from '@/hooks/useApi';
import { OrdersService } from '@/services/orders';
import { useAppContext } from '@/store/AppStore';
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;
  created_at: string;
  updated_at: string;
}

interface Order {
  id: string;
  order_number: string;
  buyer_id: string;
  seller_id: string;
  status: 'PENDING' | 'PAID' | 'PROCESSING' | 'SHIPPED' | 'DELIVERED' | 'CANCELLED' | 'REFUNDED' | 'DISPUTED';
  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;
  cancelled_at: string | null;
  cancellation_reason: string | null;
  created_at: string;
  updated_at: string;
  order_items: OrderItem[];
}

const BuyerOrdersPage = () => {
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();
  const { currentUser } = useAppContext();

  const [orders, setOrders] = useState<Order[]>([]);
  const [activeStatusFilter, setActiveStatusFilter] = useState<string>('ALL');
  const [searchOrderNumber, setSearchOrderNumber] = useState<string>('');
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [totalOrders, setTotalOrders] = useState<number>(0);
  const pageSize = 20;

  const offset = useMemo(() => (currentPage - 1) * pageSize, [currentPage, pageSize]);

  const { data: ordersData, loading, error, execute: fetchOrders } = useApi(OrdersService.list);

  const loadOrders = useCallback(async () => {
    const queryParams: Record<string, unknown> = {
      buyer_id: currentUser?.id,
      limit: pageSize,
      offset,
    };

    if (activeStatusFilter !== 'ALL') {
      queryParams.status = activeStatusFilter;
    }

    if (searchOrderNumber) {
      queryParams.order_number = searchOrderNumber;
    }

    try {
      await fetchOrders(queryParams);
    } catch (e) {
      const { message: errorMessage } = parseError(e);
      messageApi.error(errorMessage || 'Failed to load orders. Please try again.');
    }
  }, [currentUser?.id, pageSize, offset, activeStatusFilter, searchOrderNumber, fetchOrders, messageApi]);

  useEffect(() => {
    if (currentUser?.id) {
      void loadOrders();
    }
  }, [currentUser?.id, loadOrders]);

  useEffect(() => {
    if (ordersData?.data) {
      setOrders(Array.isArray(ordersData.data) ? ordersData.data : []);
      setTotalOrders(ordersData.data.length || 0);
    }
  }, [ordersData]);

  const handleStatusFilterChange = (key: string) => {
    setActiveStatusFilter(key);
    setCurrentPage(1);
  };

  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchOrderNumber(e.target.value);
    setCurrentPage(1);
  };

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };

  const handleRowClick = (record: Order) => {
    navigate(ROUTES.ORDER_DETAIL.replace(':orderId', record.id));
  };

  const handleProfileClick = () => {
    navigate(ROUTES.PROFILE);
  };

  const handleBrowseClick = () => {
    navigate(ROUTES.BROWSE);
  };

  const getStatusColor = (status: string): string => {
    const statusColors: Record<string, string> = {
      PENDING: 'orange',
      PAID: 'blue',
      PROCESSING: 'cyan',
      SHIPPED: 'purple',
      DELIVERED: 'green',
      CANCELLED: 'red',
      REFUNDED: 'magenta',
      DISPUTED: 'volcano',
    };
    return statusColors[status] || 'default';
  };

  const columns = useMemo(() => [
    {
      title: 'Order Number',
      dataIndex: 'order_number',
      key: 'order_number',
      width: 160,
      fixed: 'left' as const,
      render: (text: string) => <strong>{text}</strong>,
    },
    {
      title: 'Date',
      dataIndex: 'created_at',
      key: 'created_at',
      width: 140,
      render: (date: string) => new Date(date).toLocaleDateString(),
      sorter: (a: Order, b: Order) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime(),
    },
    {
      title: 'Items',
      dataIndex: 'order_items',
      key: 'order_items',
      width: 200,
      render: (items: OrderItem[]) => {
        if (!items || items.length === 0) return '0 items';
        const totalQty = items.reduce((sum, item) => sum + item.quantity, 0);
        return `${totalQty} item${totalQty !== 1 ? 's' : ''}`;
      },
    },
    {
      title: 'Total',
      dataIndex: 'total_amount',
      key: 'total_amount',
      width: 120,
      render: (amount: number) => `$${Number(amount).toFixed(2)}`,
      sorter: (a: Order, b: Order) => Number(a.total_amount) - Number(b.total_amount),
    },
    {
      title: 'Status',
      dataIndex: 'status',
      key: 'status',
      width: 140,
      render: (status: string) => (
        <Tag color={getStatusColor(status)}>{status}</Tag>
      ),
    },
    {
      title: '',
      key: 'action',
      width: 50,
      render: () => <RightOutlined />,
    },
  ], []);

  const tabItems = useMemo(() => [
    { key: 'ALL', label: 'All Orders' },
    { key: 'PENDING', label: 'Pending' },
    { key: 'PAID', label: 'Paid' },
    { key: 'PROCESSING', label: 'Processing' },
    { key: 'SHIPPED', label: 'Shipped' },
    { key: 'DELIVERED', label: 'Delivered' },
    { key: 'CANCELLED', label: 'Cancelled' },
    { key: 'REFUNDED', label: 'Refunded' },
    { key: 'DISPUTED', label: 'Disputed' },
  ], []);

  const breadcrumbItems = useMemo(() => [
    { title: 'Home', href: ROUTES.HOME },
    { title: 'My Account', href: ROUTES.PROFILE },
    { title: 'My Orders' },
  ], []);

  const mainContainerStyle: CSSProperties = {
    minHeight: '100vh',
    width: '100%',
    backgroundColor: '#f5f5f5',
    padding: '24px',
  };

  const contentWrapperStyle: CSSProperties = {
    maxWidth: '1200px',
    margin: '0 auto',
    width: '100%',
  };

  const pageHeaderStyle: CSSProperties = {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: '24px',
    flexWrap: 'wrap',
    gap: '12px',
  };

  const filtersRowStyle: CSSProperties = {
    display: 'flex',
    flexDirection: 'column',
    gap: '16px',
  };

  const searchInputStyle: CSSProperties = {
    maxWidth: '400px',
  };

  const tableStyle: CSSProperties = {
    cursor: 'pointer',
  };

  return (
    <div style={mainContainerStyle}>
      {contextHolder}
      <div style={contentWrapperStyle}>
        <Breadcrumb items={breadcrumbItems} style={{ marginBottom: '16px' }} />
        
        <div style={pageHeaderStyle}>
          <Typography.Title level={2} style={{ margin: 0 }}>
            My Orders
          </Typography.Title>
          <Button type="default" icon={<UserOutlined />} onClick={handleProfileClick}>
            My Account
          </Button>
        </div>

        <Card bordered={false} style={{ marginBottom: '24px' }}>
          <div style={filtersRowStyle}>
            <Tabs
              type="card"
              activeKey={activeStatusFilter}
              onChange={handleStatusFilterChange}
              items={tabItems}
            />
            <Input.Search
              placeholder="Search by order number..."
              allowClear
              enterButton
              size="large"
              value={searchOrderNumber}
              onChange={handleSearchChange}
              style={searchInputStyle}
            />
          </div>
        </Card>

        <Card bordered={false}>
          {orders.length === 0 && !loading ? (
            <div style={{ padding: '48px 0', textAlign: 'center' }}>
              <Empty
                image={Empty.PRESENTED_IMAGE_SIMPLE}
                description="You haven't placed any orders yet. Start browsing cards to find your next addition!"
              >
                <Button type="primary" size="large" onClick={handleBrowseClick}>
                  Browse Cards
                </Button>
              </Empty>
            </div>
          ) : (
            <Table
              rowKey="id"
              dataSource={orders}
              columns={columns}
              loading={loading}
              onRow={(record) => ({
                onClick: () => handleRowClick(record),
              })}
              scroll={{ x: 900 }}
              pagination={{
                current: currentPage,
                pageSize,
                total: totalOrders,
                showSizeChanger: false,
                showTotal: (total) => `${total} orders`,
                onChange: handlePageChange,
              }}
              locale={{ emptyText: 'No orders found' }}
              style={tableStyle}
            />
          )}
        </Card>
      </div>
    </div>
  );
};

export default BuyerOrdersPage;