import { useState, useMemo, useEffect, useCallback, CSSProperties } from 'react';
import { Layout, Typography, Row, Col, Card, Statistic, Space, Button, Table, Modal, Input, List, Descriptions, Alert, Select, InputNumber, message } from 'antd';
import { BookOutlined, SwapOutlined, UserAddOutlined } from '@ant-design/icons';
import { request } from '../api/client';
import { useNavigate } from 'react-router-dom';
import { useAppContext } from '../store/AppContext';

interface LoanResponse {
  id: string;
  member_id: string;
  book_copy_id: string;
  checkout_date: string;
  due_date: string;
  return_date?: string | null;
  renewal_count: number;
  status: 'ACTIVE' | 'RETURNED' | 'OVERDUE' | 'LOST';
  checked_out_by_librarian_id?: string | null;
  checked_in_by_librarian_id?: string | null;
  notes?: string | null;
  created_at: string;
  updated_at: string;
}

interface ReservationResponse {
  id: string;
  member_id: string;
  book_id: string;
  reservation_date: string;
  expiration_date: string;
  status: 'PENDING' | 'READY' | 'FULFILLED' | 'CANCELLED' | 'EXPIRED';
  priority_order?: number | null;
  notified_date?: string | null;
  created_at: string;
  updated_at: string;
}

interface UserResponse {
  id: string;
  email: string;
  first_name: string;
  last_name: string;
}

interface MemberResponse {
  id: string;
  membership_number: string;
  user: UserResponse;
}

