import { Spin, Row, Col, Typography, Card, Tooltip, DatePicker, Modal, Table } from 'antd';
import moment, { Moment } from 'moment';
import React, { useEffect, useState } from 'react';
import { CalendarOutlined, RocketOutlined, CheckCircleOutlined, ClockCircleOutlined, WarningOutlined } from '@ant-design/icons';
import { MainDashboardService } from '@gtpl/shared-services/analytics';
import { DateRangeReq } from '@gtpl/shared-models/analytics-data';

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

const colors = {
  primary: '#1890ff',
  secondary: '#722ed1',
  success: '#52c41a',
  warning: '#faad14',
  error: '#f5222d',
  background: '#f0f2f5',
  textPrimary: '#2D3A4B',
  textSecondary: '#595959',
  chartBackground: '#ffffff',
};

const cardGradients = {
  total: 'linear-gradient(135deg, #13c2c2 0%, #08979c 100%)',
  inRange: 'linear-gradient(135deg, #1890ff 0%, #0050b3 100%)',
  shipped: 'linear-gradient(135deg, #52c41a 0%, #237804 100%)',
  pending: 'linear-gradient(135deg, #faad14 0%, #ad6800 100%)',
  overdue: 'linear-gradient(135deg, #f5222d 0%, #a8071a 100%)'
};

