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

interface MenuResponse {
  id: string;
  menu_id?: number;
  menu_name?: string;
  sequence_number?: number;
  description?: string | null;
  created_at: string;
  updated_at: string;
}

interface SubmenuResponse {
  id: string;
  submenu_id?: number;
  submenu_name?: string;
  menu_id?: number;
  sequence_number?: number;
  description?: string | null;
  created_at: string;
  updated_at: string;
}

interface MenuDetailResponse extends MenuResponse {
  submenus?: SubmenuResponse[];
}

interface SubmenuDetailResponse extends SubmenuResponse {}

export default function NavigationManagementPage() {
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();

  const [menus, setMenus] = useState<MenuResponse[]>([]);
  const [submenus, setSubmenus] = useState<SubmenuResponse[]>([]);
  const [menusLoading, setMenusLoading] = useState<boolean>(false);
  const [submenusLoading, setSubmenusLoading] = useState<boolean>(false);
  const [createMenuModalVisible, setCreateMenuModalVisible] = useState<boolean>(false);
  const [createSubmenuModalVisible, setCreateSubmenuModalVisible] = useState<boolean>(false);
  const [menuDetailModalVisible, setMenuDetailModalVisible] = useState<boolean>(false);
  const [submenuDetailModalVisible, setSubmenuDetailModalVisible] = useState<boolean>(false);
  const [selectedMenuId, setSelectedMenuId] = useState<string | null>(null);
  const [selectedSubmenuId, setSelectedSubmenuId] = useState<string | null>(null);
  const [selectedMenuDetail, setSelectedMenuDetail] = useState<MenuDetailResponse | null>(null);
  const [selectedSubmenuDetail, setSelectedSubmenuDetail] = useState<SubmenuDetailResponse | null>(null);
  const [editMenuModalVisible, setEditMenuModalVisible] = useState<boolean>(false);
  const [editSubmenuModalVisible, setEditSubmenuModalVisible] = useState<boolean>(false);

  const [createMenuForm] = Form.useForm();
  const [editMenuForm] = Form.useForm();
  const [createSubmenuForm] = Form.useForm();
  const [editSubmenuForm] = Form.useForm();

  const menuDropdownOptions = useMemo(() => {
    return menus.map(m => ({ label: m.menu_name || '', value: m.menu_id }));
  }, [menus]);

  const totalMenus = useMemo(() => menus.length, [menus]);
  const totalSubmenus = useMemo(() => submenus.length, [submenus]);

  const fetchMenus = useCallback(async () => {
    setMenusLoading(true);
    try {
      const result = await request<MenuResponse[]>({
        method: 'GET',
        path: '/navigation/menus',
        query: { limit: 100, offset: 0 }
      });
      setMenus(result.data);
    } catch (error) {
      messageApi.error('Failed to load menus');
    } finally {
      setMenusLoading(false);
    }
  }, [messageApi]);

  const fetchSubmenus = useCallback(async () => {
    setSubmenusLoading(true);
    try {
      const result = await request<SubmenuResponse[]>({
        method: 'GET',
        path: '/navigation/submenus',
        query: { limit: 100, offset: 0 }
      });
      setSubmenus(result.data);
    } catch (error) {
      messageApi.error('Failed to load submenus');
    } finally {
      setSubmenusLoading(false);
    }
  }, [messageApi]);

  useEffect(() => {
    fetchMenus();
    fetchSubmenus();
  }, [fetchMenus, fetchSubmenus]);

  const openCreateMenuModal = useCallback(() => {
    setCreateMenuModalVisible(true);
  }, []);

  const closeCreateMenuModal = useCallback(() => {
    setCreateMenuModalVisible(false);
    createMenuForm.resetFields();
  }, [createMenuForm]);

  const openCreateSubmenuModal = useCallback(() => {
    setCreateSubmenuModalVisible(true);
  }, []);

  const closeCreateSubmenuModal = useCallback(() => {
    setCreateSubmenuModalVisible(false);
    createSubmenuForm.resetFields();
  }, [createSubmenuForm]);

  const openMenuDetailModal = useCallback(() => {
    setMenuDetailModalVisible(true);
  }, []);

  const closeMenuDetailModal = useCallback(() => {
    setMenuDetailModalVisible(false);
    setSelectedMenuDetail(null);
  }, []);

  const openSubmenuDetailModal = useCallback(() => {
    setSubmenuDetailModalVisible(true);
  }, []);

  const closeSubmenuDetailModal = useCallback(() => {
    setSubmenuDetailModalVisible(false);
    setSelectedSubmenuDetail(null);
  }, []);

  const openEditMenuModal = useCallback(() => {
    setEditMenuModalVisible(true);
  }, []);

  const closeEditMenuModal = useCallback(() => {
    setEditMenuModalVisible(false);
    editMenuForm.resetFields();
  }, [editMenuForm]);

  const openEditSubmenuModal = useCallback(() => {
    setEditSubmenuModalVisible(true);
  }, []);

  const closeEditSubmenuModal = useCallback(() => {
    setEditSubmenuModalVisible(false);
    editSubmenuForm.resetFields();
  }, [editSubmenuForm]);

  const createMenu = useCallback(async () => {
    try {
      const formValues = await createMenuForm.validateFields();
      await request<MenuResponse>({
        method: 'POST',
        path: '/navigation/menus',
        body: {
          menu_id: formValues.menu_id,
          menu_name: formValues.menu_name,
          sequence_number: formValues.sequence_number,
          description: formValues.description
        }
      });
      messageApi.success('Menu created successfully');
      setCreateMenuModalVisible(false);
      createMenuForm.resetFields();
      fetchMenus();
    } catch (error) {
      messageApi.error('Failed to create menu');
    }
  }, [createMenuForm, messageApi, fetchMenus]);

  const updateMenu = useCallback(async () => {
    try {
      const formValues = await editMenuForm.validateFields();
      await request<MenuResponse>({
        method: 'PUT',
        path: '/navigation/menus/{menu_id}',
        pathParams: { menu_id: selectedMenuId! },
        body: {
          menu_name: formValues.menu_name,
          sequence_number: formValues.sequence_number,
          description: formValues.description
        }
      });
      messageApi.success('Menu updated successfully');
      setEditMenuModalVisible(false);
      editMenuForm.resetFields();
      fetchMenus();
    } catch (error) {
      messageApi.error('Failed to update menu');
    }
  }, [editMenuForm, selectedMenuId, messageApi, fetchMenus]);

  const deleteMenu = useCallback((menuId: string) => {
    Modal.confirm({
      title: 'Confirm Delete',
      content: 'Are you sure you want to delete this menu?',
      onOk: async () => {
        try {
          await request({
            method: 'DELETE',
            path: '/navigation/menus/{menu_id}',
            pathParams: { menu_id: menuId }
          });
          messageApi.success('Menu deleted successfully');
          fetchMenus();
        } catch (error) {
          messageApi.error('Failed to delete menu');
        }
      }
    });
  }, [messageApi, fetchMenus]);

  const viewMenuDetails = useCallback(async (menuId: string) => {
    setSelectedMenuId(menuId);
    try {
      const result = await request<MenuDetailResponse>({
        method: 'GET',
        path: '/navigation/menus/{menu_id}/details',
        pathParams: { menu_id: menuId }
      });
      setSelectedMenuDetail(result.data);
      setMenuDetailModalVisible(true);
    } catch (error) {
      messageApi.error('Failed to load menu details');
    }
  }, [messageApi]);

  const editMenuHandler = useCallback((record: MenuResponse) => {
    setSelectedMenuId(record.id);
    editMenuForm.setFieldsValue({
      menu_name: record.menu_name,
      sequence_number: record.sequence_number,
      description: record.description
    });
    openEditMenuModal();
  }, [editMenuForm, openEditMenuModal]);

  const createSubmenu = useCallback(async () => {
    try {
      const formValues = await createSubmenuForm.validateFields();
      await request<SubmenuResponse>({
        method: 'POST',
        path: '/navigation/submenus',
        body: {
          submenu_id: formValues.submenu_id,
          submenu_name: formValues.submenu_name,
          menu_id: formValues.menu_id,
          sequence_number: formValues.sequence_number,
          description: formValues.description
        }
      });
      messageApi.success('Submenu created successfully');
      setCreateSubmenuModalVisible(false);
      createSubmenuForm.resetFields();
      fetchSubmenus();
    } catch (error) {
      messageApi.error('Failed to create submenu');
    }
  }, [createSubmenuForm, messageApi, fetchSubmenus]);

  const updateSubmenu = useCallback(async () => {
    try {
      const formValues = await editSubmenuForm.validateFields();
      await request<SubmenuResponse>({
        method: 'PUT',
        path: '/navigation/submenus/{submenu_id}',
        pathParams: { submenu_id: selectedSubmenuId! },
        body: {
          submenu_name: formValues.submenu_name,
          menu_id: formValues.menu_id,
          sequence_number: formValues.sequence_number,
          description: formValues.description
        }
      });
      messageApi.success('Submenu updated successfully');
      setEditSubmenuModalVisible(false);
      editSubmenuForm.resetFields();
      fetchSubmenus();
    } catch (error) {
      messageApi.error('Failed to update submenu');
    }
  }, [editSubmenuForm, selectedSubmenuId, messageApi, fetchSubmenus]);

  const deleteSubmenu = useCallback((submenuId: string) => {
    Modal.confirm({
      title: 'Confirm Delete',
      content: 'Are you sure you want to delete this submenu?',
      onOk: async () => {
        try {
          await request({
            method: 'DELETE',
            path: '/navigation/submenus/{submenu_id}',
            pathParams: { submenu_id: submenuId }
          });
          messageApi.success('Submenu deleted successfully');
          fetchSubmenus();
        } catch (error) {
          messageApi.error('Failed to delete submenu');
        }
      }
    });
  }, [messageApi, fetchSubmenus]);

  const viewSubmenuDetails = useCallback(async (submenuId: string) => {
    setSelectedSubmenuId(submenuId);
    try {
      const result = await request<SubmenuDetailResponse>({
        method: 'GET',
        path: '/navigation/submenus/{submenu_id}/details',
        pathParams: { submenu_id: submenuId }
      });
      setSelectedSubmenuDetail(result.data);
      setSubmenuDetailModalVisible(true);
    } catch (error) {
      messageApi.error('Failed to load submenu details');
    }
  }, [messageApi]);

  const editSubmenuHandler = useCallback((record: SubmenuResponse) => {
    setSelectedSubmenuId(record.id);
    editSubmenuForm.setFieldsValue({
      submenu_name: record.submenu_name,
      menu_id: record.menu_id,
      sequence_number: record.sequence_number,
      description: record.description
    });
    openEditSubmenuModal();
  }, [editSubmenuForm, openEditSubmenuModal]);

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

  const navigateToConfiguration = useCallback(() => {
    navigate('/configuration');
  }, [navigate]);

  const menuColumns = useMemo(() => [
    {
      title: 'Menu ID',
      dataIndex: 'menu_id',
      key: 'menu_id',
      width: 100
    },
    {
      title: 'Label',
      dataIndex: 'menu_name',
      key: 'menu_name'
    },
    {
      title: 'Sort Order',
      dataIndex: 'sequence_number',
      key: 'sequence_number',
      width: 120
    },
    {
      title: 'Description',
      dataIndex: 'description',
      key: 'description'
    },
    {
      title: 'Created At',
      dataIndex: 'created_at',
      key: 'created_at',
      width: 180
    },
    {
      title: 'Actions',
      key: 'actions',
      width: 200,
      render: (_: unknown, record: MenuResponse) => (
        <>
          <Button type="link" size="small" onClick={() => viewMenuDetails(record.id)}>
            View
          </Button>
          <Button type="link" size="small" onClick={() => editMenuHandler(record)}>
            Edit
          </Button>
          <Button type="link" danger size="small" onClick={() => deleteMenu(record.id)}>
            Delete
          </Button>
        </>
      )
    }
  ], [viewMenuDetails, editMenuHandler, deleteMenu]);

  const submenuColumns = useMemo(() => [
    {
      title: 'Submenu ID',
      dataIndex: 'submenu_id',
      key: 'submenu_id',
      width: 120
    },
    {
      title: 'Label',
      dataIndex: 'submenu_name',
      key: 'submenu_name'
    },
    {
      title: 'Parent Menu',
      dataIndex: 'menu_id',
      key: 'menu_id',
      width: 140
    },
    {
      title: 'Sort Order',
      dataIndex: 'sequence_number',
      key: 'sequence_number',
      width: 120
    },
    {
      title: 'Description',
      dataIndex: 'description',
      key: 'description'
    },
    {
      title: 'Created At',
      dataIndex: 'created_at',
      key: 'created_at',
      width: 180
    },
    {
      title: 'Actions',
      key: 'actions',
      width: 200,
      render: (_: unknown, record: SubmenuResponse) => (
        <>
          <Button type="link" size="small" onClick={() => viewSubmenuDetails(record.id)}>
            View
          </Button>
          <Button type="link" size="small" onClick={() => editSubmenuHandler(record)}>
            Edit
          </Button>
          <Button type="link" danger size="small" onClick={() => deleteSubmenu(record.id)}>
            Delete
          </Button>
        </>
      )
    }
  ], [viewSubmenuDetails, editSubmenuHandler, deleteSubmenu]);

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

  const breadcrumbItems = [
    {
      title: <a onClick={navigateToDashboard}>Dashboard</a>
    },
    {
      title: <a onClick={navigateToConfiguration}>Configuration</a>
    },
    {
      title: 'Navigation Management'
    }
  ];

  return (
    <div style={rootStyle}>
      {contextHolder}
      <div style={{ marginBottom: '24px' }}>
        <Breadcrumb items={breadcrumbItems} style={{ marginBottom: '16px' }} />
        <Typography.Title level={2} style={{ marginBottom: '8px' }}>
          Navigation Management
        </Typography.Title>
        <Typography.Text type="secondary">
          Manage application menus and submenus. Drag rows to reorder sort positions.
        </Typography.Text>
      </div>

      <Card title="Menus" style={{ marginBottom: '24px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
          <Typography.Text type="secondary">{totalMenus} menus</Typography.Text>
          <Button type="primary" icon={<PlusOutlined />} onClick={openCreateMenuModal}>
            Create Menu
          </Button>
        </div>
        <Table
          rowKey="id"
          dataSource={menus}
          columns={menuColumns}
          loading={menusLoading}
          pagination={{ pageSize: 20 }}
        />
      </Card>

      <Card title="Submenus" style={{ marginBottom: '24px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
          <Typography.Text type="secondary">{totalSubmenus} submenus</Typography.Text>
          <Button type="primary" icon={<PlusOutlined />} onClick={openCreateSubmenuModal}>
            Create Submenu
          </Button>
        </div>
        <Table
          rowKey="id"
          dataSource={submenus}
          columns={submenuColumns}
          loading={submenusLoading}
          pagination={{ pageSize: 20 }}
        />
      </Card>

      <Modal
        title="Create Menu"
        open={createMenuModalVisible}
        onOk={createMenu}
        onCancel={closeCreateMenuModal}
        okText="Create"
        cancelText="Cancel"
        destroyOnClose
      >
        <Form form={createMenuForm} layout="vertical">
          <Form.Item name="menu_id" label="Menu ID" rules={[{ required: true, message: 'Menu ID is required' }]}>
            <InputNumber placeholder="Enter menu ID" min={1} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item name="menu_name" label="Label" rules={[{ required: true, message: 'Label is required' }]}>
            <Input placeholder="Enter menu label" />
          </Form.Item>
          <Form.Item name="sequence_number" label="Sort Order" rules={[{ required: true, message: 'Sort order is required' }]}>
            <InputNumber placeholder="Enter sort order" min={1} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item name="description" label="Description">
            <Input.TextArea placeholder="Enter description" rows={3} />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="Edit Menu"
        open={editMenuModalVisible}
        onOk={updateMenu}
        onCancel={closeEditMenuModal}
        okText="Save"
        cancelText="Cancel"
        destroyOnClose
      >
        <Form form={editMenuForm} layout="vertical">
          <Form.Item name="menu_name" label="Label" rules={[{ required: true, message: 'Label is required' }]}>
            <Input placeholder="Enter menu label" />
          </Form.Item>
          <Form.Item name="sequence_number" label="Sort Order" rules={[{ required: true, message: 'Sort order is required' }]}>
            <InputNumber placeholder="Enter sort order" min={1} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item name="description" label="Description">
            <Input.TextArea placeholder="Enter description" rows={3} />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="Create Submenu"
        open={createSubmenuModalVisible}
        onOk={createSubmenu}
        onCancel={closeCreateSubmenuModal}
        okText="Create"
        cancelText="Cancel"
        destroyOnClose
      >
        <Form form={createSubmenuForm} layout="vertical">
          <Form.Item name="submenu_id" label="Submenu ID" rules={[{ required: true, message: 'Submenu ID is required' }]}>
            <InputNumber placeholder="Enter submenu ID" min={1} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item name="submenu_name" label="Label" rules={[{ required: true, message: 'Label is required' }]}>
            <Input placeholder="Enter submenu label" />
          </Form.Item>
          <Form.Item name="menu_id" label="Parent Menu" rules={[{ required: true, message: 'Parent menu is required' }]}>
            <Select placeholder="Select parent menu" allowClear options={menuDropdownOptions} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item name="sequence_number" label="Sort Order" rules={[{ required: true, message: 'Sort order is required' }]}>
            <InputNumber placeholder="Enter sort order" min={1} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item name="description" label="Description">
            <Input.TextArea placeholder="Enter description" rows={3} />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="Edit Submenu"
        open={editSubmenuModalVisible}
        onOk={updateSubmenu}
        onCancel={closeEditSubmenuModal}
        okText="Save"
        cancelText="Cancel"
        destroyOnClose
      >
        <Form form={editSubmenuForm} layout="vertical">
          <Form.Item name="submenu_name" label="Label" rules={[{ required: true, message: 'Label is required' }]}>
            <Input placeholder="Enter submenu label" />
          </Form.Item>
          <Form.Item name="menu_id" label="Parent Menu" rules={[{ required: true, message: 'Parent menu is required' }]}>
            <Select placeholder="Select parent menu" allowClear options={menuDropdownOptions} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item name="sequence_number" label="Sort Order" rules={[{ required: true, message: 'Sort order is required' }]}>
            <InputNumber placeholder="Enter sort order" min={1} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item name="description" label="Description">
            <Input.TextArea placeholder="Enter description" rows={3} />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="Menu Details"
        open={menuDetailModalVisible}
        onCancel={closeMenuDetailModal}
        footer={null}
        width={640}
      >
        {selectedMenuDetail && (
          <>
            <Descriptions bordered column={2}>
              <Descriptions.Item label="Menu ID">{selectedMenuDetail.menu_id}</Descriptions.Item>
              <Descriptions.Item label="Label">{selectedMenuDetail.menu_name}</Descriptions.Item>
              <Descriptions.Item label="Sort Order">{selectedMenuDetail.sequence_number}</Descriptions.Item>
              <Descriptions.Item label="Description">{selectedMenuDetail.description}</Descriptions.Item>
              <Descriptions.Item label="Created At">{selectedMenuDetail.created_at}</Descriptions.Item>
              <Descriptions.Item label="Updated At">{selectedMenuDetail.updated_at}</Descriptions.Item>
            </Descriptions>
            <Typography.Title level={5} style={{ marginTop: '16px' }}>
              Child Submenus
            </Typography.Title>
            <Table
              rowKey="id"
              dataSource={selectedMenuDetail.submenus || []}
              size="small"
              pagination={false}
              columns={[
                { title: 'Submenu ID', dataIndex: 'submenu_id', key: 'submenu_id' },
                { title: 'Label', dataIndex: 'submenu_name', key: 'submenu_name' },
                { title: 'Sort Order', dataIndex: 'sequence_number', key: 'sequence_number' }
              ]}
            />
          </>
        )}
      </Modal>

      <Modal
        title="Submenu Details"
        open={submenuDetailModalVisible}
        onCancel={closeSubmenuDetailModal}
        footer={null}
        width={560}
      >
        {selectedSubmenuDetail && (
          <Descriptions bordered column={2}>
            <Descriptions.Item label="Submenu ID">{selectedSubmenuDetail.submenu_id}</Descriptions.Item>
            <Descriptions.Item label="Label">{selectedSubmenuDetail.submenu_name}</Descriptions.Item>
            <Descriptions.Item label="Parent Menu ID">{selectedSubmenuDetail.menu_id}</Descriptions.Item>
            <Descriptions.Item label="Sort Order">{selectedSubmenuDetail.sequence_number}</Descriptions.Item>
            <Descriptions.Item label="Description">{selectedSubmenuDetail.description}</Descriptions.Item>
            <Descriptions.Item label="Created At">{selectedSubmenuDetail.created_at}</Descriptions.Item>
            <Descriptions.Item label="Updated At">{selectedSubmenuDetail.updated_at}</Descriptions.Item>
          </Descriptions>
        )}
      </Modal>
    </div>
  );
}