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

interface UserResponse {
  id: string;
  email: string;
  first_name: string;
  last_name: string;
  phone?: string | null;
  address?: string | null;
  role: string;
  status: string;
  created_at: string;
  updated_at: string;
}

type UserRole = 'ADMINISTRATOR' | 'LIBRARIAN' | 'MEMBER';
type UserStatus = 'ACTIVE' | 'INACTIVE' | 'SUSPENDED';

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

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

  const [users, setUsers] = useState<UserResponse[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [searchText, setSearchText] = useState<string>('');
  const [filterRole, setFilterRole] = useState<string>('');
  const [filterStatus, setFilterStatus] = useState<string>('');
  const [createLibrarianModalVisible, setCreateLibrarianModalVisible] = useState<boolean>(false);
  const [createAdminModalVisible, setCreateAdminModalVisible] = useState<boolean>(false);
  const [editModalVisible, setEditModalVisible] = useState<boolean>(false);
  const [resetPasswordModalVisible, setResetPasswordModalVisible] = useState<boolean>(false);
  const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
  const [pagination, setPagination] = useState<PaginationState>({
    current: 1,
    pageSize: 20,
    total: 0,
  });

  const [createLibrarianForm] = Form.useForm();
  const [createAdminForm] = Form.useForm();
  const [editUserForm] = Form.useForm();
  const [resetPasswordForm] = Form.useForm();

  const fetchUsers = useCallback(async () => {
    setLoading(true);
    try {
      const { data } = await request<UserResponse[]>({
        method: 'GET',
        path: '/users/',
        query: {
          limit: pagination.pageSize,
          offset: (pagination.current - 1) * pagination.pageSize,
          ...(filterRole && { role: filterRole }),
          ...(filterStatus && { status: filterStatus }),
        },
      });
      setUsers(data);
      setPagination(prev => ({ ...prev, total: data.length }));
    } catch (error) {
      messageApi.error('Failed to load users');
    } finally {
      setLoading(false);
    }
  }, [pagination.current, pagination.pageSize, filterRole, filterStatus, messageApi]);

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

  const filteredUsers = useMemo(() => {
    return users.filter(u => {
      const matchesSearch = !searchText || 
        u.email.toLowerCase().includes(searchText.toLowerCase()) || 
        (u.first_name + ' ' + u.last_name).toLowerCase().includes(searchText.toLowerCase());
      const matchesRole = !filterRole || u.role === filterRole;
      const matchesStatus = !filterStatus || u.status === filterStatus;
      return matchesSearch && matchesRole && matchesStatus;
    });
  }, [users, searchText, filterRole, filterStatus]);

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

  const handleRoleFilterChange = (value: string) => {
    setFilterRole(value);
  };

  const handleStatusFilterChange = (value: string) => {
    setFilterStatus(value);
  };

  const handlePaginationChange = (page: number, pageSize: number) => {
    setPagination(prev => ({ ...prev, current: page, pageSize }));
  };

  const openCreateLibrarianModal = () => {
    setCreateLibrarianModalVisible(true);
  };

  const openCreateAdminModal = () => {
    setCreateAdminModalVisible(true);
  };

  const closeCreateLibrarianModal = () => {
    setCreateLibrarianModalVisible(false);
    createLibrarianForm.resetFields();
  };

  const closeCreateAdminModal = () => {
    setCreateAdminModalVisible(false);
    createAdminForm.resetFields();
  };

  const handleCreateLibrarian = async () => {
    try {
      const formValues = await createLibrarianForm.validateFields();
      await request<UserResponse>({
        method: 'POST',
        path: '/users/',
        body: {
          email: formValues.email,
          first_name: formValues.first_name,
          last_name: formValues.last_name,
          phone: formValues.phone,
          password: formValues.password,
          role: 'LIBRARIAN' as UserRole,
          status: 'ACTIVE' as UserStatus,
        },
      });
      messageApi.success('Librarian created successfully');
      setCreateLibrarianModalVisible(false);
      createLibrarianForm.resetFields();
      fetchUsers();
    } catch (error) {
      messageApi.error('Failed to create librarian. Please try again.');
    }
  };

  const handleCreateAdmin = async () => {
    try {
      const formValues = await createAdminForm.validateFields();
      await request<UserResponse>({
        method: 'POST',
        path: '/users/',
        body: {
          email: formValues.email,
          first_name: formValues.first_name,
          last_name: formValues.last_name,
          phone: formValues.phone,
          password: formValues.password,
          role: 'ADMINISTRATOR' as UserRole,
          status: 'ACTIVE' as UserStatus,
        },
      });
      messageApi.success('Administrator created successfully');
      setCreateAdminModalVisible(false);
      createAdminForm.resetFields();
      fetchUsers();
    } catch (error) {
      messageApi.error('Failed to create administrator. Please try again.');
    }
  };

  const openEditModal = (record: UserResponse) => {
    setSelectedUserId(record.id);
    setEditModalVisible(true);
    editUserForm.setFieldsValue({
      first_name: record.first_name,
      last_name: record.last_name,
      email: record.email,
      phone: record.phone,
      role: record.role,
      status: record.status,
    });
  };

  const closeEditModal = () => {
    setEditModalVisible(false);
    setSelectedUserId(null);
    editUserForm.resetFields();
  };

  const handleEditUser = async () => {
    try {
      const formValues = await editUserForm.validateFields();
      await request<UserResponse>({
        method: 'PUT',
        path: '/users/{user_id}',
        pathParams: { user_id: selectedUserId! },
        body: {
          email: formValues.email,
          first_name: formValues.first_name,
          last_name: formValues.last_name,
          phone: formValues.phone,
          role: formValues.role as UserRole,
          status: formValues.status as UserStatus,
        },
      });
      messageApi.success('User updated successfully');
      setEditModalVisible(false);
      setSelectedUserId(null);
      editUserForm.resetFields();
      fetchUsers();
    } catch (error) {
      messageApi.error('Failed to update user. Please try again.');
    }
  };

  const handleToggleStatus = (record: UserResponse) => {
    Modal.confirm({
      title: 'Confirm Status Change',
      content: `Are you sure you want to ${record.status === 'ACTIVE' ? 'deactivate' : 'activate'} this user?`,
      onOk: async () => {
        try {
          setSelectedUserId(record.id);
          await request<UserResponse>({
            method: 'PUT',
            path: '/users/{user_id}',
            pathParams: { user_id: record.id },
            body: {
              status: (record.status === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE') as UserStatus,
            },
          });
          messageApi.success('User status updated successfully');
          fetchUsers();
        } catch (error) {
          messageApi.error('Failed to update user status.');
        }
      },
    });
  };

  const openResetPasswordModal = (record: UserResponse) => {
    setSelectedUserId(record.id);
    setResetPasswordModalVisible(true);
  };

  const closeResetPasswordModal = () => {
    setResetPasswordModalVisible(false);
    setSelectedUserId(null);
    resetPasswordForm.resetFields();
  };

  const handleResetPassword = async () => {
    try {
      const formValues = await resetPasswordForm.validateFields();
      if (formValues.password !== formValues.confirm_password) {
        messageApi.error('Passwords do not match');
        return;
      }
      await request<UserResponse>({
        method: 'PUT',
        path: '/users/{user_id}',
        pathParams: { user_id: selectedUserId! },
        body: {
          password: formValues.password,
        },
      });
      messageApi.success('Password reset successfully');
      setResetPasswordModalVisible(false);
      setSelectedUserId(null);
      resetPasswordForm.resetFields();
    } catch (error) {
      messageApi.error('Failed to reset password. Please try again.');
    }
  };

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

  const columns = useMemo(() => [
    {
      title: 'User ID',
      dataIndex: 'id',
      key: 'id',
      width: 100,
      ellipsis: true,
    },
    {
      title: 'Name',
      dataIndex: 'first_name',
      key: 'name',
      render: (_: string, record: UserResponse) => `${record.first_name} ${record.last_name}`,
    },
    {
      title: 'Email',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: 'Role',
      dataIndex: 'role',
      key: 'role',
      render: (role: string) => {
        const colorMap: Record<string, string> = {
          ADMINISTRATOR: 'red',
          LIBRARIAN: 'blue',
        };
        return <Tag color={colorMap[role]}>{role}</Tag>;
      },
    },
    {
      title: 'Status',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const colorMap: Record<string, string> = {
          ACTIVE: 'green',
          INACTIVE: 'default',
          SUSPENDED: 'orange',
        };
        return <Tag color={colorMap[status]}>{status}</Tag>;
      },
    },
    {
      title: 'Created',
      dataIndex: 'created_at',
      key: 'created_at',
      render: (date: string) => new Date(date).toLocaleDateString(),
    },
    {
      title: 'Actions',
      key: 'actions',
      render: (_: unknown, record: UserResponse) => (
        <Space size="small">
          <Button
            type="link"
            icon={<EditOutlined />}
            onClick={() => openEditModal(record)}
          >
            Edit
          </Button>
          <Button
            type="link"
            onClick={() => handleToggleStatus(record)}
          >
            {record.status === 'ACTIVE' ? 'Deactivate' : 'Activate'}
          </Button>
          <Button
            type="link"
            icon={<LockOutlined />}
            onClick={() => openResetPasswordModal(record)}
          >
            Reset Password
          </Button>
        </Space>
      ),
    },
  ], []);

  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' }}>
            <Breadcrumb.Item>
              <Button type="link" size="small" onClick={navigateToDashboard}>
                Dashboard
              </Button>
            </Breadcrumb.Item>
            <Breadcrumb.Item>User Administration</Breadcrumb.Item>
          </Breadcrumb>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <Typography.Title level={2} style={{ margin: 0 }}>
              User Administration
            </Typography.Title>
            <Space>
              <Button type="primary" icon={<PlusOutlined />} onClick={openCreateLibrarianModal}>
                Create Librarian
              </Button>
              <Button type="default" icon={<PlusOutlined />} onClick={openCreateAdminModal}>
                Create Administrator
              </Button>
            </Space>
          </div>
        </div>

        <Card bordered={false} style={{ marginBottom: '16px' }}>
          <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
            <Input.Search
              placeholder="Search by name or email..."
              allowClear
              style={{ width: 300 }}
              value={searchText}
              onChange={handleSearchChange}
            />
            <Select
              placeholder="All Roles"
              allowClear
              style={{ width: 180 }}
              value={filterRole || undefined}
              onChange={handleRoleFilterChange}
              options={[
                { label: 'Administrator', value: 'ADMINISTRATOR' },
                { label: 'Librarian', value: 'LIBRARIAN' },
              ]}
            />
            <Select
              placeholder="All Statuses"
              allowClear
              style={{ width: 180 }}
              value={filterStatus || undefined}
              onChange={handleStatusFilterChange}
              options={[
                { label: 'Active', value: 'ACTIVE' },
                { label: 'Inactive', value: 'INACTIVE' },
                { label: 'Suspended', value: 'SUSPENDED' },
              ]}
            />
          </div>
        </Card>

        <Card bordered={false}>
          <Table
            rowKey="id"
            dataSource={filteredUsers}
            columns={columns}
            loading={loading}
            pagination={{
              current: pagination.current,
              pageSize: pagination.pageSize,
              total: pagination.total,
              onChange: handlePaginationChange,
            }}
          />
        </Card>
      </Layout>

      <Modal
        title="Create Librarian"
        open={createLibrarianModalVisible}
        onOk={handleCreateLibrarian}
        onCancel={closeCreateLibrarianModal}
        okText="Create"
        cancelText="Cancel"
        width={520}
      >
        <Form form={createLibrarianForm} layout="vertical">
          <Form.Item name="first_name" label="First Name" rules={[{ required: true, message: 'First name is required' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="last_name" label="Last Name" rules={[{ required: true, message: 'Last name is required' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="email" label="Email" rules={[{ required: true, type: 'email', message: 'Please enter a valid email address' }]}>
            <Input type="email" />
          </Form.Item>
          <Form.Item name="phone" label="Phone">
            <Input />
          </Form.Item>
          <Form.Item name="employee_id" label="Employee ID">
            <Input />
          </Form.Item>
          <Form.Item name="password" label="Password" rules={[{ required: true, min: 8, message: 'Password must be at least 8 characters' }]}>
            <Input.Password />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="Create Administrator"
        open={createAdminModalVisible}
        onOk={handleCreateAdmin}
        onCancel={closeCreateAdminModal}
        okText="Create"
        cancelText="Cancel"
        width={520}
      >
        <Form form={createAdminForm} layout="vertical">
          <Form.Item name="first_name" label="First Name" rules={[{ required: true, message: 'First name is required' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="last_name" label="Last Name" rules={[{ required: true, message: 'Last name is required' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="email" label="Email" rules={[{ required: true, type: 'email', message: 'Please enter a valid email address' }]}>
            <Input type="email" />
          </Form.Item>
          <Form.Item name="phone" label="Phone">
            <Input />
          </Form.Item>
          <Form.Item name="employee_id" label="Employee ID">
            <Input />
          </Form.Item>
          <Form.Item name="password" label="Password" rules={[{ required: true, min: 8, message: 'Password must be at least 8 characters' }]}>
            <Input.Password />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="Edit User"
        open={editModalVisible}
        onOk={handleEditUser}
        onCancel={closeEditModal}
        okText="Save"
        cancelText="Cancel"
        width={520}
      >
        <Form form={editUserForm} layout="vertical">
          <Form.Item name="first_name" label="First Name" rules={[{ required: true, message: 'First name is required' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="last_name" label="Last Name" rules={[{ required: true, message: 'Last name is required' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="email" label="Email" rules={[{ required: true, type: 'email', message: 'Please enter a valid email address' }]}>
            <Input type="email" />
          </Form.Item>
          <Form.Item name="phone" label="Phone">
            <Input />
          </Form.Item>
          <Form.Item name="role" label="Role" rules={[{ required: true }]}>
            <Select
              options={[
                { label: 'Administrator', value: 'ADMINISTRATOR' },
                { label: 'Librarian', value: 'LIBRARIAN' },
              ]}
            />
          </Form.Item>
          <Form.Item name="status" label="Status" rules={[{ required: true }]}>
            <Select
              options={[
                { label: 'Active', value: 'ACTIVE' },
                { label: 'Inactive', value: 'INACTIVE' },
                { label: 'Suspended', value: 'SUSPENDED' },
              ]}
            />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="Reset Password"
        open={resetPasswordModalVisible}
        onOk={handleResetPassword}
        onCancel={closeResetPasswordModal}
        okText="Reset Password"
        cancelText="Cancel"
        width={420}
      >
        <Form form={resetPasswordForm} layout="vertical">
          <Form.Item name="password" label="New Password" rules={[{ required: true, min: 8, message: 'Password must be at least 8 characters' }]}>
            <Input.Password />
          </Form.Item>
          <Form.Item name="confirm_password" label="Confirm Password" rules={[{ required: true }]}>
            <Input.Password />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}