import { Card, Col, Row, Statistic, theme } from 'antd';
import { useEffect, useState } from 'react';
import { accountApi, loginApi, type LoginTaskItem } from '../api/modules';

export default function DashboardPage() {
  const { token } = theme.useToken();
  const [stats, setStats] = useState({ accounts: 0, tasks: 0, success: 0, failed: 0 });

  useEffect(() => {
    Promise.all([accountApi.list(), loginApi.listTasks()])
      .then(([accounts, tasks]) => {
        setStats({
          accounts: accounts.length,
          tasks: tasks.length,
          success: tasks.filter((t: LoginTaskItem) => t.status === 'success').length,
          failed: tasks.filter((t: LoginTaskItem) => ['failed', 'error'].includes(t.status)).length,
        });
      })
      .catch(() => {});
  }, []);

  return (
    <div>
      <h2>概览</h2>
      <Row gutter={16}>
        <Col span={6}>
          <Card>
            <Statistic title="账号总数" value={stats.accounts} />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic title="登录任务总数" value={stats.tasks} />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic title="成功" value={stats.success} styles={{ content: { color: token.colorSuccess } }} />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic title="失败" value={stats.failed} styles={{ content: { color: token.colorError } }} />
          </Card>
        </Col>
      </Row>
    </div>
  );
}