import { useState, useMemo, useEffect, useCallback, CSSProperties } from 'react';
import { Table, Button, Input, Select, Card, Space, Modal, Form, Typography, Breadcrumb, DatePicker, message } from 'antd';
import { PlusOutlined, TeamOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { request } from '../api/client';
import { useNavigate } from 'react-router-dom';

interface OrderResponse {
  submenu_id: number;
  po_number: string;
  supplier_vendor: string;
  notes: string | null;
  metadata: string | null;
  id: string;
  version: number;
  deleted_at: string | null;
  created_at: string;
  updated_at: string;
}

interface OrderhistoryResponse {
  submenu_id: number;
  order_id: string | null;
  change_date: string;
  change_description: string | null;
  changed_by: number | null;
  change_type: string;
  id: string;
  created_at: string;
  updated_at: string;
}

interface VendorResponse {
  submenu_id: number;
  vendor_number: string;
  notes: string | null;
  metadata: string | null;
  id: string;
  version: number;
  deleted_at: string | null;
  created_at: string;
  updated_at: string;
}

interface PaginationState {
  current: number;
  pageSize: number;
  total: number;
}

export default function PurchaseOrdersPage() {
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();
  const [form] = Form.useForm();

  const [orders, setOrders] = useState<OrderResponse[]>([]);
  const [ordersLoading, setOrdersLoading] = useState<boolean>(false);
  const [searchText, setSearchText] = useState<string>('');
  const [filterVendor, setFilterVendor] = useState<string>('');
  const [filterStatus, setFilterStatus] = useState<string>('');
  const [filterDateRange, setFilterDateRange] = useState<[string, string] | []>([]);
  const [pagination, setPagination] = useState<PaginationState>({
    current: 1,
    pageSize: 20,
    total: 0,
  });
  const [modalVisible, setModalVisible] = useState<boolean>(false);
  const [modalMode, setModalMode] = useState<'create' | 'edit'>('create');
  const [selectedOrder, setSelectedOrder] = useState<OrderResponse | null>(null);
  const [deleteConfirmVisible, setDeleteConfirmVisible] = useState<boolean>(false);
  const [orderToDelete, setOrderToDelete] = useState<OrderResponse | null>(null);
  const [orderHistory, setOrderHistory] = useState<OrderhistoryResponse[]>([]);
  const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);
  const [vendors, setVendors] = useState<VendorResponse[]>([]);

  const totalOrders = useMemo(() => pagination.total, [pagination.total]);

  const fetchOrders = useCallback(async () => {
    setOrdersLoading(true);
    try {
      const result = await request<OrderResponse[]>({
        method: 'GET',
        path: '/master-data/orders',
        query: {
          limit: pagination.pageSize,
          offset: (pagination.current - 1) * pagination.pageSize,
          search: searchText,
        },
      });
      setOrders(result.data);
      setPagination((prev) => ({ ...prev, total: result.data.length }));
    } catch (error) {
      messageApi.error('Failed to load orders');
    } finally {
      setOrdersLoading(false);
    }
  }, [pagination.pageSize, pagination.current, searchText, messageApi]);

  const fetchVendors = useCallback(async () => {
    try {
      const result = await request<VendorResponse[]>({
        method: 'GET',
        path: '/master-data/vendors',
        query: {
          limit: 100,
          offset: 0,
        },
      });
      setVendors(result.data);
    } catch (error) {
      messageApi.error('Failed to load vendors');
    }
  }, [messageApi]);

  const fetchOrderHistory = useCallback(async (orderId: string) => {
    try {
      const result = await request<OrderhistoryResponse[]>({
        method: 'GET',
        path: '/master-data/order-histories',
        query: {
          order_id: orderId,
          limit: 50,
          offset: 0,
        },
      });
      setOrderHistory(result.data);
    } catch (error) {
      messageApi.error('Failed to load order history');
    }
  }, [messageApi]);

  useEffect(() => {
    fetchOrders();
  }, [fetchOrders]);

  useEffect(() => {
    fetchVendors();
  }, [fetchVendors]);

  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchText(e.target.value);
    setPagination((prev) => ({ ...prev, current: 1 }));
  };

  const handleVendorFilterChange = (value: string) => {
    setFilterVendor(value);
    setPagination((prev) => ({ ...prev, current: 1 }));
  };

  const handleStatusFilterChange = (value: string) => {
    setFilterStatus(value);
    setPagination((prev) => ({ ...prev, current: 1 }));
  };

  const handleDateRangeChange = (dates: [string, string] | null) => {
    setFilterDateRange(dates || []);
    setPagination((prev) => ({ ...prev, current: 1 }));
  };

  const handlePaginationChange = (page: number, pageSize: number) => {
    setPagination((prev) => ({ ...prev, current: page, pageSize }));
  };

  const handleExpandRow = (expanded: boolean, record: OrderResponse) => {
    if (expanded) {
      setExpandedRowKeys([record.id]);
      fetchOrderHistory(record.id);
    } else {
      setExpandedRowKeys([]);
      setOrderHistory([]);
    }
  };

  const openCreateModal = () => {
    setModalVisible(true);
    setModalMode('create');
    setSelectedOrder(null);
    form.resetFields();
  };

  const openEditModal = (record: OrderResponse) => {
    setModalVisible(true);
    setModalMode('edit');
    setSelectedOrder(record);
    form.setFieldsValue(record);
  };

  const closeModal = () => {
    setModalVisible(false);
    setSelectedOrder(null);
    form.resetFields();
  };

  const openDeleteConfirm = (record: OrderResponse) => {
    setDeleteConfirmVisible(true);
    setOrderToDelete(record);
  };

  const closeDeleteConfirm = () => {
    setDeleteConfirmVisible(false);
    setOrderToDelete(null);
  };

  const submitCreateOrder = async () => {
    try {
      const values = await form.validateFields();
      await request<OrderResponse>({
        method: 'POST',
        path: '/master-data/orders',
        body: {
          submenu_id: 1,
          po_number: values.po_number,
          supplier_vendor: values.supplier_vendor,
          notes: values.notes,
          metadata: values.metadata,
        },
      });
      messageApi.success('Purchase order created successfully');
      setModalVisible(false);
      form.resetFields();
      fetchOrders();
    } catch (error) {
      messageApi.error('Failed to create purchase order');
    }
  };

  const submitUpdateOrder = async () => {
    if (!selectedOrder) return;
    try {
      const values = await form.validateFields();
      await request<OrderResponse>({
        method: 'PUT',
        path: '/master-data/orders/{order_id}',
        pathParams: { order_id: selectedOrder.id },
        body: {
          submenu_id: 1,
          po_number: values.po_number,
          supplier_vendor: values.supplier_vendor,
          notes: values.notes,
          metadata: values.metadata,
        },
      });
      messageApi.success('Purchase order updated successfully');
      setModalVisible(false);
      setSelectedOrder(null);
      form.resetFields();
      fetchOrders();
    } catch (error) {
      messageApi.error('Failed to update purchase order');
    }
  };

  const confirmDeleteOrder = async () => {
    if (!orderToDelete) return;
    try {
      await request({
        method: 'DELETE',
        path: '/master-data/orders/{order_id}',
        pathParams: { order_id: orderToDelete.id },
      });
      messageApi.success('Purchase order deleted successfully');
      setDeleteConfirmVisible(false);
      setOrderToDelete(null);
      fetchOrders();
    } catch (error) {
      messageApi.error('Failed to delete purchase order');
    }
  };

  const navigateToDashboard = () => {
    navigate('/');
  };

  const navigateToVendors = () => {
    navigate('/vendors');
  };

  const columns = useMemo(
    () => [
      {
        title: 'Order ID',
        dataIndex: 'po_number',
        key: 'po_number',
        sorter: true,
      },
      {
        title: 'Vendor',
        dataIndex: 'supplier_vendor',
        key: 'supplier_vendor',
        sorter: true,
      },
      {
        title: 'Order Date',
        dataIndex: 'created_at',
        key: 'created_at',
        sorter: true,
        render: (text: string) => new Date(text).toLocaleDateString(),
      },
      {
        title: 'Updated',
        dataIndex: 'updated_at',
        key: 'updated_at',
        render: (text: string) => new Date(text).toLocaleDateString(),
      },
      {
        title: 'Notes',
        dataIndex: 'notes',
        key: 'notes',
        ellipsis: true,
      },
      {
        title: 'Actions',
        key: 'actions',
        render: (_: unknown, record: OrderResponse) => (
          <Space>
            <Button type="link" icon={<EditOutlined />} onClick={() => openEditModal(record)}>
              Edit
            </Button>
            <Button type="link" danger icon={<DeleteOutlined />} onClick={() => openDeleteConfirm(record)}>
              Delete
            </Button>
          </Space>
        ),
      },
    ],
    []
  );

  const historyColumns = useMemo(
    () => [
      {
        title: 'Date',
        dataIndex: 'change_date',
        key: 'change_date',
        render: (text: string) => new Date(text).toLocaleString(),
      },
      {
        title: 'Type',
        dataIndex: 'change_type',
        key: 'change_type',
      },
      {
        title: 'Description',
        dataIndex: 'change_description',
        key: 'change_description',
      },
      {
        title: 'Changed By',
        dataIndex: 'changed_by',
        key: 'changed_by',
      },
    ],
    []
  );

  const vendorOptions = useMemo(
    () => vendors.map((v) => ({ label: v.vendor_number, value: v.vendor_number })),
    [vendors]
  );

  const rootStyle: CSSProperties = {
    minHeight: '100vh',
    height: '100%',
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    padding: '24px',
    background: '#f5f5f5',
  };

  return (
    <div style={rootStyle}>
      {contextHolder}
      <div style={{ marginBottom: '24px' }}>
        <Breadcrumb
          style={{ marginBottom: '16px' }}
          items={[
            { title: 'Dashboard', href: '/', onClick: (e) => { e.preventDefault(); navigateToDashboard(); } },
            { title: 'Purchase Orders' },
          ]}
        />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
          <Typography.Title level={2} style={{ margin: 0 }}>
            Purchase Orders
          </Typography.Title>
          <Space>
            <Button type="default" icon={<TeamOutlined />} onClick={navigateToVendors}>
              View Vendors
            </Button>
            <Button type="primary" icon={<PlusOutlined />} onClick={openCreateModal}>
              Create Order
            </Button>
          </Space>
        </div>
      </div>

      <Card size="small" style={{ marginBottom: '16px' }}>
        <Space wrap size="middle" style={{ width: '100%' }}>
          <Input.Search
            placeholder="Search by PO Number..."
            allowClear
            style={{ width: 250 }}
            value={searchText}
            onChange={handleSearchChange}
          />
          <Select
            placeholder="Filter by Vendor"
            allowClear
            style={{ width: 200 }}
            value={filterVendor || undefined}
            onChange={handleVendorFilterChange}
            options={vendorOptions}
          />
          <Select
            placeholder="Filter by Status"
            allowClear
            style={{ width: 180 }}
            value={filterStatus || undefined}
            onChange={handleStatusFilterChange}
            options={[
              { label: 'Active', value: 'active' },
              { label: 'Completed', value: 'completed' },
              { label: 'Cancelled', value: 'cancelled' },
            ]}
          />
          <DatePicker.RangePicker
            placeholder={['Start Date', 'End Date']}
            onChange={(dates) => handleDateRangeChange(dates as [string, string] | null)}
          />
        </Space>
      </Card>

      <Card>
        <Table
          rowKey="id"
          dataSource={orders}
          columns={columns}
          loading={ordersLoading}
          pagination={{
            current: pagination.current,
            pageSize: pagination.pageSize,
            total: pagination.total,
            onChange: handlePaginationChange,
          }}
          expandable={{
            expandedRowKeys,
            onExpand: handleExpandRow,
            expandedRowRender: () => (
              <div style={{ padding: '16px', background: '#fafafa' }}>
                <Table
                  rowKey="id"
                  dataSource={orderHistory}
                  columns={historyColumns}
                  size="small"
                  pagination={false}
                />
              </div>
            ),
          }}
        />
      </Card>

      <Modal
        title={modalMode === 'create' ? 'Create Purchase Order' : 'Edit Purchase Order'}
        open={modalVisible}
        width={720}
        destroyOnClose
        onCancel={closeModal}
        footer={null}
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={modalMode === 'create' ? submitCreateOrder : submitUpdateOrder}
        >
          <Form.Item
            name="po_number"
            label="PO Number"
            rules={[{ required: true, message: 'PO Number is required' }]}
          >
            <Input placeholder="Enter PO Number" />
          </Form.Item>
          <Form.Item
            name="supplier_vendor"
            label="Vendor"
            rules={[{ required: true, message: 'Vendor is required' }]}
          >
            <Select placeholder="Select Vendor" showSearch options={vendorOptions} />
          </Form.Item>
          <Form.Item name="notes" label="Notes">
            <Input.TextArea placeholder="Enter notes..." rows={4} />
          </Form.Item>
          <Form.Item name="metadata" label="Metadata">
            <Input.TextArea placeholder="Additional metadata (JSON)" rows={3} />
          </Form.Item>
          <Button type="primary" htmlType="submit" block>
            Submit
          </Button>
        </Form>
      </Modal>

      <Modal
        title="Confirm Delete"
        open={deleteConfirmVisible}
        okText="Delete"
        okType="danger"
        onOk={confirmDeleteOrder}
        onCancel={closeDeleteConfirm}
      >
        <Typography.Text>
          Are you sure you want to delete this purchase order? This action cannot be undone.
        </Typography.Text>
      </Modal>
    </div>
  );
}