import { useState, useMemo, useEffect, useCallback } from 'react';
import { Layout, Breadcrumb, Typography, Row, Col, Input, Button, Card, Table, Modal, Form, InputNumber, Space, message } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { request } from '../api/client';
import { useNavigate } from 'react-router-dom';
import { ROUTES } from '../router/routes.constant';

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 VendorhistoryResponse {
  submenu_id: number;
  vendor_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 PaginationState {
  current: number;
  pageSize: number;
  total: number;
}

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

  const [vendors, setVendors] = useState<VendorResponse[]>([]);
  const [vendorsLoading, setVendorsLoading] = useState<boolean>(false);
  const [searchText, setSearchText] = useState<string>('');
  const [modalVisible, setModalVisible] = useState<boolean>(false);
  const [editingVendor, setEditingVendor] = useState<VendorResponse | null>(null);
  const [selectedVendorId, setSelectedVendorId] = useState<string | null>(null);
  const [pagination, setPagination] = useState<PaginationState>({
    current: 1,
    pageSize: 20,
    total: 0,
  });
  const [vendorHistory, setVendorHistory] = useState<VendorhistoryResponse[]>([]);
  const [historyLoading, setHistoryLoading] = useState<boolean>(false);
  const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);

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

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

  const fetchVendorHistory = useCallback(async (vendorId: string) => {
    setHistoryLoading(true);
    try {
      const result = await request<VendorhistoryResponse[]>({
        method: 'GET',
        path: '/master-data/vendor-histories',
        query: {
          vendor_id: vendorId,
          limit: 50,
          offset: 0,
        },
      });
      setVendorHistory(result.data);
    } catch (error) {
      messageApi.error('Failed to load vendor history');
    } finally {
      setHistoryLoading(false);
    }
  }, [messageApi]);

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

  const onPageChange = useCallback((page: number, pageSize: number) => {
    setPagination(prev => ({ ...prev, current: page, pageSize }));
  }, []);

  const openAddModal = useCallback(() => {
    setModalVisible(true);
    setEditingVendor(null);
    form.resetFields();
  }, [form]);

  const openEditModal = useCallback((record: VendorResponse) => {
    setModalVisible(true);
    setEditingVendor(record);
    form.setFieldsValue(record);
  }, [form]);

  const closeModal = useCallback(() => {
    setModalVisible(false);
    setEditingVendor(null);
    form.resetFields();
  }, [form]);

  const submitVendor = useCallback(async () => {
    try {
      const values = await form.validateFields();
      
      if (editingVendor) {
        await request<VendorResponse>({
          method: 'PUT',
          path: '/master-data/vendors/{vendor_id}',
          pathParams: { vendor_id: editingVendor.id },
          body: {
            submenu_id: values.submenu_id,
            vendor_number: values.vendor_number,
            notes: values.notes,
            metadata: values.metadata,
          },
        });
        messageApi.success('Vendor updated successfully');
      } else {
        await request<VendorResponse>({
          method: 'POST',
          path: '/master-data/vendors',
          body: {
            submenu_id: values.submenu_id,
            vendor_number: values.vendor_number,
            notes: values.notes,
            metadata: values.metadata,
          },
        });
        messageApi.success('Vendor created successfully');
      }
      
      setModalVisible(false);
      setEditingVendor(null);
      form.resetFields();
      fetchVendors();
    } catch (error) {
      messageApi.error(editingVendor ? 'Failed to update vendor' : 'Failed to create vendor');
    }
  }, [editingVendor, form, messageApi, fetchVendors]);

  const deleteVendor = useCallback((vendorId: string) => {
    Modal.confirm({
      title: 'Delete Vendor',
      content: 'Are you sure you want to delete this vendor?',
      okText: 'Delete',
      okType: 'danger',
      cancelText: 'Cancel',
      onOk: async () => {
        try {
          await request({
            method: 'DELETE',
            path: '/master-data/vendors/{vendor_id}',
            pathParams: { vendor_id: vendorId },
          });
          messageApi.success('Vendor deleted successfully');
          fetchVendors();
        } catch (error) {
          messageApi.error('Failed to delete vendor');
        }
      },
    });
  }, [messageApi, fetchVendors]);

  const navigateToDashboard = useCallback(() => {
    navigate(ROUTES.DASHBOARD || '/');
  }, [navigate]);

  const navigateToPurchaseOrders = useCallback(() => {
    navigate(ROUTES.ORDERS || '/orders');
  }, [navigate]);

  const onExpand = useCallback((expanded: boolean, record: VendorResponse) => {
    if (expanded) {
      setSelectedVendorId(record.id);
      setExpandedRowKeys([record.id]);
      fetchVendorHistory(record.id);
    } else {
      setExpandedRowKeys([]);
      setSelectedVendorId(null);
      setVendorHistory([]);
    }
  }, [fetchVendorHistory]);

  const columns = useMemo(() => [
    {
      title: 'Vendor ID',
      dataIndex: 'id',
      key: 'id',
      width: 100,
    },
    {
      title: 'Vendor Number',
      dataIndex: 'vendor_number',
      key: 'vendor_number',
    },
    {
      title: 'Notes',
      dataIndex: 'notes',
      key: 'notes',
      ellipsis: true,
    },
    {
      title: 'Created At',
      dataIndex: 'created_at',
      key: 'created_at',
      render: (text: string) => new Date(text).toLocaleString(),
    },
    {
      title: 'Updated At',
      dataIndex: 'updated_at',
      key: 'updated_at',
      render: (text: string) => new Date(text).toLocaleString(),
    },
    {
      title: 'Actions',
      key: 'actions',
      width: 150,
      render: (_: unknown, record: VendorResponse) => (
        <Space size="small">
          <Button
            type="link"
            icon={<EditOutlined />}
            size="small"
            onClick={() => openEditModal(record)}
          >
            Edit
          </Button>
          <Button
            type="link"
            danger
            icon={<DeleteOutlined />}
            size="small"
            onClick={() => deleteVendor(record.id)}
          >
            Delete
          </Button>
        </Space>
      ),
    },
  ], [openEditModal, deleteVendor]);

  const historyColumns = useMemo(() => [
    {
      title: 'Change Date',
      dataIndex: 'change_date',
      key: 'change_date',
      render: (text: string) => new Date(text).toLocaleString(),
    },
    {
      title: 'Change 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 expandedRowRender = useCallback(() => {
    return (
      <div style={{ padding: '16px' }}>
        <Table
          rowKey="id"
          loading={historyLoading}
          dataSource={vendorHistory}
          columns={historyColumns}
          size="small"
          pagination={false}
        />
      </div>
    );
  }, [historyLoading, vendorHistory, historyColumns]);

  return (
    <div style={{ minHeight: '100vh', height: '100%', width: '100%', display: 'flex', flexDirection: 'column' }}>
      {contextHolder}
      <Layout style={{ minHeight: '100vh', width: '100%', padding: '24px', background: '#f5f5f5' }}>
        <div style={{ marginBottom: '24px' }}>
          <Breadcrumb
            style={{ marginBottom: '16px' }}
            items={[
              { title: 'Dashboard', href: '/', onClick: (e) => { e.preventDefault(); navigateToDashboard(); } },
              { title: 'Vendors' },
            ]}
          />
          <Typography.Title level={2} style={{ marginBottom: '0' }}>
            Vendors
          </Typography.Title>
        </div>

        <Row gutter={16} justify="space-between" align="middle" style={{ marginBottom: '16px' }}>
          <Col xs={24} sm={12} md={8}>
            <Input.Search
              placeholder="Search by vendor number..."
              allowClear
              value={searchText}
              onChange={onSearchChange}
              style={{ width: '100%' }}
            />
          </Col>
          <Col xs={24} sm={12} md={4} style={{ textAlign: 'right' }}>
            <Space>
              <Button type="link" onClick={navigateToPurchaseOrders}>
                Purchase Orders
              </Button>
              <Button type="primary" icon={<PlusOutlined />} onClick={openAddModal}>
                Add Vendor
              </Button>
            </Space>
          </Col>
        </Row>

        <Card bordered={false}>
          <Table
            rowKey="id"
            loading={vendorsLoading}
            dataSource={vendors}
            columns={columns}
            expandable={{
              expandedRowRender,
              expandedRowKeys,
              onExpand,
            }}
            pagination={{
              current: pagination.current,
              pageSize: pagination.pageSize,
              total: pagination.total,
              onChange: onPageChange,
            }}
          />
        </Card>

        <Modal
          title={editingVendor ? 'Edit Vendor' : 'Add Vendor'}
          open={modalVisible}
          onCancel={closeModal}
          width={640}
          destroyOnClose
          footer={null}
        >
          <Form
            form={form}
            layout="vertical"
            onFinish={submitVendor}
            initialValues={editingVendor || undefined}
          >
            <Form.Item
              label="Submenu ID"
              name="submenu_id"
              rules={[{ required: true, message: 'Submenu ID is required' }]}
            >
              <InputNumber placeholder="Enter submenu ID" style={{ width: '100%' }} />
            </Form.Item>

            <Form.Item
              label="Vendor Number"
              name="vendor_number"
              rules={[{ required: true, message: 'Vendor number is required' }]}
            >
              <Input placeholder="Enter vendor number" />
            </Form.Item>

            <Form.Item label="Notes" name="notes">
              <Input.TextArea placeholder="Enter notes" rows={3} />
            </Form.Item>

            <Form.Item label="Metadata" name="metadata">
              <Input.TextArea placeholder="Enter metadata (JSON)" rows={2} />
            </Form.Item>

            <Row gutter={12} justify="end" style={{ marginTop: '16px' }}>
              <Col>
                <Button onClick={closeModal}>Cancel</Button>
              </Col>
              <Col>
                <Button type="primary" htmlType="submit">
                  Save
                </Button>
              </Col>
            </Row>
          </Form>
        </Modal>
      </Layout>
    </div>
  );
}