import { useState, useMemo, useEffect, useCallback } from 'react';
import { Layout, Breadcrumb, Typography, Button, Tabs, Table, Modal, Form, Input, Switch, message, Tag } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, ArrowRightOutlined } from '@ant-design/icons';
import { request } from '../api/client';
import { useNavigate } from 'react-router-dom';

interface CfgtruckpurposeResponse {
  cfg_truck_purpose_id: number;
  code: string;
  label: string;
  description: string | null;
  is_active: boolean;
  submenu_id: number;
  id: string;
  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 SystemsettingsResponse {
  submenu_id: number;
  setting_key: string | null;
  setting_value: string | null;
  description: string | null;
  is_active: boolean;
  id: number;
  created_at: string;
  updated_at: string;
}

export default function ConfigurationPage() {
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();
  const [purposeForm] = Form.useForm();
  const [statusForm] = Form.useForm();
  const [settingForm] = Form.useForm();

  const [activeTab, setActiveTab] = useState<string>('truck_purposes');
  const [truckPurposes, setTruckPurposes] = useState<CfgtruckpurposeResponse[]>([]);
  const [asnStatuses, setAsnStatuses] = useState<CfgasnstatusResponse[]>([]);
  const [systemSettings, setSystemSettings] = useState<SystemsettingsResponse[]>([]);
  const [purposeModalVisible, setPurposeModalVisible] = useState<boolean>(false);
  const [statusModalVisible, setStatusModalVisible] = useState<boolean>(false);
  const [settingModalVisible, setSettingModalVisible] = useState<boolean>(false);
  const [editingPurpose, setEditingPurpose] = useState<CfgtruckpurposeResponse | null>(null);
  const [editingStatus, setEditingStatus] = useState<CfgasnstatusResponse | null>(null);
  const [editingSetting, setEditingSetting] = useState<SystemsettingsResponse | null>(null);
  const [loading, setLoading] = useState<boolean>(false);

  const fetchTruckPurposes = useCallback(async () => {
    try {
      const result = await request<CfgtruckpurposeResponse[]>({
        method: 'GET',
        path: '/configuration/truck-purposes',
        query: { limit: 50, offset: 0 }
      });
      setTruckPurposes(result.data);
    } catch (error) {
      messageApi.error('Failed to load truck purposes');
    }
  }, [messageApi]);

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

  const fetchSystemSettings = useCallback(async () => {
    try {
      const result = await request<SystemsettingsResponse[]>({
        method: 'GET',
        path: '/configuration/system-settings',
        query: { limit: 50, offset: 0 }
      });
      setSystemSettings(result.data);
    } catch (error) {
      messageApi.error('Failed to load system settings');
    }
  }, [messageApi]);

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

  const onTabChange = useCallback((key: string) => {
    setActiveTab(key);
  }, []);

  const openPurposeModal = useCallback(() => {
    setEditingPurpose(null);
    purposeForm.resetFields();
    setPurposeModalVisible(true);
  }, [purposeForm]);

  const openEditPurposeModal = useCallback((record: CfgtruckpurposeResponse) => {
    setEditingPurpose(record);
    purposeForm.setFieldsValue(record);
    setPurposeModalVisible(true);
  }, [purposeForm]);

  const closePurposeModal = useCallback(() => {
    setPurposeModalVisible(false);
    setEditingPurpose(null);
    purposeForm.resetFields();
  }, [purposeForm]);

  const openStatusModal = useCallback(() => {
    setEditingStatus(null);
    statusForm.resetFields();
    setStatusModalVisible(true);
  }, [statusForm]);

  const openEditStatusModal = useCallback((record: CfgasnstatusResponse) => {
    setEditingStatus(record);
    statusForm.setFieldsValue(record);
    setStatusModalVisible(true);
  }, [statusForm]);

  const closeStatusModal = useCallback(() => {
    setStatusModalVisible(false);
    setEditingStatus(null);
    statusForm.resetFields();
  }, [statusForm]);

  const openSettingModal = useCallback(() => {
    setEditingSetting(null);
    settingForm.resetFields();
    setSettingModalVisible(true);
  }, [settingForm]);

  const openEditSettingModal = useCallback((record: SystemsettingsResponse) => {
    setEditingSetting(record);
    settingForm.setFieldsValue(record);
    setSettingModalVisible(true);
  }, [settingForm]);

  const closeSettingModal = useCallback(() => {
    setSettingModalVisible(false);
    setEditingSetting(null);
    settingForm.resetFields();
  }, [settingForm]);

  const submitPurpose = useCallback(async () => {
    try {
      const formValues = await purposeForm.validateFields();
      setLoading(true);

      if (editingPurpose) {
        await request<CfgtruckpurposeResponse>({
          method: 'PUT',
          path: '/configuration/truck-purposes/{entity_id}',
          pathParams: { entity_id: editingPurpose.id },
          body: {
            code: formValues.code,
            label: formValues.label,
            description: formValues.description,
            is_active: formValues.is_active
          }
        });
        messageApi.success('Truck purpose updated successfully');
      } else {
        await request<CfgtruckpurposeResponse>({
          method: 'POST',
          path: '/configuration/truck-purposes',
          body: {
            cfg_truck_purpose_id: formValues.cfg_truck_purpose_id,
            code: formValues.code,
            label: formValues.label,
            description: formValues.description,
            is_active: formValues.is_active !== undefined ? formValues.is_active : true,
            submenu_id: 1
          }
        });
        messageApi.success('Truck purpose saved successfully');
      }

      closePurposeModal();
      await fetchTruckPurposes();
    } catch (error) {
      messageApi.error(editingPurpose ? 'Failed to update truck purpose' : 'Failed to save truck purpose');
    } finally {
      setLoading(false);
    }
  }, [purposeForm, editingPurpose, messageApi, closePurposeModal, fetchTruckPurposes]);

  const deletePurpose = useCallback(async (record: CfgtruckpurposeResponse) => {
    Modal.confirm({
      title: 'Confirm Delete',
      content: 'Are you sure you want to delete this truck purpose?',
      onOk: async () => {
        try {
          setLoading(true);
          await request({
            method: 'DELETE',
            path: '/configuration/truck-purposes/{entity_id}',
            pathParams: { entity_id: record.id }
          });
          messageApi.success('Truck purpose deleted');
          await fetchTruckPurposes();
        } catch (error) {
          messageApi.error('Failed to delete truck purpose');
        } finally {
          setLoading(false);
        }
      }
    });
  }, [messageApi, fetchTruckPurposes]);

  const submitStatus = useCallback(async () => {
    try {
      const formValues = await statusForm.validateFields();
      setLoading(true);

      if (editingStatus) {
        await request<CfgasnstatusResponse>({
          method: 'PUT',
          path: '/configuration/asn-statuses/{entity_id}',
          pathParams: { entity_id: editingStatus.id },
          body: {
            code: formValues.code,
            label: formValues.label,
            description: formValues.description,
            is_active: formValues.is_active
          }
        });
        messageApi.success('ASN status updated successfully');
      } else {
        await request<CfgasnstatusResponse>({
          method: 'POST',
          path: '/configuration/asn-statuses',
          body: {
            cfg_asn_status_id: formValues.cfg_asn_status_id,
            code: formValues.code,
            label: formValues.label,
            description: formValues.description,
            is_active: formValues.is_active !== undefined ? formValues.is_active : true,
            submenu_id: 1
          }
        });
        messageApi.success('ASN status saved successfully');
      }

      closeStatusModal();
      await fetchAsnStatuses();
    } catch (error) {
      messageApi.error(editingStatus ? 'Failed to update ASN status' : 'Failed to save ASN status');
    } finally {
      setLoading(false);
    }
  }, [statusForm, editingStatus, messageApi, closeStatusModal, fetchAsnStatuses]);

  const deleteStatus = useCallback(async (record: CfgasnstatusResponse) => {
    Modal.confirm({
      title: 'Confirm Delete',
      content: 'Are you sure you want to delete this ASN status?',
      onOk: async () => {
        try {
          setLoading(true);
          await request({
            method: 'DELETE',
            path: '/configuration/asn-statuses/{entity_id}',
            pathParams: { entity_id: record.id }
          });
          messageApi.success('ASN status deleted');
          await fetchAsnStatuses();
        } catch (error) {
          messageApi.error('Failed to delete ASN status');
        } finally {
          setLoading(false);
        }
      }
    });
  }, [messageApi, fetchAsnStatuses]);

  const submitSetting = useCallback(async () => {
    try {
      const formValues = await settingForm.validateFields();
      setLoading(true);

      if (editingSetting) {
        await request<SystemsettingsResponse>({
          method: 'PUT',
          path: '/configuration/system-settings/{entity_id}',
          pathParams: { entity_id: editingSetting.id },
          body: {
            setting_key: formValues.setting_key,
            setting_value: formValues.setting_value,
            description: formValues.description,
            is_active: formValues.is_active
          }
        });
        messageApi.success('System setting updated successfully');
      } else {
        await request<SystemsettingsResponse>({
          method: 'POST',
          path: '/configuration/system-settings',
          body: {
            submenu_id: 1,
            setting_key: formValues.setting_key,
            setting_value: formValues.setting_value,
            description: formValues.description,
            is_active: true
          }
        });
        messageApi.success('System setting saved successfully');
      }

      closeSettingModal();
      await fetchSystemSettings();
    } catch (error) {
      messageApi.error(editingSetting ? 'Failed to update system setting' : 'Failed to save system setting');
    } finally {
      setLoading(false);
    }
  }, [settingForm, editingSetting, messageApi, closeSettingModal, fetchSystemSettings]);

  const deleteSetting = useCallback(async (record: SystemsettingsResponse) => {
    Modal.confirm({
      title: 'Confirm Delete',
      content: 'Are you sure you want to delete this system setting?',
      onOk: async () => {
        try {
          setLoading(true);
          await request({
            method: 'DELETE',
            path: '/configuration/system-settings/{entity_id}',
            pathParams: { entity_id: record.id }
          });
          messageApi.success('System setting deleted');
          await fetchSystemSettings();
        } catch (error) {
          messageApi.error('Failed to delete system setting');
        } finally {
          setLoading(false);
        }
      }
    });
  }, [messageApi, fetchSystemSettings]);

  const purposeColumns = useMemo(() => [
    {
      title: 'Entity ID',
      dataIndex: 'id',
      key: 'id'
    },
    {
      title: 'Name',
      dataIndex: 'label',
      key: 'label'
    },
    {
      title: 'Code',
      dataIndex: 'code',
      key: 'code'
    },
    {
      title: 'Description',
      dataIndex: 'description',
      key: 'description'
    },
    {
      title: 'Active',
      dataIndex: 'is_active',
      key: 'is_active',
      render: (isActive: boolean) => (
        <Tag color={isActive ? 'green' : 'red'}>{isActive ? 'Active' : 'Inactive'}</Tag>
      )
    },
    {
      title: 'Actions',
      key: 'actions',
      render: (_: unknown, record: CfgtruckpurposeResponse) => (
        <div style={{ display: 'flex', gap: '8px' }}>
          <Button
            type="link"
            icon={<EditOutlined />}
            onClick={() => openEditPurposeModal(record)}
          >
            Edit
          </Button>
          <Button
            type="link"
            danger
            icon={<DeleteOutlined />}
            onClick={() => deletePurpose(record)}
          >
            Delete
          </Button>
        </div>
      )
    }
  ], [openEditPurposeModal, deletePurpose]);

  const statusColumns = useMemo(() => [
    {
      title: 'Entity ID',
      dataIndex: 'id',
      key: 'id'
    },
    {
      title: 'Name',
      dataIndex: 'label',
      key: 'label'
    },
    {
      title: 'Code',
      dataIndex: 'code',
      key: 'code'
    },
    {
      title: 'Description',
      dataIndex: 'description',
      key: 'description'
    },
    {
      title: 'Active',
      dataIndex: 'is_active',
      key: 'is_active',
      render: (isActive: boolean) => (
        <Tag color={isActive ? 'green' : 'red'}>{isActive ? 'Active' : 'Inactive'}</Tag>
      )
    },
    {
      title: 'Actions',
      key: 'actions',
      render: (_: unknown, record: CfgasnstatusResponse) => (
        <div style={{ display: 'flex', gap: '8px' }}>
          <Button
            type="link"
            icon={<EditOutlined />}
            onClick={() => openEditStatusModal(record)}
          >
            Edit
          </Button>
          <Button
            type="link"
            danger
            icon={<DeleteOutlined />}
            onClick={() => deleteStatus(record)}
          >
            Delete
          </Button>
        </div>
      )
    }
  ], [openEditStatusModal, deleteStatus]);

  const settingColumns = useMemo(() => [
    {
      title: 'Entity ID',
      dataIndex: 'id',
      key: 'id'
    },
    {
      title: 'Key',
      dataIndex: 'setting_key',
      key: 'setting_key'
    },
    {
      title: 'Value',
      dataIndex: 'setting_value',
      key: 'setting_value'
    },
    {
      title: 'Description',
      dataIndex: 'description',
      key: 'description'
    },
    {
      title: 'Active',
      dataIndex: 'is_active',
      key: 'is_active',
      render: (isActive: boolean) => (
        <Tag color={isActive ? 'green' : 'red'}>{isActive ? 'Active' : 'Inactive'}</Tag>
      )
    },
    {
      title: 'Actions',
      key: 'actions',
      render: (_: unknown, record: SystemsettingsResponse) => (
        <div style={{ display: 'flex', gap: '8px' }}>
          <Button
            type="link"
            icon={<EditOutlined />}
            onClick={() => openEditSettingModal(record)}
          >
            Edit
          </Button>
          <Button
            type="link"
            danger
            icon={<DeleteOutlined />}
            onClick={() => deleteSetting(record)}
          >
            Delete
          </Button>
        </div>
      )
    }
  ], [openEditSettingModal, deleteSetting]);

  const tabItems = useMemo(() => [
    {
      key: 'truck_purposes',
      label: 'Truck Purposes',
      children: (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
            <Typography.Title level={4} style={{ margin: 0 }}>Truck Purposes</Typography.Title>
            <Button type="primary" icon={<PlusOutlined />} onClick={openPurposeModal}>
              Add Purpose
            </Button>
          </div>
          <Table
            dataSource={truckPurposes}
            columns={purposeColumns}
            rowKey="id"
            pagination={{ pageSize: 10 }}
            bordered
            size="middle"
            loading={loading}
          />
        </div>
      )
    },
    {
      key: 'asn_statuses',
      label: 'ASN Statuses',
      children: (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
            <Typography.Title level={4} style={{ margin: 0 }}>ASN Statuses</Typography.Title>
            <Button type="primary" icon={<PlusOutlined />} onClick={openStatusModal}>
              Add Status
            </Button>
          </div>
          <Table
            dataSource={asnStatuses}
            columns={statusColumns}
            rowKey="id"
            pagination={{ pageSize: 10 }}
            bordered
            size="middle"
            loading={loading}
          />
        </div>
      )
    },
    {
      key: 'system_settings',
      label: 'System Settings',
      children: (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
            <Typography.Title level={4} style={{ margin: 0 }}>System Settings</Typography.Title>
            <Button type="primary" icon={<PlusOutlined />} onClick={openSettingModal}>
              Add Setting
            </Button>
          </div>
          <Table
            dataSource={systemSettings}
            columns={settingColumns}
            rowKey="id"
            pagination={{ pageSize: 10 }}
            bordered
            size="middle"
            loading={loading}
          />
        </div>
      )
    }
  ], [truckPurposes, asnStatuses, systemSettings, purposeColumns, statusColumns, settingColumns, loading, openPurposeModal, openStatusModal, openSettingModal]);

  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: '/' },
              { title: 'System Configuration' }
            ]}
          />
          <Typography.Title level={2} style={{ marginBottom: '8px' }}>
            System Configuration
          </Typography.Title>
          <Typography.Text type="secondary">
            Manage truck purposes, ASN statuses, and system settings
          </Typography.Text>
          <Button type="link" icon={<ArrowRightOutlined />} onClick={() => navigate('/pallet-configs')}>
            Pallet Configurations
          </Button>
        </div>
        <Tabs
          activeKey={activeTab}
          onChange={onTabChange}
          type="card"
          items={tabItems}
        />
      </Layout>

      <Modal
        title={editingPurpose ? 'Edit Truck Purpose' : 'Add Truck Purpose'}
        open={purposeModalVisible}
        onOk={submitPurpose}
        onCancel={closePurposeModal}
        okText="Save"
        cancelText="Cancel"
        destroyOnClose
        confirmLoading={loading}
      >
        <Form form={purposeForm} layout="vertical">
          <Form.Item
            name="label"
            label="Name"
            rules={[{ required: true, message: 'Name is required' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="code"
            label="Code"
            rules={[{ required: true, message: 'Code is required' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item name="description" label="Description">
            <Input.TextArea />
          </Form.Item>
          <Form.Item name="is_active" label="Active" valuePropName="checked" initialValue={true}>
            <Switch />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title={editingStatus ? 'Edit ASN Status' : 'Add ASN Status'}
        open={statusModalVisible}
        onOk={submitStatus}
        onCancel={closeStatusModal}
        okText="Save"
        cancelText="Cancel"
        destroyOnClose
        confirmLoading={loading}
      >
        <Form form={statusForm} layout="vertical">
          <Form.Item
            name="label"
            label="Name"
            rules={[{ required: true, message: 'Name is required' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="code"
            label="Code"
            rules={[{ required: true, message: 'Code is required' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item name="description" label="Description">
            <Input.TextArea />
          </Form.Item>
          <Form.Item name="is_active" label="Active" valuePropName="checked" initialValue={true}>
            <Switch />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title={editingSetting ? 'Edit System Setting' : 'Add System Setting'}
        open={settingModalVisible}
        onOk={submitSetting}
        onCancel={closeSettingModal}
        okText="Save"
        cancelText="Cancel"
        destroyOnClose
        confirmLoading={loading}
      >
        <Form form={settingForm} layout="vertical">
          <Form.Item
            name="setting_key"
            label="Key"
            rules={[{ required: true, message: 'Key is required' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="setting_value"
            label="Value"
            rules={[{ required: true, message: 'Value is required' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item name="description" label="Description">
            <Input.TextArea />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}