import {
  AppstoreOutlined,
  AudioOutlined,
  CalendarOutlined,
  CheckOutlined,
  CloudUploadOutlined,
  DeleteOutlined,
  EditOutlined,
  InfoCircleOutlined,
  PauseCircleOutlined,
  PlusOutlined,
  RightOutlined,
  SearchOutlined,
  SettingOutlined,
  SyncOutlined,
  TeamOutlined,
  UnorderedListOutlined,
  UserOutlined,
} from "@ant-design/icons";
import {
  App,
  Avatar,
  Button,
  Card,
  Dropdown,
  Empty,
  Form,
  Input,
  List,
  Modal,
  Popconfirm,
  Radio,
  Select,
  Skeleton,
  Space,
  Table,
  Tag,
  Typography,
} from "antd";
import dayjs from "dayjs";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate, useSearchParams } from "react-router-dom";

import { listUsers } from "../../api";
import {
  deleteMeeting,
  getMeetingCreateConfig,
  getMeetingPage,
  getMeetingProgress,
  getRealtimeMeetingSessionStatus,
  getRealtimeMeetingSessionStatuses,
  type MeetingCreateConfig,
  type MeetingProgress,
  type MeetingVO,
  type RealtimeMeetingSessionStatus,
  updateMeetingParticipants,
} from "../../api/business/meeting";
import { MeetingCreateDrawer, type MeetingCreateType } from "../../components/business/MeetingCreateDrawer";
import AppPagination from "../../components/shared/AppPagination";
import { usePermission } from "../../hooks/usePermission";
import type { SysUser } from "../../types";
import PageContainer from "../../components/shared/PageContainer";

const { Title, Text } = Typography;
const { Option } = Select;

const CURRENT_PLATFORM = "WEB" as const;
const PAUSED_DISPLAY_STATUS = 5;
const REALTIME_ACTIVE_DISPLAY_STATUS = 6;
const REALTIME_IDLE_DISPLAY_STATUS = 7;
const DEFAULT_CREATE_CONFIG: MeetingCreateConfig = {
  offlineEnabled: true,
  realtimeEnabled: true,
  offlineAudioMaxSizeMb: 1024,
};

const isRealtimeMeetingCandidate = (item: MeetingVO) =>
  item.meetingType === "REALTIME" || (!item.meetingType && item.status === 0 && !item.audioUrl);

const canControlRealtimeFromCurrentPlatform = (item: MeetingVO) =>
  !item.meetingSource || item.meetingSource === CURRENT_PLATFORM;

const getMeetingSourceLabel = (source?: MeetingVO["meetingSource"]) =>
  source === "ANDROID" ? "安卓端" : "Web端";

const getRealtimeSourceLabel = (item: MeetingVO) => getMeetingSourceLabel(item.meetingSource);

const isPausedRealtimeSessionStatus = (status?: RealtimeMeetingSessionStatus["status"]) =>
  status === "PAUSED_EMPTY" || status === "PAUSED_RESUMABLE";

const canOpenRealtimeSession = (status?: RealtimeMeetingSessionStatus["status"]) =>
  status === "PAUSED_EMPTY"
  || status === "PAUSED_RESUMABLE"
  || status === "ACTIVE"
  || status === "IDLE";

const shouldPollMeetingCard = (item: MeetingVO) =>
  item.status === 1
  || item.status === 2
  || item.realtimeSessionStatus === "ACTIVE"
  || isPausedRealtimeSessionStatus(item.realtimeSessionStatus);

const canManageMeeting = (meeting: MeetingVO) => {
  try {
    const profileStr = sessionStorage.getItem("userProfile");
    if (!profileStr) {
      return false;
    }
    const profile = JSON.parse(profileStr);
    return profile.isPlatformAdmin === true || profile.isTenantAdmin === true || profile.userId === meeting.creatorId;
  } catch {
    return false;
  }
};

