import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { toast } from "sonner";
import {
  clockInAttendance,
  clockOutAttendance,
  fetchMyTodayAttendance,
  type AttendanceTodayResponse,
} from "../api/attendance";
import { mapApiErrorMessage } from "../api/errorMessages";
import {
  fetchPortalHome,
  type PortalHomePayload,
  type PortalRecentActivity,
  type PortalTeamStatusItem,
} from "../api/portal";
import { isApiError } from "../api/types";
import { useAuth } from "../auth/AuthContext";
import { hasAnyPermission, isManagerRole } from "../auth/permissions";
import { EmployeeAvatar } from "../components/common/EmployeeAvatar";
import { ErrorBoundary } from "../components/common/ErrorBoundary";
import { EmptyStateCard } from "../components/common/EmptyStateCard";
import { WelcomeDialog } from "../components/onboarding/WelcomeDialog";
import { MetricCard } from "../components/patterns/MetricCard";
import { PageScaffold } from "../components/patterns/PageScaffold";
import { SectionPanel } from "../components/patterns/SectionPanel";
import { WorkbenchHero } from "../components/patterns/WorkbenchHero";
import { Button } from "../components/ui/button";
import { employeePortalSchema, managerPortalSchema } from "../features/portal/schema";
import {
  clearWelcomeDialogFlag,
  dismissGettingStartedCard,
  shouldShowGettingStartedCard,
  shouldShowWelcomeDialog,
} from "../lib/onboardingGuide";
import { readRecentVisits } from "../lib/recentVisits";

type SummaryItem = {
  key: string;
  href: string;
  label: string;
  value: string;
  note?: string;
  tone?: "normal" | "warning";
};

type TodoAggregateItem = {
  title: string;
  sourceLabel: string;
  severity: "normal" | "warning" | "high";
  href: string;
  icon: string;
};

type QuickActionConfig = {
  key: string;
  icon: string;
  label: string;
  description: string;
  to?: string;
  onClick?: () => void;
  disabled?: boolean;
};

type GettingStartedChecklistItem = {
  key: string;
  title: string;
  description: string;
  href: string;
  completed: boolean;
};

const LEAVE_PORTAL_PERMISSIONS = ["leave.view_own", "leave.view_all", "leave.create", "leave.submit"];
const EXPENSE_PORTAL_PERMISSIONS = ["expense.view_own", "expense.view_all", "expense.create", "expense.proxy_manage"];
const TODO_SEVERITY_RANK = {
  high: 3,
  warning: 2,
  normal: 1,
} as const;

function isSummaryItem(item: SummaryItem | null): item is SummaryItem {
  return Boolean(item);
}

function severityTone(severity?: "normal" | "warning" | "high") {
  if (severity === "high") return "danger" as const;
  if (severity === "warning") return "warning" as const;
  return "neutral" as const;
}

function pickCards(cards: PortalHomePayload["cards"], keys: string[]) {
  const map = new Map(cards.map((card) => [card.key, card]));
  return keys.map((key) => map.get(key)).filter((card): card is PortalHomePayload["cards"][number] => Boolean(card));
}

function compactCards(cards: PortalHomePayload["cards"], excludedKeys: string[]) {
  return cards.filter((card) => !excludedKeys.includes(card.key));
}

function formatWeeklyStatus(payload: PortalHomePayload["weeklyReport"]) {
  if (!payload) return "未启用";
  return payload.status === "submitted" ? "已提交" : "待填写";
}

function resolveErrorMessage(error: unknown) {
  if (isApiError(error)) {
    return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
  }
  if (error instanceof Error) {
    return error.message;
  }
  return "请求失败，请稍后重试。";
}

function isAttendanceFeatureDisabled(error: unknown) {
  return isApiError(error) && error.code === "VALID_001" && error.details?.featureFlag === "attendance_v1_disabled";
}

function formatRelativeTime(value: string | null) {
  if (!value) {
    return "-";
  }

  const timestamp = new Date(value).getTime();
  if (Number.isNaN(timestamp)) {
    return "-";
  }

  const diffMs = Date.now() - timestamp;
  if (diffMs < 60 * 1000) {
    return "刚刚";
  }

  const diffMinutes = Math.floor(diffMs / (60 * 1000));
  if (diffMinutes < 60) {
    return `${diffMinutes} 分钟前`;
  }

  const diffHours = Math.floor(diffMinutes / 60);
  if (diffHours < 24) {
    return `${diffHours} 小时前`;
  }

  const diffDays = Math.floor(diffHours / 24);
  return `${diffDays} 天前`;
}

function formatShortTime(value: string | null) {
  if (!value) {
    return "--:--";
  }
  try {
    return new Date(value).toLocaleTimeString("zh-CN", {
      hour: "2-digit",
      minute: "2-digit",
      hour12: false,
    });
  } catch {
    return value;
  }
}

