import { useState, useMemo, useEffect, useCallback, CSSProperties } from 'react';
import { Layout, Card, Input, Select, Table, Drawer, Modal, Button, Typography, Breadcrumb, message, Tag, Space, Descriptions } from 'antd';
import { UserOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useApi } from '@/hooks/useApi';
import { UserService } from '@/services/user';
import { ROUTES } from '@/constants/routes';
import { MESSAGES } from '@/constants/messages';
import { parseError } from '@/utils/errorHandler';
import { useAppContext } from '@/store/AppStore';
import type { ColumnsType } from 'antd/es/table';

interface UserResponse {
  id: string;
  user_id: string;
  email: string;
  first_name: string;
  last_name: string;
  date_of_birth?: string | null;
  gender?: 'MALE' | 'FEMALE' | 'OTHER' | 'PREFER_NOT_TO_SAY' | null;
  is_active: boolean;
  role: 'ANONYMOUS' | 'REGISTERED_USER' | 'ADMINISTRATOR';
  last_login_at?: string | null;
  created_at: string;
  updated_at: string;
}

interface UserDetailsResponse extends UserResponse {
  profile?: Record<string, unknown> | null;
}

const AdminUsersPage = () => {
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();
  const { currentUser } = useAppContext();

  const [users, setUsers] = useState<UserResponse[]>([]);
  const [usersLoading, setUsersLoading] = useState<boolean>(false);
  const [totalUsers, setTotalUsers] = useState<number>(0);
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [pageSize, setPageSize] = useState<number>(20);
  const [searchQuery, setSearchQuery] = useState<string>('');
  const [statusFilter, setStatusFilter] = useState<string>('all');
  const [drawerVisible, setDrawerVisible] = useState<boolean>(false);
  const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
  const [selectedUserDetails, setSelectedUserDetails] = useState<UserDetailsResponse | null>(null);
  const [deleteModalVisible, setDeleteModalVisible] = useState<boolean>(false);
  const [userToDelete, setUserToDelete] = useState<UserResponse | null>(null);
  const [actionLoading, setActionLoading] = useState<boolean>(false);

  const filteredOffset = useMemo(() => {
    return (currentPage - 1) * pageSize;
  }, [currentPage, pageSize]);

  const fetchUsers = useCallback(async () => {
    setUsersLoading(true);
    try {
      const params: Record<string, unknown> = {
        limit: pageSize,
        offset: filteredOffset,
      };
      if (statusFilter !== 'all') {
        params.is_active = statusFilter === 'true';
      }
      const response = await UserService.list(params);
      setUsers(response.data as UserResponse[]);
      setTotalUsers(response.data.length);
    } catch (e) {
      const { message: errorMessage } = parseError(e);
      messageApi.error(errorMessage || 'Failed to load users');
    } finally {
      setUsersLoading(false);
    }
  }, [pageSize, filteredOffset, statusFilter, messageApi]);

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

  const fetchUserDetails = useCallback(async (userId: string) => {
    try {
      const response = await UserService.getDetails(userId);
      setSelectedUserDetails(response.data as UserDetailsResponse);
    } catch (e) {
      const { message: errorMessage } = parseError(e);
      messageApi.error(errorMessage || 'Failed to load user details');
    }
  }, [messageApi]);

  useEffect(() => {
    if (selectedUserId && drawerVisible) {
      void fetchUserDetails(selectedUserId);
    }
  }, [selectedUserId, drawerVisible, fetchUserDetails]);

  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchQuery(e.target.value);
    setCurrentPage(1);
  };

  const handleStatusFilterChange = (value: string) => {
    setStatusFilter(value);
    setCurrentPage(1);
  };

  const handlePageChange = (page: number, newPageSize?: number) => {
    setCurrentPage(page);
    if (newPageSize && newPageSize !== pageSize) {
      setPageSize(newPageSize);
    }
  };

  const handleRowClick = (record: UserResponse) => {
    setSelectedUserId(record.user_id);
    setDrawerVisible(true);
  };

  const handleDrawerClose = () => {
    setDrawerVisible(false);
    setSelectedUserDetails(null);
  };

  const handleDeleteModalOpen = (record: UserResponse) => {
    setDeleteModalVisible(true);
    setUserToDelete(record);
  };

  const handleDeleteModalClose = () => {
    setDeleteModalVisible(false);
    setUserToDelete(null);
  };

  const handleDisableUser = async () => {
    if (!selectedUserId) return;
    
    Modal.confirm({
      title: 'Confirm Disable',
      content: 'Are you sure you want to disable this user account?',
      okText: 'Disable',
      okType: 'default',
      onOk: async () => {
        setActionLoading(true);
        try {
          await UserService.disable(selectedUserId);
          messageApi.success('User account disabled successfully');
          await fetchUsers();
          if (selectedUserId) {
            await fetchUserDetails(selectedUserId);
          }
        } catch (e) {
          const { message: errorMessage } = parseError(e);
          messageApi.error(errorMessage || 'Failed to disable user account');
        } finally {
          setActionLoading(false);
        }
      },
    });
  };

  const handleEnableUser = async () => {
    if (!selectedUserId) return;
    
    setActionLoading(true);
    try {
      await UserService.enable(selectedUserId);
      messageApi.success('User account enabled successfully');
      await fetchUsers();
      if (selectedUserId) {
        await fetchUserDetails(selectedUserId);
      }
    } catch (e) {
      const { message: errorMessage } = parseError(e);
      messageApi.error(errorMessage || 'Failed to enable user account');
    } finally {
      setActionLoading(false);
    }
  };

  const handleConfirmDeleteUser = async () => {
    if (!userToDelete) return;
    
    setActionLoading(true);
    try {
      await UserService.delete(userToDelete.user_id);
      messageApi.success('User account deleted successfully');
      setDeleteModalVisible(false);
      setUserToDelete(null);
      await fetchUsers();
    } catch (e) {
      const { message: errorMessage } = parseError(e);
      messageApi.error(errorMessage || 'Failed to delete user account');
    } finally {
      setActionLoading(false);
    }
  };

  const navigateToDashboard = () => {
    navigate(ROUTES.ADMIN_DASHBOARD || '/admin');
  };

  const navigateToCategories = () => {
    navigate(ROUTES.ADMIN_CATEGORIES || '/admin/categories');
  };

  const navigateToAuditLogs = () => {
    navigate(ROUTES.ADMIN_AUDIT_LOGS || '/admin/audit-logs');
  };

  const columns: ColumnsType<UserResponse> = useMemo(() => [
    {
      title: 'Email',
      dataIndex: 'email',
      key: 'email',
      sorter: true,
    },
    {
      title: 'Name',
      key: 'name',
      render: (_, record) => `${record.first_name} ${record.last_name}`,
    },
    {
      title: 'Registration Date',
      dataIndex: 'created_at',
      key: 'created_at',
      sorter: true,
      render: (date: string) => new Date(date).toLocaleDateString(),
    },
    {
      title: 'Last Login',
      dataIndex: 'last_login_at',
      key: 'last_login_at',
      sorter: true,
      render: (date: string | null) => date ? new Date(date).toLocaleDateString() : 'Never',
      responsive: ['lg'],
    },
    {
      title: 'Role',
      dataIndex: 'role',
      key: 'role',
      render: (role: string) => <Tag color="blue">{role}</Tag>,
    },
    {
      title: 'Status',
      dataIndex: 'is_active',
      key: 'is_active',
      render: (isActive: boolean) => (
        <Tag icon={isActive ? <CheckCircleOutlined /> : <CloseCircleOutlined />} color={isActive ? 'success' : 'default'}>
          {isActive ? 'Active' : 'Inactive'}
        </Tag>
      ),
    },
    {
      title: 'Actions',
      key: 'actions',
      render: (_, record) => (
        <Space size="small">
          <Button
            size="small"
            type="link"
            onClick={(e) => {
              e.stopPropagation();
              handleRowClick(record);
            }}
          >
            View
          </Button>
          <Button
            size="small"
            type="link"
            danger
            onClick={(e) => {
              e.stopPropagation();
              handleDeleteModalOpen(record);
            }}
          >
            Delete
          </Button>
        </Space>
      ),
    },
  ], []);

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

  const pageHeaderStyle: CSSProperties = {
    padding: '24px 24px 0 24px',
  };

  const navTabsStyle: CSSProperties = {
    display: 'flex',
    gap: '8px',
    marginBottom: '16px',
  };

  const toolbarRowStyle: CSSProperties = {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: '16px',
    flexWrap: 'wrap',
    gap: '12px',
  };

  const drawerActionsStyle: CSSProperties = {
    display: 'flex',
    gap: '8px',
    marginTop: '24px',
  };

  return (
    <div style={rootStyle}>
      {contextHolder}
      <div style={pageHeaderStyle}>
        <Breadcrumb
          style={{ marginBottom: '16px' }}
          items={[
            { title: 'Admin', href: '/admin' },
            { title: 'User Management' },
          ]}
        />
        <Typography.Title level={2} style={{ marginBottom: '0' }}>
          User Management
        </Typography.Title>
        <div style={navTabsStyle}>
          <Button type="text" onClick={navigateToDashboard}>
            Dashboard
          </Button>
          <Button type="primary">Users</Button>
          <Button type="text" onClick={navigateToCategories}>
            Categories
          </Button>
          <Button type="text" onClick={navigateToAuditLogs}>
            Audit Logs
          </Button>
        </div>
      </div>

      <Card bordered={false} style={{ margin: '24px', borderRadius: '6px' }}>
        <div style={toolbarRowStyle}>
          <Input.Search
            placeholder="Search by email or name..."
            allowClear
            style={{ width: 300 }}
            value={searchQuery}
            onChange={handleSearchChange}
          />
          <Select
            placeholder="Filter by status"
            style={{ width: 180 }}
            allowClear
            value={statusFilter}
            onChange={handleStatusFilterChange}
            options={[
              { label: 'All Users', value: 'all' },
              { label: 'Active', value: 'true' },
              { label: 'Inactive', value: 'false' },
            ]}
          />
        </div>

        <Table
          rowKey="user_id"
          dataSource={users}
          columns={columns}
          loading={usersLoading}
          pagination={{
            current: currentPage,
            pageSize: pageSize,
            total: totalUsers,
            showSizeChanger: true,
            showTotal: (total) => `Total ${total} users`,
            onChange: handlePageChange,
          }}
          onRow={(record) => ({
            onClick: () => handleRowClick(record),
            style: { cursor: 'pointer' },
          })}
        />
      </Card>

      <Drawer
        title="User Details"
        width={600}
        open={drawerVisible}
        onClose={handleDrawerClose}
        destroyOnClose
      >
        {selectedUserDetails && (
          <div style={{ padding: '0' }}>
            <Descriptions
              title="Profile Information"
              bordered
              column={1}
              style={{ marginBottom: '24px' }}
            >
              <Descriptions.Item label="Email">{selectedUserDetails.email}</Descriptions.Item>
              <Descriptions.Item label="First Name">{selectedUserDetails.first_name}</Descriptions.Item>
              <Descriptions.Item label="Last Name">{selectedUserDetails.last_name}</Descriptions.Item>
              <Descriptions.Item label="Date of Birth">
                {selectedUserDetails.date_of_birth || 'N/A'}
              </Descriptions.Item>
              <Descriptions.Item label="Gender">{selectedUserDetails.gender || 'N/A'}</Descriptions.Item>
              <Descriptions.Item label="Role">
                <Tag color="blue">{selectedUserDetails.role}</Tag>
              </Descriptions.Item>
              <Descriptions.Item label="Status">
                <Tag
                  icon={selectedUserDetails.is_active ? <CheckCircleOutlined /> : <CloseCircleOutlined />}
                  color={selectedUserDetails.is_active ? 'success' : 'default'}
                >
                  {selectedUserDetails.is_active ? 'Active' : 'Inactive'}
                </Tag>
              </Descriptions.Item>
              <Descriptions.Item label="Last Login">
                {selectedUserDetails.last_login_at
                  ? new Date(selectedUserDetails.last_login_at).toLocaleString()
                  : 'Never'}
              </Descriptions.Item>
              <Descriptions.Item label="Registered">
                {new Date(selectedUserDetails.created_at).toLocaleString()}
              </Descriptions.Item>
            </Descriptions>

            <div style={drawerActionsStyle}>
              {selectedUserDetails.is_active ? (
                <Button type="default" onClick={handleDisableUser} loading={actionLoading}>
                  Disable Account
                </Button>
              ) : (
                <Button type="primary" ghost onClick={handleEnableUser} loading={actionLoading}>
                  Enable Account
                </Button>
              )}
              <Button
                type="primary"
                danger
                onClick={() => handleDeleteModalOpen(selectedUserDetails)}
                loading={actionLoading}
              >
                Delete User
              </Button>
            </div>
          </div>
        )}
      </Drawer>

      <Modal
        title="Confirm User Deletion"
        open={deleteModalVisible}
        onCancel={handleDeleteModalClose}
        onOk={handleConfirmDeleteUser}
        okText="Delete"
        okType="danger"
        confirmLoading={actionLoading}
      >
        <Typography.Text type="danger">
          Are you sure you want to delete this user? This action cannot be undone. All user data
          including calculation history and goals will be permanently removed.
        </Typography.Text>
      </Modal>
    </div>
  );
};

export default AdminUsersPage;