const applyRealtimeSessionStatus = (item: MeetingVO, sessionStatus?: RealtimeMeetingSessionStatus): MeetingVO => {
  if (!sessionStatus) {
    return item;
  }
  if (sessionStatus.status === "PAUSED_EMPTY" || sessionStatus.status === "PAUSED_RESUMABLE") {
    return { ...item, displayStatus: PAUSED_DISPLAY_STATUS, realtimeSessionStatus: sessionStatus.status };
  }
  if (sessionStatus.status === "ACTIVE") {
    return { ...item, displayStatus: REALTIME_ACTIVE_DISPLAY_STATUS, realtimeSessionStatus: sessionStatus.status };
  }
  if (sessionStatus.status === "IDLE" && isRealtimeMeetingCandidate(item)) {
    return { ...item, displayStatus: REALTIME_IDLE_DISPLAY_STATUS, realtimeSessionStatus: sessionStatus.status };
  }
  return { ...item, realtimeSessionStatus: sessionStatus.status };
};

const useMeetingProgress = (meeting: MeetingVO, onComplete?: () => void) => {
  const [progress, setProgress] = useState<MeetingProgress | null>(null);

  useEffect(() => {
    if (meeting.status !== 1 && meeting.status !== 2) {
      return;
    }
    const fetchProgress = async () => {
      try {
        const res = await getMeetingProgress(meeting.id, { suppressErrorToast: true });
        const nextProgress = res.data?.data;
        if (nextProgress) {
          setProgress(nextProgress);
          if ((nextProgress.percent === 100 || nextProgress.percent < 0) && onComplete) {
            onComplete();
          }
        }
      } catch {}
    };
    void fetchProgress();
    const timer = setInterval(fetchProgress, 3000);
    return () => clearInterval(timer);
  }, [meeting.id, meeting.status, onComplete]);

  return progress;
};

const IntegratedStatusTag: React.FC<{ meeting: MeetingVO; progress: MeetingProgress | null }> = ({ meeting, progress }) => {
  const effectiveStatus = meeting.displayStatus ?? meeting.status;
  const statusConfig: Record<number, { text: string; color: string; bgColor: string; icon: React.ReactNode }> = {
    0: { text: "排队中", color: "#8c8c8c", bgColor: "rgba(140, 140, 140, 0.1)", icon: <SyncOutlined spin /> },
    1: { text: "识别中", color: "#1890ff", bgColor: "rgba(24, 144, 255, 0.1)", icon: <SyncOutlined spin /> },
    2: { text: "总结中", color: "#faad14", bgColor: "rgba(250, 173, 20, 0.1)", icon: <SyncOutlined spin /> },
    3: { text: "已完成", color: "#52c41a", bgColor: "rgba(82, 196, 26, 0.1)", icon: <CheckOutlined /> },
    4: { text: "失败", color: "#ff4d4f", bgColor: "rgba(255, 77, 79, 0.1)", icon: <InfoCircleOutlined /> },
    5: { text: "暂停中", color: "#d48806", bgColor: "rgba(212, 136, 6, 0.1)", icon: <PauseCircleOutlined /> },
    6: { text: "进行中", color: "#5f51ff", bgColor: "rgba(95, 81, 255, 0.1)", icon: <SyncOutlined spin /> },
    7: { text: "待开始", color: "#595959", bgColor: "rgba(89, 89, 89, 0.1)", icon: <InfoCircleOutlined /> },
  };
  const config = statusConfig[effectiveStatus] || statusConfig[0];
  const percent = meeting.status === 1 || meeting.status === 2 ? progress?.percent || 0 : 0;
  const isProcessing = meeting.status === 1 || meeting.status === 2;

  return (
    <div
      style={{
        display: "inline-flex",
        alignItems: "center",
        padding: "4px 12px",
        borderRadius: "8px",
        fontSize: "12px",
        fontWeight: 700,
        color: config.color,
        background: config.bgColor,
        border: `1px solid ${config.color}20`,
        gap: "4px",
        position: "relative",
        overflow: "hidden"
      }}
    >
      {isProcessing && percent > 0 && (
        <div
          style={{
            position: "absolute",
            left: 0,
            bottom: 0,
            height: "2px",
            width: `${percent}%`,
            background: config.color,
            transition: "width 0.4s ease-out",
            boxShadow: `0 0 8px ${config.color}`
          }}
        />
      )}
      <span style={{ display: "flex", alignItems: "center" }}>
        {isProcessing ? <SyncOutlined spin style={{ fontSize: 11 }} /> : config.icon}
      </span>
      <span>{config.text}</span>
      {isProcessing && <span style={{ opacity: 0.8, fontSize: "11px", fontWeight: 500 }}>{percent}%</span>}
    </div>
  );
};

