import Refresh from "@mui/icons-material/Refresh";
import Skeleton from "@mui/material/Skeleton";
import { useTimeZone } from "@/app/timezone/TimeZoneProvider.jsx";
import { DashboardCharts } from "@/features/dashboard/components/DashboardCharts.jsx";
import { DashboardStats } from "@/features/dashboard/components/DashboardStats.jsx";
import { useDashboardPage } from "@/features/dashboard/hooks/useDashboardPage.js";
import { Button } from "@/shared/ui/Button.jsx";
import { usePageLoadingStatus } from "@/shared/ui/PageLoadBoundary.jsx";

export function DashboardUserProfile() {
  const page = useDashboardPage();
  const { formatMillis } = useTimeZone();
  // 首次请求接入整页加载边界；边界释放后的 App/时区切换则展示本区域自己的骨架，避免页面空白。
  usePageLoadingStatus(page.loading);

  return (
    <section className="dashboard-profile-section" aria-labelledby="dashboard-profile-title">
      <div className="dashboard-profile-head">
        <h2 id="dashboard-profile-title">用户画像</h2>
        {page.overview?.updatedAtMs ? <span>数据更新时间 {formatMillis(page.overview.updatedAtMs)}</span> : null}
      </div>
      {renderContent(page)}
    </section>
  );
}

function renderContent(page) {
  if (page.loading) {
    return <DashboardUserProfileSkeleton />;
  }
  if (page.error) {
    return (
      <div className="dashboard-profile-state" role="alert">
        <span>{page.error}</span>
        <Button onClick={page.reload}>
          <Refresh fontSize="small" />
          重试
        </Button>
      </div>
    );
  }
  if (!page.overview) {
    return (
      <div className="dashboard-profile-state" role="status">
        当前无数据
      </div>
    );
  }

  return (
    <>
      <DashboardStats overview={page.overview} />
      <DashboardCharts overview={page.overview} />
    </>
  );
}

function DashboardUserProfileSkeleton() {
  return (
    <div className="dashboard-profile-skeleton" aria-hidden="true">
      <div className="dashboard-profile-skeleton__kpis">
        {Array.from({ length: 3 }, (_, index) => (
          <Skeleton animation="wave" className="dashboard-profile-skeleton__kpi" key={index} variant="rounded" />
        ))}
      </div>
      <div className="dashboard-profile-skeleton__charts">
        {Array.from({ length: 2 }, (_, index) => (
          <Skeleton animation="wave" className="dashboard-profile-skeleton__chart" key={index} variant="rounded" />
        ))}
      </div>
    </div>
  );
}