import { useState, useMemo, useEffect, useCallback, CSSProperties } from 'react';
import { Card, Table, Button, Select, Input, DatePicker, Tabs, Drawer, Descriptions, Statistic, message, Modal, Typography } from 'antd';
import { ArrowLeftOutlined, SearchOutlined, BellOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons';
import { request } from '../api/client';
import { useNavigate } from 'react-router-dom';
import { ROUTES } from '../router/routes.constant';

type ReservationStatus = 'PENDING' | 'READY' | 'FULFILLED' | 'CANCELLED' | 'EXPIRED';

interface ReservationResponse {
  id: string;
  member_id: string;
  book_id: string;
  reservation_date: string;
  expiration_date: string;
  status: ReservationStatus;
  priority_order: number | null;
  notified_date: string | null;
  created_at: string;
  updated_at: string;
}

interface MemberInfo {
  id: string;
  membership_number: string;
  user: {
    id: string;
    email: string;
    first_name: string;
    last_name: string;
  };
}

interface BookInfo {
  id: string;
  title: string;
  isbn: string | null;
  publisher: string | null;
}

interface ReservationDetailResponse {
  id: string;
  member_id: string;
  book_id: string;
  reservation_date: string;
  expiration_date: string;
  status: ReservationStatus;
  priority_order: number | null;
  notified_date: string | null;
  created_at: string;
  updated_at: string;
  member: MemberInfo;
  book: BookInfo;
}

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

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

  const [reservations, setReservations] = useState<ReservationResponse[]>([]);
  const [activeTab, setActiveTab] = useState<string>('PENDING');
  const [filterStatus, setFilterStatus] = useState<ReservationStatus | null>(null);
  const [searchBookTitle, setSearchBookTitle] = useState<string>('');
  const [searchMemberName, setSearchMemberName] = useState<string>('');
  const [dateRange, setDateRange] = useState<[string, string] | null>(null);
  const [loading, setLoading] = useState<boolean>(false);
  const [selectedReservationId, setSelectedReservationId] = useState<string | null>(null);
  const [detailDrawerVisible, setDetailDrawerVisible] = useState<boolean>(false);
  const [selectedReservationDetail, setSelectedReservationDetail] = useState<ReservationDetailResponse | null>(null);
  const [pagination, setPagination] = useState<PaginationState>({
    current: 1,
    pageSize: 20,
    total: 0,
  });

  const pendingCount = useMemo(() => {
    return reservations.filter(r => r.status === 'PENDING').length;
  }, [reservations]);

  const readyCount = useMemo(() => {
    return reservations.filter(r => r.status === 'READY').length;
  }, [reservations]);

  const expiredCount = useMemo(() => {
    return reservations.filter(r => r.status === 'EXPIRED').length;
  }, [reservations]);

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

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

  const loadReservationDetail = useCallback(async (reservationId: string) => {
    setLoading(true);
    try {
      const result = await request<ReservationDetailResponse>({
        method: 'GET',
        path: '/reservations/{reservation_id}/details',
        pathParams: { reservation_id: reservationId },
      });
      setSelectedReservationDetail(result.data);
    } catch (error) {
      messageApi.error('Failed to load reservation details.');
    } finally {
      setLoading(false);
    }
  }, [messageApi]);

  const handleTabChange = (key: string) => {
    setActiveTab(key);
    setFilterStatus(key === 'ALL' ? null : (key as ReservationStatus));
    setPagination(prev => ({ ...prev, current: 1 }));
  };

  const handleFilterStatusChange = (value: ReservationStatus | null) => {
    setFilterStatus(value);
    setPagination(prev => ({ ...prev, current: 1 }));
  };

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

  const handleRowClick = (record: ReservationResponse) => {
    setSelectedReservationId(record.id);
    setDetailDrawerVisible(true);
    loadReservationDetail(record.id);
  };

  const handleCloseDrawer = () => {
    setDetailDrawerVisible(false);
    setSelectedReservationDetail(null);
  };

  const fulfillReservation = async () => {
    if (!selectedReservationId) return;
    
    Modal.confirm({
      title: 'Fulfill Reservation',
      content: 'Are you sure you want to fulfill this reservation?',
      onOk: async () => {
        setLoading(true);
        try {
          await request<ReservationResponse>({
            method: 'PATCH',
            path: '/reservations/{reservation_id}',
            pathParams: { reservation_id: selectedReservationId },
            body: { status: 'FULFILLED' },
          });
          messageApi.success('Reservation fulfilled successfully. Loan created.');
          handleCloseDrawer();
          loadReservations();
        } catch (error) {
          messageApi.error('Failed to fulfill reservation. Please try again.');
        } finally {
          setLoading(false);
        }
      },
    });
  };

  const cancelReservation = async () => {
    if (!selectedReservationId) return;
    
    Modal.confirm({
      title: 'Cancel Reservation',
      content: 'Are you sure you want to cancel this reservation?',
      onOk: async () => {
        setLoading(true);
        try {
          await request<ReservationResponse>({
            method: 'POST',
            path: '/reservations/{reservation_id}/cancel',
            pathParams: { reservation_id: selectedReservationId },
          });
          messageApi.success('Reservation cancelled successfully.');
          handleCloseDrawer();
          loadReservations();
        } catch (error) {
          messageApi.error('Failed to cancel reservation. Please try again.');
        } finally {
          setLoading(false);
        }
      },
    });
  };

  const notifyMember = async () => {
    if (!selectedReservationId) return;
    
    setLoading(true);
    try {
      await request<ReservationResponse>({
        method: 'PATCH',
        path: '/reservations/{reservation_id}',
        pathParams: { reservation_id: selectedReservationId },
        body: { notified_date: new Date().toISOString() },
      });
      messageApi.success('Member notified successfully.');
      loadReservations();
      if (selectedReservationId) {
        loadReservationDetail(selectedReservationId);
      }
    } catch (error) {
      messageApi.error('Failed to notify member. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  const navigateBack = () => {
    navigate(ROUTES.STAFF_DASHBOARD || '/staff/dashboard');
  };

  const columns = useMemo(() => [
    {
      title: 'Reservation ID',
      dataIndex: 'id',
      key: 'id',
      width: 120,
      ellipsis: true,
    },
    {
      title: 'Book Title',
      dataIndex: 'book_id',
      key: 'book_title',
      render: (text: string) => text,
    },
    {
      title: 'Member Name',
      dataIndex: 'member_id',
      key: 'member_name',
      render: (text: string) => text,
    },
    {
      title: 'Reservation Date',
      dataIndex: 'reservation_date',
      key: 'reservation_date',
      sorter: true,
      render: (text: string) => new Date(text).toLocaleDateString(),
    },
    {
      title: 'Queue Position',
      dataIndex: 'priority_order',
      key: 'priority_order',
      width: 100,
    },
    {
      title: 'Status',
      dataIndex: 'status',
      key: 'status',
      width: 120,
      render: (status: ReservationStatus) => {
        const colorMap: Record<ReservationStatus, string> = {
          PENDING: '#faad14',
          READY: '#52c41a',
          FULFILLED: '#1677ff',
          CANCELLED: '#8c8c8c',
          EXPIRED: '#ff4d4f',
        };
        return <span style={{ color: colorMap[status] }}>{status}</span>;
      },
    },
    {
      title: 'Expiration Date',
      dataIndex: 'expiration_date',
      key: 'expiration_date',
      sorter: true,
      render: (text: string) => new Date(text).toLocaleDateString(),
    },
    {
      title: 'Actions',
      key: 'actions',
      width: 220,
      render: (_: unknown, record: ReservationResponse) => (
        <div style={{ display: 'flex', gap: '8px' }}>
          <Button
            type="primary"
            size="small"
            onClick={(e) => {
              e.stopPropagation();
              setSelectedReservationId(record.id);
              fulfillReservation();
            }}
            disabled={record.status !== 'READY'}
          >
            Fulfill
          </Button>
          <Button
            type="default"
            size="small"
            danger
            onClick={(e) => {
              e.stopPropagation();
              setSelectedReservationId(record.id);
              cancelReservation();
            }}
            disabled={record.status === 'FULFILLED' || record.status === 'CANCELLED'}
          >
            Cancel
          </Button>
          <Button
            type="default"
            size="small"
            icon={<BellOutlined />}
            onClick={(e) => {
              e.stopPropagation();
              setSelectedReservationId(record.id);
              notifyMember();
            }}
            disabled={record.status !== 'READY'}
          >
            Notify
          </Button>
        </div>
      ),
    },
  ], []);

  const tabItems = [
    { key: 'PENDING', label: 'Pending' },
    { key: 'READY', label: 'Ready for Pickup' },
    { key: 'EXPIRED', label: 'Expired' },
    { key: 'ALL', label: 'All' },
  ];

  const statusOptions = [
    { label: 'Pending', value: 'PENDING' },
    { label: 'Ready', value: 'READY' },
    { label: 'Fulfilled', value: 'FULFILLED' },
    { label: 'Cancelled', value: 'CANCELLED' },
    { label: 'Expired', value: 'EXPIRED' },
  ];

  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={navigateBack}>
            Back
          </Button>
          <Typography.Title level={3} style={{ margin: 0 }}>
            Reservations Management
          </Typography.Title>
        </div>
      </div>

      <div style={{ display: 'flex', gap: '16px', marginBottom: '24px' }}>
        <Card size="small" style={{ flex: 1 }}>
          <Statistic title="Pending" value={pendingCount} valueStyle={{ color: '#faad14' }} />
        </Card>
        <Card size="small" style={{ flex: 1 }}>
          <Statistic title="Ready for Pickup" value={readyCount} valueStyle={{ color: '#52c41a' }} />
        </Card>
        <Card size="small" style={{ flex: 1 }}>
          <Statistic title="Expired" value={expiredCount} valueStyle={{ color: '#ff4d4f' }} />
        </Card>
      </div>

      <Card bordered={false} style={{ width: '100%' }}>
        <Tabs activeKey={activeTab} items={tabItems} onChange={handleTabChange} />
        
        <div style={{ display: 'flex', gap: '12px', marginBottom: '16px', flexWrap: 'wrap' }}>
          <Select
            placeholder="Filter by Status"
            allowClear
            options={statusOptions}
            value={filterStatus}
            onChange={handleFilterStatusChange}
            style={{ width: '160px' }}
          />
          <DatePicker.RangePicker
            placeholder={['Start Date', 'End Date']}
            value={dateRange as any}
            onChange={(dates) => setDateRange(dates as any)}
            style={{ width: '260px' }}
          />
          <Input
            placeholder="Search by book title"
            allowClear
            value={searchBookTitle}
            onChange={(e) => setSearchBookTitle(e.target.value)}
            style={{ width: '200px' }}
          />
          <Input
            placeholder="Search by member name"
            allowClear
            value={searchMemberName}
            onChange={(e) => setSearchMemberName(e.target.value)}
            style={{ width: '200px' }}
          />
          <Button type="primary" icon={<SearchOutlined />} onClick={loadReservations}>
            Search
          </Button>
        </div>

        <Table
          columns={columns}
          dataSource={reservations}
          rowKey="id"
          loading={loading}
          pagination={{
            current: pagination.current,
            pageSize: pagination.pageSize,
            total: pagination.total,
            onChange: handlePageChange,
          }}
          size="middle"
          onRow={(record) => ({
            onClick: () => handleRowClick(record),
            style: { cursor: 'pointer' },
          })}
        />
      </Card>

      <Drawer
        width={520}
        title="Reservation Details"
        placement="right"
        open={detailDrawerVisible}
        onClose={handleCloseDrawer}
      >
        {selectedReservationDetail && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
            <Descriptions bordered column={1}>
              <Descriptions.Item label="Reservation ID">{selectedReservationDetail.id}</Descriptions.Item>
              <Descriptions.Item label="Status">{selectedReservationDetail.status}</Descriptions.Item>
              <Descriptions.Item label="Reservation Date">
                {new Date(selectedReservationDetail.reservation_date).toLocaleDateString()}
              </Descriptions.Item>
              <Descriptions.Item label="Expiration Date">
                {new Date(selectedReservationDetail.expiration_date).toLocaleDateString()}
              </Descriptions.Item>
              <Descriptions.Item label="Queue Position">{selectedReservationDetail.priority_order}</Descriptions.Item>
              <Descriptions.Item label="Notified Date">
                {selectedReservationDetail.notified_date ? new Date(selectedReservationDetail.notified_date).toLocaleDateString() : 'Not notified'}
              </Descriptions.Item>
            </Descriptions>

            <Descriptions bordered column={1} title="Book Information">
              <Descriptions.Item label="Title">{selectedReservationDetail.book.title}</Descriptions.Item>
              <Descriptions.Item label="ISBN">{selectedReservationDetail.book.isbn || 'N/A'}</Descriptions.Item>
              <Descriptions.Item label="Publisher">{selectedReservationDetail.book.publisher || 'N/A'}</Descriptions.Item>
            </Descriptions>

            <Descriptions bordered column={1} title="Member Information">
              <Descriptions.Item label="Membership Number">{selectedReservationDetail.member.membership_number}</Descriptions.Item>
              <Descriptions.Item label="Name">
                {selectedReservationDetail.member.user.first_name} {selectedReservationDetail.member.user.last_name}
              </Descriptions.Item>
              <Descriptions.Item label="Email">{selectedReservationDetail.member.user.email}</Descriptions.Item>
            </Descriptions>

            <div style={{ display: 'flex', gap: '8px', marginTop: '24px' }}>
              <Button
                type="primary"
                icon={<CheckOutlined />}
                onClick={fulfillReservation}
                disabled={selectedReservationDetail.status !== 'READY'}
              >
                Fulfill Reservation
              </Button>
              <Button
                type="default"
                icon={<BellOutlined />}
                onClick={notifyMember}
                disabled={selectedReservationDetail.status !== 'READY'}
              >
                Notify Member
              </Button>
              <Button
                type="default"
                danger
                icon={<CloseOutlined />}
                onClick={cancelReservation}
                disabled={selectedReservationDetail.status === 'FULFILLED' || selectedReservationDetail.status === 'CANCELLED'}
              >
                Cancel Reservation
              </Button>
            </div>
          </div>
        )}
      </Drawer>
    </div>
  );
}