import { useState, useMemo, useEffect, useCallback } from 'react';
import { Table, Button, Input, Select, DatePicker, Card, Row, Col, Modal, Form, InputNumber, Typography, message, Space } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { request } from '../api/client';
import { useNavigate } from 'react-router-dom';
import { useAppContext } from '../store/AppContext';

interface AsnResponse {
  submenu_id: number;
  inbound_shipment_no: string;
  total_skus: number;
  notes: string | null;
  metadata: string | null;
  id: string;
  version: number;
  deleted_at: string | null;
  created_at: string;
  updated_at: string;
}

interface CfgasnstatusResponse {
  cfg_asn_status_id: number;
  code: string;
  label: string;
  description: string | null;
  is_active: boolean;
  submenu_id: number;
  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 AsnListPage() {
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();
  const { currentUser } = useAppContext();

  const [asns, setAsns] = useState<AsnResponse[]>([]);
  const [asnStatuses, setAsnStatuses] = useState<CfgasnstatusResponse[]>([]);
  const [vendors, setVendors] = useState<VendorResponse[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [searchText, setSearchText] = useState<string>('');
  const [filterStatus, setFilterStatus] = useState<string>('');
  const [filterVendor, setFilterVendor] = useState<string>('');
  const [filterDateRange, setFilterDateRange] = useState<[string, string] | []>([]);
  const [pagination, setPagination] = useState<PaginationState>({
    current: 1,
    pageSize: 20,
    total: 0,
  });
  const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
  const [selectedAsnId, setSelectedAsnId] = useState<string>('');
  const [submitting, setSubmitting] = useState<boolean>(false);

  const [form] = Form.useForm();

  const offset = useMemo(() => {
    return (pagination.current - 1) * pagination.pageSize;
  }, [pagination.current, pagination.pageSize]);

  const fetchAsns = useCallback(async () => {
    setLoading(true);
    try {
      const result = await request<AsnResponse[]>({
        method: 'GET',
        path: '/asns/',
        query: {
          limit: pagination.pageSize,
          offset,
          search: searchText,
        },
      });
      setAsns(result.data);
      setPagination((prev) => ({ ...prev, total: result.data.length }));
    } catch (error) {
      messageApi.error('Failed to load ASNs');
    } finally {
      setLoading(false);
    }
  }, [pagination.pageSize, offset, searchText, messageApi]);

  const fetchAsnStatuses = useCallback(async () => {
    try {
      const result = await request<CfgasnstatusResponse[]>({
        method: 'GET',
        path: '/configuration/asn-statuses',
        query: {
          limit: 100,
          offset: 0,
          is_active: true,
        },
      });
      setAsnStatuses(result.data);
    } catch (error) {
      messageApi.error('Failed to load ASN statuses');
    }
  }, [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]);

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

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

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

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

  const handleStatusFilterChange = (value: string) => {
    setFilterStatus(value);
  };

  const handleVendorFilterChange = (value: string) => {
    setFilterVendor(value);
  };

  const handleDateRangeChange = (dates: [string, string] | null) => {
    setFilterDateRange(dates || []);
  };

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

  const openCreateModal = () => {
    setCreateModalVisible(true);
  };

  const closeCreateModal = () => {
    setCreateModalVisible(false);
    form.resetFields();
  };

  const handleCreateAsn = async () => {
    try {
      const values = await form.validateFields();
      setSubmitting(true);
      const result = await request<AsnResponse>({
        method: 'POST',
        path: '/asns/',
        body: {
          submenu_id: values.submenu_id,
          inbound_shipment_no: values.inbound_shipment_no,
          total_skus: values.total_skus,
          notes: values.notes,
        },
      });
      messageApi.success('ASN created successfully');
      setCreateModalVisible(false);
      form.resetFields();
      fetchAsns();
    } catch (error) {
      messageApi.error('Failed to create ASN');
    } finally {
      setSubmitting(false);
    }
  };

  const handleDeleteAsn = (asnId: string) => {
    Modal.confirm({
      title: 'Delete ASN',
      content: 'Are you sure you want to delete this ASN?',
      okText: 'Delete',
      okType: 'danger',
      cancelText: 'Cancel',
      onOk: async () => {
        try {
          await request({
            method: 'DELETE',
            path: '/asns/{asn_id}',
            pathParams: { asn_id: asnId },
          });
          messageApi.success('ASN deleted successfully');
          fetchAsns();
        } catch (error) {
          messageApi.error('Failed to delete ASN');
        }
      },
    });
  };

  const handleCloseAsn = (asnId: string) => {
    Modal.confirm({
      title: 'Close ASN',
      content: 'Are you sure you want to close this ASN?',
      okText: 'Close',
      cancelText: 'Cancel',
      onOk: async () => {
        try {
          await request<AsnResponse>({
            method: 'POST',
            path: '/asns/{asn_id}/close',
            pathParams: { asn_id: asnId },
            query: {
              changed_by: currentUser?.id || '',
            },
          });
          messageApi.success('ASN closed successfully');
          fetchAsns();
        } catch (error) {
          messageApi.error('Failed to close ASN');
        }
      },
    });
  };

  const handleViewDetails = (asnId: string) => {
    navigate(`/asns/${asnId}`);
  };

  const statusOptions = useMemo(() => {
    return asnStatuses.map((status) => ({
      label: status.label,
      value: status.code,
    }));
  }, [asnStatuses]);

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

  const columns = useMemo(() => [
    {
      title: 'ASN ID',
      dataIndex: 'id',
      key: 'id',
      sorter: true,
    },
    {
      title: 'Inbound Shipment No',
      dataIndex: 'inbound_shipment_no',
      key: 'inbound_shipment_no',
    },
    {
      title: 'Total SKUs',
      dataIndex: 'total_skus',
      key: 'total_skus',
      sorter: true,
    },
    {
      title: 'Notes',
      dataIndex: 'notes',
      key: 'notes',
      ellipsis: true,
    },
    {
      title: 'Created Date',
      dataIndex: 'created_at',
      key: 'created_at',
      sorter: true,
      render: (text: string) => new Date(text).toLocaleDateString(),
    },
    {
      title: 'Actions',
      key: 'actions',
      fixed: 'right' as const,
      render: (_: unknown, record: AsnResponse) => (
        <Space size="small">
          <Button type="link" size="small" onClick={() => handleViewDetails(record.id)}>
            View Details
          </Button>
          <Button type="link" size="small" onClick={() => handleViewDetails(record.id)}>
            Edit
          </Button>
          <Button type="link" size="small" onClick={() => handleCloseAsn(record.id)}>
            Close ASN
          </Button>
          <Button type="link" size="small" danger onClick={() => handleDeleteAsn(record.id)}>
            Delete
          </Button>
        </Space>
      ),
    },
  ], []);

  return (
    <div style={{ minHeight: '100vh', height: '100%', width: '100%', display: 'flex', flexDirection: 'column', padding: '24px', background: '#f5f5f5' }}>
      {contextHolder}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
        <Typography.Title level={2} style={{ margin: 0 }}>
          ASN Management
        </Typography.Title>
        <Button type="primary" icon={<PlusOutlined />} size="large" onClick={openCreateModal}>
          Create ASN
        </Button>
      </div>

      <Card bordered={false} style={{ marginBottom: '16px' }}>
        <Row gutter={[16, 16]} align="middle">
          <Col xs={24} sm={12} md={6}>
            <Input.Search
              placeholder="Search by ASN ID or vendor..."
              allowClear
              value={searchText}
              onChange={handleSearchChange}
              style={{ width: '100%' }}
            />
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Select
              placeholder="Filter by status"
              allowClear
              value={filterStatus || undefined}
              onChange={handleStatusFilterChange}
              options={statusOptions}
              style={{ width: '100%' }}
            />
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Select
              placeholder="Filter by vendor"
              allowClear
              showSearch
              value={filterVendor || undefined}
              onChange={handleVendorFilterChange}
              options={vendorOptions}
              style={{ width: '100%' }}
            />
          </Col>
          <Col xs={24} sm={12} md={6}>
            <DatePicker.RangePicker
              placeholder={['Start Date', 'End Date']}
              onChange={handleDateRangeChange as any}
              style={{ width: '100%' }}
            />
          </Col>
        </Row>
      </Card>

      <Card bordered={false}>
        <Table
          columns={columns}
          dataSource={asns}
          rowKey="id"
          loading={loading}
          pagination={{
            current: pagination.current,
            pageSize: pagination.pageSize,
            total: pagination.total,
            onChange: handlePaginationChange,
          }}
          scroll={{ x: 1000 }}
        />
      </Card>

      <Modal
        title="Create New ASN"
        open={createModalVisible}
        onOk={handleCreateAsn}
        onCancel={closeCreateModal}
        okText="Create"
        cancelText="Cancel"
        destroyOnClose
        confirmLoading={submitting}
      >
        <Form form={form} layout="vertical" requiredMark>
          <Form.Item
            label="Vendor"
            name="submenu_id"
            rules={[{ required: true, message: 'Please select a vendor' }]}
          >
            <Select
              placeholder="Select vendor"
              showSearch
              options={vendorOptions}
              style={{ width: '100%' }}
            />
          </Form.Item>
          <Form.Item
            label="Inbound Shipment No"
            name="inbound_shipment_no"
            rules={[{ required: true, message: 'Inbound shipment number is required' }]}
          >
            <Input placeholder="Enter inbound shipment number" />
          </Form.Item>
          <Form.Item
            label="Total SKUs"
            name="total_skus"
            rules={[{ required: true, message: 'Total SKUs is required' }]}
          >
            <InputNumber placeholder="Enter total SKUs" min={0} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item label="Notes" name="notes">
            <Input.TextArea placeholder="Enter notes (optional)" rows={4} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}