import { useState, useMemo, useEffect, useCallback, CSSProperties } from 'react';
import { Layout, Breadcrumb, Typography, Card, Row, Col, DatePicker, Select, Space, Button, Statistic, Table, Tabs, message } from 'antd';
import { ReloadOutlined, FilePdfOutlined, FileExcelOutlined } from '@ant-design/icons';
import { request } from '../api/client';
import { useNavigate } from 'react-router-dom';
import { ROUTES } from '../router/routes.constant';

const { Title, Text } = Typography;
const { RangePicker } = DatePicker;

interface LoanResponse {
  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: 'ACTIVE' | 'RETURNED' | 'OVERDUE' | 'LOST';
  notes?: string | null;
  created_at: string;
  updated_at: string;
}

interface BookResponse {
  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: 'PHYSICAL' | 'DIGITAL';
  total_copies: number;
  available_copies: number;
  location?: string | null;
  status: 'AVAILABLE' | 'CHECKED_OUT' | 'RESERVED' | 'MAINTENANCE' | 'LOST' | 'DAMAGED';
  created_at: string;
  updated_at: string;
}

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

interface MemberResponse {
  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;
}

interface FineResponse {
  id: string;
  member_id: string;
  loan_id?: string | null;
  amount: number;
  amount_paid: number;
  reason: 'OVERDUE' | 'DAMAGED' | 'LOST' | 'OTHER';
  description?: string | null;
  status: 'UNPAID' | 'PARTIAL' | 'PAID' | 'WAIVED';
  assessed_date: string;
  due_date?: string | null;
  waived_by?: string | null;
  waived_date?: string | null;
  waived_reason?: string | null;
  created_at: string;
  updated_at: string;
}

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

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

  const [activeTab, setActiveTab] = useState<string>('circulation');
  const [dateRange, setDateRange] = useState<[string, string] | null>(null);
  const [categoryFilter, setCategoryFilter] = useState<string | null>(null);
  const [loading, setLoading] = useState<boolean>(false);
  const [circulationData, setCirculationData] = useState<LoanResponse[]>([]);
  const [overdueItems, setOverdueItems] = useState<LoanResponse[]>([]);
  const [popularBooks, setPopularBooks] = useState<BookResponse[]>([]);
  const [memberActivityData, setMemberActivityData] = useState<MemberResponse[]>([]);
  const [fineCollectionData, setFineCollectionData] = useState<FineResponse[]>([]);
  const [inventoryData, setInventoryData] = useState<BookResponse[]>([]);
  const [reservationQueueData, setReservationQueueData] = useState<ReservationResponse[]>([]);
  const [categories, setCategories] = useState<CategoryResponse[]>([]);
  const [books, setBooks] = useState<BookResponse[]>([]);
  const [members, setMembers] = useState<MemberResponse[]>([]);

  const totalCheckouts = useMemo(() => {
    return circulationData.filter(item => item.status === 'ACTIVE' || item.status === 'RETURNED').length;
  }, [circulationData]);

  const totalReturns = useMemo(() => {
    return circulationData.filter(item => item.return_date !== null).length;
  }, [circulationData]);

  const totalOverdueCount = useMemo(() => {
    return overdueItems.length;
  }, [overdueItems]);

  const totalFinesOutstanding = useMemo(() => {
    return fineCollectionData.reduce((sum, fine) => {
      if (fine.status === 'UNPAID' || fine.status === 'PARTIAL') {
        return sum + (fine.amount - fine.amount_paid);
      }
      return sum;
    }, 0);
  }, [fineCollectionData]);

  const fetchCirculationData = useCallback(async () => {
    try {
      const result = await request<LoanResponse[]>({
        method: 'GET',
        path: '/circulation/loans',
        query: { limit: 1000 }
      });
      setCirculationData(result.data);
    } catch (error) {
      messageApi.error('Failed to fetch circulation data');
    }
  }, [messageApi]);

  const fetchOverdueItems = useCallback(async () => {
    try {
      const result = await request<LoanResponse[]>({
        method: 'GET',
        path: '/circulation/loans',
        query: { limit: 500, loan_status: 'OVERDUE' }
      });
      setOverdueItems(result.data);
    } catch (error) {
      messageApi.error('Failed to fetch overdue items');
    }
  }, [messageApi]);

  const fetchBooks = useCallback(async () => {
    try {
      const result = await request<BookResponse[]>({
        method: 'GET',
        path: '/books',
        query: { limit: 1000 }
      });
      setBooks(result.data);
      setInventoryData(result.data);
    } catch (error) {
      messageApi.error('Failed to fetch books');
    }
  }, [messageApi]);

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

  const fetchMembers = useCallback(async () => {
    try {
      const result = await request<MemberResponse[]>({
        method: 'GET',
        path: '/users/members',
        query: { limit: 1000 }
      });
      setMembers(result.data);
      setMemberActivityData(result.data);
    } catch (error) {
      messageApi.error('Failed to fetch members');
    }
  }, [messageApi]);

  const fetchFines = useCallback(async () => {
    try {
      const result = await request<FineResponse[]>({
        method: 'GET',
        path: '/fines/',
        query: { limit: 1000 }
      });
      setFineCollectionData(result.data);
    } catch (error) {
      messageApi.error('Failed to fetch fines');
    }
  }, [messageApi]);

  const fetchReservations = useCallback(async () => {
    try {
      const result = await request<ReservationResponse[]>({
        method: 'GET',
        path: '/circulation/reservations',
        query: { limit: 500 }
      });
      setReservationQueueData(result.data);
    } catch (error) {
      messageApi.error('Failed to fetch reservations');
    }
  }, [messageApi]);

  useEffect(() => {
    fetchCirculationData();
    fetchOverdueItems();
    fetchBooks();
    fetchCategories();
    fetchMembers();
    fetchFines();
    fetchReservations();
  }, [fetchCirculationData, fetchOverdueItems, fetchBooks, fetchCategories, fetchMembers, fetchFines, fetchReservations]);

  const handleRefresh = async () => {
    setLoading(true);
    try {
      await Promise.all([
        fetchCirculationData(),
        fetchOverdueItems(),
        fetchBooks(),
        fetchCategories(),
        fetchMembers(),
        fetchFines(),
        fetchReservations()
      ]);
      messageApi.success('Reports refreshed successfully');
    } catch (error) {
      messageApi.error('Failed to refresh reports');
    } finally {
      setLoading(false);
    }
  };

  const handleExportPdf = () => {
    messageApi.success('PDF export started');
  };

  const handleExportCsv = () => {
    messageApi.success('CSV export started');
  };

  const handleNavigateToAdminDashboard = () => {
    navigate(ROUTES.ADMIN_DASHBOARD || '/admin/dashboard');
  };

  const handleNavigateToLibrarianDashboard = () => {
    navigate(ROUTES.LIBRARIAN_DASHBOARD || '/librarian/dashboard');
  };

  const categoryOptions = useMemo(() => {
    return categories.map(c => ({ label: c.name, value: c.id }));
  }, [categories]);

  const overdueTableColumns = useMemo(() => [
    {
      title: 'Book ID',
      dataIndex: 'book_id',
      key: 'book_id'
    },
    {
      title: 'Member ID',
      dataIndex: 'member_id',
      key: 'member_id'
    },
    {
      title: 'Checkout Date',
      dataIndex: 'checkout_date',
      key: 'checkout_date'
    },
    {
      title: 'Due Date',
      dataIndex: 'due_date',
      key: 'due_date'
    },
    {
      title: 'Status',
      dataIndex: 'status',
      key: 'status'
    }
  ], []);

  const reservationTableColumns = useMemo(() => [
    {
      title: 'Book ID',
      dataIndex: 'book_id',
      key: 'book_id'
    },
    {
      title: 'Member ID',
      dataIndex: 'member_id',
      key: 'member_id'
    },
    {
      title: 'Reservation Date',
      dataIndex: 'reservation_date',
      key: 'reservation_date'
    },
    {
      title: 'Queue Position',
      dataIndex: 'queue_position',
      key: 'queue_position'
    },
    {
      title: 'Status',
      dataIndex: 'status',
      key: 'status'
    }
  ], []);

  const inventoryByStatus = useMemo(() => {
    const statusCounts: Record<string, number> = {};
    inventoryData.forEach(book => {
      statusCounts[book.status] = (statusCounts[book.status] || 0) + 1;
    });
    return Object.entries(statusCounts).map(([status, count]) => ({ status, count }));
  }, [inventoryData]);

  const finesAssessed = useMemo(() => {
    return fineCollectionData.reduce((sum, fine) => sum + fine.amount, 0);
  }, [fineCollectionData]);

  const finesCollected = useMemo(() => {
    return fineCollectionData.reduce((sum, fine) => sum + fine.amount_paid, 0);
  }, [fineCollectionData]);

  const tabItems = useMemo(() => [
    {
      key: 'circulation',
      label: 'Circulation Statistics',
      children: (
        <Card title="Circulation Statistics" bordered={false}>
          <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
            <Col xs={24} sm={8}>
              <Statistic
                title="Total Checkouts"
                value={totalCheckouts}
                valueStyle={{ color: '#1677ff' }}
              />
            </Col>
            <Col xs={24} sm={8}>
              <Statistic
                title="Total Returns"
                value={totalReturns}
                valueStyle={{ color: '#52c41a' }}
              />
            </Col>
            <Col xs={24} sm={8}>
              <Statistic
                title="Overdue Items"
                value={totalOverdueCount}
                valueStyle={{ color: '#ff4d4f' }}
              />
            </Col>
          </Row>
        </Card>
      )
    },
    {
      key: 'overdue',
      label: 'Overdue Items',
      children: (
        <Card title="Overdue Items Report" bordered={false}>
          <Table
            dataSource={overdueItems}
            columns={overdueTableColumns}
            pagination={{ pageSize: 10 }}
            scroll={{ x: 800 }}
            size="middle"
            rowKey="id"
          />
        </Card>
      )
    },
    {
      key: 'popular_books',
      label: 'Popular Books',
      children: (
        <Card title="Popular Books" bordered={false}>
          <div style={{ height: 400 }}>
            <Text>Popular books chart placeholder</Text>
          </div>
        </Card>
      )
    },
    {
      key: 'member_activity',
      label: 'Member Activity',
      children: (
        <Card title="Member Activity" bordered={false}>
          <div style={{ height: 350 }}>
            <Text>Member activity chart placeholder</Text>
          </div>
        </Card>
      )
    },
    {
      key: 'fine_collection',
      label: 'Fine Collection',
      children: (
        <Card title="Fine Collection" bordered={false}>
          <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
            <Col xs={24} sm={8}>
              <Statistic
                title="Fines Assessed"
                value={finesAssessed}
                prefix="$"
                valueStyle={{ color: '#faad14' }}
              />
            </Col>
            <Col xs={24} sm={8}>
              <Statistic
                title="Fines Collected"
                value={finesCollected}
                prefix="$"
                valueStyle={{ color: '#52c41a' }}
              />
            </Col>
            <Col xs={24} sm={8}>
              <Statistic
                title="Outstanding"
                value={totalFinesOutstanding}
                prefix="$"
                valueStyle={{ color: '#ff4d4f' }}
              />
            </Col>
          </Row>
        </Card>
      )
    },
    {
      key: 'inventory',
      label: 'Inventory',
      children: (
        <Card title="Inventory Report" bordered={false}>
          <Row gutter={[24, 24]}>
            <Col xs={24} md={12}>
              <div style={{ height: 300 }}>
                <Text>Books by category chart placeholder</Text>
              </div>
            </Col>
            <Col xs={24} md={12}>
              <div style={{ height: 300 }}>
                <Text>Books by status chart placeholder</Text>
              </div>
            </Col>
          </Row>
        </Card>
      )
    },
    {
      key: 'reservations',
      label: 'Reservation Queue',
      children: (
        <Card title="Reservation Queue Report" bordered={false}>
          <Table
            dataSource={reservationQueueData}
            columns={reservationTableColumns}
            pagination={{ pageSize: 10 }}
            scroll={{ x: 700 }}
            size="middle"
            rowKey="id"
          />
        </Card>
      )
    }
  ], [totalCheckouts, totalReturns, totalOverdueCount, overdueItems, overdueTableColumns, finesAssessed, finesCollected, totalFinesOutstanding, reservationQueueData, reservationTableColumns]);

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

  return (
    <div style={rootStyle}>
      {contextHolder}
      <div style={{ padding: '24px 24px 0 24px' }}>
        <Breadcrumb style={{ marginBottom: '16px' }}>
          <Breadcrumb.Item>
            <Button type="link" size="small" onClick={handleNavigateToAdminDashboard}>
              Dashboard
            </Button>
          </Breadcrumb.Item>
          <Breadcrumb.Item>Reports & Analytics</Breadcrumb.Item>
        </Breadcrumb>
        <Title level={2} style={{ marginBottom: '8px' }}>
          Reports & Analytics
        </Title>
        <Text type="secondary" style={{ marginBottom: '24px', display: 'block' }}>
          Generate and view comprehensive library reports with interactive charts and export capabilities.
        </Text>
      </div>
      <div style={{ padding: '0 24px', marginBottom: '16px' }}>
        <Card size="small">
          <Row gutter={[16, 16]} align="middle">
            <Col xs={24} sm={12} md={8}>
              <RangePicker
                style={{ width: '100%' }}
                placeholder={['Start Date', 'End Date']}
                onChange={(dates, dateStrings) => {
                  if (dates && dateStrings[0] && dateStrings[1]) {
                    setDateRange([dateStrings[0], dateStrings[1]]);
                  } else {
                    setDateRange(null);
                  }
                }}
              />
            </Col>
            <Col xs={24} sm={12} md={6}>
              <Select
                placeholder="All Categories"
                allowClear
                style={{ width: '100%' }}
                options={categoryOptions}
                value={categoryFilter}
                onChange={(value) => setCategoryFilter(value || null)}
              />
            </Col>
            <Col xs={24} sm={24} md={10}>
              <Space wrap>
                <Button
                  type="default"
                  icon={<ReloadOutlined />}
                  onClick={handleRefresh}
                  loading={loading}
                >
                  Refresh
                </Button>
                <Button
                  type="primary"
                  icon={<FilePdfOutlined />}
                  onClick={handleExportPdf}
                >
                  Export PDF
                </Button>
                <Button
                  type="default"
                  icon={<FileExcelOutlined />}
                  onClick={handleExportCsv}
                >
                  Export CSV
                </Button>
              </Space>
            </Col>
          </Row>
        </Card>
      </div>
      <div style={{ padding: '0 24px 24px 24px' }}>
        <Tabs
          type="card"
          activeKey={activeTab}
          onChange={setActiveTab}
          items={tabItems}
        />
      </div>
    </div>
  );
}