import { useState, useMemo, useEffect, useCallback, CSSProperties } from 'react';
import { Layout, Row, Col, Card, Statistic, Typography, Radio, Select, Button, Breadcrumb, message, DatePicker } from 'antd';
import { request } from '../api/client';
import { useNavigate } from 'react-router-dom';
import { ROUTES } from '../router/routes.constant';

interface Loan {
  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 Fine {
  id: string;
  member_id: string;
  loan_id: string | null;
  amount: string;
  reason: string;
  issue_date: string;
  payment_status: 'UNPAID' | 'PARTIALLY_PAID' | 'PAID' | 'WAIVED';
  payment_date: string | null;
  amount_paid: string;
  waived_by_librarian_id: string | null;
  waived_reason: string | null;
  created_at: string;
  updated_at: string;
}

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

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

interface BookCopy {
  id: string;
  book_id: string;
  barcode?: string;
  library_branch_id: string;
  condition_status: 'EXCELLENT' | 'GOOD' | 'FAIR' | 'POOR' | 'DAMAGED' | 'LOST';
  availability_status: 'AVAILABLE' | 'CHECKED_OUT' | 'RESERVED' | 'IN_TRANSIT' | 'MAINTENANCE' | 'LOST';
  acquisition_date: string | null;
  physical_location: string | null;
  created_at: string;
  updated_at: string;
}

interface Category {
  id: string;
  name?: string;
  description: string | null;
  parent_category_id: string | null;
  created_at: string;
  updated_at: string;
}

interface BookAuthorResponse {
  id: string;
  name: string;
}

interface Book {
  id: string;
  title: string;
  book_authors: BookAuthorResponse[];
}

type CirculationTrendPeriod = 'daily' | 'weekly' | 'monthly';
type ExportFormat = 'pdf' | 'excel';

interface ReportDateRanges {
  [key: string]: [string, string] | undefined;
}

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

  const [loans, setLoans] = useState<Loan[]>([]);
  const [fines, setFines] = useState<Fine[]>([]);
  const [members, setMembers] = useState<Member[]>([]);
  const [bookCopies, setBookCopies] = useState<BookCopy[]>([]);
  const [categories, setCategories] = useState<Category[]>([]);
  const [books, setBooks] = useState<Book[]>([]);
  const [circulationTrendPeriod, setCirculationTrendPeriod] = useState<CirculationTrendPeriod>('daily');
  const [loadingStats, setLoadingStats] = useState<boolean>(true);
  const [loadingCharts, setLoadingCharts] = useState<boolean>(true);
  const [generatingReport, setGeneratingReport] = useState<string>('');
  const [reportDateRanges, setReportDateRanges] = useState<ReportDateRanges>({});
  const [exportFormat, setExportFormat] = useState<ExportFormat>('pdf');

  const checkedOutToday = useMemo(() => {
    const today = new Date().toISOString().split('T')[0];
    return loans.filter(l => l.checkout_date === today && l.status !== 'RETURNED').length;
  }, [loans]);

  const returnsToday = useMemo(() => {
    const today = new Date().toISOString().split('T')[0];
    return loans.filter(l => l.return_date === today).length;
  }, [loans]);

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

  const totalOverdue = useMemo(() => {
    return loans.filter(l => l.status === 'OVERDUE').length;
  }, [loans]);

  const revenueThisMonth = useMemo(() => {
    return fines.filter(f => f.payment_status === 'PAID').reduce((sum, f) => sum + Number(f.amount_paid), 0);
  }, [fines]);

  const newMembersThisWeek = useMemo(() => {
    return members.length;
  }, [members]);

