import { useState, useMemo, useEffect, CSSProperties } from 'react';
import { Card, Row, Col, Statistic, Button, Space, Table, Typography, message, Layout, Timeline } from 'antd';
import { ExportOutlined, ImportOutlined, PlusOutlined, BarChartOutlined } from '@ant-design/icons';
import { request } from '../api/client';
import { useNavigate } from 'react-router-dom';
import { ROUTES } from '../router/routes.constant';

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 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;
}

interface MemberResponse {
  id: string;
  user_id: string;
  membership_number: string;
  membership_date: string;
  membership_expiry?: string | null;
  borrowing_limit: number;
  account_standing: 'GOOD' | 'WARNING' | 'SUSPENDED' | 'BLOCKED';
  created_at: string;
  updated_at: string;
}

interface ActivityItem {
  id: string;
  timestamp: string;
  description: string;
}

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

  const [loansDueToday, setLoansDueToday] = useState<LoanResponse[]>([]);
  const [overdueLoans, setOverdueLoans] = useState<LoanResponse[]>([]);
  const [pendingReservations, setPendingReservations] = useState<ReservationResponse[]>([]);
  const [pendingMembers, setPendingMembers] = useState<MemberResponse[]>([]);
  const [recentActivity, setRecentActivity] = useState<ActivityItem[]>([]);
  const [loading, setLoading] = useState<boolean>(true);

  const dueTodayCount = useMemo(() => loansDueToday.length, [loansDueToday]);
  const overdueCount = useMemo(() => overdueLoans.length, [overdueLoans]);
  const pendingReservationsCount = useMemo(() => pendingReservations.length, [pendingReservations]);
  const pendingMembersCount = useMemo(() => pendingMembers.length, [pendingMembers]);

  const dueTodayColumns = useMemo(() => [
    {
      title: 'Member',
      dataIndex: 'member_id',
      key: 'member_id',
    },
    {
      title: 'Book',
      dataIndex: 'book_id',
      key: 'book_id',
    },
    {
      title: 'Due Date',
      dataIndex: 'due_date',
      key: 'due_date',
    },
  ], []);

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

  const reservationsColumns = useMemo(() => [
    {
      title: 'Member',
      dataIndex: 'member_id',
      key: 'member_id',
    },
    {
      title: 'Book',
      dataIndex: 'book_id',
      key: 'book_id',
    },
    {
      title: 'Expiry Date',
      dataIndex: 'expiry_date',
      key: 'expiry_date',
    },
    {
      title: 'Status',
      dataIndex: 'status',
      key: 'status',
    },
  ], []);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const [loansActiveRes, loansOverdueRes, reservationsRes, membersRes] = await Promise.all([
          request<LoanResponse[]>({
            method: 'GET',
            path: '/circulation/loans',
            query: { loan_status: 'ACTIVE', limit: 50 },
          }),
          request<LoanResponse[]>({
            method: 'GET',
            path: '/circulation/loans',
            query: { loan_status: 'OVERDUE', limit: 50 },
          }),
          request<ReservationResponse[]>({
            method: 'GET',
            path: '/circulation/reservations',
            query: { reservation_status: 'READY', limit: 50 },
          }),
          request<MemberResponse[]>({
            method: 'GET',
            path: '/users/members',
            query: { account_standing: 'WARNING', limit: 50 },
          }),
        ]);

        setLoansDueToday(loansActiveRes.data);
        setOverdueLoans(loansOverdueRes.data);
        setPendingReservations(reservationsRes.data);
        setPendingMembers(membersRes.data);
      } catch (error) {
        messageApi.error('Failed to load dashboard data');
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [messageApi]);

  const navigateToCheckout = () => {
    navigate(ROUTES.CIRCULATION_CHECKOUT);
  };

  const navigateToReturn = () => {
    navigate(ROUTES.CIRCULATION_RETURN);
  };

  const navigateToAddBook = () => {
    navigate(ROUTES.ADMIN_BOOKS);
  };

  const navigateToReports = () => {
    navigate(ROUTES.REPORTS);
  };

  const navigateToLoans = () => {
    navigate(ROUTES.CIRCULATION_LOANS);
  };

  const navigateToFines = () => {
    navigate(ROUTES.FINES);
  };

  const navigateToReservations = () => {
    navigate(ROUTES.CIRCULATION_RESERVATIONS);
  };

  const navigateToMembers = () => {
    navigate(ROUTES.ADMIN_MEMBERS);
  };

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

  return (
    <div style={mainContainerStyle}>
      {contextHolder}
      <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 library overview.
      </Typography.Text>

      <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
        <Col xs={24} sm={12} md={6}>
          <Card hoverable style={{ textAlign: 'center' }}>
            <Statistic
              title="Books Due Today"
              value={dueTodayCount}
              valueStyle={{ color: '#1677ff' }}
              prefix="📚"
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card hoverable style={{ textAlign: 'center' }}>
            <Statistic
              title="Overdue Items"
              value={overdueCount}
              valueStyle={{ color: '#ff4d4f' }}
              prefix="⚠️"
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card hoverable style={{ textAlign: 'center' }}>
            <Statistic
              title="Pending Reservations"
              value={pendingReservationsCount}
              valueStyle={{ color: '#faad14' }}
              prefix="📋"
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card hoverable style={{ textAlign: 'center' }}>
            <Statistic
              title="Pending Approvals"
              value={pendingMembersCount}
              valueStyle={{ color: '#52c41a' }}
              prefix="👤"
            />
          </Card>
        </Col>
      </Row>

      <Card title="Quick Actions" style={{ marginBottom: '24px' }}>
        <Space size="middle" wrap>
          <Button type="primary" icon={<ExportOutlined />} size="large" onClick={navigateToCheckout}>
            Check Out Book
          </Button>
          <Button type="primary" icon={<ImportOutlined />} size="large" onClick={navigateToReturn}>
            Process Return
          </Button>
          <Button type="default" icon={<PlusOutlined />} size="large" onClick={navigateToAddBook}>
            Add New Book
          </Button>
          <Button type="default" icon={<BarChartOutlined />} size="large" onClick={navigateToReports}>
            View Reports
          </Button>
        </Space>
      </Card>

      <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
        <Col xs={24} lg={12}>
          <Card
            title="Books Due Today"
            extra={
              <Button type="link" size="small" onClick={navigateToLoans}>
                View All
              </Button>
            }
            style={{ height: '100%' }}
          >
            <Table
              dataSource={loansDueToday}
              columns={dueTodayColumns}
              pagination={{ pageSize: 5 }}
              size="small"
              rowKey="id"
              loading={loading}
            />
          </Card>
        </Col>
        <Col xs={24} lg={12}>
          <Card
            title="Overdue Items"
            extra={
              <Button type="link" size="small" onClick={navigateToFines}>
                View Fines
              </Button>
            }
            style={{ height: '100%' }}
          >
            <Table
              dataSource={overdueLoans}
              columns={overdueColumns}
              pagination={{ pageSize: 5 }}
              size="small"
              rowKey="id"
              loading={loading}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]}>
        <Col xs={24} lg={14}>
          <Card
            title="Reservations Ready for Pickup"
            extra={
              <Button type="link" size="small" onClick={navigateToReservations}>
                View All
              </Button>
            }
            style={{ height: '100%' }}
          >
            <Table
              dataSource={pendingReservations}
              columns={reservationsColumns}
              pagination={{ pageSize: 5 }}
              size="small"
              rowKey="id"
              loading={loading}
            />
          </Card>
        </Col>
        <Col xs={24} lg={10}>
          <Card title="Recent Activity" style={{ height: '100%' }}>
            <Timeline mode="left" style={{ maxHeight: '300px', overflowY: 'auto' }}>
              {recentActivity.map((item) => (
                <Timeline.Item key={item.id}>{item.description}</Timeline.Item>
              ))}
            </Timeline>
          </Card>
        </Col>
      </Row>
    </div>
  );
}