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

/** 冷却期内忽略重复点击，避免快速/幽灵点击压入多条历史记录。 */
const TODO_CLICK_LOCK_MS = 400;

export function shouldNavigateTodoCard(
  currentPath: string,
  targetPath: string,
  lastNavAt: number,
  now: number,
): boolean {
  if (currentPath === targetPath) return false;
  return now - lastNavAt >= TODO_CLICK_LOCK_MS;
}

export const DashboardTodoCards: React.FC<{
  absentCount: number;
  draftCount: number;
  draftTotal: number;
  pendingDeposits: number;
}> = ({ absentCount, draftCount, draftTotal, pendingDeposits }) => {
  const navigate = useNavigate();
  const location = useLocation();
  const lastNavAtRef = useRef(0);
  const go = (target: string) => {
    const now = Date.now();
    if (!shouldNavigateTodoCard(location.pathname, target, lastNavAtRef.current, now)) return;
    lastNavAtRef.current = now;
    navigate(target);
  };
  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={() => go('/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={() => go('/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={() => go('/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>
  );
};