import { useState, useMemo, useEffect, useCallback, CSSProperties } from 'react';
import { Layout, Row, Col, Card, Statistic, Space, Badge, Button, List, Typography, message } from 'antd';
import { BellOutlined, TruckOutlined, FileTextOutlined, ShoppingCartOutlined, ShopOutlined, UserOutlined } from '@ant-design/icons';
import { request } from '../api/client';
import { useNavigate } from 'react-router-dom';
import { useAppContext } from '../store/AppContext';

interface TruckResponse {
  submenu_id: number;
  asn: string;
  container_number: string;
  truck_number: string;
  driver_name: string;
  purpose_id: number | null;
  notes: string | null;
  metadata: string | null;
  id: number;
  version: number;
  deleted_at: string | null;
  created_at: string;
  updated_at: string;
}

interface AsnResponse {
  submenu_id: number;
  inbound_shipment_no: string;
  total_skus: number;
  notes: string | null;
  metadata: string | null;
  id: string;
  version: number;
  deleted_at: string | null;
  created_at: string;
  updated_at: string;
}

interface OrderResponse {
  submenu_id: number;
  po_number: string;
  supplier_vendor: string;
  notes: string | null;
  metadata: string | null;
  id: string;
  version: number;
  deleted_at: string | null;
  created_at: string;
  updated_at: string;
}

interface VendorResponse {
  submenu_id: number;
  vendor_number: string;
  notes: string | null;
  metadata: string | null;
  id: string;
  version: number;
  deleted_at: string | null;
  created_at: string;
  updated_at: string;
}