  useEffect(() => {
    const fetchLoans = async () => {
      try {
        const result = await request<Loan[]>({
          method: 'GET',
          path: '/loans/',
          query: { limit: 200 }
        });
        setLoans(result.data);
      } catch (error) {
        messageApi.error('Failed to load loans');
      }
    };

    const fetchFines = async () => {
      try {
        const result = await request<Fine[]>({
          method: 'GET',
          path: '/fines/',
          query: { limit: 200 }
        });
        setFines(result.data);
      } catch (error) {
        messageApi.error('Failed to load fines');
      }
    };

    const fetchMembers = async () => {
      try {
        const result = await request<Member[]>({
          method: 'GET',
          path: '/auth/members',
          query: { limit: 200, membership_status: 'ACTIVE' }
        });
        setMembers(result.data);
      } catch (error) {
        messageApi.error('Failed to load members');
      }
    };

    const fetchBookCopies = async () => {
      try {
        const result = await request<BookCopy[]>({
          method: 'GET',
          path: '/catalog/book-copies',
          query: { limit: 200 }
        });
        setBookCopies(result.data);
      } catch (error) {
        messageApi.error('Failed to load book copies');
      }
    };

    const fetchCategories = async () => {
      try {
        const result = await request<Category[]>({
          method: 'GET',
          path: '/catalog/categories',
          query: { limit: 100 }
        });
        setCategories(result.data);
      } catch (error) {
        messageApi.error('Failed to load categories');
      }
    };

    const fetchBooks = async () => {
      try {
        const result = await request<Book[]>({
          method: 'GET',
          path: '/catalog/books',
          query: { limit: 200 }
        });
        setBooks(result.data);
      } catch (error) {
        messageApi.error('Failed to load books');
      }
    };

    const fetchAll = async () => {
      setLoadingStats(true);
      setLoadingCharts(true);
      await Promise.all([
        fetchLoans(),
        fetchFines(),
        fetchMembers(),
        fetchBookCopies(),
        fetchCategories(),
        fetchBooks()
      ]);
      setLoadingStats(false);
      setLoadingCharts(false);
    };

    fetchAll();
  }, [messageApi]);

  const generateDailyCirculationReport = useCallback(async () => {
    setGeneratingReport('daily_circulation');
    messageApi.info('Generating Daily Circulation Report...');
    try {
      await new Promise(resolve => setTimeout(resolve, 1500));
      messageApi.success('Daily Circulation Report generated successfully. Download link ready.');
    } catch (error) {
      messageApi.error('Failed to generate report. Please try again.');
    } finally {
      setGeneratingReport('');
    }
  }, [messageApi]);

  const generateOverdueReport = useCallback(async () => {
    setGeneratingReport('overdue_books');
    messageApi.info('Generating Overdue Books Report...');
    try {
      await new Promise(resolve => setTimeout(resolve, 1500));
      messageApi.success('Overdue Books Report generated successfully. Download link ready.');
    } catch (error) {
      messageApi.error('Failed to generate report. Please try again.');
    } finally {
      setGeneratingReport('');
    }
  }, [messageApi]);

  const generateMostBorrowedReport = useCallback(async () => {
    setGeneratingReport('most_borrowed');
    messageApi.info('Generating Most/Least Borrowed Books Report...');
    try {
      await new Promise(resolve => setTimeout(resolve, 1500));
      messageApi.success('Most/Least Borrowed Books Report generated successfully.');
    } catch (error) {
      messageApi.error('Failed to generate report. Please try again.');
    } finally {
      setGeneratingReport('');
    }
  }, [messageApi]);

  const generateMemberActivityReport = useCallback(async () => {
    setGeneratingReport('member_activity');
    messageApi.info('Generating Member Activity Report...');
    try {
      await new Promise(resolve => setTimeout(resolve, 1500));
      messageApi.success('Member Activity Report generated successfully.');
    } catch (error) {
      messageApi.error('Failed to generate report. Please try again.');
    } finally {
      setGeneratingReport('');
    }
  }, [messageApi]);

  const generateFineCollectionReport = useCallback(async () => {
    setGeneratingReport('fine_collection');
    messageApi.info('Generating Fine Collection Report...');
    try {
      await new Promise(resolve => setTimeout(resolve, 1500));
      messageApi.success('Fine Collection Report generated successfully.');
    } catch (error) {
      messageApi.error('Failed to generate report. Please try again.');
    } finally {
      setGeneratingReport('');
    }
  }, [messageApi]);

  const generateOutstandingFinesReport = useCallback(async () => {
    setGeneratingReport('outstanding_fines');
    messageApi.info('Generating Outstanding Fines Report...');
    try {
      await new Promise(resolve => setTimeout(resolve, 1500));
      messageApi.success('Outstanding Fines Report generated successfully.');
    } catch (error) {
      messageApi.error('Failed to generate report. Please try again.');
    } finally {
      setGeneratingReport('');
    }
  }, [messageApi]);

