imeeting/frontend/src/pages/home/index.tsx

import { useEffect, useMemo, useState } from "react";
import {
  AudioOutlined,
  ArrowRightOutlined,
  PlayCircleOutlined,
  VideoCameraAddOutlined
} from "@ant-design/icons";
import { Button, Empty, Skeleton, Tag, Typography } from "antd";
import { useNavigate } from "react-router-dom";
import dayjs from "dayjs";
import { getRecentTasks } from "@/api/business/dashboard";
import type { MeetingVO } from "@/api/business/meeting";
import "./index.less";
import RightVisual from "./RightVisual";

const { Text, Title } = Typography;

type QuickEntry = {
  title: string;
  icon: React.ReactNode;
  description: string[];
  accent: string;
  onClick: () => void;
};

type RecentCard = {
  id: number | string;
  title: string;
  duration: string;
  time: string;
  tags: string[];
};

const fallbackRecentCards: RecentCard[] = [
  {
    id: "sample-1",
    title: "2026-03-25 16:05 记录",
    duration: "01:10",
    time: "今天 16:05",
    tags: ["发言人", "降噪", "速度", "模仿", "暂停"]
  },
  {
    id: "sample-2",
    title: "【示例】开会用通义听悟，高效又省心",
    duration: "02:14",
    time: "2026-03-24 11:04",
    tags: ["会议日程", "笔记", "发言人", "协同", "纪要"]
  },
  {
    id: "sample-3",
    title: "【示例】上课用通义听悟，学习效率 UPUP",
    duration: "02:01",
    time: "2026-03-23 11:04",
    tags: ["转写", "笔记", "学习", "教学音频", "课程音频"]
  }
];

function buildRecentCards(tasks: MeetingVO[]): RecentCard[] {
  if (!tasks.length) {
    return fallbackRecentCards;
  }

  return tasks.slice(0, 3).map((task, index) => ({
    id: task.id,
    title: task.title,
    duration: `0${index + 1}:${10 + index * 12}`,
    time: dayjs(task.meetingTime || task.createdAt).format("YYYY-MM-DD HH:mm"),
    tags: task.tags?.split(",").filter(Boolean).slice(0, 5) || ["转写", "总结", "纪要"]
  }));
}

export default function HomePage() {
  const navigate = useNavigate();
  const [recentTasks, setRecentTasks] = useState<MeetingVO[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchRecentTasks = async () => {
      try {
        const response = await getRecentTasks();
        setRecentTasks(response.data.data || []);
      } catch (error) {
        console.error("Home recent tasks load failed", error);
      } finally {
        setLoading(false);
      }
    };

    void fetchRecentTasks();
  }, []);

  const quickEntries = useMemo<QuickEntry[]>(
    () => [
      {
        title: "开启实时记录",
        icon: <AudioOutlined />,
        description: ["实时语音转文字", "同步翻译，智能总结要点"],
        accent: "violet",
        onClick: () => navigate("/meeting-live-create")
      },
      {
        title: "上传音视频",
        icon: <VideoCameraAddOutlined />,
        description: ["音视频转文字", "区分发言人，一键导出"],
        accent: "cyan",
        onClick: () => navigate("/meetings?create=true")
      }
    ],
    [navigate]
  );

  const recentCards = useMemo(() => buildRecentCards(recentTasks), [recentTasks]);

  return (
    <main className="home-container">
      {/* Massive Abstract Background Sphere matching the design/img.png */}
      <div className="home-bg-visual" aria-hidden="true">
         <div className="home-bg-sphere" />
         <RightVisual />
      </div>

      <div className="home-content-wrapper">
        <header className="home-hero">
          <Title level={1} className="home-title">
            每一次交流，<span className="home-title-accent">都有迹可循</span>
          </Title>
          
          <div className="home-quick-actions">
            {quickEntries.map((entry) => (
              <div 
                className={`home-action-item home-action-item--${entry.accent}`} 
                onClick={entry.onClick} 
                key={entry.title}
              >
                <div className="home-action-icon-wrapper">
                  <div className="home-action-icon">{entry.icon}</div>
                  <div className="home-action-icon-glow" />
                </div>
                <Title level={3} className="home-action-title">{entry.title}</Title>
                <div className="home-action-desc">
                  {entry.description.map((line) => (
                    <Text key={line} className="home-action-line">
                      {line}
                    </Text>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </header>

        <section className="home-recent-section">
          <div className="home-section-header">
            <Title level={3}>快速入门 / 最近活动</Title>
            <Button type="link" onClick={() => navigate("/meetings")} className="home-view-all">
              查看全部 <ArrowRightOutlined />
            </Button>
          </div>

          {loading ? (
            <div className="home-recent-grid">
              {[...Array(3)].map((_, i) => (
                <div key={i} className="home-recent-skeleton">
                  <Skeleton active paragraph={{ rows: 2 }} title={{ width: "60%" }} />
                </div>
              ))}
            </div>
          ) : recentCards.length ? (
            <div className="home-recent-grid">
              {recentCards.map((card) => (
                <article
                  key={card.id}
                  className="home-recent-card"
                  onClick={() => typeof card.id === "number" && navigate(`/meetings/${card.id}`)}
                >
                  <div className="home-recent-card-thumbnail">
                    <PlayCircleOutlined className="home-recent-card-play-icon" />
                  </div>
                  <div className="home-recent-card-content">
                    <Title level={4} className="home-recent-card-title">{card.title}</Title>
                    <div className="home-recent-card-footer">
                      <span className="home-recent-card-duration">{card.duration}</span>
                      <span className="home-recent-card-action">立即了解</span>
                    </div>
                  </div>
                </article>
              ))}
            </div>
          ) : (
            <div className="home-empty-state">
              <Empty description="暂无最近记录" />
            </div>
          )}
        </section>
      </div>
    </main>
  );
}