import { useState, useMemo, useEffect, useCallback } from 'react';
import { Layout, Card, Steps, Input, Button, List, Descriptions, Alert, Result, Breadcrumb, Typography, message, Modal } from 'antd';
import { SearchOutlined, ArrowRightOutlined, ArrowLeftOutlined, CheckOutlined, PlusOutlined } from '@ant-design/icons';
import { request } from '../api/client';
import { useNavigate } from 'react-router-dom';
import { useAppContext } from '../store/AppContext';

interface MemberUser {
  first_name: string;
  last_name: string;
  email: string;
}

interface Member {
  id: string;
  user_id: string;
  membership_number: string;
  membership_date: string;
  membership_expiry: string | null;
  borrowing_limit: number;
  account_standing: string;
  created_at: string;
  updated_at: string;
  user?: MemberUser;
}

interface Book {
  id: string;
  isbn: string | null;
  title: string;
  subtitle: string | null;
  publisher_id: string | null;
  publication_date: string | null;
  edition: string | null;
  language: string;
  pages: number | null;
  description: string | null;
  book_format: string;
  total_copies: number;
  available_copies: number;
  location: string | null;
  status: string;
  created_at: string;
  updated_at: string;
}

interface Loan {
  id: string;
  book_id: string;
  member_id: string;
  librarian_id: string | null;
  checkout_date: string;
  due_date: string;
  return_date: string | null;
  renewal_count: number;
  status: string;
  notes: string | null;
  created_at: string;
  updated_at: string;
}

