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

interface UserpreferencesResponse {
  submenu_id: number;
  user_id: number | null;
  preference_key: string | null;
  preference_value: string | null;
  notes: string | null;
  metadata: Record<string, unknown> | null;
  id: number;
  version: number;
  deleted_at: string | null;
  created_at: string;
  updated_at: string;
}

interface UsersResponse {
  submenu_id: number;
  username: string | null;
  email: string | null;
  notes: string | null;
  metadata: Record<string, unknown> | null;
  id: number;
  version: number;
  deleted_at: string | null;
  created_at: string;
  updated_at: string;
}

interface UserpreferencesDetailResponse extends UserpreferencesResponse {
  user: UsersResponse | null;
}

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

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

  const [preferences, setPreferences] = useState<UserpreferencesResponse[]>([]);
  const [users, setUsers] = useState<UsersResponse[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [addModalVisible, setAddModalVisible] = useState<boolean>(false);
  const [editModalVisible, setEditModalVisible] = useState<boolean>(false);
  const [detailModalVisible, setDetailModalVisible] = useState<boolean>(false);
  const [selectedPreference, setSelectedPreference] = useState<UserpreferencesResponse | null>(null);
  const [preferenceDetail, setPreferenceDetail] = useState<UserpreferencesDetailResponse | null>(null);
  const [searchText, setSearchText] = useState<string>('');
  const [filterCategory, setFilterCategory] = useState<string>('');
  const [pagination, setPagination] = useState<PaginationState>({
    current: 1,
    pageSize: 20,
    total: 0,
  });

  const filteredPreferences = useMemo(() => {
    return preferences.filter(p => 
      (!searchText || 
        (p.preference_key && p.preference_key.toLowerCase().includes(searchText.toLowerCase())) || 
        (p.user_id && String(p.user_id).includes(searchText))
      ) && 
      (!filterCategory || (p.notes && p.notes === filterCategory))
    );
  }, [preferences, searchText, filterCategory]);

  const fetchPreferences = useCallback(async () => {
    setLoading(true);
    try {
      const result = await request<UserpreferencesResponse[]>({
        method: 'GET',
        path: '/user-management/user-preferences',
        query: { limit: 20, offset: 0 },
      });
      setPreferences(result.data);
      setPagination(prev => ({ ...prev, total: result.data.length }));
    } catch (error) {
      messageApi.error('Failed to load preferences');
    } finally {
      setLoading(false);
    }
  }, [messageApi]);

  const fetchUsers = useCallback(async () => {
    try {
      const result = await request<UsersResponse[]>({
        method: 'GET',
        path: '/user-management/users',
        query: { limit: 100, offset: 0 },
      });
      setUsers(result.data);
    } catch (error) {
      messageApi.error('Failed to load users');
    }
  }, [messageApi]);

  useEffect(() => {
    fetchPreferences();
    fetchUsers();
  }, [fetchPreferences, fetchUsers]);

  const openAddModal = useCallback(() => {
    setAddModalVisible(true);
  }, []);

  const closeAddModal = useCallback(() => {
    setAddModalVisible(false);
    addForm.resetFields();
  }, [addForm]);

  const openEditModal = useCallback((record: UserpreferencesResponse) => {
    setEditModalVisible(true);
    setSelectedPreference(record);
    editForm.setFieldsValue({
      user_id: record.user_id,
      preference_key: record.preference_key,
      preference_value: record.preference_value,
      category: record.notes,
    });
  }, [editForm]);

  const closeEditModal = useCallback(() => {
    setEditModalVisible(false);
    setSelectedPreference(null);
    editForm.resetFields();
  }, [editForm]);

  const openDetailModal = useCallback(async (record: UserpreferencesResponse) => {
    setSelectedPreference(record);
    setDetailModalVisible(true);
    try {
      const result = await request<UserpreferencesDetailResponse>({
        method: 'GET',
        path: '/user-management/user-preferences/{preference_id}/details',
        pathParams: { preference_id: record.id },
      });
      setPreferenceDetail(result.data);
    } catch (error) {
      messageApi.error('Failed to load preference details');
    }
  }, [messageApi]);

  const closeDetailModal = useCallback(() => {
    setDetailModalVisible(false);
    setPreferenceDetail(null);
  }, []);

  const handleCreatePreference = useCallback(async () => {
    try {
      const formValues = await addForm.validateFields();
      await request<UserpreferencesResponse>({
        method: 'POST',
        path: '/user-management/user-preferences',
        body: {
          submenu_id: 1,
          user_id: formValues.user_id,
          preference_key: formValues.preference_key,
          preference_value: formValues.preference_value,
          notes: formValues.category,
        },
      });
      messageApi.success('Preference created successfully');
      setAddModalVisible(false);
      addForm.resetFields();
      fetchPreferences();
    } catch (error) {
      messageApi.error('Failed to create preference');
    }
  }, [addForm, messageApi, fetchPreferences]);

  const handleUpdatePreference = useCallback(async () => {
    if (!selectedPreference) return;
    try {
      const formValues = await editForm.validateFields();
      await request<UserpreferencesResponse>({
        method: 'PUT',
        path: '/user-management/user-preferences/{preference_id}',
        pathParams: { preference_id: selectedPreference.id },
        body: {
          submenu_id: 1,
          user_id: formValues.user_id,
          preference_key: formValues.preference_key,
          preference_value: formValues.preference_value,
          notes: formValues.category,
        },
      });
      messageApi.success('Preference updated successfully');
      setEditModalVisible(false);
      setSelectedPreference(null);
      editForm.resetFields();
      fetchPreferences();
    } catch (error) {
      messageApi.error('Failed to update preference');
    }
  }, [selectedPreference, editForm, messageApi, fetchPreferences]);

  const handleDeletePreference = useCallback((record: UserpreferencesResponse) => {
    Modal.confirm({
      title: 'Delete Preference',
      content: 'Are you sure you want to delete this preference?',
      okText: 'Delete',
      okType: 'danger',
      cancelText: 'Cancel',
      onOk: async () => {
        try {
          await request({
            method: 'DELETE',
            path: '/user-management/user-preferences/{preference_id}',
            pathParams: { preference_id: record.id },
          });
          messageApi.success('Preference deleted successfully');
          fetchPreferences();
        } catch (error) {
          messageApi.error('Failed to delete preference');
        }
      },
    });
  }, [messageApi, fetchPreferences]);

  const navigateToUserManagement = useCallback(() => {
    navigate('/user-management');
  }, [navigate]);

  const columns = useMemo(() => [
    {
      title: 'Preference ID',
      dataIndex: 'id',
      key: 'id',
      width: 120,
    },
    {
      title: 'User',
      dataIndex: 'user_id',
      key: 'user_id',
      width: 120,
    },
    {
      title: 'Key',
      dataIndex: 'preference_key',
      key: 'preference_key',
      width: 180,
    },
    {
      title: 'Value',
      dataIndex: 'preference_value',
      key: 'preference_value',
      width: 200,
    },
    {
      title: 'Category',
      dataIndex: 'notes',
      key: 'notes',
      width: 130,
    },
    {
      title: 'Actions',
      key: 'actions',
      width: 200,
      render: (_: unknown, record: UserpreferencesResponse) => (
        <Space size="small">
          <Button
            type="link"
            icon={<EyeOutlined />}
            onClick={() => openDetailModal(record)}
          >
            View
          </Button>
          <Button
            type="link"
            icon={<EditOutlined />}
            onClick={() => openEditModal(record)}
          >
            Edit
          </Button>
          <Button
            type="link"
            danger
            icon={<DeleteOutlined />}
            onClick={() => handleDeletePreference(record)}
          >
            Delete
          </Button>
        </Space>
      ),
    },
  ], [openDetailModal, openEditModal, handleDeletePreference]);

  const userOptions = useMemo(() => 
    users.map(user => ({
      label: user.username || user.email || `User ${user.id}`,
      value: user.id,
    })),
    [users]
  );

  const categoryOptions = [
    { label: 'Display', value: 'display' },
    { label: 'Notification', value: 'notification' },
    { label: 'System', value: 'system' },
    { label: 'Theme', value: 'theme' },
  ];

  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: '24px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <Button type="text" icon={<ArrowLeftOutlined />} onClick={navigateToUserManagement}>
            Back
          </Button>
          <Typography.Title level={3} style={{ margin: 0 }}>
            User Preferences
          </Typography.Title>
        </div>
        <Button type="primary" icon={<PlusOutlined />} onClick={openAddModal}>
          Add Preference
        </Button>
      </div>

      <div style={{ display: 'flex', gap: '16px', marginBottom: '16px', flexWrap: 'wrap' }}>
        <Input.Search
          placeholder="Search by user or key..."
          allowClear
          value={searchText}
          onChange={(e) => setSearchText(e.target.value)}
          style={{ width: '300px' }}
        />
        <Select
          placeholder="Filter by category"
          allowClear
          value={filterCategory || undefined}
          onChange={(value) => setFilterCategory(value || '')}
          options={categoryOptions}
          style={{ width: '200px' }}
        />
      </div>

      <Table
        rowKey="id"
        dataSource={filteredPreferences}
        columns={columns}
        loading={loading}
        pagination={{
          pageSize: pagination.pageSize,
          current: pagination.current,
          total: pagination.total,
          showSizeChanger: true,
          showTotal: (total) => `Total ${total} items`,
        }}
      />

      <Modal
        title="Add Preference"
        open={addModalVisible}
        onOk={handleCreatePreference}
        onCancel={closeAddModal}
        okText="Create"
        cancelText="Cancel"
        destroyOnClose
      >
        <Form form={addForm} layout="vertical">
          <Form.Item
            name="user_id"
            label="User"
            rules={[{ required: true, message: 'Please select a user' }]}
          >
            <Select
              placeholder="Select user"
              showSearch
              optionFilterProp="label"
              options={userOptions}
            />
          </Form.Item>
          <Form.Item
            name="preference_key"
            label="Preference Key"
            rules={[{ required: true, message: 'Please enter preference key' }]}
          >
            <Input placeholder="Enter preference key" />
          </Form.Item>
          <Form.Item
            name="preference_value"
            label="Value"
            rules={[{ required: true, message: 'Please enter preference value' }]}
          >
            <Input placeholder="Enter preference value" />
          </Form.Item>
          <Form.Item name="category" label="Category">
            <Select
              placeholder="Select category"
              allowClear
              options={categoryOptions}
            />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="Edit Preference"
        open={editModalVisible}
        onOk={handleUpdatePreference}
        onCancel={closeEditModal}
        okText="Save"
        cancelText="Cancel"
        destroyOnClose
      >
        <Form form={editForm} layout="vertical">
          <Form.Item
            name="user_id"
            label="User"
            rules={[{ required: true, message: 'Please select a user' }]}
          >
            <Select
              placeholder="Select user"
              showSearch
              optionFilterProp="label"
              options={userOptions}
            />
          </Form.Item>
          <Form.Item
            name="preference_key"
            label="Preference Key"
            rules={[{ required: true, message: 'Please enter preference key' }]}
          >
            <Input placeholder="Enter preference key" />
          </Form.Item>
          <Form.Item
            name="preference_value"
            label="Value"
            rules={[{ required: true, message: 'Please enter preference value' }]}
          >
            <Input placeholder="Enter preference value" />
          </Form.Item>
          <Form.Item name="category" label="Category">
            <Select
              placeholder="Select category"
              allowClear
              options={categoryOptions}
            />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="Preference Details"
        open={detailModalVisible}
        onCancel={closeDetailModal}
        footer={null}
        width={600}
      >
        {preferenceDetail && (
          <Descriptions bordered column={1}>
            <Descriptions.Item label="Preference ID">{preferenceDetail.id}</Descriptions.Item>
            <Descriptions.Item label="User">
              {preferenceDetail.user ? `${preferenceDetail.user.username || preferenceDetail.user.email || preferenceDetail.user.id}` : preferenceDetail.user_id}
            </Descriptions.Item>
            <Descriptions.Item label="Preference Key">{preferenceDetail.preference_key}</Descriptions.Item>
            <Descriptions.Item label="Preference Value">{preferenceDetail.preference_value}</Descriptions.Item>
            <Descriptions.Item label="Category">{preferenceDetail.notes}</Descriptions.Item>
            <Descriptions.Item label="Created At">{new Date(preferenceDetail.created_at).toLocaleString()}</Descriptions.Item>
            <Descriptions.Item label="Updated At">{new Date(preferenceDetail.updated_at).toLocaleString()}</Descriptions.Item>
            <Descriptions.Item label="Version">{preferenceDetail.version}</Descriptions.Item>
          </Descriptions>
        )}
      </Modal>
    </div>
  );
}