const ExportDashboard = () => {
  const [loading, setLoading] = useState<boolean>(false);
  const [dateRange, setDateRange] = useState<[Moment, Moment]>([moment().startOf('month'),moment().endOf('month')]);
  const service = new MainDashboardService();
  const [saleOrderData, setSaleOrderData] = useState<any>([]);
  const [ saleOrderDetail, setSaleOrderDetail ] = useState<any>([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedOrderType, setSelectedOrderType] = useState<string>('');
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState<number>(10);

  useEffect(() => {
    getSaleOrdersData();
  }, [dateRange]);

  const getSaleOrdersData = () => {
    setLoading(true);
    const req = new DateRangeReq();
    req.fromDate = dateRange[0].startOf('day').format('YYYY-MM')
    req.toDate = dateRange[1].endOf('day').format('YYYY-MM')
    service.getSaleOrdersData(req).then((res) => {
      setSaleOrderData(res.data[0]);
      setLoading(false);
    }).catch((err) => {
      console.log(err);
      setLoading(false);
    });
  };

  const getSaleOrdersDetailData=(type: string)=>{
    setLoading(true);
    const req = new DateRangeReq();
    req.fromDate = dateRange[0].format('YYYY-MM')
    req.toDate = dateRange[1].format('YYYY-MM')
    req.status = type;
    service.getSaleOrdersDetailData(req).then((res) => {
        setSaleOrderDetail(res.data);
        setLoading(false);
    }).catch((err) => {
      console.log(err);
      setLoading(false);
    });
  }
  console.log(selectedOrderType, 'selectedOrderType')

  const handleCardClick = (type: string) => {
    setSelectedOrderType(type);
    setIsModalOpen(true);
    getSaleOrdersDetailData(type)
    setPage(1);
    setPageSize(10);
  };
  

  const renderCard = (title: string, value: string, gradient: string, icon: React.ReactNode, onClick:()=>void) => (
    <Card
      style={{
        background: gradient,
        borderRadius: '16px',
        boxShadow: '0 8px 16px rgba(0,0,0,0.1)',
        // height: '100%',
        transition: 'transform 0.2s',
      }}
      bodyStyle={{ padding: '24px' }}
      hoverable
      onClick={onClick}
    >
      <Row align="middle" gutter={16}>
        <Col>
          <div style={{
            backgroundColor: 'rgba(255,255,255,0.2)',
            borderRadius: '12px',
            padding: '12px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
          }}>
            {React.cloneElement(icon as React.ReactElement, { 
              style: { fontSize: '24px', color: '#fff' } 
            })}
          </div>
        </Col>
        <Col flex="auto">
          <Text strong style={{ color: '#fff', fontSize: '16px', display: 'block' }}>
            {title}
          </Text>
          <Title level={2} style={{ margin: '8px 0 0 0', color: '#fff' }}>
            {value}
          </Title>
        </Col>
      </Row>
    </Card>
  );

  const handleDateChange = (dates: [Moment, Moment]) => {
    setDateRange(dates);
  };

  const modalClose=()=>{
    setIsModalOpen(false);
    setSaleOrderDetail([]);
    setSelectedOrderType('');
    setPage(1);
    setPageSize(10);
  }
  

  return (
    <div style={{
      padding: '24px',
      background: colors.background,
    //   minHeight: '100vh',
    }}>
      <Spin spinning={loading}>
        <Row justify="space-between" align="middle" gutter={[24, 24]}>
          <Col>
            <Title level={3} style={{ margin: 0, color: colors.textPrimary }}>
              Export Analytics
              {/* <Text style={{ 
                display: 'block', 
                fontSize: '14px', 
                color: colors.textSecondary,
                marginTop: '8px'
              }}>
                Sales order performance metrics
              </Text> */}
            </Title>
          </Col>
          <Col>
            <Tooltip title="Select date range for analysis">
              <RangePicker
                value={dateRange}
                onChange={handleDateChange}
                style={{ 
                  width: 280,
                  borderRadius: '8px',
                  borderColor: colors.primary,
                }}
                suffixIcon={<CalendarOutlined style={{ color: colors.primary }} />}
                size="large"
                allowClear={false}
                picker='month'
              />
            </Tooltip>
          </Col>
        </Row>
 
        <Row gutter={[24, 24]} style={{ marginTop: '24px', flexWrap: 'nowrap' }} wrap={false}>
          <Col flex="1">
            {renderCard(
              'Total Orders',
              saleOrderData?.totalOrders || '0',
              cardGradients.total,
              <RocketOutlined />,
              () => handleCardClick('TOTAL')
            )}
          </Col>
          <Col flex="1">
            {renderCard(
              'In Range Orders',
              saleOrderData?.totalOrdersInRange || '0',
              cardGradients.inRange,
              <CalendarOutlined />,
              () => handleCardClick('INRANGE')
            )}
          </Col>
          <Col flex="1">
            {renderCard(
              'Shipped Orders',
              saleOrderData?.totalShippedOrders || '0',
              cardGradients.shipped,
              <CheckCircleOutlined />,
              () => handleCardClick('SHIPPED')
            )}
          </Col>
          <Col flex="1">
            {renderCard(
              'Pending Orders',
              saleOrderData?.totalPendingOrders || '0',
              cardGradients.pending,
              <ClockCircleOutlined />,
              () => handleCardClick('PENDING')
            )}
          </Col>
          <Col flex="1">
            {renderCard(
              'Overdue Orders',
              saleOrderData?.totalOverdueOrders || '0',
              cardGradients.overdue,
              <WarningOutlined />,
              () => handleCardClick('OVERDUE')
            )}
          </Col>
        </Row>
      </Spin>
      <Modal
        title={`${selectedOrderType} ORDERS`}
        visible={isModalOpen}
        onCancel={modalClose}
        onOk={() => setIsModalOpen(false)}
        footer={false}
        >
            <Table
            dataSource={saleOrderDetail}
            pagination={{
                current: page,
                pageSize: pageSize,
                showSizeChanger: true,
                onChange(current, size) {
                  setPage(current);
                  setPageSize(size);
                },
              }}
            columns={[
                { title: 'SNo', key: 'sno', responsive: ['sm'], render: (text, object, index) => (page - 1) * pageSize + index + 1 },
                { title: 'PO No', dataIndex: 'poNo', key: 'poNo' },
                { title: 'Country', dataIndex: 'countryName', key: 'countryName' },
                { title: 'Customer Name', dataIndex: 'customerName', key: 'customerName' },
                ...(selectedOrderType === 'OVERDUE'
                  ? [
                      {
                        title: 'Aging (in Months)',
                        dataIndex: 'agingMonths',
                        key: 'agingMonths',
                      },
                    ]
                  : []),
                ...(selectedOrderType === 'TOTAL'
                  ? [
                      {
                        title: 'Status',
                        dataIndex: 'status',
                        key: 'status',
                      },
                    ]
                  : []),
            ]}
            />
    </Modal>
    </div>
  );
};

export default ExportDashboard;