function formatWorkMinutes(value: number | null | undefined) {
  if (value == null) {
    return "-";
  }
  const hours = Math.floor(value / 60);
  const minutes = value % 60;
  return `${hours}h ${String(minutes).padStart(2, "0")}m`;
}

function buildTodoAggregateItems(payload: PortalHomePayload) {
  const cards = Array.isArray(payload.cards) ? payload.cards : [];
  const items: TodoAggregateItem[] = [];
  if (payload.pendingTasks.count > 0) {
    items.push({
      title: `审批待办 ${payload.pendingTasks.count} 条`,
      sourceLabel: "审批",
      severity: "warning",
      href: payload.pendingTasks.href,
      icon: "fact_check",
    });
  }
  if ((payload.todoSummary?.openCount ?? 0) > 0) {
    items.push({
      title: `TODO 待办 ${payload.todoSummary?.openCount ?? 0} 条`,
      sourceLabel: "TODO",
      severity: (payload.todoSummary?.highPriorityCount ?? 0) > 0 ? "high" : "normal",
      href: payload.todoSummary?.href ?? "/todos",
      icon: "check_circle",
    });
  }
  for (const card of cards) {
    if (!card.severity || (card.severity !== "warning" && card.severity !== "high")) {
      continue;
    }
    items.push({
      title: `${card.title}：${card.value}`,
      sourceLabel: "工作台",
      severity: card.severity,
      href: card.href,
      icon: card.severity === "high" ? "priority_high" : "warning",
    });
  }

  const deduped = new Map<string, TodoAggregateItem>();
  for (const item of items) {
    deduped.set(`${item.title}|${item.href}|${item.sourceLabel}`, item);
  }

  return Array.from(deduped.values())
    .sort((left, right) => {
      const severityCompare = TODO_SEVERITY_RANK[right.severity] - TODO_SEVERITY_RANK[left.severity];
      if (severityCompare !== 0) {
        return severityCompare;
      }
      return left.title.localeCompare(right.title, "zh-CN");
    })
    .slice(0, 10);
}

function resolveTeamStatusBadge(item: PortalTeamStatusItem) {
  if (item.onLeave) {
    return {
      label: item.leaveType ? `请假 · ${item.leaveType}` : "请假",
      className: "badge-warning",
    };
  }
  if (item.presenceStatus === "office") {
    return { label: "在岗", className: "badge-success" };
  }
  if (item.presenceStatus === "out") {
    return {
      label: "外出",
      className: "inline-flex items-center rounded-full bg-sky-50 px-2.5 py-0.5 text-xs font-semibold text-sky-700 ring-1 ring-inset ring-sky-600/10",
    };
  }
  if (item.presenceStatus === "travel") {
    return {
      label: "差旅",
      className: "inline-flex items-center rounded-full bg-sky-50 px-2.5 py-0.5 text-xs font-semibold text-sky-700 ring-1 ring-inset ring-sky-600/10",
    };
  }
  if (item.presenceStatus === "remote") {
    return { label: "居家", className: "badge-neutral" };
  }
  if (!item.attendanceClockIn) {
    return { label: "未打卡", className: "badge-neutral" };
  }
  return {
    label: "已打卡",
    className: "inline-flex items-center rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-semibold text-slate-700 ring-1 ring-inset ring-slate-600/10",
  };
}

function formatTeamStatusAttendance(item: PortalTeamStatusItem) {
  if (item.onLeave) {
    return item.leaveType ? `${item.leaveType} 已审批` : "今日请假";
  }
  if (item.attendanceClockIn && item.attendanceClockOut) {
    return `${formatShortTime(item.attendanceClockIn)} - ${formatShortTime(item.attendanceClockOut)}`;
  }
  if (item.attendanceClockIn) {
    return `${formatShortTime(item.attendanceClockIn)} 已打卡`;
  }
  if (item.presenceStatus === "travel") {
    return "今日差旅";
  }
  if (item.presenceStatus === "out") {
    return "当前外出";
  }
  if (item.presenceStatus === "remote") {
    return "今日居家办公";
  }
  return "暂无打卡记录";
}

