import { useState, useMemo, useEffect, useCallback, CSSProperties } from 'react';
import { Layout, Typography, Row, Col, Card, Statistic, List, Space, Button, message, Spin, Alert } from 'antd';
import { UserOutlined, BookOutlined, TeamOutlined, SwapOutlined, DollarOutlined, BarChartOutlined, SettingOutlined, FileSearchOutlined, BellOutlined } from '@ant-design/icons';
import { request } from '../api/client';
import { useNavigate } from 'react-router-dom';
import { ROUTES } from '../router/routes.constant';

interface Book {
  id: string;
  title: string;
  isbn: string | null;
  status: string;
  total_copies: number;
  available_copies: number;
  book_format: string;
  created_at: 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;
}

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

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

interface AuditLog {
  id: string;
  user_id: string | null;
  action: string;
  entity_type: string;
  entity_id: string | null;
  timestamp: string;
  ip_address: string | null;
  old_values: Record<string, unknown> | null;
  new_values: Record<string, unknown> | null;
  user_agent: string | null;
  created_at: string;
  updated_at: string;
}

interface User {
  id: string;
  email: string;
  first_name: string;
  last_name: string;
  phone: string | null;
  address: string | null;
  role: string;
  status: string;
  created_at: string;
  updated_at: string;
}

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

  const [books, setBooks] = useState<Book[]>([]);
  const [members, setMembers] = useState<Member[]>([]);
  const [activeLoans, setActiveLoans] = useState<Loan[]>([]);
  const [fines, setFines] = useState<Fine[]>([]);
  const [recentAuditLogs, setRecentAuditLogs] = useState<AuditLog[]>([]);
  const [pendingMembers, setPendingMembers] = useState<User[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  const totalBooks = useMemo(() => books.length, [books]);
  const totalActiveMembers = useMemo(
    () => members.filter(m => m.account_standing === 'GOOD' || m.account_standing === 'WARNING').length,
    [members]
  );
  const totalActiveLoans = useMemo(() => activeLoans.length, [activeLoans]);
  const totalFinesCollected = useMemo(
    () => fines.filter(f => f.status === 'PAID').reduce((sum, f) => sum + Number(f.amount_paid), 0),
    [fines]
  );
  const pendingRegistrationsCount = useMemo(() => pendingMembers.length, [pendingMembers]);

  const fetchData = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const [booksRes, membersRes, loansRes, finesRes, auditLogsRes, pendingMembersRes] = await Promise.all([
        request<Book[]>({ method: 'GET', path: '/books', query: { limit: 1000, offset: 0 } }),
        request<Member[]>({ method: 'GET', path: '/users/members', query: { limit: 1000, offset: 0 } }),
        request<Loan[]>({ method: 'GET', path: '/circulation/loans', query: { limit: 1000, offset: 0, loan_status: 'ACTIVE' } }),
        request<Fine[]>({ method: 'GET', path: '/fines/', query: { limit: 1000, offset: 0 } }),
        request<AuditLog[]>({ method: 'GET', path: '/audit-logs/', query: { limit: 20, offset: 0 } }),
        request<User[]>({ method: 'GET', path: '/users/', query: { limit: 100, offset: 0, status: 'INACTIVE', role: 'MEMBER' } }),
      ]);

      setBooks(booksRes.data);
      setMembers(membersRes.data);
      setActiveLoans(loansRes.data);
      setFines(finesRes.data);
      setRecentAuditLogs(auditLogsRes.data);
      setPendingMembers(pendingMembersRes.data);
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Failed to load dashboard data';
      setError(errorMessage);
      messageApi.error(errorMessage);
    } finally {
      setLoading(false);
    }
  }, [messageApi]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  const navigateToUsers = useCallback(() => {
    navigate(ROUTES.ADMIN_USERS);
  }, [navigate]);

  const navigateToBooks = useCallback(() => {
    navigate(ROUTES.ADMIN_BOOKS);
  }, [navigate]);

  const navigateToMembers = useCallback(() => {
    navigate(ROUTES.ADMIN_MEMBERS);
  }, [navigate]);

  const navigateToLoans = useCallback(() => {
    navigate(ROUTES.CIRCULATION_LOANS);
  }, [navigate]);

  const navigateToFines = useCallback(() => {
    navigate(ROUTES.FINES);
  }, [navigate]);

  const navigateToReports = useCallback(() => {
    navigate(ROUTES.REPORTS);
  }, [navigate]);

  const navigateToSettings = useCallback(() => {
    navigate(ROUTES.ADMIN_SETTINGS);
  }, [navigate]);

  const navigateToAuditLogs = useCallback(() => {
    navigate(ROUTES.ADMIN_AUDIT_LOGS);
  }, [navigate]);

  const navigateToNotifications = useCallback(() => {
    navigate(ROUTES.ADMIN_NOTIFICATIONS);
  }, [navigate]);

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

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

  if (loading) {
    return (
      <div style={rootStyle}>
        {contextHolder}
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
          <Spin size="large" />
        </div>
      </div>
    );
  }

  return (
    <div style={rootStyle}>
      {contextHolder}
      <Layout style={mainContainerStyle}>
        {error && (
          <Alert
            message="Error"
            description={error}
            type="error"
            closable
            onClose={() => setError(null)}
            style={{ marginBottom: '24px' }}
          />
        )}
        <Typography.Title level={2} style={{ marginBottom: '8px' }}>
          Administrator Dashboard
        </Typography.Title>
        <Typography.Text type="secondary" style={{ marginBottom: '24px', display: 'block' }}>
          Welcome back! Here's an overview of your library system.
        </Typography.Text>

        <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
          <Col xs={24} sm={12} md={8} lg={5}>
            <Card hoverable>
              <Statistic
                title="Total Books"
                value={totalBooks}
                prefix="📚"
                valueStyle={{ color: '#1677ff' }}
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={8} lg={5}>
            <Card hoverable>
              <Statistic
                title="Active Members"
                value={totalActiveMembers}
                prefix="👥"
                valueStyle={{ color: '#52c41a' }}
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={8} lg={5}>
            <Card hoverable>
              <Statistic
                title="Active Loans"
                value={totalActiveLoans}
                prefix="📖"
                valueStyle={{ color: '#fa8c16' }}
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={8} lg={5}>
            <Card hoverable>
              <Statistic
                title="Fines Collected"
                value={totalFinesCollected}
                prefix="$"
                precision={2}
                valueStyle={{ color: '#cf1322' }}
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={8} lg={4}>
            <Card hoverable>
              <Statistic
                title="Pending Registrations"
                value={pendingRegistrationsCount}
                prefix="⏳"
                valueStyle={{ color: '#722ed1' }}
              />
            </Card>
          </Col>
        </Row>

        <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
          <Col xs={24} lg={12}>
            <Card title="Circulation Statistics" bordered style={{ height: '100%' }}>
              <Typography.Text>Checkouts & Returns Over Time</Typography.Text>
            </Card>
          </Col>
          <Col xs={24} lg={12}>
            <Card title="Top 10 Most Borrowed Books" bordered style={{ height: '100%' }}>
              <Typography.Text>Popular Books</Typography.Text>
            </Card>
          </Col>
        </Row>

        <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
          <Col xs={24} lg={12}>
            <Card title="Fine Collection Trend" bordered style={{ height: '100%' }}>
              <Typography.Text>Fine Collections Over Time</Typography.Text>
            </Card>
          </Col>
          <Col xs={24} lg={12}>
            <Card title="New Member Registrations" bordered style={{ height: '100%' }}>
              <Typography.Text>Registrations Over Time</Typography.Text>
            </Card>
          </Col>
        </Row>

        <Row gutter={[16, 16]}>
          <Col xs={24} lg={14}>
            <Card title="Recent Activity" bordered style={{ height: '100%' }}>
              <List
                size="small"
                dataSource={recentAuditLogs}
                style={{ maxHeight: '400px', overflow: 'auto' }}
                renderItem={(item) => (
                  <List.Item>
                    <List.Item.Meta
                      title={item.action}
                      description={`${item.entity_type} - ${new Date(item.timestamp).toLocaleString()}`}
                    />
                  </List.Item>
                )}
              />
            </Card>
          </Col>
          <Col xs={24} lg={10}>
            <Card title="Quick Actions" bordered style={{ height: '100%' }}>
              <Space direction="vertical" size="middle" style={{ width: '100%' }}>
                <Button type="primary" block icon={<UserOutlined />} onClick={navigateToUsers}>
                  Manage Users
                </Button>
                <Button type="primary" block icon={<BookOutlined />} onClick={navigateToBooks}>
                  Manage Books
                </Button>
                <Button type="primary" block icon={<TeamOutlined />} onClick={navigateToMembers}>
                  Manage Members
                </Button>
                <Button type="default" block icon={<SwapOutlined />} onClick={navigateToLoans}>
                  Manage Loans
                </Button>
                <Button type="default" block icon={<DollarOutlined />} onClick={navigateToFines}>
                  Manage Fines
                </Button>
                <Button type="default" block icon={<BarChartOutlined />} onClick={navigateToReports}>
                  Reports & Analytics
                </Button>
                <Button type="default" block icon={<SettingOutlined />} onClick={navigateToSettings}>
                  System Settings
                </Button>
                <Button type="default" block icon={<FileSearchOutlined />} onClick={navigateToAuditLogs}>
                  Audit Logs
                </Button>
                <Button type="default" block icon={<BellOutlined />} onClick={navigateToNotifications}>
                  Notifications Management
                </Button>
              </Space>
            </Card>
          </Col>
        </Row>
      </Layout>
    </div>
  );
}