import React from 'react';
import { Card, Col, Row } from 'antd';
import {
  ArrowRightOutlined,
  BankOutlined,
  DollarOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons';
import { useNavigate } from 'react-router';
import { MARGIN_BOTTOM_16_STYLE, TODO_CARD_DANGER, TODO_CARD_DRAFT, TODO_CARD_OK, TODO_CARD_WARN } from './Dashboard.types';

export const DashboardTodoCards: React.FC<{
  absentCount: number;
  draftCount: number;
  draftTotal: number;
  pendingDeposits: number;
}> = ({ absentCount, draftCount, draftTotal, pendingDeposits }) => {
  const navigate = useNavigate();
  return (
    <Card title="待办与异常" style={MARGIN_BOTTOM_16_STYLE}>
      <Row gutter={[16, 16]}>
        <Col xs={24} sm={8}>
          <Card
            style={absentCount > 0 ? TODO_CARD_WARN : TODO_CARD_OK}
            styles={{ body: { padding: 16 } }}
            onClick={() => navigate('/attendance')}
          >
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <ExclamationCircleOutlined
                style={{ fontSize: 28, color: absentCount > 0 ? '#FF9500' : '#999' }}
              />
              <ArrowRightOutlined style={{ color: '#bbb' }} />
            </div>
            <div style={{ marginTop: 8 }}>
              <div
                style={{
                  fontSize: 24,
                  fontWeight: 700,
                  color: absentCount > 0 ? '#FF9500' : '#999',
                }}
              >
                {absentCount}
              </div>
              <div style={{ fontSize: 13, color: '#666', marginTop: 2 }}>今日缺勤人数</div>
              {absentCount > 0 ? (
                <div style={{ fontSize: 12, color: '#FF9500', marginTop: 4 }}>需要关注</div>
              ) : (
                <div style={{ fontSize: 12, color: '#34C759', marginTop: 4 }}>全员到齐</div>
              )}
            </div>
          </Card>
        </Col>

        <Col xs={24} sm={8}>
          <Card
            style={draftCount > 0 ? TODO_CARD_DRAFT : TODO_CARD_OK}
            styles={{ body: { padding: 16 } }}
            onClick={() => navigate('/bills')}
          >
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <DollarOutlined
                style={{ fontSize: 28, color: draftCount > 0 ? '#AF52DE' : '#999' }}
              />
              <ArrowRightOutlined style={{ color: '#bbb' }} />
            </div>
            <div style={{ marginTop: 8 }}>
              <div
                style={{
                  fontSize: 24,
                  fontWeight: 700,
                  color: draftCount > 0 ? '#AF52DE' : '#999',
                }}
              >
                {draftCount}
              </div>
              <div style={{ fontSize: 13, color: '#666', marginTop: 2 }}>待处理账单</div>
              <div
                style={{ fontSize: 12, color: draftCount > 0 ? '#AF52DE' : '#999', marginTop: 4 }}
              >
                {draftCount > 0 ? `合计 ¥${draftTotal.toLocaleString()}` : '暂无待处理'}
              </div>
            </div>
          </Card>
        </Col>

        <Col xs={24} sm={8}>
          <Card
            style={pendingDeposits > 0 ? TODO_CARD_DANGER : TODO_CARD_OK}
            styles={{ body: { padding: 16 } }}
            onClick={() => navigate('/deposits')}
          >
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <BankOutlined
                style={{ fontSize: 28, color: pendingDeposits > 0 ? '#FF3B30' : '#999' }}
              />
              <ArrowRightOutlined style={{ color: '#bbb' }} />
            </div>
            <div style={{ marginTop: 8 }}>
              <div
                style={{
                  fontSize: 24,
                  fontWeight: 700,
                  color: pendingDeposits > 0 ? '#FF3B30' : '#999',
                }}
              >
                ¥{pendingDeposits.toLocaleString()}
              </div>
              <div style={{ fontSize: 13, color: '#666', marginTop: 2 }}>待退押金</div>
              <div
                style={{
                  fontSize: 12,
                  color: pendingDeposits > 0 ? '#FF3B30' : '#999',
                  marginTop: 4,
                }}
              >
                {pendingDeposits > 0 ? '需要处理' : '暂无待退'}
              </div>
            </div>
          </Card>
        </Col>
      </Row>
    </Card>
  );
};