function resolveClockAction(
  attendanceToday: AttendanceTodayResponse | null,
  state: {
    isLoading: boolean;
    isError: boolean;
    featureDisabled: boolean;
    pending: boolean;
  },
) {
  if (state.pending) {
    return {
      label: "处理中...",
      description: "正在提交考勤动作",
      disabled: true,
      action: null,
    } as const;
  }
  if (state.isLoading) {
    return {
      label: "打卡读取中",
      description: "正在读取今日考勤状态",
      disabled: true,
      action: null,
    } as const;
  }
  if (state.isError && !state.featureDisabled) {
    return {
      label: "打卡不可用",
      description: "当前无法读取今日考勤状态",
      disabled: true,
      action: null,
    } as const;
  }
  if (!attendanceToday) {
    return {
      label: "今日考勤",
      description: "暂无可用考勤数据",
      disabled: true,
      action: null,
    } as const;
  }
  if (!attendanceToday.needClockIn) {
    return {
      label: "今日无需打卡",
      description: "系统已自动排除缺卡统计",
      disabled: true,
      action: null,
    } as const;
  }
  if (!attendanceToday.item?.clockInAt) {
    return {
      label: "上班打卡",
      description: "记录今日到岗时间",
      disabled: false,
      action: "clock-in",
    } as const;
  }
  if (!attendanceToday.item.clockOutAt) {
    return {
      label: "下班打卡",
      description: `已上班 ${formatShortTime(attendanceToday.item.clockInAt)}`,
      disabled: false,
      action: "clock-out",
    } as const;
  }
  return {
    label: "今日已完成",
    description: `工时 ${formatWorkMinutes(attendanceToday.item.workMinutes)}`,
    disabled: true,
    action: null,
  } as const;
}

function SummaryPanel({ title, items }: { title: string; items: SummaryItem[] }) {
  if (!items.length) {
    return <EmptyStateCard title={title} description="暂无需要优先处理的摘要信息。" />;
  }

  return (
    <SectionPanel title={title} description="优先看结论与下一步，再进入对应模块处理。">
      <div className="space-y-3">
        {items.map((item) => (
          <Link
            key={item.key}
            to={item.href}
            className={item.tone === "warning"
              ? "block rounded-2xl border border-amber-200 bg-amber-50 px-4 py-4 hover:bg-amber-100"
              : "block rounded-2xl border border-zinc-200 bg-white px-4 py-4 hover:bg-zinc-50"}
          >
            <div className="flex items-center justify-between gap-3">
              <div className="font-medium text-zinc-900">{item.label}</div>
              <div className="text-sm font-semibold text-zinc-900">{item.value}</div>
            </div>
            {item.note ? <div className="mt-2 text-sm leading-6 text-zinc-500">{item.note}</div> : null}
          </Link>
        ))}
      </div>
    </SectionPanel>
  );
}

function AnnouncementsPanel({ announcements }: { announcements: PortalHomePayload["announcements"] }) {
  const safeAnnouncements = Array.isArray(announcements) ? announcements : [];

  return (
    <SectionPanel
      title="公告"
      description="公告保留在第二阅读层，不与今日任务卡竞争。"
      actions={<Link to="/announcements" className="text-sm font-medium text-primary hover:underline">查看全部</Link>}
    >
      <div className="space-y-3">
        {safeAnnouncements.length ? safeAnnouncements.slice(0, 4).map((item) => (
          <div key={item.id} className="rounded-2xl border border-zinc-200 bg-white px-4 py-4">
            <div className="font-medium text-zinc-900">{item.title}</div>
            <div className="mt-2 text-sm leading-6 text-zinc-600">{item.summary}</div>
            {item.href ? (
              <a className="mt-3 inline-flex text-sm font-medium text-primary hover:underline" href={item.href} rel="noreferrer" target="_blank">
                查看详情
              </a>
            ) : null}
          </div>
        )) : <EmptyStateCard title="暂无公告" description="当前没有需要广播的公告。" />}
      </div>
    </SectionPanel>
  );
}

function RecentVisitsPanel() {
  const recentVisits = readRecentVisits();

  return (
    <SectionPanel title="继续工作" description="保留最近访问路径，帮助快速回到上一次处理中断的位置。">
      <div className="space-y-3">
        {recentVisits.length ? recentVisits.map((item) => (
          <Link key={item.path} to={item.path} className="block rounded-2xl border border-zinc-200 bg-white px-4 py-4 hover:bg-zinc-50">
            <div className="font-medium text-zinc-900">{item.title}</div>
            <div className="mt-1 text-xs text-zinc-500">{item.path}</div>
          </Link>
        )) : <EmptyStateCard title="暂无最近访问" description="开始使用后，最近处理过的页面会显示在这里。" />}
      </div>
    </SectionPanel>
  );
}

function QuickLinksPanel({ items }: { items: PortalHomePayload["quickLinks"] }) {
  const safeItems = Array.isArray(items) ? items : [];

  return (
    <SectionPanel title="常用入口" description="只保留高频入口，避免把所有模块堆成超市。">
      <div className="grid gap-3 sm:grid-cols-2">
        {safeItems.length ? safeItems.map((item) => (
          <Link key={item.key} to={item.href} className="rounded-2xl border border-zinc-200 bg-white px-4 py-4 text-sm font-medium text-zinc-700 hover:bg-zinc-50">
            {item.title}
          </Link>
        )) : <EmptyStateCard title="暂无常用入口" description="工作区尚未配置推荐入口。" />}
      </div>
    </SectionPanel>
  );
}

