import React, { useEffect, useState } from "react";
import { Card, NavBar, TabBar, Grid } from "antd-mobile";
import {
  AppOutline,
  UserOutline,
  PieOutline, // 替换 BarChartOutline
  ShopbagOutline,
} from "antd-mobile-icons";
import MeauMobile from "@/components/MeauMobile/MeauMoible";
import Layout from "@/components/Layout/Layout";
import style from "./index.module.scss";
import LineChart from "@/components/LineChart";
import { getPlanStats } from "./api";

const sceneStats = [
  {
    label: "公众号获客",
    value: 234,
    icon: <ShopbagOutline style={{ fontSize: 28, color: "#4caf50" }} />,
  },
  {
    label: "海报获客",
    value: 167,
    icon: <AppOutline style={{ fontSize: 28, color: "#ff9800" }} />,
  },
  {
    label: "抖音获客",
    value: 156,
    icon: <PieOutline style={{ fontSize: 28, color: "#2196f3" }} />,
  },
  {
    label: "小红书获客",
    value: 89,
    icon: <UserOutline style={{ fontSize: 28, color: "#e91e63" }} />,
  },
];

const todayStats = [
  { label: "朋友圈同步", value: 12 },
  { label: "群发任务", value: 8 },
  { label: "获客转化", value: "85%" },
  { label: "系统活跃度", value: "98%" },
];

const Home: React.FC = () => {
  useEffect(() => {
    getPlanStats({ num: 4 }).then((res: any) => {
      console.log(res);
    });
  }, []);

  return (
    <Layout
      header={
        <NavBar back={null} style={{ background: "#fff" }}>
          <span style={{ color: "#1677ff", fontWeight: 700 }}>存客宝</span>
        </NavBar>
      }
      footer={<MeauMobile />}
    >
      <div className={style["home-page"]}>
        {/* 统计卡片 */}
        <div className={style["home-cards"]}>
          <Card className={style["home-card"]}>
            <div className={style["home-card-title"]}>设备数量</div>
            <div className={style["home-card-value"]}>0</div>
          </Card>
          <Card className={style["home-card"]}>
            <div className={style["home-card-title"]}>微信号数量</div>
            <div className={style["home-card-value"]}>0</div>
          </Card>
          <Card className={style["home-card"]}>
            <div className={style["home-card-title"]}>在线微信号</div>
            <div className={style["home-card-value"]}>0</div>
          </Card>
        </div>

        {/* 场景获客统计 */}
        <Card className={style["home-section"]}>
          <div className={style["home-section-title"]}>场景获客统计</div>
          <div className={style["home-scene-stats"]}>
            {sceneStats.map((item) => (
              <div key={item.label} className={style["home-scene-item"]}>
                <div className={style["home-scene-icon"]}>{item.icon}</div>
                <div className={style["home-scene-value"]}>{item.value}</div>
                <div className={style["home-scene-label"]}>{item.label}</div>
              </div>
            ))}
          </div>
        </Card>

        {/* 今日数据 */}
        <Card className={style["home-section"]}>
          <div className={style["home-section-title"]}>今日数据</div>
          <Grid columns={2} gap={12}>
            {todayStats.map((item) => (
              <Grid.Item key={item.label}>
                <div className={style["home-today-item"]}>
                  <div className={style["home-today-value"]}>{item.value}</div>
                  <div className={style["home-today-label"]}>{item.label}</div>
                </div>
              </Grid.Item>
            ))}
          </Grid>
        </Card>

        {/* 每日获客趋势（静态图表占位） */}
        <Card className={style["home-section"]}>
          <div className={style["home-section-title"]}>每日获客趋势</div>
          <div className={style["home-chart"]}>
            <LineChart
              xData={["周一", "周二", "周三", "周四", "周五", "周六", "周日"]}
              yData={[120, 150, 180, 200, 230, 210, 190]}
            />
          </div>
        </Card>
      </div>
    </Layout>
  );
};
export default Home;