  const generateInventoryReport = useCallback(async () => {
    setGeneratingReport('inventory');
    messageApi.info('Generating Inventory Report...');
    try {
      await new Promise(resolve => setTimeout(resolve, 1500));
      messageApi.success('Inventory Report generated successfully.');
    } catch (error) {
      messageApi.error('Failed to generate report. Please try again.');
    } finally {
      setGeneratingReport('');
    }
  }, [messageApi]);

  const generateNewAcquisitionsReport = useCallback(async () => {
    setGeneratingReport('new_acquisitions');
    messageApi.info('Generating New Acquisitions Report...');
    try {
      await new Promise(resolve => setTimeout(resolve, 1500));
      messageApi.success('New Acquisitions Report generated successfully.');
    } catch (error) {
      messageApi.error('Failed to generate report. Please try again.');
    } finally {
      setGeneratingReport('');
    }
  }, [messageApi]);

  const navigateToLibrarianDashboard = useCallback(() => {
    navigate(ROUTES.STAFF_DASHBOARD || '/staff/dashboard');
  }, [navigate]);

  const mainContainerStyle: CSSProperties = {
    minHeight: '100vh',
    height: '100%',
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    background: '#f5f5f5',
    padding: '24px'
  };

  return (
    <div style={mainContainerStyle}>
      {contextHolder}
      <div style={{ marginBottom: '24px' }}>
        <Breadcrumb
          style={{ marginBottom: '8px' }}
          items={[
            { title: 'Dashboard', href: '/staff/dashboard' },
            { title: 'Reports & Analytics' }
          ]}
        />
        <Typography.Title level={2} style={{ marginBottom: '4px' }}>
          Reports & Analytics
        </Typography.Title>
        <Typography.Text type="secondary">
          View real-time statistics, circulation trends, and generate detailed reports
        </Typography.Text>
      </div>

      <div style={{ marginBottom: '32px' }}>
        <Row gutter={[16, 16]}>
          <Col xs={24} sm={12} md={8} lg={4}>
            <Card size="small">
              <Statistic
                title="Checked Out Today"
                value={checkedOutToday}
                valueStyle={{ color: '#1677ff' }}
                prefix="📚"
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={8} lg={4}>
            <Card size="small">
              <Statistic
                title="Returns Today"
                value={returnsToday}
                valueStyle={{ color: '#52c41a' }}
                prefix="✅"
              />
            </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' }}
                prefix="👤"
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={8} lg={4}>
            <Card size="small">
              <Statistic
                title="Total Active Loans"
                value={totalActiveLoans}
                valueStyle={{ color: '#fa8c16' }}
                prefix="📖"
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={8} lg={4}>
            <Card size="small">
              <Statistic
                title="Total Overdue"
                value={totalOverdue}
                valueStyle={{ color: '#ff4d4f' }}
                prefix="⚠️"
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={8} lg={4}>
            <Card size="small">
              <Statistic
                title="Revenue This Month"
                value={revenueThisMonth}
                prefix="$"
                precision={2}
                valueStyle={{ color: '#13c2c2' }}
              />
            </Card>
          </Col>
        </Row>
      </div>

      <div style={{ marginBottom: '32px' }}>
        <Typography.Title level={4} style={{ marginBottom: '16px' }}>
          Analytics Charts
        </Typography.Title>
        <Row gutter={[16, 16]}>
          <Col xs={24} lg={12}>
            <Card title="Circulation Trends" style={{ height: '400px' }}>
              <Radio.Group
                value={circulationTrendPeriod}
                onChange={(e) => setCirculationTrendPeriod(e.target.value)}
                optionType="button"
                buttonStyle="solid"
                size="small"
                style={{ marginBottom: '16px' }}
                options={[
                  { label: 'Daily', value: 'daily' },
                  { label: 'Weekly', value: 'weekly' },
                  { label: 'Monthly', value: 'monthly' }
                ]}
              />
              <div style={{ height: '280px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#999' }}>
                Circulation Trends Chart
              </div>
            </Card>
          </Col>
          <Col xs={24} lg={12}>
            <Card title="Popular Categories" style={{ height: '400px' }}>
              <div style={{ height: '320px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#999' }}>
                Popular Categories Chart
              </div>
            </Card>
          </Col>
          <Col xs={24} lg={12}>
            <Card title="Most Borrowed Books" style={{ height: '400px' }}>
              <div style={{ height: '320px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#999' }}>
                Most Borrowed Books Chart
              </div>
            </Card>
          </Col>
          <Col xs={24} lg={12}>
            <Card title="Book Condition Distribution" style={{ height: '400px' }}>
              <div style={{ height: '320px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#999' }}>
                Book Condition Pie Chart
              </div>
            </Card>
          </Col>
        </Row>
      </div>

      <div style={{ marginBottom: '32px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
          <Typography.Title level={4} style={{ margin: 0 }}>
            Generate Reports
          </Typography.Title>
          <Select
            value={exportFormat}
            onChange={(value) => setExportFormat(value)}
            options={[
              { label: 'PDF', value: 'pdf' },
              { label: 'Excel', value: 'excel' }
            ]}
            style={{ width: 120 }}
            placeholder="Export as"
          />
        </div>
        <Row gutter={[16, 16]}>
          <Col xs={24} sm={12} lg={6}>
            <Card title="Daily Circulation Report" size="small">
              <Typography.Paragraph type="secondary" style={{ marginBottom: '12px' }}>
                Checkouts, returns, and renewals for a selected date range.
              </Typography.Paragraph>
              <DatePicker.RangePicker
                style={{ width: '100%', marginBottom: '12px' }}
                size="small"
                onChange={(dates) => {
                  if (dates && dates[0] && dates[1]) {
                    setReportDateRanges({
                      ...reportDateRanges,
                      daily_circulation: [dates[0].format('YYYY-MM-DD'), dates[1].format('YYYY-MM-DD')]
                    });
                  }
                }}
              />
              <Button
                type="primary"
                block
                size="small"
                loading={generatingReport === 'daily_circulation'}
                onClick={generateDailyCirculationReport}
              >
                Generate
              </Button>
            </Card>
          </Col>
          <Col xs={24} sm={12} lg={6}>
            <Card title="Overdue Books Report" size="small">
              <Typography.Paragraph type="secondary" style={{ marginBottom: '12px' }}>
                All currently overdue books with member contact details.
              </Typography.Paragraph>
              <DatePicker.RangePicker
                style={{ width: '100%', marginBottom: '12px' }}
                size="small"
                onChange={(dates) => {
                  if (dates && dates[0] && dates[1]) {
                    setReportDateRanges({
                      ...reportDateRanges,
                      overdue_books: [dates[0].format('YYYY-MM-DD'), dates[1].format('YYYY-MM-DD')]
                    });
                  }
                }}
              />
              <Button
                type="primary"
                block
                size="small"
                loading={generatingReport === 'overdue_books'}
                onClick={generateOverdueReport}
              >
                Generate
              </Button>
            </Card>
          </Col>
          <Col xs={24} sm={12} lg={6}>
            <Card title="Most/Least Borrowed Books" size="small">
              <Typography.Paragraph type="secondary" style={{ marginBottom: '12px' }}>
                Ranking of books by borrow frequency for the selected period.
              </Typography.Paragraph>
              <DatePicker.RangePicker
                style={{ width: '100%', marginBottom: '12px' }}
                size="small"
                onChange={(dates) => {
                  if (dates && dates[0] && dates[1]) {
                    setReportDateRanges({
                      ...reportDateRanges,
                      most_borrowed: [dates[0].format('YYYY-MM-DD'), dates[1].format('YYYY-MM-DD')]
                    });
                  }
                }}
              />
              <Button
                type="primary"
                block
                size="small"
                loading={generatingReport === 'most_borrowed'}
                onClick={generateMostBorrowedReport}
              >
                Generate
              </Button>
            </Card>
          </Col>
          <Col xs={24} sm={12} lg={6}>
            <Card title="Member Activity Report" size="small">
              <Typography.Paragraph type="secondary" style={{ marginBottom: '12px' }}>
                Active vs inactive members and borrowing patterns.
              </Typography.Paragraph>
              <DatePicker.RangePicker
                style={{ width: '100%', marginBottom: '12px' }}
                size="small"
                onChange={(dates) => {
                  if (dates && dates[0] && dates[1]) {
                    setReportDateRanges({
                      ...reportDateRanges,
                      member_activity: [dates[0].format('YYYY-MM-DD'), dates[1].format('YYYY-MM-DD')]
                    });
                  }
                }}
              />
              <Button
                type="primary"
                block
                size="small"
                loading={generatingReport === 'member_activity'}
                onClick={generateMemberActivityReport}
              >
                Generate
              </Button>
            </Card>
          </Col>
          <Col xs={24} sm={12} lg={6}>
            <Card title="Fine Collection Report" size="small">
              <Typography.Paragraph type="secondary" style={{ marginBottom: '12px' }}>
                Summary of fines collected within the selected period.
              </Typography.Paragraph>
              <DatePicker.RangePicker
                style={{ width: '100%', marginBottom: '12px' }}
                size="small"
                onChange={(dates) => {
                  if (dates && dates[0] && dates[1]) {
                    setReportDateRanges({
                      ...reportDateRanges,
                      fine_collection: [dates[0].format('YYYY-MM-DD'), dates[1].format('YYYY-MM-DD')]
                    });
                  }
                }}
              />
              <Button
                type="primary"
                block
                size="small"
                loading={generatingReport === 'fine_collection'}
                onClick={generateFineCollectionReport}
              >
                Generate
              </Button>
            </Card>
          </Col>
          <Col xs={24} sm={12} lg={6}>
            <Card title="Outstanding Fines Report" size="small">
              <Typography.Paragraph type="secondary" style={{ marginBottom: '12px' }}>
                All unpaid fines with member details and amounts owed.
              </Typography.Paragraph>
              <DatePicker.RangePicker
                style={{ width: '100%', marginBottom: '12px' }}
                size="small"
                onChange={(dates) => {
                  if (dates && dates[0] && dates[1]) {
                    setReportDateRanges({
                      ...reportDateRanges,
                      outstanding_fines: [dates[0].format('YYYY-MM-DD'), dates[1].format('YYYY-MM-DD')]
                    });
                  }
                }}
              />
              <Button
                type="primary"
                block
                size="small"
                loading={generatingReport === 'outstanding_fines'}
                onClick={generateOutstandingFinesReport}
              >
                Generate
              </Button>
            </Card>
          </Col>
          <Col xs={24} sm={12} lg={6}>
            <Card title="Inventory Report" size="small">
              <Typography.Paragraph type="secondary" style={{ marginBottom: '12px' }}>
                Complete catalog inventory by category, branch, and condition.
              </Typography.Paragraph>
              <DatePicker.RangePicker
                style={{ width: '100%', marginBottom: '12px' }}
                size="small"
                onChange={(dates) => {
                  if (dates && dates[0] && dates[1]) {
                    setReportDateRanges({
                      ...reportDateRanges,
                      inventory: [dates[0].format('YYYY-MM-DD'), dates[1].format('YYYY-MM-DD')]
                    });
                  }
                }}
              />
              <Button
                type="primary"
                block
                size="small"
                loading={generatingReport === 'inventory'}
                onClick={generateInventoryReport}
              >
                Generate
              </Button>
            </Card>
          </Col>
          <Col xs={24} sm={12} lg={6}>
            <Card title="New Acquisitions Report" size="small">
              <Typography.Paragraph type="secondary" style={{ marginBottom: '12px' }}>
                Books and copies added to the library in the selected period.
              </Typography.Paragraph>
              <DatePicker.RangePicker
                style={{ width: '100%', marginBottom: '12px' }}
                size="small"
                onChange={(dates) => {
                  if (dates && dates[0] && dates[1]) {
                    setReportDateRanges({
                      ...reportDateRanges,
                      new_acquisitions: [dates[0].format('YYYY-MM-DD'), dates[1].format('YYYY-MM-DD')]
                    });
                  }
                }}
              />
              <Button
                type="primary"
                block
                size="small"
                loading={generatingReport === 'new_acquisitions'}
                onClick={generateNewAcquisitionsReport}
              >
                Generate
              </Button>
            </Card>
          </Col>
        </Row>
      </div>
    </div>
  );
}