function SecondaryCardsPanel({ title, description, cards }: { title: string; description: string; cards: PortalHomePayload["cards"] }) {
  if (!cards.length) {
    return <EmptyStateCard title={title} description="暂无需要额外关注的统计项。" />;
  }

  return (
    <SectionPanel title={title} description={description}>
      <div className="grid gap-3 sm:grid-cols-2">
        {cards.map((card) => (
          <MetricCard
            key={card.key}
            title={card.title}
            value={card.value}
            href={card.href}
            note="进入详情页处理"
            tone={severityTone(card.severity)}
          />
        ))}
      </div>
    </SectionPanel>
  );
}

function AdoptionSummaryPanel({ adoptionSummary }: { adoptionSummary: NonNullable<PortalHomePayload["adoptionSummary"]> | null }) {
  if (!adoptionSummary) {
    return null;
  }

  return (
    <details className="card-std p-6" open>
      <summary className="flex cursor-pointer list-none items-center justify-between gap-3 text-left">
        <div>
          <div className="text-base font-semibold text-zinc-900">试点观测摘要</div>
          <div className="mt-1 text-sm text-zinc-500">只给管理员默认展开，用于观察习惯是否已形成。</div>
        </div>
        <span className="text-xs uppercase tracking-[0.18em] text-zinc-400">展开 / 收起</span>
      </summary>
      <div className="mt-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
        <div className="rounded-2xl border border-zinc-200 bg-white px-4 py-4 text-sm">
          <div className="text-zinc-500">近 7 天登录覆盖率</div>
          <div className="mt-2 text-2xl font-semibold tracking-tight text-zinc-900">{adoptionSummary.login7dRate}%</div>
        </div>
        <div className="rounded-2xl border border-zinc-200 bg-white px-4 py-4 text-sm">
          <div className="text-zinc-500">周报提交率</div>
          <div className="mt-2 text-2xl font-semibold tracking-tight text-zinc-900">{adoptionSummary.weeklySubmissionRate}%</div>
        </div>
        <div className="rounded-2xl border border-zinc-200 bg-white px-4 py-4 text-sm">
          <div className="text-zinc-500">团队状态覆盖率</div>
          <div className="mt-2 text-2xl font-semibold tracking-tight text-zinc-900">{adoptionSummary.presenceCoverageRate}%</div>
        </div>
        <div className="rounded-2xl border border-zinc-200 bg-white px-4 py-4 text-sm">
          <div className="text-zinc-500">当前公告数</div>
          <div className="mt-2 text-2xl font-semibold tracking-tight text-zinc-900">{adoptionSummary.announcementCount}</div>
        </div>
      </div>
      <div className="mt-4 rounded-2xl border border-zinc-200 bg-zinc-50 px-4 py-4 text-sm text-zinc-600">
        <div className="font-medium text-zinc-900">本周观测提示</div>
        <ul className="mt-2 list-disc space-y-1 pl-5">
          {adoptionSummary.hints.map((hint) => (
            <li key={hint}>{hint}</li>
          ))}
        </ul>
      </div>
    </details>
  );
}

function PortalSectionFallback({
  title,
  description,
}: {
  title: string;
  description: string;
}) {
  return (
    <SectionPanel title={title} description={description}>
      <EmptyStateCard title={`${title}暂时不可用`} description="该区域渲染失败，请刷新页面后重试。" />
    </SectionPanel>
  );
}

function GettingStartedCard({
  items,
  completedCount,
  onDismiss,
}: {
  items: GettingStartedChecklistItem[];
  completedCount: number;
  onDismiss: () => void;
}) {
  const progressPercent = items.length ? Math.round((completedCount / items.length) * 100) : 0;

  return (
    <SectionPanel
      title="快速上手"
      description="先完成基础资料和入口熟悉，再进入请假、通知等日常动作。"
      actions={(
        <button
          type="button"
          className="text-sm font-medium text-zinc-500 transition-colors hover:text-zinc-700"
          data-testid="onboarding-getting-started-dismiss"
          onClick={onDismiss}
        >
          关闭清单
        </button>
      )}
      className="shadow-sm"
    >
      <div className="space-y-3" data-testid="onboarding-getting-started-card">
        {items.map((item) => (
          <Link
            key={item.key}
            to={item.href}
            className="flex items-center gap-3 rounded-2xl border border-zinc-200 bg-white px-4 py-4 transition-colors hover:bg-zinc-50"
          >
            <span className={item.completed ? "text-emerald-600" : "text-zinc-400"}>
              <span className="material-symbols-outlined text-[20px]">
                {item.completed ? "check_circle" : "radio_button_unchecked"}
              </span>
            </span>
            <div className="min-w-0 flex-1">
              <div className="font-medium text-zinc-900">{item.title}</div>
              <div className="mt-1 text-sm leading-6 text-zinc-500">{item.description}</div>
            </div>
            <span className="material-symbols-outlined text-zinc-400">arrow_forward</span>
          </Link>
        ))}

        <div className="rounded-2xl border border-zinc-200 bg-zinc-50 px-4 py-4">
          <div className="flex items-center justify-between gap-3 text-sm">
            <span className="font-medium text-zinc-900">完成进度</span>
            <span className="text-zinc-500">{completedCount}/{items.length}</span>
          </div>
          <div className="mt-3 h-2 overflow-hidden rounded-full bg-zinc-200">
            <div
              className="h-full rounded-full bg-primary transition-all"
              style={{ width: `${progressPercent}%` }}
            />
          </div>
        </div>
      </div>
    </SectionPanel>
  );
}