const TableStatusCell: React.FC<{ meeting: MeetingVO; fetchData: () => void }> = ({ meeting, fetchData }) => {
  const progress = useMeetingProgress(meeting, fetchData);
  return <IntegratedStatusTag meeting={meeting} progress={progress} />;
};

const MeetingCardItem: React.FC<{
  item: MeetingVO;
  config: { text: string; color: string; bgColor: string };
  fetchData: () => void;
  onOpenMeeting: (meeting: MeetingVO) => void;
}> = ({ item, config, fetchData, onOpenMeeting }) => {
  const progress = useMeetingProgress(item, fetchData);
  const effectiveStatus = item.displayStatus ?? item.status;
  const isProcessing = item.status === 1 || item.status === 2;
  const isPaused = effectiveStatus === PAUSED_DISPLAY_STATUS;
  const isRealtimeActive = effectiveStatus === REALTIME_ACTIVE_DISPLAY_STATUS;
  const isRealtimeIdle = effectiveStatus === REALTIME_IDLE_DISPLAY_STATUS;
  const isCrossPlatformRealtime = (isPaused || isRealtimeActive || isRealtimeIdle) && !canControlRealtimeFromCurrentPlatform(item);
  const crossPlatformHint = `在${getRealtimeSourceLabel(item)}继续`;

  const sourceColor = item.meetingSource === "ANDROID" ? "#10b981" : "#3b82f6";

  return (
    <List.Item style={{ padding: 0 }}>
      <Card
        hoverable
        onClick={() => onOpenMeeting(item)}
        className="meeting-card-v2"
        style={{
          borderRadius: "20px",
          border: "1px solid rgba(0, 0, 0, 0.04)",
          background: "#ffffff",
          overflow: "hidden",
          transition: "all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1)",
          boxShadow: "0 2px 8px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.02)",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          minHeight: "200px"
        }}
        styles={{ body: { padding: "20px 24px", flex: 1, display: "flex", flexDirection: "column" } }}
      >
        {/* Top Section: Status & Source */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
          <IntegratedStatusTag meeting={item} progress={progress} />
          <div 
            style={{ 
              display: "flex", 
              alignItems: "center", 
              gap: "4px", 
              padding: "2px 8px", 
              background: `${sourceColor}08`, 
              borderRadius: "6px",
              color: sourceColor,
              fontSize: "11px",
              fontWeight: 700,
              textTransform: "uppercase",
              letterSpacing: "0.01em"
            }}
          >
            <div style={{ width: "5px", height: "5px", borderRadius: "50%", background: sourceColor }} />
            {getMeetingSourceLabel(item.meetingSource)}
          </div>
        </div>

        {/* Middle Section: Title & Actions */}
        <div style={{ position: "relative", marginBottom: 12 }}>
          <Title level={4} style={{ margin: 0, paddingRight: "32px", fontSize: "16px", lineHeight: 1.4, fontWeight: 700, color: "#1a1a1a" }} ellipsis={{ tooltip: item.title }}>
            {item.title}
          </Title>
          
          {canManageMeeting(item) && (
            <div 
              className="card-actions-v2" 
              style={{ position: "absolute", right: -8, top: -4 }}
              onClick={e => e.stopPropagation()}
            >
              <Popconfirm 
                title="确定删除会议吗？" 
                description="删除后将无法找回该会议记录。"
                onConfirm={() => deleteMeeting(item.id).then(fetchData)}
                okText="删除"
                cancelText="取消"
                okButtonProps={{ danger: true }}
              >
                <Button type="text" size="small" shape="circle" icon={<DeleteOutlined style={{ color: "#ff4d4f", fontSize: 13 }} />} />
              </Popconfirm>
            </div>
          )}
        </div>

        {/* Content Section: Progress or Metadata */}
        <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "8px" }}>
          {(isProcessing || isPaused || isRealtimeActive || isRealtimeIdle) ? (
            <div 
              style={{ 
                padding: "8px 10px", 
                borderRadius: "10px", 
                background: "var(--app-bg-surface-strong)", 
                border: "1px solid rgba(0,0,0,0.02)",
                fontSize: "12px"
              }}
            >
              <div style={{ display: "flex", alignItems: "center", gap: "6px", color: config.color, fontWeight: 600 }}>
                {isProcessing ? <SyncOutlined spin /> : <InfoCircleOutlined />}
                <span style={{ fontSize: "12px" }}>
                  {isProcessing ? (progress?.message || "深度分析中...") : (isCrossPlatformRealtime ? crossPlatformHint : config.text)}
                </span>
              </div>
            </div>
          ) : (
            <div style={{ display: "flex", flexWrap: "wrap", gap: "12px", color: "#8c8c8c", fontSize: "12px" }}>
              <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
                <CalendarOutlined style={{ fontSize: "13px", opacity: 0.7 }} />
                <span>{dayjs(item.meetingTime).format("MM-DD HH:mm")}</span>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
                <UserOutlined style={{ fontSize: "13px", opacity: 0.7 }} />
                <span style={{ maxWidth: "80px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{item.creatorName || "未知"}</span>
              </div>
            </div>
          )}
        </div>

        {/* Bottom Section: Tags & Navigate */}
        <div style={{ marginTop: "auto", paddingTop: 12, borderTop: "1px solid rgba(0,0,0,0.04)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ display: "flex", gap: "4px", flex: 1, overflow: "hidden" }}>
            {item.tags?.split(",").filter(Boolean).slice(0, 2).map(tag => (
              <span 
                key={tag} 
                style={{ 
                  padding: "1px 8px", 
                  borderRadius: "4px", 
                  background: "#f3f4f6", 
                  color: "#6b7280", 
                  fontSize: "11px", 
                  fontWeight: 600,
                  whiteSpace: "nowrap",
                  maxWidth: "90px",
                  overflow: "hidden",
                  textOverflow: "ellipsis"
                }}
              >
                #{tag}
              </span>
            )) || <span style={{ fontSize: "11px", color: "#bfbfbf" }}>无标签</span>}
          </div>
          <div 
            style={{ 
              height: "28px", 
              borderRadius: "8px", 
              background: "rgba(95, 81, 255, 0.1)", 
              color: "var(--primary-blue)", 
              display: "flex", 
              alignItems: "center", 
              justifyContent: "center",
              transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
              padding: "0 10px",
              overflow: "hidden",
              whiteSpace: "nowrap",
              minWidth: "28px"
            }}
            className="card-arrow"
          >
            <RightOutlined style={{ fontSize: "10px", flexShrink: 0 }} />
            <span className="view-detail-text" style={{ 
              fontSize: "11px", 
              fontWeight: 700, 
              maxWidth: 0, 
              opacity: 0, 
              transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)", 
              marginLeft: 0, 
              overflow: 'hidden',
              display: 'inline-block'
            }}>查看详情</span>
          </div>
        </div>
      </Card>
    </List.Item>
  );
};

const Meetings: React.FC = () => {
  const { message } = App.useApp();
  const { t } = useTranslation();
  const navigate = useNavigate();
  const { can } = usePermission();
  const [searchParams, setSearchParams] = useSearchParams();
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<MeetingVO[]>([]);
  const [total, setTotal] = useState(0);
  const [current, setCurrent] = useState(1);
  const [displayMode, setDisplayMode] = useState<"card" | "list">("card");
  const [size, setSize] = useState(8);
  const [searchTitle, setSearchTitle] = useState("");
  const [viewType, setViewType] = useState<"all" | "created" | "involved">("all");
  const [createDrawerVisible, setCreateDrawerVisible] = useState(false);
  const [createDrawerType, setCreateDrawerType] = useState<MeetingCreateType>("upload");
  const [configLoaded, setConfigLoaded] = useState(false);
  const [createConfig, setCreateConfig] = useState<MeetingCreateConfig>({
    offlineEnabled: false,
    realtimeEnabled: false,
    offlineAudioMaxSizeMb: 1024,
  });
  const [userList, setUserList] = useState<SysUser[]>([]);

  const hasRunningTasks = data.some(shouldPollMeetingCard);

  const handleDisplayModeChange = (mode: "card" | "list") => {
    setDisplayMode(mode);
    setSize(mode === "card" ? 8 : 10);
    setCurrent(1);
  };

  useEffect(() => {
    const action = searchParams.get("action");
    const type = searchParams.get("type") as MeetingCreateType;
    if (action === "create" && (type === "realtime" || type === "upload")) {
      setCreateDrawerType(type);
      setCreateDrawerVisible(true);
      setSearchParams({});
    }
  }, [searchParams, setSearchParams]);

  useEffect(() => {
    void fetchData();
  }, [current, size, searchTitle, viewType]);

  useEffect(() => {
    if (!hasRunningTasks) {
      return;
    }
    const timer = setInterval(() => void fetchData(true), 5000);
    return () => clearInterval(timer);
  }, [hasRunningTasks, current, size, searchTitle, viewType]);

  useEffect(() => {
    listUsers().then((users) => setUserList(users || [])).catch(() => setUserList([]));
    getMeetingCreateConfig()
      .then((res) => {
        setCreateConfig(res.data.data || DEFAULT_CREATE_CONFIG);
        setConfigLoaded(true);
      })
      .catch(() => {
        setCreateConfig(DEFAULT_CREATE_CONFIG);
        setConfigLoaded(true);
      });
  }, []);

  const fetchData = async (silent = false) => {
    if (!silent) {
      setLoading(true);
    }
    try {
      const res = await getMeetingPage({ current, size, title: searchTitle, viewType });
      const records = res.data?.data?.records || [];
      let statusMap: Record<number, RealtimeMeetingSessionStatus> = {};
      const realtimeCandidates = records.filter(isRealtimeMeetingCandidate);
      if (realtimeCandidates.length > 0) {
        try {
          const sessionRes = await getRealtimeMeetingSessionStatuses(realtimeCandidates.map((item) => item.id));
          statusMap = sessionRes.data?.data || {};
        } catch {}
      }
      setData(records.map((item) => applyRealtimeSessionStatus(item, statusMap[item.id])));
      setTotal(res.data?.data?.total || 0);
    } finally {
      if (!silent) {
        setLoading(false);
      }
    }
  };

  const handleOpenMeeting = async (meeting: MeetingVO) => {
    if (!isRealtimeMeetingCandidate(meeting)) {
      navigate("/meetings/" + meeting.id);
      return;
    }
    if (!canControlRealtimeFromCurrentPlatform(meeting)) {
      message.info("该实时会议需在" + getRealtimeSourceLabel(meeting) + "继续，当前仅支持查看详情");
      navigate("/meetings/" + meeting.id);
      return;
    }
    if (canOpenRealtimeSession(meeting.realtimeSessionStatus)) {
      navigate("/meeting-live-session/" + meeting.id);
      return;
    }
    if (!canManageMeeting(meeting)) {
      navigate("/meetings/" + meeting.id);
      return;
    }
    try {
      const res = await getRealtimeMeetingSessionStatus(meeting.id);
      if (canOpenRealtimeSession(res.data?.data?.status)) {
        navigate("/meeting-live-session/" + meeting.id);
        return;
      }
    } catch {}
    navigate("/meetings/" + meeting.id);
  };

  const tableColumns = [
    {
      title: "会议标题",
      dataIndex: "title",
      key: "title",
      render: (text: string, record: MeetingVO) => <a style={{ fontWeight: 500 }} onClick={() => handleOpenMeeting(record)}>{text}</a>,
    },
    {
      title: "状态",
      key: "status",
      width: 150,
      render: (_: unknown, record: MeetingVO) => <TableStatusCell meeting={record} fetchData={() => void fetchData()} />,
    },
    {
      title: "会议时间",
      dataIndex: "meetingTime",
      key: "meetingTime",
      width: 160,
      render: (text: string) => dayjs(text).format("YYYY-MM-DD HH:mm"),
    },
    {
      title: "创建人",
      dataIndex: "creatorName",
      key: "creatorName",
      width: 100,
      render: (text: string) => <Text type="secondary">{text || "未知"}</Text>,
    },
    {
      title: "来源",
      dataIndex: "meetingSource",
      key: "meetingSource",
      width: 80,
      render: (value: MeetingVO["meetingSource"]) => <Tag style={{ fontSize: '11px', margin: 0 }}>{getMeetingSourceLabel(value)}</Tag>,
    },
    {
      title: "参会人",
      dataIndex: "participants",
      key: "participants",
      render: (text: string) => <Text type="secondary" ellipsis style={{ maxWidth: 180 }}>{text || "无参与人员"}</Text>,
    },
    {
      title: "操作",
      key: "action",
      width: 160,
      render: (_: unknown, record: MeetingVO) => (
        <Space size="middle">
          <Button type="link" size="small" onClick={(e) => { e.stopPropagation(); handleOpenMeeting(record); }}>查看详情</Button>
          {canManageMeeting(record) && (
            <Popconfirm title="确定删除吗？" onConfirm={() => deleteMeeting(record.id).then(() => fetchData())}>
              <Button type="link" danger size="small" onClick={(e) => e.stopPropagation()}>删除</Button>
            </Popconfirm>
          )}
        </Space>
      ),
    },
  ];

  const statusConfig: Record<number, { text: string; color: string; bgColor: string }> = {
    0: { text: "排队中", color: "#8c8c8c", bgColor: "#f5f5f5" },
    1: { text: "识别中", color: "#1890ff", bgColor: "#e6f7ff" },
    2: { text: "总结中", color: "#faad14", bgColor: "#fff7e6" },
    3: { text: "已完成", color: "#52c41a", bgColor: "#f6ffed" },
    4: { text: "失败", color: "#ff4d4f", bgColor: "#fff1f0" },
    5: { text: "会议暂停", color: "#d48806", bgColor: "#fff7e6" },
    6: { text: "实时进行中", color: "#1677ff", bgColor: "#e6f4ff" },
    7: { text: "待开始", color: "#595959", bgColor: "#f5f5f5" },
  };

  return (
    <PageContainer
      title="会议中心"
      subtitle="管理会议记录与分析"
      style={{ padding: '20px 32px' }}
      headerExtra={
        <Space size={16} wrap>
          <Radio.Group value={displayMode} onChange={(e) => handleDisplayModeChange(e.target.value)} buttonStyle="solid">
            <Radio.Button value="card"><AppstoreOutlined /></Radio.Button>
            <Radio.Button value="list"><UnorderedListOutlined /></Radio.Button>
          </Radio.Group>
          {configLoaded && (
            <Button
              type="primary"
              icon={<PlusOutlined />}
              disabled={!createConfig.offlineEnabled && !createConfig.realtimeEnabled}
              onClick={() => {
                if (createConfig.offlineEnabled || createConfig.realtimeEnabled) {
                  setCreateDrawerType(createConfig.offlineEnabled ? "upload" : "realtime");
                  setCreateDrawerVisible(true);
                }
              }}
            >
              新建会议
            </Button>
          )}
        </Space>
      }
      toolbar={
        <>
          <Radio.Group value={viewType} onChange={(e) => { setViewType(e.target.value); setCurrent(1); }} buttonStyle="solid">
            <Radio.Button value="all">全部</Radio.Button>
            <Radio.Button value="created">我发起</Radio.Button>
            <Radio.Button value="involved">我参与</Radio.Button>
          </Radio.Group>
          <Input
            placeholder="搜索标题"
            prefix={<SearchOutlined />}
            allowClear
            onPressEnter={(e) => { setSearchTitle((e.target as HTMLInputElement).value); setCurrent(1); }}
            style={{ width: 200 }}
          />
        </>
      }
    >
      <Card
        className="app-page__content-card"
        style={{ flex: 1, minHeight: 0, overflow: "hidden", display: "flex", flexDirection: "column", border: 'none', background: 'transparent' }}
        styles={{ body: { padding: 0, flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" } }}
      >
        <div className="app-page__table-wrap" style={{ flex: 1, minHeight: 0, overflowY: "auto", overflowX: "hidden", padding: "4px" }}>
          {displayMode === "card" ? (
            <Skeleton loading={loading} active paragraph={{ rows: 8 }}>
              <List
                grid={{ gutter: [20, 20], xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }}
                dataSource={data}
                renderItem={(item) => {
                  const config = statusConfig[item.displayStatus ?? item.status] || statusConfig[0];
                  return <MeetingCardItem item={item} config={config} fetchData={() => void fetchData()} onOpenMeeting={handleOpenMeeting} />;
                }}
                locale={{ emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="开启您的第一场会议分析" /> }}
              />
            </Skeleton>
          ) : (
            <Table
              columns={tableColumns}
              dataSource={data}
              rowKey="id"
              loading={loading}
              pagination={false}
              scroll={{ x: "max-content" }}
              onRow={(record) => ({ onClick: () => handleOpenMeeting(record), style: { cursor: "pointer" } })}
              locale={{ emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="开启您的第一场会议分析" /> }}
            />
          )}
        </div>

        <div style={{ padding: "16px 4px 0", flexShrink: 0, display: 'flex', justifyContent: 'center' }}>
          <AppPagination current={current} pageSize={size} total={total} onChange={(p, s) => { setCurrent(p); setSize(s); }} />
        </div>
      </Card>

      <MeetingCreateDrawer
        open={createDrawerVisible}
        initialType={createDrawerType}
        onCancel={() => setCreateDrawerVisible(false)}
        onSuccess={() => {
          setCreateDrawerVisible(false);
          void fetchData();
        }}
      />

      <style>{`
        .meeting-card-v2:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(95, 81, 255, 0.08) !important; border-color: rgba(95, 81, 255, 0.15) !important; }
        .meeting-card-v2:hover .card-arrow { background: var(--primary-blue) !important; color: white !important; padding: 0 12px; }
        .meeting-card-v2:hover .view-detail-text { max-width: 60px; opacity: 1; margin-left: 6px; }
        .status-bar-active { animation: statusBreathing 2s infinite ease-in-out; }
        @keyframes statusBreathing { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
        
        /* Premium Button Styles */
        .ant-btn-primary:not(.ant-btn-dangerous) {
          background: linear-gradient(135deg, #5f51ff, #6c8cff) !important;
          border: none !important;
          box-shadow: 0 4px 12px rgba(95, 81, 255, 0.2) !important;
          transition: all 0.3s ease !important;
        }
        .ant-btn-primary:not(.ant-btn-dangerous):hover {
          transform: translateY(-1px);
          box-shadow: 0 6px 16px rgba(95, 81, 255, 0.3) !important;
          filter: brightness(1.05);
        }
        .ant-btn-default {
          border-color: rgba(228, 232, 245, 0.8) !important;
          background: #fff !important;
          color: #6e7695 !important;
        }
        .ant-btn-default:hover {
          border-color: #5f51ff !important;
          color: #5f51ff !important;
        }
      `}</style>
    </PageContainer>
  );
};

export default Meetings;