import { useState, useMemo, useEffect, useCallback } from 'react';
import { Table, Button, Input, Select, Card, Space, Modal, Form, InputNumber, DatePicker, Typography, message, Tag } from 'antd';
import { PlusOutlined, EditOutlined, StopOutlined, CheckOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
import { request } from '../api/client';
import { useNavigate } from 'react-router-dom';
import { ROUTES } from '../router/routes.constant';
import type { ColumnsType } from 'antd/es/table';

interface MemberResponse {
  id: string;
  user_id: string;
  membership_number: string;
  membership_date: string;
  membership_expiry: string | null;
  borrowing_limit: number;
  account_standing: 'GOOD' | 'WARNING' | 'SUSPENDED' | 'BLOCKED';
  created_at: string;
  updated_at: string;
}

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;
}

interface MemberWithUser extends MemberResponse {
  first_name?: string;
  last_name?: string;
  email?: string;
  phone?: string | null;
  address?: string | null;
}

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

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

  const [members, setMembers] = useState<MemberWithUser[]>([]);
  const [users, setUsers] = useState<UserResponse[]>([]);
  const [loading, setLoading] = useState(false);
  const [searchText, setSearchText] = useState('');
  const [statusFilter, setStatusFilter] = useState('');
  const [pagination, setPagination] = useState<PaginationState>({
    current: 1,
    pageSize: 20,
    total: 0,
  });
  const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
  const [addMemberModalVisible, setAddMemberModalVisible] = useState(false);
  const [editMemberModalVisible, setEditMemberModalVisible] = useState(false);
  const [suspendMemberModalVisible, setSuspendMemberModalVisible] = useState(false);
  const [selectedMember, setSelectedMember] = useState<MemberWithUser | null>(null);

  const [addForm] = Form.useForm();
  const [editForm] = Form.useForm();
  const [suspendForm] = Form.useForm();

  const hasSelectedRows = useMemo(() => selectedRowKeys.length > 0, [selectedRowKeys]);

  const fetchMembers = useCallback(async () => {
    setLoading(true);
    try {
      const offset = (pagination.current - 1) * pagination.pageSize;
      const queryParams: Record<string, string | number> = {
        limit: pagination.pageSize,
        offset,
      };
      if (statusFilter) {
        queryParams.account_standing = statusFilter;
      }

      const { data: membersData } = await request<MemberResponse[]>({
        method: 'GET',
        path: '/users/members',
        query: queryParams,
      });

      const { data: usersData } = await request<UserResponse[]>({
        method: 'GET',
        path: '/users/',
        query: { limit: 100, offset: 0, role: 'MEMBER' },
      });

      setUsers(usersData);

      const enrichedMembers = membersData.map((member) => {
        const user = usersData.find((u) => u.id === member.user_id);
        return {
          ...member,
          first_name: user?.first_name,
          last_name: user?.last_name,
          email: user?.email,
          phone: user?.phone,
          address: user?.address,
        };
      });

      setMembers(enrichedMembers);
      setPagination((prev) => ({ ...prev, total: enrichedMembers.length }));
    } catch (error) {
      messageApi.error('Failed to load members');
    } finally {
      setLoading(false);
    }
  }, [pagination.current, pagination.pageSize, statusFilter, messageApi]);

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

  const openAddMemberModal = () => {
    setAddMemberModalVisible(true);
  };

  const closeAddMemberModal = () => {
    setAddMemberModalVisible(false);
    addForm.resetFields();
  };

  const openEditMemberModal = (record: MemberWithUser) => {
    setSelectedMember(record);
    setEditMemberModalVisible(true);
    editForm.setFieldsValue({
      first_name: record.first_name,
      last_name: record.last_name,
      email: record.email,
      phone: record.phone,
      address: record.address,
    });
  };

  const closeEditMemberModal = () => {
    setEditMemberModalVisible(false);
    setSelectedMember(null);
    editForm.resetFields();
  };

  const openSuspendMemberModal = (record: MemberWithUser) => {
    setSelectedMember(record);
    setSuspendMemberModalVisible(true);
  };

  const closeSuspendMemberModal = () => {
    setSuspendMemberModalVisible(false);
    setSelectedMember(null);
    suspendForm.resetFields();
  };

  const handleAddMember = async () => {
    try {
      const values = await addForm.validateFields();

      const { data: userData } = await request<UserResponse>({
        method: 'POST',
        path: '/users/',
        body: {
          email: values.email,
          first_name: values.first_name,
          last_name: values.last_name,
          phone: values.phone,
          address: values.address,
          role: 'MEMBER',
          status: 'ACTIVE',
          password: values.password,
        },
      });

      await request<MemberResponse>({
        method: 'POST',
        path: '/users/members',
        body: {
          user_id: userData.id,
          membership_date: values.membership_date.format('YYYY-MM-DD'),
          borrowing_limit: values.borrowing_limit || 5,
          account_standing: 'GOOD',
        },
      });

      messageApi.success('Member added successfully');
      closeAddMemberModal();
      fetchMembers();
    } catch (error) {
      messageApi.error('Failed to add member');
    }
  };

  const handleEditMember = async () => {
    if (!selectedMember) return;

    try {
      const values = await editForm.validateFields();

      await request<UserResponse>({
        method: 'PUT',
        path: '/users/{user_id}',
        pathParams: { user_id: selectedMember.user_id },
        body: {
          email: values.email,
          first_name: values.first_name,
          last_name: values.last_name,
          phone: values.phone,
          address: values.address,
        },
      });

      messageApi.success('Member updated successfully');
      closeEditMemberModal();
      fetchMembers();
    } catch (error) {
      messageApi.error('Failed to update member');
    }
  };

  const handleSuspendMember = async () => {
    if (!selectedMember) return;

    Modal.confirm({
      title: 'Confirm Suspension',
      content: 'Are you sure you want to suspend this member?',
      onOk: async () => {
        try {
          await suspendForm.validateFields();

          await request<MemberResponse>({
            method: 'PUT',
            path: '/users/members/{member_id}',
            pathParams: { member_id: selectedMember.id },
            body: {
              account_standing: 'SUSPENDED',
            },
          });

          messageApi.success('Member suspended successfully');
          closeSuspendMemberModal();
          fetchMembers();
        } catch (error) {
          messageApi.error('Failed to suspend member');
        }
      },
    });
  };

  const handleReactivateMember = (record: MemberWithUser) => {
    Modal.confirm({
      title: 'Confirm Reactivation',
      content: 'Are you sure you want to reactivate this member?',
      onOk: async () => {
        try {
          await request<MemberResponse>({
            method: 'PUT',
            path: '/users/members/{member_id}',
            pathParams: { member_id: record.id },
            body: {
              account_standing: 'GOOD',
            },
          });

          messageApi.success('Member reactivated successfully');
          fetchMembers();
        } catch (error) {
          messageApi.error('Failed to reactivate member');
        }
      },
    });
  };

  const handleApproveMember = (record: MemberWithUser) => {
    Modal.confirm({
      title: 'Confirm Approval',
      content: 'Are you sure you want to approve this member?',
      onOk: async () => {
        try {
          await request<MemberResponse>({
            method: 'PUT',
            path: '/users/members/{member_id}',
            pathParams: { member_id: record.id },
            body: {
              account_standing: 'GOOD',
            },
          });

          messageApi.success('Member approved successfully');
          fetchMembers();
        } catch (error) {
          messageApi.error('Failed to approve member');
        }
      },
    });
  };

  const handleBulkApprove = () => {
    Modal.confirm({
      title: 'Confirm Bulk Approval',
      content: `Are you sure you want to approve ${selectedRowKeys.length} selected members?`,
      onOk: async () => {
        try {
          for (const memberId of selectedRowKeys) {
            await request<MemberResponse>({
              method: 'PUT',
              path: '/users/members/{member_id}',
              pathParams: { member_id: memberId },
              body: {
                account_standing: 'GOOD',
              },
            });
          }

          messageApi.success('Selected members approved successfully');
          setSelectedRowKeys([]);
          fetchMembers();
        } catch (error) {
          messageApi.error('Failed to approve members');
        }
      },
    });
  };

  const handleDeleteMember = (record: MemberWithUser) => {
    Modal.confirm({
      title: 'Confirm Deletion',
      content: 'Are you sure you want to delete this member? This action cannot be undone.',
      okText: 'Delete',
      okType: 'danger',
      onOk: async () => {
        try {
          await request({
            method: 'DELETE',
            path: '/users/members/{member_id}',
            pathParams: { member_id: record.id },
          });

          messageApi.success('Member deleted successfully');
          fetchMembers();
        } catch (error) {
          messageApi.error('Failed to delete member');
        }
      },
    });
  };

  const handleViewMember = (record: MemberWithUser) => {
    navigate(`/admin/members/${record.id}`);
  };

  const getStatusColor = (status: string): string => {
    switch (status) {
      case 'GOOD':
        return 'green';
      case 'WARNING':
        return 'orange';
      case 'SUSPENDED':
        return 'red';
      case 'BLOCKED':
        return 'volcano';
      default:
        return 'default';
    }
  };

  const columns: ColumnsType<MemberWithUser> = useMemo(
    () => [
      {
        title: 'Member ID',
        dataIndex: 'membership_number',
        key: 'membership_number',
      },
      {
        title: 'Name',
        key: 'name',
        render: (_, record) => `${record.first_name || ''} ${record.last_name || ''}`,
      },
      {
        title: 'Email',
        dataIndex: 'email',
        key: 'email',
      },
      {
        title: 'Phone',
        dataIndex: 'phone',
        key: 'phone',
        responsive: ['lg'] as ('lg')[],
      },
      {
        title: 'Status',
        dataIndex: 'account_standing',
        key: 'account_standing',
        render: (status: string) => (
          <Tag color={getStatusColor(status)}>{status}</Tag>
        ),
      },
      {
        title: 'Join Date',
        dataIndex: 'membership_date',
        key: 'membership_date',
        responsive: ['lg'] as ('lg')[],
        render: (date: string) => new Date(date).toLocaleDateString(),
      },
      {
        title: 'Active Loans',
        key: 'active_loans',
        render: () => 0,
      },
      {
        title: 'Outstanding Fines',
        key: 'outstanding_fines',
        render: () => '$0.00',
      },
      {
        title: 'Actions',
        key: 'actions',
        render: (_, record) => (
          <Space size="small">
            <Button
              type="link"
              size="small"
              icon={<EyeOutlined />}
              onClick={() => handleViewMember(record)}
            />
            <Button
              type="link"
              size="small"
              icon={<EditOutlined />}
              onClick={() => openEditMemberModal(record)}
            />
            {record.account_standing === 'SUSPENDED' ? (
              <Button
                type="link"
                size="small"
                icon={<CheckOutlined />}
                onClick={() => handleReactivateMember(record)}
              />
            ) : (
              <Button
                type="link"
                size="small"
                icon={<StopOutlined />}
                onClick={() => openSuspendMemberModal(record)}
              />
            )}
            <Button
              type="link"
              size="small"
              danger
              icon={<DeleteOutlined />}
              onClick={() => handleDeleteMember(record)}
            />
          </Space>
        ),
      },
    ],
    []
  );

  const filteredMembers = useMemo(() => {
    if (!searchText) return members;
    const lowerSearch = searchText.toLowerCase();
    return members.filter(
      (member) =>
        member.first_name?.toLowerCase().includes(lowerSearch) ||
        member.last_name?.toLowerCase().includes(lowerSearch) ||
        member.email?.toLowerCase().includes(lowerSearch) ||
        member.membership_number.toLowerCase().includes(lowerSearch)
    );
  }, [members, searchText]);

  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' }}>
        <Typography.Title level={2} style={{ margin: 0 }}>
          Members Management
        </Typography.Title>
        <Space>
          <Button type="primary" icon={<PlusOutlined />} onClick={openAddMemberModal}>
            Add Member
          </Button>
        </Space>
      </div>

      <div style={{ display: 'flex', gap: '16px', marginBottom: '16px', flexWrap: 'wrap', alignItems: 'center' }}>
        <Input.Search
          placeholder="Search by name, email, or member ID"
          allowClear
          style={{ width: 320 }}
          value={searchText}
          onChange={(e) => setSearchText(e.target.value)}
        />
        <Select
          placeholder="Filter by status"
          allowClear
          style={{ width: 200 }}
          value={statusFilter || undefined}
          onChange={(value) => {
            setStatusFilter(value || '');
            setPagination((prev) => ({ ...prev, current: 1 }));
          }}
          options={[
            { label: 'Good', value: 'GOOD' },
            { label: 'Warning', value: 'WARNING' },
            { label: 'Suspended', value: 'SUSPENDED' },
            { label: 'Blocked', value: 'BLOCKED' },
          ]}
        />
        <div style={{ marginLeft: 'auto' }}>
          <Button type="default" disabled={!hasSelectedRows} onClick={handleBulkApprove}>
            Bulk Approve
          </Button>
        </div>
      </div>

      <Card bordered={false}>
        <Table
          rowKey="id"
          columns={columns}
          dataSource={filteredMembers}
          loading={loading}
          rowSelection={{
            selectedRowKeys,
            onChange: (keys) => setSelectedRowKeys(keys as string[]),
          }}
          pagination={{
            current: pagination.current,
            pageSize: pagination.pageSize,
            total: filteredMembers.length,
            showSizeChanger: true,
            showTotal: (total) => `Total ${total} members`,
            onChange: (page, pageSize) => {
              setPagination((prev) => ({ ...prev, current: page, pageSize }));
            },
          }}
        />
      </Card>

      <Modal
        title="Add New Member"
        open={addMemberModalVisible}
        onOk={handleAddMember}
        onCancel={closeAddMemberModal}
        okText="Add Member"
        cancelText="Cancel"
        width={640}
        destroyOnClose
      >
        <Form form={addForm} layout="vertical">
          <Form.Item
            label="First Name"
            name="first_name"
            rules={[{ required: true, message: 'First name is required' }]}
          >
            <Input placeholder="Enter first name" />
          </Form.Item>
          <Form.Item
            label="Last Name"
            name="last_name"
            rules={[{ required: true, message: 'Last name is required' }]}
          >
            <Input placeholder="Enter last name" />
          </Form.Item>
          <Form.Item
            label="Email"
            name="email"
            rules={[
              { required: true, type: 'email', message: 'Valid email is required' },
            ]}
          >
            <Input placeholder="Enter email address" />
          </Form.Item>
          <Form.Item label="Phone" name="phone">
            <Input placeholder="Enter phone number" />
          </Form.Item>
          <Form.Item label="Address" name="address">
            <Input.TextArea placeholder="Enter address" rows={3} />
          </Form.Item>
          <Form.Item
            label="Password"
            name="password"
            rules={[
              { required: true, message: 'Password is required' },
              { min: 8, message: 'Password must be at least 8 characters' },
            ]}
          >
            <Input.Password placeholder="Enter password" />
          </Form.Item>
          <Form.Item
            label="Membership Date"
            name="membership_date"
            rules={[{ required: true, message: 'Membership date is required' }]}
          >
            <DatePicker style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item label="Borrowing Limit" name="borrowing_limit" initialValue={5}>
            <InputNumber min={1} max={20} style={{ width: '100%' }} />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="Edit Member"
        open={editMemberModalVisible}
        onOk={handleEditMember}
        onCancel={closeEditMemberModal}
        okText="Save Changes"
        cancelText="Cancel"
        width={640}
        destroyOnClose
      >
        <Form form={editForm} layout="vertical">
          <Form.Item
            label="First Name"
            name="first_name"
            rules={[{ required: true, message: 'First name is required' }]}
          >
            <Input placeholder="Enter first name" />
          </Form.Item>
          <Form.Item
            label="Last Name"
            name="last_name"
            rules={[{ required: true, message: 'Last name is required' }]}
          >
            <Input placeholder="Enter last name" />
          </Form.Item>
          <Form.Item
            label="Email"
            name="email"
            rules={[
              { required: true, type: 'email', message: 'Valid email is required' },
            ]}
          >
            <Input placeholder="Enter email address" />
          </Form.Item>
          <Form.Item label="Phone" name="phone">
            <Input placeholder="Enter phone number" />
          </Form.Item>
          <Form.Item label="Address" name="address">
            <Input.TextArea placeholder="Enter address" rows={3} />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="Suspend Member"
        open={suspendMemberModalVisible}
        onOk={handleSuspendMember}
        onCancel={closeSuspendMemberModal}
        okText="Suspend"
        cancelText="Cancel"
        okButtonProps={{ danger: true }}
        width={480}
        destroyOnClose
      >
        <Form form={suspendForm} layout="vertical">
          <Form.Item
            label="Reason for Suspension"
            name="reason"
            rules={[{ required: true, message: 'Please provide a reason for suspension' }]}
          >
            <Input.TextArea placeholder="Enter reason for suspending this member" rows={4} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}