function QuickActionTile({
  icon,
  label,
  description,
  to,
  onClick,
  disabled = false,
}: QuickActionConfig) {
  const baseClassName = disabled
    ? "rounded-2xl border border-zinc-200 bg-zinc-50 px-4 py-4 text-left text-zinc-400"
    : "rounded-2xl border border-zinc-200 bg-white px-4 py-4 text-left shadow-sm transition-colors hover:bg-zinc-50";

  const content = (
    <>
      <div className="flex items-center gap-3">
        <div className={disabled
          ? "flex size-10 items-center justify-center rounded-2xl bg-zinc-100 text-zinc-400"
          : "flex size-10 items-center justify-center rounded-2xl bg-primary/10 text-primary"}
        >
          <span className="material-symbols-outlined text-[20px]">{icon}</span>
        </div>
        <div className="min-w-0">
          <div className={disabled ? "font-medium text-zinc-500" : "font-medium text-zinc-900"}>{label}</div>
          <div className="mt-1 text-xs text-zinc-500">{description}</div>
        </div>
      </div>
    </>
  );

  if (to && !disabled) {
    return <Link to={to} className={baseClassName}>{content}</Link>;
  }
  if (onClick) {
    return (
      <button type="button" className={baseClassName} disabled={disabled} onClick={onClick}>
        {content}
      </button>
    );
  }
  return <div className={baseClassName}>{content}</div>;
}

function QuickActionsPanel({
  items,
}: {
  items: QuickActionConfig[];
}) {
  return (
    <SectionPanel title="快捷操作栏" description="把每天高频动作直接前置到首页，不再绕路。">
      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
        {items.length ? items.map((item) => (
          <QuickActionTile
            key={item.key}
            icon={item.icon}
            label={item.label}
            description={item.description}
            to={item.to}
            onClick={item.onClick}
            disabled={item.disabled}
          />
        )) : <EmptyStateCard title="暂无快捷动作" description="当前账号没有可直接执行的首页动作。" />}
      </div>
    </SectionPanel>
  );
}

function TodoAggregatePanel({ items }: { items: TodoAggregateItem[] }) {
  return (
    <SectionPanel title="今日待办聚合" description="合并审批、TODO 和高风险指标，只保留今天最该处理的事。">
      <div className="space-y-3">
        {items.length ? items.map((item) => (
          <Link key={`${item.title}-${item.href}-${item.sourceLabel}`} to={item.href} className="block rounded-2xl border border-zinc-200 bg-white px-4 py-4 hover:bg-zinc-50">
            <div className="flex items-start gap-3">
              <div className={item.severity === "high"
                ? "mt-0.5 flex size-9 items-center justify-center rounded-2xl bg-red-50 text-red-600"
                : item.severity === "warning"
                  ? "mt-0.5 flex size-9 items-center justify-center rounded-2xl bg-amber-50 text-amber-600"
                  : "mt-0.5 flex size-9 items-center justify-center rounded-2xl bg-zinc-100 text-zinc-600"}
              >
                <span className="material-symbols-outlined text-[18px]">{item.icon}</span>
              </div>
              <div className="min-w-0 flex-1">
                <div className="flex flex-wrap items-center gap-2">
                  <div className="font-medium text-zinc-900">{item.title}</div>
                  <span className="badge-neutral">{item.sourceLabel}</span>
                  {item.severity === "high" ? <span className="badge-error">高优先</span> : null}
                  {item.severity === "warning" ? <span className="badge-warning">关注</span> : null}
                </div>
                <div className="mt-2 text-sm text-primary">进入处理</div>
              </div>
            </div>
          </Link>
        )) : <EmptyStateCard title="暂无待办事项，休息一下吧" description="当前没有需要立刻处理的审批、TODO 或风险提醒。" />}
      </div>
    </SectionPanel>
  );
}

function TeamStatusBoardPanel({ items }: { items: PortalTeamStatusItem[] }) {
  const safeItems = Array.isArray(items) ? items : [];

  return (
    <SectionPanel title="团队全员状态" description="同时看人在不在岗、有没有请假，以及今天是否已打卡。">
      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
        {safeItems.length ? safeItems.map((item) => {
          const badge = resolveTeamStatusBadge(item);
          return (
            <div key={item.employeeId} className="rounded-2xl border border-zinc-200 bg-white px-4 py-4">
              <div className="flex items-center gap-3">
                <EmployeeAvatar name={item.name} src={item.avatarUrl} size="sm" />
                <div className="min-w-0 flex-1">
                  <div className="truncate font-medium text-zinc-900">{item.name}</div>
                  <div className="mt-1 text-xs text-zinc-500">{formatTeamStatusAttendance(item)}</div>
                </div>
                <span className={badge.className}>{badge.label}</span>
              </div>
            </div>
          );
        }) : <EmptyStateCard title="暂无团队状态" description="当前没有可展示的团队成员状态。" />}
      </div>
    </SectionPanel>
  );
}