interface Fine {
  id: string;
  member_id: string;
  loan_id: string | null;
  amount: number;
  amount_paid: number;
  reason: string;
  description: string | null;
  status: string;
  assessed_date: string;
  due_date: string | null;
  created_at: string;
  updated_at: string;
}

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

  const [currentStep, setCurrentStep] = useState<number>(0);
  const [memberSearchQuery, setMemberSearchQuery] = useState<string>('');
  const [selectedMember, setSelectedMember] = useState<Member | null>(null);
  const [memberLoans, setMemberLoans] = useState<Loan[]>([]);
  const [memberFines, setMemberFines] = useState<Fine[]>([]);
  const [bookSearchQuery, setBookSearchQuery] = useState<string>('');
  const [selectedBook, setSelectedBook] = useState<Book | null>(null);
  const [memberSearchLoading, setMemberSearchLoading] = useState<boolean>(false);
  const [bookSearchLoading, setBookSearchLoading] = useState<boolean>(false);
  const [checkoutLoading, setCheckoutLoading] = useState<boolean>(false);
  const [checkoutSuccess, setCheckoutSuccess] = useState<boolean>(false);
  const [createdLoan, setCreatedLoan] = useState<Loan | null>(null);
  const [memberValidationError, setMemberValidationError] = useState<string>('');
  const [bookValidationError, setBookValidationError] = useState<string>('');
  const [memberSearchResults, setMemberSearchResults] = useState<Member[]>([]);
  const [bookSearchResults, setBookSearchResults] = useState<Book[]>([]);

  const memberActiveLoansCount = useMemo(() => {
    return memberLoans.filter(l => l.status === 'ACTIVE').length;
  }, [memberLoans]);

  const memberOutstandingFinesTotal = useMemo(() => {
    return memberFines
      .filter(f => f.status === 'UNPAID' || f.status === 'PARTIAL')
      .reduce((sum, f) => sum + (f.amount - f.amount_paid), 0);
  }, [memberFines]);

  const calculatedDueDate = useMemo(() => {
    const loanPeriodDays = librarySettings?.loanPeriodDays || 14;
    return new Date(Date.now() + loanPeriodDays * 86400000).toISOString();
  }, [librarySettings]);

  const isMemberEligible = useMemo(() => {
    if (!selectedMember) return false;
    const maxLoans = selectedMember.borrowing_limit || librarySettings?.maxLoans || 5;
    const suspensionThreshold = librarySettings?.suspensionThreshold || 50;
    return (
      selectedMember.account_standing === 'GOOD' &&
      memberActiveLoansCount < maxLoans &&
      memberOutstandingFinesTotal < suspensionThreshold
    );
  }, [selectedMember, memberActiveLoansCount, memberOutstandingFinesTotal, librarySettings]);

  const isBookAvailable = useMemo(() => {
    return selectedBook && selectedBook.status === 'AVAILABLE' && selectedBook.available_copies > 0;
  }, [selectedBook]);

  const searchMember = useCallback(async () => {
    if (!memberSearchQuery.trim()) {
      messageApi.error('Please enter a member ID, name, or email to search');
      return;
    }
    setMemberSearchLoading(true);
    try {
      const result = await request<Member[]>({
        method: 'GET',
        path: '/users/members',
        query: { limit: 10, offset: 0 }
      });
      setMemberSearchResults(result.data);
      setMemberSearchLoading(false);
    } catch (error) {
      messageApi.error('Failed to search members. Please try again.');
      setMemberSearchLoading(false);
    }
  }, [memberSearchQuery, messageApi]);

  const selectMember = useCallback(async (record: Member) => {
    setSelectedMember(record);
    setMemberValidationError('');
    setMemberSearchLoading(true);
    try {
      const detailResult = await request<Member>({
        method: 'GET',
        path: '/users/members/{member_id}/details',
        pathParams: { member_id: record.id }
      });
      setSelectedMember(detailResult.data);

      const loansResult = await request<Loan[]>({
        method: 'GET',
        path: '/circulation/loans',
        query: { member_id: record.id, loan_status: 'ACTIVE', limit: 50 }
      });
      setMemberLoans(loansResult.data);

      const finesResult = await request<Fine[]>({
        method: 'GET',
        path: '/fines/',
        query: { member_id: record.id, status: 'UNPAID', limit: 50 }
      });
      setMemberFines(finesResult.data);

      setMemberSearchLoading(false);
    } catch (error) {
      messageApi.error('Failed to load member details.');
      setMemberSearchLoading(false);
    }
  }, [messageApi]);

  const proceedToBookStep = useCallback(() => {
    setCurrentStep(1);
  }, []);

  const searchBook = useCallback(async () => {
    if (!bookSearchQuery.trim()) {
      messageApi.error('Please enter a book ID, ISBN, or title to search');
      return;
    }
    setBookSearchLoading(true);
    try {
      const result = await request<Book[]>({
        method: 'GET',
        path: '/books',
        query: { search: bookSearchQuery, limit: 10, offset: 0 }
      });
      setBookSearchResults(result.data);
      setBookSearchLoading(false);
    } catch (error) {
      messageApi.error('Failed to search books. Please try again.');
      setBookSearchLoading(false);
    }
  }, [bookSearchQuery, messageApi]);

  const selectBook = useCallback((record: Book) => {
    setSelectedBook(record);
    if (record.status !== 'AVAILABLE') {
      setBookValidationError('This book is not available for checkout');
    } else {
      setBookValidationError('');
    }
  }, []);

  const processCheckout = useCallback(async () => {
    if (!selectedBook || !selectedMember || !currentUser) return;

    Modal.confirm({
      title: 'Confirm Checkout',
      content: 'Are you sure you want to process this checkout?',
      onOk: async () => {
        setCheckoutLoading(true);
        try {
          const result = await request<Loan>({
            method: 'POST',
            path: '/circulation/loans',
            body: {
              book_id: selectedBook.id,
              member_id: selectedMember.id,
              librarian_id: currentUser.id,
              checkout_date: new Date().toISOString(),
              due_date: calculatedDueDate,
              status: 'ACTIVE'
            }
          });
          setCreatedLoan(result.data);
          setCheckoutLoading(false);
          setCheckoutSuccess(true);
          setCurrentStep(2);
          messageApi.success('Book checked out successfully!');
        } catch (error) {
          messageApi.error('Failed to process checkout. Please try again.');
          setCheckoutLoading(false);
        }
      }
    });
  }, [selectedBook, selectedMember, currentUser, calculatedDueDate, messageApi]);

  const checkoutAnother = useCallback(() => {
    setCurrentStep(1);
    setSelectedBook(null);
    setBookSearchQuery('');
    setBookSearchResults([]);
    setBookValidationError('');
    setCheckoutSuccess(false);
    setCreatedLoan(null);
  }, []);

  const startNewCheckout = useCallback(() => {
    setCurrentStep(0);
    setSelectedMember(null);
    setSelectedBook(null);
    setMemberSearchQuery('');
    setBookSearchQuery('');
    setMemberSearchResults([]);
    setBookSearchResults([]);
    setMemberLoans([]);
    setMemberFines([]);
    setMemberValidationError('');
    setBookValidationError('');
    setCheckoutSuccess(false);
    setCreatedLoan(null);
  }, []);

  const goBackToMemberStep = useCallback(() => {
    setCurrentStep(0);
  }, []);

  const navigateToDashboard = useCallback(() => {
    navigate('/librarian/dashboard');
  }, [navigate]);

  const navigateToLoans = useCallback(() => {
    navigate('/circulation/loans');
  }, [navigate]);

  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' }}>
          <Button type="link" icon={<ArrowLeftOutlined />} onClick={navigateToDashboard} style={{ paddingLeft: '0' }}>
            Back to Dashboard
          </Button>
          <Typography.Title level={2} style={{ marginBottom: '4px' }}>
            Book Checkout
          </Typography.Title>
          <Breadcrumb
            items={[
              { title: 'Circulation' },
              { title: 'Book Checkout' }
            ]}
          />
        </div>

        <Card style={{ marginBottom: '24px' }}>
          <Steps
            current={currentStep}
            items={[
              { title: 'Member Lookup', description: 'Find and verify member' },
              { title: 'Book Selection', description: 'Search and select book' },
              { title: 'Confirmation', description: 'Checkout receipt' }
            ]}
          />
        </Card>

        <div style={{ marginTop: '24px' }}>
          {currentStep === 0 && (
            <div>
              <Card title="Search Member" style={{ marginBottom: '16px' }}>
                <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
                  <Input.Search
                    placeholder="Enter member ID, name, or email..."
                    allowClear
                    size="large"
                    value={memberSearchQuery}
                    onChange={(e) => setMemberSearchQuery(e.target.value)}
                    style={{ flex: 1 }}
                  />
                  <Button
                    type="primary"
                    size="large"
                    icon={<SearchOutlined />}
                    loading={memberSearchLoading}
                    onClick={searchMember}
                  >
                    Search
                  </Button>
                </div>
                {memberSearchResults.length > 0 && (
                  <List
                    size="small"
                    bordered
                    dataSource={memberSearchResults}
                    style={{ marginTop: '12px' }}
                    renderItem={(item) => (
                      <List.Item
                        onClick={() => selectMember(item)}
                        style={{ cursor: 'pointer' }}
                      >
                        <List.Item.Meta
                          title={item.membership_number}
                          description={`Account Standing: ${item.account_standing}`}
                        />
                      </List.Item>
                    )}
                  />
                )}
              </Card>

              {selectedMember && (
                <Card title="Member Information" style={{ marginTop: '16px' }}>
                  <Descriptions bordered column={2}>
                    <Descriptions.Item label="Name">
                      {selectedMember.user ? `${selectedMember.user.first_name} ${selectedMember.user.last_name}` : ''}
                    </Descriptions.Item>
                    <Descriptions.Item label="Member ID">
                      {selectedMember.membership_number}
                    </Descriptions.Item>
                    <Descriptions.Item label="Account Standing">
                      {selectedMember.account_standing}
                    </Descriptions.Item>
                    <Descriptions.Item label="Current Loans">
                      {memberActiveLoansCount}/{selectedMember.borrowing_limit || 5}
                    </Descriptions.Item>
                    <Descriptions.Item label="Outstanding Fines">
                      ${memberOutstandingFinesTotal.toFixed(2)}
                    </Descriptions.Item>
                    <Descriptions.Item label="Membership Expiry">
                      {selectedMember.membership_expiry || 'N/A'}
                    </Descriptions.Item>
                  </Descriptions>
                  {memberValidationError && (
                    <Alert
                      type="error"
                      showIcon
                      message={memberValidationError}
                      style={{ marginTop: '12px' }}
                    />
                  )}
                </Card>
              )}

              {selectedMember && selectedMember.account_standing === 'SUSPENDED' && (
                <Alert
                  type="error"
                  showIcon
                  message="Member account is suspended. Cannot proceed with checkout."
                  style={{ marginTop: '12px' }}
                />
              )}

              {selectedMember && memberOutstandingFinesTotal >= (librarySettings?.suspensionThreshold || 50) && (
                <Alert
                  type="warning"
                  showIcon
                  message="Member has outstanding fines exceeding the threshold. Checkout may be restricted."
                  style={{ marginTop: '12px' }}
                />
              )}

              {isMemberEligible && (
                <Alert
                  type="success"
                  showIcon
                  message="Member is eligible for checkout."
                  style={{ marginTop: '12px' }}
                />
              )}

              {selectedMember && (
                <Button
                  type="primary"
                  size="large"
                  disabled={!isMemberEligible}
                  icon={<ArrowRightOutlined />}
                  onClick={proceedToBookStep}
                  style={{ marginTop: '16px' }}
                >
                  Proceed to Book Selection
                </Button>
              )}
            </div>
          )}

          {currentStep === 1 && (
            <div>
              <Card title="Search Book" style={{ marginBottom: '16px' }}>
                <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
                  <Input.Search
                    placeholder="Enter book ID, ISBN, or title..."
                    allowClear
                    size="large"
                    value={bookSearchQuery}
                    onChange={(e) => setBookSearchQuery(e.target.value)}
                    style={{ flex: 1 }}
                  />
                  <Button
                    type="primary"
                    size="large"
                    icon={<SearchOutlined />}
                    loading={bookSearchLoading}
                    onClick={searchBook}
                  >
                    Search
                  </Button>
                </div>
                {bookSearchResults.length > 0 && (
                  <List
                    size="small"
                    bordered
                    dataSource={bookSearchResults}
                    style={{ marginTop: '12px' }}
                    renderItem={(item) => (
                      <List.Item
                        onClick={() => selectBook(item)}
                        style={{ cursor: 'pointer' }}
                      >
                        <List.Item.Meta
                          title={item.title}
                          description={`ISBN: ${item.isbn || 'N/A'} | Status: ${item.status} | Available: ${item.available_copies}`}
                        />
                      </List.Item>
                    )}
                  />
                )}
              </Card>

              {selectedBook && (
                <Card title="Book Information" style={{ marginTop: '16px' }}>
                  <Descriptions bordered column={2}>
                    <Descriptions.Item label="Title">{selectedBook.title}</Descriptions.Item>
                    <Descriptions.Item label="ISBN">{selectedBook.isbn || 'N/A'}</Descriptions.Item>
                    <Descriptions.Item label="Status">{selectedBook.status}</Descriptions.Item>
                    <Descriptions.Item label="Shelf Location">{selectedBook.location || 'N/A'}</Descriptions.Item>
                    <Descriptions.Item label="Available Copies">{selectedBook.available_copies}</Descriptions.Item>
                    <Descriptions.Item label="Format">{selectedBook.book_format}</Descriptions.Item>
                  </Descriptions>
                  {bookValidationError && (
                    <Alert
                      type="error"
                      showIcon
                      message={bookValidationError}
                      style={{ marginTop: '12px' }}
                    />
                  )}
                </Card>
              )}

              {isBookAvailable && (
                <Alert
                  type="success"
                  showIcon
                  message="Book is available for checkout."
                  style={{ marginTop: '12px' }}
                />
              )}

              {isBookAvailable && selectedBook && (
                <Card title="Checkout Summary" style={{ marginTop: '16px' }}>
                  <Descriptions bordered column={1}>
                    <Descriptions.Item label="Member">{selectedMember?.membership_number}</Descriptions.Item>
                    <Descriptions.Item label="Book">{selectedBook.title}</Descriptions.Item>
                    <Descriptions.Item label="Checkout Date">{new Date().toLocaleDateString()}</Descriptions.Item>
                    <Descriptions.Item label="Due Date">
                      {new Date(calculatedDueDate).toLocaleDateString()}
                    </Descriptions.Item>
                    <Descriptions.Item label="Loan Period">
                      {librarySettings?.loanPeriodDays || 14} days
                    </Descriptions.Item>
                  </Descriptions>
                </Card>
              )}

              <div style={{ display: 'flex', gap: '12px', marginTop: '16px' }}>
                <Button size="large" icon={<ArrowLeftOutlined />} onClick={goBackToMemberStep}>
                  Back to Member
                </Button>
                <Button
                  type="primary"
                  size="large"
                  disabled={!isBookAvailable}
                  loading={checkoutLoading}
                  icon={<CheckOutlined />}
                  onClick={processCheckout}
                >
                  Process Checkout
                </Button>
              </div>
            </div>
          )}

          {currentStep === 2 && (
            <div>
              <Result
                status="success"
                title="Checkout Successful!"
                subTitle="The book has been checked out to the member."
              />
              <Card title="Checkout Receipt" style={{ marginTop: '16px', maxWidth: '600px', margin: '0 auto' }}>
                <Descriptions bordered column={1}>
                  <Descriptions.Item label="Member">{selectedMember?.membership_number}</Descriptions.Item>
                  <Descriptions.Item label="Book Title">{selectedBook?.title}</Descriptions.Item>
                  <Descriptions.Item label="ISBN">{selectedBook?.isbn || 'N/A'}</Descriptions.Item>
                  <Descriptions.Item label="Checkout Date">
                    {createdLoan ? new Date(createdLoan.checkout_date).toLocaleDateString() : ''}
                  </Descriptions.Item>
                  <Descriptions.Item label="Due Date">
                    {createdLoan ? new Date(createdLoan.due_date).toLocaleDateString() : ''}
                  </Descriptions.Item>
                  <Descriptions.Item label="Loan ID">{createdLoan?.id}</Descriptions.Item>
                </Descriptions>
              </Card>
              <div style={{ display: 'flex', gap: '12px', justifyContent: 'center', marginTop: '24px' }}>
                <Button type="primary" size="large" icon={<PlusOutlined />} onClick={checkoutAnother}>
                  Checkout Another Book (Same Member)
                </Button>
                <Button size="large" onClick={startNewCheckout}>
                  New Checkout
                </Button>
                <Button type="link" size="large" onClick={navigateToLoans}>
                  View All Loans
                </Button>
              </div>
            </div>
          )}
        </div>
      </Layout>
    </div>
  );
}