export default function LibrarianDashboardPage() {
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();
  const { currentUser } = useAppContext();

  const [checkoutsToday, setCheckoutsToday] = useState<number>(0);
  const [returnsToday, setReturnsToday] = useState<number>(0);
  const [overdueCount, setOverdueCount] = useState<number>(0);
  const [pendingReservationsCount, setPendingReservationsCount] = useState<number>(0);
  const [newMembersThisWeek, setNewMembersThisWeek] = useState<number>(0);
  const [overdueLoans, setOverdueLoans] = useState<LoanResponse[]>([]);
  const [pendingReservations, setPendingReservations] = useState<ReservationResponse[]>([]);
  const [checkoutModalVisible, setCheckoutModalVisible] = useState<boolean>(false);
  const [returnModalVisible, setReturnModalVisible] = useState<boolean>(false);
  const [checkoutMemberSearch, setCheckoutMemberSearch] = useState<string>('');
  const [checkoutMemberResults, setCheckoutMemberResults] = useState<MemberResponse[]>([]);
  const [selectedMember, setSelectedMember] = useState<MemberResponse | null>(null);
  const [checkoutBarcode, setCheckoutBarcode] = useState<string>('');
  const [memberEligibility, setMemberEligibility] = useState<Record<string, unknown> | null>(null);
  const [returnBarcode, setReturnBarcode] = useState<string>('');
  const [returnLoanDetails, setReturnLoanDetails] = useState<LoanResponse | null>(null);
  const [returnCondition, setReturnCondition] = useState<string>('GOOD');
  const [returnDamageFine, setReturnDamageFine] = useState<number>(0);
  const [loading, setLoading] = useState<boolean>(false);
  const [selectedReservationId, setSelectedReservationId] = useState<string>('');

  const overdueDays = useMemo(() => {
    if (!returnLoanDetails) return 0;
    return Math.max(0, Math.floor((Date.now() - new Date(returnLoanDetails.due_date).getTime()) / 86400000));
  }, [returnLoanDetails]);

  const overdueFineAmount = useMemo(() => {
    return overdueDays * 0.5;
  }, [overdueDays]);

  useEffect(() => {
    fetchOverdueLoans();
    fetchPendingReservations();
    fetchCheckoutsToday();
  }, []);

  const fetchOverdueLoans = async () => {
    try {
      const result = await request<LoanResponse[]>({
        method: 'GET',
        path: '/loans/',
        query: { status: 'OVERDUE', limit: 50 }
      });
      setOverdueLoans(result.data);
      setOverdueCount(result.data.length);
    } catch (error) {
      messageApi.error('Failed to load overdue loans');
    }
  };

  const fetchPendingReservations = async () => {
    try {
      const result = await request<ReservationResponse[]>({
        method: 'GET',
        path: '/reservations/',
        query: { status: 'READY', limit: 50 }
      });
      setPendingReservations(result.data);
      setPendingReservationsCount(result.data.length);
    } catch (error) {
      messageApi.error('Failed to load pending reservations');
    }
  };

  const fetchCheckoutsToday = async () => {
    try {
      const result = await request<LoanResponse[]>({
        method: 'GET',
        path: '/loans/',
        query: { status: 'ACTIVE', limit: 100 }
      });
      const today = new Date().toISOString().split('T')[0];
      const todayCheckouts = result.data.filter(loan => loan.checkout_date === today);
      setCheckoutsToday(todayCheckouts.length);
    } catch (error) {
      messageApi.error('Failed to load checkouts');
    }
  };

  const openCheckoutModal = () => {
    setCheckoutModalVisible(true);
    setSelectedMember(null);
    setCheckoutBarcode('');
    setMemberEligibility(null);
    setCheckoutMemberSearch('');
    setCheckoutMemberResults([]);
  };

  const closeCheckoutModal = () => {
    setCheckoutModalVisible(false);
  };

  const openReturnModal = () => {
    setReturnModalVisible(true);
    setReturnBarcode('');
    setReturnLoanDetails(null);
    setReturnCondition('GOOD');
    setReturnDamageFine(0);
  };

  const closeReturnModal = () => {
    setReturnModalVisible(false);
  };

  const searchMembers = async (searchTerm: string) => {
    if (!searchTerm) {
      setCheckoutMemberResults([]);
      return;
    }
    try {
      setLoading(true);
      const result = await request<MemberResponse[]>({
        method: 'GET',
        path: '/auth/members',
        query: { limit: 20, offset: 0 }
      });
      setCheckoutMemberResults(result.data);
    } catch (error) {
      messageApi.error('Failed to search members');
    } finally {
      setLoading(false);
    }
  };

  const handleMemberSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setCheckoutMemberSearch(value);
    searchMembers(value);
  };

  const selectMember = (member: MemberResponse) => {
    setSelectedMember(member);
    setCheckoutMemberResults([]);
  };

  const confirmCheckout = async () => {
    if (!selectedMember) {
      messageApi.error('Please select a member');
      return;
    }
    if (!checkoutBarcode) {
      messageApi.error('Please enter a book copy barcode');
      return;
    }

    Modal.confirm({
      title: 'Confirm Checkout',
      content: 'Are you sure you want to checkout this book?',
      onOk: async () => {
        try {
          setLoading(true);
          await request<LoanResponse>({
            method: 'POST',
            path: '/loans/checkout',
            body: {
              member_id: selectedMember.id,
              book_copy_id: checkoutBarcode,
              checked_out_by_librarian_id: currentUser?.id || null
            }
          });
          messageApi.success('Book checked out successfully!');
          setCheckoutModalVisible(false);
          fetchOverdueLoans();
          fetchPendingReservations();
          fetchCheckoutsToday();
        } catch (error) {
          messageApi.error('Checkout failed. Please verify member eligibility and book availability.');
        } finally {
          setLoading(false);
        }
      }
    });
  };

  const lookupReturnLoan = async () => {
    if (!returnBarcode) {
      messageApi.error('Please enter a barcode');
      return;
    }
    try {
      setLoading(true);
      const result = await request<LoanResponse[]>({
        method: 'GET',
        path: '/loans/',
        query: { status: 'ACTIVE', limit: 1 }
      });
      if (result.data.length > 0) {
        setReturnLoanDetails(result.data[0]);
      } else {
        messageApi.error('No active loan found for this barcode');
      }
    } catch (error) {
      messageApi.error('No active loan found for this barcode');
    } finally {
      setLoading(false);
    }
  };

  const confirmReturn = async () => {
    if (!returnLoanDetails) {
      messageApi.error('No loan found for this barcode');
      return;
    }

    Modal.confirm({
      title: 'Confirm Return',
      content: 'Are you sure you want to return this book?',
      onOk: async () => {
        try {
          setLoading(true);
          await request<LoanResponse>({
            method: 'POST',
            path: '/loans/{loan_id}/return',
            pathParams: { loan_id: returnLoanDetails.id },
            body: {
              checked_in_by_librarian_id: currentUser?.id || null,
              notes: returnCondition
            }
          });
          messageApi.success('Book returned successfully!');
          setReturnModalVisible(false);
          fetchOverdueLoans();
          fetchPendingReservations();
          fetchCheckoutsToday();
        } catch (error) {
          messageApi.error('Return failed. Please try again.');
        } finally {
          setLoading(false);
        }
      }
    });
  };

  const navigateToRegisterMember = () => {
    navigate('/staff/members');
  };

  const navigateToBooks = () => {
    navigate('/staff/books');
  };

  const navigateToCirculation = () => {
    navigate('/staff/circulation');
  };

  const navigateToReservations = () => {
    navigate('/staff/reservations');
  };

  const navigateToFines = () => {
    navigate('/staff/fines');
  };

  const navigateToReports = () => {
    navigate('/staff/reports');
  };

  const fulfillReservation = (reservationId: string) => {
    Modal.confirm({
      title: 'Fulfill Reservation',
      content: 'Are you sure you want to fulfill this reservation?',
      onOk: async () => {
        try {
          setLoading(true);
          messageApi.success('Reservation fulfilled. Proceed to checkout.');
          fetchPendingReservations();
        } catch (error) {
          messageApi.error('Failed to fulfill reservation');
        } finally {
          setLoading(false);
        }
      }
    });
  };

  const cancelReservation = (reservationId: string) => {
    setSelectedReservationId(reservationId);
    Modal.confirm({
      title: 'Cancel Reservation',
      content: 'Are you sure you want to cancel this reservation?',
      onOk: async () => {
        try {
          setLoading(true);
          await request<ReservationResponse>({
            method: 'POST',
            path: '/reservations/{reservation_id}/cancel',
            pathParams: { reservation_id: reservationId }
          });
          messageApi.info('Reservation cancelled.');
          fetchPendingReservations();
        } catch (error) {
          messageApi.error('Failed to cancel reservation');
        } finally {
          setLoading(false);
        }
      }
    });
  };

  const overdueColumns = useMemo(() => [
    { title: 'Book Title', dataIndex: 'book_title', key: 'book_title' },
    { title: 'Member Name', dataIndex: 'member_name', key: 'member_name' },
    { title: 'Due Date', dataIndex: 'due_date', key: 'due_date' },
    { title: 'Days Overdue', dataIndex: 'days_overdue', key: 'days_overdue' },
    { title: 'Fine Accrued', dataIndex: 'fine_accrued', key: 'fine_accrued' }
  ], []);

  const reservationsColumns = useMemo(() => [
    { title: 'Book Title', dataIndex: 'book_title', key: 'book_title' },
    { title: 'Member Name', dataIndex: 'member_name', key: 'member_name' },
    { title: 'Notification Date', dataIndex: 'notified_date', key: 'notified_date' },
    { title: 'Expires At', dataIndex: 'expiration_date', key: 'expiration_date' },
    {
      title: 'Action',
      dataIndex: 'action',
      key: 'action',
      render: (_: unknown, record: ReservationResponse) => (
        <Space size="small">
          <Button type="primary" size="small" onClick={() => fulfillReservation(record.id)}>
            Fulfill
          </Button>
          <Button type="default" danger size="small" onClick={() => cancelReservation(record.id)}>
            Cancel
          </Button>
        </Space>
      )
    }
  ], []);

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

  return (
    <div style={rootStyle}>
      {contextHolder}
      <Layout style={{ minHeight: '100vh', width: '100%', padding: '24px', background: '#f5f5f5' }}>
        <Typography.Title level={2} style={{ marginBottom: '8px' }}>
          Librarian Dashboard
        </Typography.Title>
        <Typography.Text type="secondary" style={{ marginBottom: '24px', display: 'block' }}>
          Welcome back! Here's your operational overview.
        </Typography.Text>

        <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
          <Col xs={24} sm={12} md={8} lg={4}>
            <Card size="small">
              <Statistic
                title="Checked Out Today"
                value={checkoutsToday}
                valueStyle={{ color: '#1677ff' }}
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={8} lg={4}>
            <Card size="small">
              <Statistic
                title="Returns Today"
                value={returnsToday}
                valueStyle={{ color: '#52c41a' }}
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={8} lg={4}>
            <Card size="small">
              <Statistic
                title="Overdue Books"
                value={overdueCount}
                valueStyle={{ color: '#ff4d4f' }}
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={8} lg={4}>
            <Card size="small">
              <Statistic
                title="Pending Reservations"
                value={pendingReservationsCount}
                valueStyle={{ color: '#faad14' }}
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={8} lg={4}>
            <Card size="small">
              <Statistic
                title="New Members (This Week)"
                value={newMembersThisWeek}
                valueStyle={{ color: '#722ed1' }}
              />
            </Card>
          </Col>
        </Row>

        <Card title="Quick Actions" style={{ marginBottom: '24px' }}>
          <Space size="middle" wrap>
            <Button type="primary" size="large" icon={<BookOutlined />} onClick={openCheckoutModal}>
              Checkout Book
            </Button>
            <Button type="primary" size="large" icon={<SwapOutlined />} onClick={openReturnModal}>
              Return Book
            </Button>
            <Button type="default" size="large" icon={<UserAddOutlined />} onClick={navigateToRegisterMember}>
              Register Member
            </Button>
            <Button type="link" size="middle" onClick={navigateToBooks}>
              Manage Books
            </Button>
            <Button type="link" size="middle" onClick={navigateToCirculation}>
              Circulation
            </Button>
            <Button type="link" size="middle" onClick={navigateToReservations}>
              Reservations
            </Button>
            <Button type="link" size="middle" onClick={navigateToFines}>
              Fines
            </Button>
            <Button type="link" size="middle" onClick={navigateToReports}>
              Reports
            </Button>
          </Space>
        </Card>

        <Card title="Overdue Books" style={{ marginBottom: '24px' }}>
          <Table
            dataSource={overdueLoans}
            columns={overdueColumns}
            pagination={{ pageSize: 10 }}
            size="middle"
            rowKey="id"
          />
        </Card>

        <Card title="Pending Reservations Ready for Pickup" style={{ marginBottom: '24px' }}>
          <Table
            dataSource={pendingReservations}
            columns={reservationsColumns}
            pagination={{ pageSize: 10 }}
            size="middle"
            rowKey="id"
          />
        </Card>
      </Layout>

      <Modal
        title="Checkout Book"
        open={checkoutModalVisible}
        onCancel={closeCheckoutModal}
        width={640}
        footer={null}
      >
        <Space direction="vertical" size="middle" style={{ width: '100%' }}>
          <Typography.Text strong>Search Member (by name, email, or membership number)</Typography.Text>
          <Input
            placeholder="Enter name, email, or membership number..."
            value={checkoutMemberSearch}
            onChange={handleMemberSearchChange}
            allowClear
          />
          {checkoutMemberResults.length > 0 && (
            <List
              size="small"
              bordered
              dataSource={checkoutMemberResults}
              style={{ maxHeight: '150px', overflow: 'auto' }}
              renderItem={(item) => (
                <List.Item onClick={() => selectMember(item)} style={{ cursor: 'pointer' }}>
                  {item.user.first_name} {item.user.last_name} - {item.membership_number}
                </List.Item>
              )}
            />
          )}
          {selectedMember && (
            <Descriptions title="Member Eligibility" bordered size="small" column={1}>
              <Descriptions.Item label="Name">
                {selectedMember.user.first_name} {selectedMember.user.last_name}
              </Descriptions.Item>
              <Descriptions.Item label="Membership Number">
                {selectedMember.membership_number}
              </Descriptions.Item>
            </Descriptions>
          )}
          <Typography.Text strong>Book Copy Barcode</Typography.Text>
          <Input
            placeholder="Scan or enter barcode..."
            value={checkoutBarcode}
            onChange={(e) => setCheckoutBarcode(e.target.value)}
            allowClear
          />
          <Alert
            type="info"
            showIcon
            message="Due date will be calculated based on system loan period configuration"
          />
          <Button type="primary" block size="large" onClick={confirmCheckout} style={{ marginTop: '16px' }}>
            Confirm Checkout
          </Button>
        </Space>
      </Modal>

      <Modal
        title="Return Book"
        open={returnModalVisible}
        onCancel={closeReturnModal}
        width={600}
        footer={null}
      >
        <Space direction="vertical" size="middle" style={{ width: '100%' }}>
          <Typography.Text strong>Scan Book Barcode</Typography.Text>
          <Input.Search
            placeholder="Scan or enter barcode..."
            value={returnBarcode}
            onChange={(e) => setReturnBarcode(e.target.value)}
            enterButton="Lookup"
            onSearch={lookupReturnLoan}
          />
          {returnLoanDetails && (
            <>
              <Descriptions title="Loan Details" bordered size="small" column={1}>
                <Descriptions.Item label="Member ID">{returnLoanDetails.member_id}</Descriptions.Item>
                <Descriptions.Item label="Book Copy ID">{returnLoanDetails.book_copy_id}</Descriptions.Item>
                <Descriptions.Item label="Checkout Date">{returnLoanDetails.checkout_date}</Descriptions.Item>
                <Descriptions.Item label="Due Date">{returnLoanDetails.due_date}</Descriptions.Item>
                <Descriptions.Item label="Days Overdue">{overdueDays}</Descriptions.Item>
              </Descriptions>
              {overdueDays > 0 && (
                <Alert
                  type="warning"
                  showIcon
                  message={`Overdue fine: $${overdueFineAmount.toFixed(2)}`}
                />
              )}
            </>
          )}
          <Typography.Text strong>Condition Assessment</Typography.Text>
          <Select
            value={returnCondition}
            onChange={(value) => setReturnCondition(value)}
            style={{ width: '100%' }}
            placeholder="Select condition..."
            options={[
              { label: 'Excellent', value: 'EXCELLENT' },
              { label: 'Good', value: 'GOOD' },
              { label: 'Fair', value: 'FAIR' },
              { label: 'Poor', value: 'POOR' },
              { label: 'Damaged', value: 'DAMAGED' }
            ]}
          />
          <Typography.Text strong>Damage Fine (optional)</Typography.Text>
          <InputNumber
            min={0}
            precision={2}
            prefix="$"
            placeholder="0.00"
            value={returnDamageFine}
            onChange={(value) => setReturnDamageFine(value || 0)}
            style={{ width: '100%' }}
          />
          <Button type="primary" block size="large" onClick={confirmReturn} style={{ marginTop: '16px' }}>
            Confirm Return
          </Button>
        </Space>
      </Modal>
    </div>
  );
}