function RecentActivitiesPanel({ items }: { items: PortalRecentActivity[] }) {
  const safeItems = Array.isArray(items) ? items : [];

  return (
    <SectionPanel title="近期动态流" description="把最近发生的报销、请假、考勤和资产动作放在同一条时间线上。">
      <div className="space-y-3">
        {safeItems.length ? safeItems.map((item) => (
          <Link key={item.id} to={item.href} className="block rounded-2xl border border-zinc-200 bg-white px-4 py-4 hover:bg-zinc-50">
            <div className="flex items-start gap-3">
              <EmployeeAvatar name={item.actorName} size="sm" />
              <div className="min-w-0 flex-1">
                <div className="text-sm font-medium leading-6 text-zinc-900">{item.summary}</div>
                <div className="mt-1 text-xs text-zinc-500">{formatRelativeTime(item.createdAt)}</div>
              </div>
            </div>
          </Link>
        )) : <EmptyStateCard title="暂无近期动态" description="当前没有可展示的最近业务动作。" />}
      </div>
    </SectionPanel>
  );
}

export function PortalHomePage() {
  const queryClient = useQueryClient();
  const { me, permissions } = useAuth();
  const [showWelcome, setShowWelcome] = useState(false);
  const [showGettingStarted, setShowGettingStarted] = useState(false);
  const portalQuery = useQuery({ queryKey: ["portal-home"], queryFn: () => fetchPortalHome() });
  const attendanceTodayQuery = useQuery({
    queryKey: ["portal-home", "attendance", "today"],
    queryFn: () => fetchMyTodayAttendance(),
    retry: (failureCount, error) => !isAttendanceFeatureDisabled(error) && failureCount < 2,
  });
  const canSetupWorkspace = hasAnyPermission(permissions, ["system.settings"]);
  const isManagerView = isManagerRole(permissions);

  useEffect(() => {
    setShowWelcome(shouldShowWelcomeDialog());
    setShowGettingStarted(shouldShowGettingStartedCard());
  }, []);

  const gettingStartedItems: GettingStartedChecklistItem[] = [
    {
      key: "profile",
      title: "完善个人资料",
      description: "补充紧急联系人和银行账户",
      href: "/settings/profile",
      completed: (me?.profileCompleteness?.score ?? 0) >= 50,
    },
    {
      key: "notification-preferences",
      title: "设置通知偏好",
      description: "选择是否接收外部渠道推送",
      href: "/settings/profile",
      completed: true,
    },
    {
      key: "leave-flow",
      title: "了解请假流程",
      description: "查看假期类型和余额",
      href: "/leave-requests",
      completed: false,
    },
    {
      key: "notifications",
      title: "查看通知中心",
      description: "了解审批和业务消息",
      href: "/notifications",
      completed: false,
    },
  ];
  const gettingStartedCompletedCount = gettingStartedItems.filter((item) => item.completed).length;

  const attendanceClockInMutation = useMutation({
    mutationFn: () => clockInAttendance(),
    onSuccess: async (response) => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["portal-home"] }),
        queryClient.invalidateQueries({ queryKey: ["portal-home", "attendance", "today"] }),
        queryClient.invalidateQueries({ queryKey: ["attendance", "me", "today"] }),
        queryClient.invalidateQueries({ queryKey: ["attendance", "me", "month"] }),
      ]);
      toast.success(
        response.item.isLate
          ? `上班打卡成功，已迟到 ${response.item.lateMinutes} 分钟`
          : "上班打卡成功",
      );
    },
    onError: (error) => {
      toast.error(resolveErrorMessage(error));
    },
  });

  const attendanceClockOutMutation = useMutation({
    mutationFn: () => clockOutAttendance(),
    onSuccess: async () => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["portal-home"] }),
        queryClient.invalidateQueries({ queryKey: ["portal-home", "attendance", "today"] }),
        queryClient.invalidateQueries({ queryKey: ["attendance", "me", "today"] }),
        queryClient.invalidateQueries({ queryKey: ["attendance", "me", "month"] }),
      ]);
      toast.success("下班打卡成功");
    },
    onError: (error) => {
      toast.error(resolveErrorMessage(error));
    },
  });

  if (portalQuery.isLoading) {
    return <div className="card-std p-6 text-sm text-zinc-500">加载 Portal 中...</div>;
  }

  if (portalQuery.isError || !portalQuery.data) {
    const message = isApiError(portalQuery.error)
      ? `${portalQuery.error.code}: ${mapApiErrorMessage(portalQuery.error.code, portalQuery.error.details, portalQuery.error.message)}`
      : "Portal 加载失败";
    return <div className="card-std p-6 text-sm text-red-600">{message}</div>;
  }

  const payload = portalQuery.data;
  const cards = Array.isArray(payload.cards) ? payload.cards : [];
  const applicationItems = Array.isArray(payload.myApplications) ? payload.myApplications : [];
  const announcementItems = Array.isArray(payload.announcements) ? payload.announcements : [];
  const quickLinkItems = Array.isArray(payload.quickLinks) ? payload.quickLinks : [];
  const recentActivities = Array.isArray(payload.recentActivities) ? payload.recentActivities : [];
  const teamStatusBoard = Array.isArray(payload.teamStatusBoard) ? payload.teamStatusBoard : [];
  const portalSchema = isManagerView ? managerPortalSchema : employeePortalSchema;
  const primaryCards = pickCards(cards, portalSchema.heroCards);
  const primaryCardKeySet = primaryCards.map((card) => card.key);
  const secondaryCards = compactCards(cards, primaryCardKeySet);
  const attendanceFeatureDisabled = isAttendanceFeatureDisabled(attendanceTodayQuery.error);
  const attendanceToday = attendanceTodayQuery.data ?? null;
  const clockAction = resolveClockAction(attendanceToday, {
    isLoading: attendanceTodayQuery.isLoading,
    isError: attendanceTodayQuery.isError,
    featureDisabled: attendanceFeatureDisabled,
    pending: attendanceClockInMutation.isPending || attendanceClockOutMutation.isPending,
  });
  const todoAggregateItems = buildTodoAggregateItems({ ...payload, cards });

  function handleCloseWelcome() {
    clearWelcomeDialogFlag();
    setShowWelcome(false);
  }

  function handleDismissGettingStarted() {
    dismissGettingStartedCard();
    setShowGettingStarted(false);
  }

  const employeeSummaryItems = ([
    {
      key: "expense",
      href: "/reimbursements",
      label: "我的报销",
      value: `${applicationItems.find((item) => item.domain === "reimbursement")?.count ?? 0} 条`,
    },
    {
      key: "leave",
      href: "/leave-requests",
      label: "我的请假",
      value: `${applicationItems.find((item) => item.domain === "leave")?.count ?? 0} 条`,
    },
    {
      key: "assets",
      href: "/assets",
      label: "我的资产",
      value: String(secondaryCards.find((card) => card.key === "my_assets")?.value ?? 0),
    },
    payload.todayPresence
      ? {
          key: "today-status-note",
          href: payload.todayPresence.href,
          label: "今日状态",
          value: payload.todayPresence.label,
          note: payload.todayPresence.note ?? "可在团队页手动更新在岗、居家、外出或出差状态。",
          tone: payload.todayPresence.status === "leave" ? "warning" as const : "normal" as const,
        }
      : null,
  ] as Array<SummaryItem | null>).filter(isSummaryItem);

  const managerSummaryItems = ([
    {
      key: "team-summary",
      href: payload.teamPresence?.href ?? "/team",
      label: "今日团队状态",
      value: payload.teamPresence ? `在岗 ${payload.teamPresence.office}/${payload.teamPresence.total}` : "待启用",
      note: payload.teamPresence ? `请假 ${payload.teamPresence.leave}，未更新 ${payload.teamPresence.unspecified}` : "团队状态板可展示在岗、居家、外出、出差与请假。",
      tone: payload.teamPresence && (payload.teamPresence.leave > 0 || payload.teamPresence.unspecified > 0) ? "warning" as const : "normal" as const,
    },
    payload.weeklySummary
      ? {
          key: "weekly-summary",
          href: payload.weeklySummary.href,
          label: "未提交周报",
          value: `${payload.weeklySummary.missingCount} 人`,
          note: `需协助 ${payload.weeklySummary.needsHelpCount} 人`,
          tone: payload.weeklySummary.missingCount > 0 ? "warning" as const : "normal" as const,
        }
      : null,
  ] as Array<SummaryItem | null>).filter(isSummaryItem);

  const quickActions: QuickActionConfig[] = [];
  if (hasAnyPermission(permissions, LEAVE_PORTAL_PERMISSIONS)) {
    quickActions.push({
      key: "leave",
      icon: "event_available",
      label: "提交请假",
      description: "直接进入请假申请页",
      to: "/leave-requests?action=create",
    });
  }
  if (hasAnyPermission(permissions, EXPENSE_PORTAL_PERMISSIONS)) {
    quickActions.push({
      key: "expense",
      icon: "request_quote",
      label: "提交报销",
      description: "进入报销工作台创建单据",
      to: "/reimbursements",
    });
  }
  if (!attendanceFeatureDisabled) {
    quickActions.push({
      key: "attendance",
      icon: clockAction.action === "clock-out" ? "logout" : "schedule",
      label: clockAction.label,
      description: clockAction.description,
      disabled: clockAction.disabled,
      onClick: clockAction.action === "clock-in"
        ? () => attendanceClockInMutation.mutate()
        : clockAction.action === "clock-out"
          ? () => attendanceClockOutMutation.mutate()
          : undefined,
    });
  }
  if (payload.weeklyReport || payload.weeklySummary) {
    quickActions.push({
      key: "weekly",
      icon: "article",
      label: "提交周报",
      description: "进入周报页继续填写或查看团队缺口",
      to: "/weekly-reports",
    });
  }

  return (
    <PageScaffold>
      <ErrorBoundary fallback={null}>
        <WelcomeDialog open={showWelcome} onClose={handleCloseWelcome} />
      </ErrorBoundary>

      <WorkbenchHero
        eyebrow={isManagerView ? "管理工作台" : "个人工作台"}
        title={`你好，${payload.greeting.name}`}
        subtitle={isManagerView
          ? "先处理审批、团队状态和周报缺口，再进入项目与组织协同。"
          : "先处理今天必须完成的事，再继续查看项目、周报和公告。"}
        actions={
          !payload.workspace.persisted && canSetupWorkspace ? (
            <Button asChild variant="secondary" type="button">
              <Link to="/system/workspace">完成工作区设置</Link>
            </Button>
          ) : null
        }
      />

      <div className="grid gap-4 xl:grid-cols-4">
        {primaryCards.map((card) => (
          <MetricCard
            key={card.key}
            ariaLabel={`portal-card-${card.key}`}
            href={card.href}
            note={card.key === "my_weekly_report"
              ? formatWeeklyStatus(payload.weeklyReport)
              : card.key === "today_presence"
                ? payload.todayPresence?.note ?? "更新今日状态"
                : card.key === "team_presence"
                  ? payload.teamPresence ? `请假 ${payload.teamPresence.leave}，未更新 ${payload.teamPresence.unspecified}` : "团队状态板待启用"
                  : undefined}
            title={card.title}
            tone={severityTone(card.severity)}
            value={card.value}
          />
        ))}
      </div>

      {showGettingStarted ? (
        <ErrorBoundary
          fallback={(
            <PortalSectionFallback
              title="快速上手"
              description="先完成基础资料和入口熟悉，再进入请假、通知等日常动作。"
            />
          )}
        >
          <GettingStartedCard
            items={gettingStartedItems}
            completedCount={gettingStartedCompletedCount}
            onDismiss={handleDismissGettingStarted}
          />
        </ErrorBoundary>
      ) : null}

      <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr),minmax(0,1fr)]">
        <QuickActionsPanel items={quickActions} />
        <TodoAggregatePanel items={todoAggregateItems} />
      </div>

      <div className="grid gap-6 xl:grid-cols-[minmax(0,1.15fr),minmax(0,0.85fr)]">
        <ErrorBoundary
          fallback={(
            <PortalSectionFallback
              title="团队全员状态"
              description="同时看人在不在岗、有没有请假，以及今天是否已打卡。"
            />
          )}
        >
          <TeamStatusBoardPanel items={teamStatusBoard} />
        </ErrorBoundary>
        <ErrorBoundary
          fallback={(
            <PortalSectionFallback
              title="近期动态流"
              description="把最近发生的报销、请假、考勤和资产动作放在同一条时间线上。"
            />
          )}
        >
          <RecentActivitiesPanel items={recentActivities} />
        </ErrorBoundary>
      </div>

      {isManagerView ? (
        <>
          <div className="grid gap-6 xl:grid-cols-[minmax(0,1.05fr),minmax(0,0.95fr)]">
            <SummaryPanel title="今日管理重点" items={managerSummaryItems} />
            <QuickLinksPanel items={quickLinkItems} />
          </div>

          <div className="grid gap-6 xl:grid-cols-[minmax(0,0.95fr),minmax(0,1.05fr)]">
            <AnnouncementsPanel announcements={announcementItems} />
            <SecondaryCardsPanel
              title="项目跟进与组织协同"
              description="把项目、组织和风险类信息下移到第二阅读层。"
              cards={secondaryCards}
            />
          </div>

          <AdoptionSummaryPanel adoptionSummary={payload.adoptionSummary} />
        </>
      ) : (
        <>
          <div className="grid gap-6 xl:grid-cols-[minmax(0,1.1fr),minmax(0,0.9fr)]">
            <SummaryPanel title="我的申请与资产" items={employeeSummaryItems} />
            <AnnouncementsPanel announcements={announcementItems} />
          </div>

          <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr),minmax(0,1fr)]">
            <RecentVisitsPanel />
            <QuickLinksPanel items={quickLinkItems} />
          </div>
        </>
      )}
    </PageScaffold>
  );
}