interface TruckhistoryResponse {
  submenu_id: number;
  truck_id: number | null;
  change_date: string;
  change_description: string | null;
  changed_by: number | null;
  change_type: string;
  id: number;
  created_at: string;
  updated_at: string;
}

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

  const [trucks, setTrucks] = useState<TruckResponse[]>([]);
  const [asns, setAsns] = useState<AsnResponse[]>([]);
  const [orders, setOrders] = useState<OrderResponse[]>([]);
  const [vendors, setVendors] = useState<VendorResponse[]>([]);
  const [recentActivity, setRecentActivity] = useState<TruckhistoryResponse[]>([]);
  const [loading, setLoading] = useState<boolean>(true);

  const totalTrucks = useMemo(() => trucks.length, [trucks]);
  const totalAsns = useMemo(() => asns.length, [asns]);
  const totalOrders = useMemo(() => orders.length, [orders]);
  const totalVendors = useMemo(() => vendors.length, [vendors]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const [trucksRes, asnsRes, ordersRes, vendorsRes, activityRes] = await Promise.all([
          request<TruckResponse[]>({
            method: 'GET',
            path: '/trucks/',
            query: { limit: 50, offset: 0 }
          }),
          request<AsnResponse[]>({
            method: 'GET',
            path: '/asns/',
            query: { limit: 50, offset: 0 }
          }),
          request<OrderResponse[]>({
            method: 'GET',
            path: '/master-data/orders',
            query: { limit: 50, offset: 0 }
          }),
          request<VendorResponse[]>({
            method: 'GET',
            path: '/master-data/vendors',
            query: { limit: 50, offset: 0 }
          }),
          request<TruckhistoryResponse[]>({
            method: 'GET',
            path: '/trucks/history',
            query: { limit: 10, offset: 0 }
          })
        ]);

        setTrucks(trucksRes.data);
        setAsns(asnsRes.data);
        setOrders(ordersRes.data);
        setVendors(vendorsRes.data);
        setRecentActivity(activityRes.data);
      } catch (error) {
        messageApi.error('Failed to load dashboard data');
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [messageApi]);

  const navigateToTrucks = useCallback(() => {
    navigate('/trucks');
  }, [navigate]);

  const navigateToAsns = useCallback(() => {
    navigate('/asns');
  }, [navigate]);

  const navigateToOrders = useCallback(() => {
    navigate('/orders');
  }, [navigate]);

  const navigateToVendors = useCallback(() => {
    navigate('/vendors');
  }, [navigate]);

  const navigateToNotifications = useCallback(() => {
    navigate('/notifications');
  }, [navigate]);

  const navigateToUserManagement = useCallback(() => {
    navigate('/user-management');
  }, [navigate]);

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

  const headerStyle: CSSProperties = {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: '24px 24px 0 24px'
  };

  const statsSectionStyle: CSSProperties = {
    padding: '24px'
  };

  const contentSectionStyle: CSSProperties = {
    padding: '0 24px 24px 24px'
  };

  const notificationBadgeStyle: CSSProperties = {
    cursor: 'pointer'
  };

  return (
    <div style={rootStyle}>
      {contextHolder}
      <div style={headerStyle}>
        <Typography.Title level={2} style={{ margin: 0 }}>
          Dashboard
        </Typography.Title>
        <Space size="middle">
          <Badge count={notifications?.unreadCount || 0} overflowCount={99} style={notificationBadgeStyle}>
            <Button
              type="text"
              icon={<BellOutlined />}
              shape="circle"
              size="large"
              onClick={navigateToNotifications}
            />
          </Badge>
        </Space>
      </div>

      <div style={statsSectionStyle}>
        <Row gutter={[16, 16]}>
          <Col xs={24} sm={12} md={6}>
            <Card hoverable>
              <Statistic
                title="Total Trucks"
                value={totalTrucks}
                prefix={<TruckOutlined />}
                valueStyle={{ color: '#1677ff' }}
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Card hoverable>
              <Statistic
                title="Active ASNs"
                value={totalAsns}
                prefix={<FileTextOutlined />}
                valueStyle={{ color: '#52c41a' }}
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Card hoverable>
              <Statistic
                title="Pending Orders"
                value={totalOrders}
                prefix={<ShoppingCartOutlined />}
                valueStyle={{ color: '#faad14' }}
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Card hoverable>
              <Statistic
                title="Active Vendors"
                value={totalVendors}
                prefix={<ShopOutlined />}
                valueStyle={{ color: '#722ed1' }}
              />
            </Card>
          </Col>
        </Row>
      </div>

      <div style={contentSectionStyle}>
        <Row gutter={[16, 16]}>
          <Col xs={24} md={16}>
            <Card title="Recent Activity" style={{ height: '100%' }}>
              <List
                dataSource={recentActivity}
                size="small"
                loading={loading}
                renderItem={(item) => (
                  <List.Item>
                    <List.Item.Meta
                      title={item.change_type}
                      description={item.change_description || 'No description'}
                    />
                    <div>{new Date(item.change_date).toLocaleString()}</div>
                  </List.Item>
                )}
              />
            </Card>
          </Col>
          <Col xs={24} md={8}>
            <Card title="Quick Actions" style={{ height: '100%' }}>
              <Space direction="vertical" size="middle" style={{ width: '100%' }}>
                <Button
                  type="primary"
                  block
                  icon={<TruckOutlined />}
                  size="large"
                  onClick={navigateToTrucks}
                >
                  Manage Trucks
                </Button>
                <Button
                  type="default"
                  block
                  icon={<FileTextOutlined />}
                  size="large"
                  onClick={navigateToAsns}
                >
                  Manage ASNs
                </Button>
                <Button
                  type="default"
                  block
                  icon={<ShoppingCartOutlined />}
                  size="large"
                  onClick={navigateToOrders}
                >
                  Purchase Orders
                </Button>
                <Button
                  type="default"
                  block
                  icon={<ShopOutlined />}
                  size="large"
                  onClick={navigateToVendors}
                >
                  Vendors
                </Button>
                <Button
                  type="default"
                  block
                  icon={<UserOutlined />}
                  size="large"
                  onClick={navigateToUserManagement}
                >
                  User Management
                </Button>
              </Space>
            </Card>
          </Col>
        </Row>
      </div>
    </div>
  );
}