import { type ReactNode, useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { mapApiErrorMessage } from "../api/errorMessages";
import {
  fetchPortalHome,
  type PortalHomePayload,
  type PortalRecentActivity,
  type PortalTeamStatusItem,
} from "../api/portal";
import { fetchWorkflowTaskSummary, type WorkflowTaskProductivitySummary } from "../api/workflow";
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 { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs";
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";
};

function workflowEntityLabel(entityType: string) {
  if (entityType === "reimbursement") return "报销";
  if (entityType === "leave") return "请假";
  if (entityType === "purchase_request") return "采购";
  if (entityType === "travel_request") return "差旅";
  if (entityType === "unknown") return "未知业务";
  return entityType;
}

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 PROCUREMENT_PORTAL_PERMISSIONS = ["procurement.view_own", "procurement.view_all", "procurement.create", "procurement.submit"];
const TRAVEL_PORTAL_PERMISSIONS = ["travel.view_own", "travel.view_all", "travel.create", "travel.submit"];
const APPROVAL_PORTAL_PERMISSIONS = ["expense.approve", "leave.approve", "procurement.approve", "travel.approve"];
const FINANCE_PORTAL_PERMISSIONS = ["payment.batch.manage", "risk.review.manage", "expense.finance.pay"];
const SYSTEM_PORTAL_PERMISSIONS = ["system.users", "system.settings", "system.audit.view", "notification.channel.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 buildFallbackRoleCapabilities(permissions: string[], roleCodes: string[]) {
  const hasAdminRole = roleCodes.includes("admin") || hasAnyPermission(permissions, ["*"]);
  const hasBusinessApproverRole = roleCodes.some((roleCode) =>
    ["manager", "ceo", "finance", "finance_mgr", "hr"].includes(roleCode),
  );
  const hasFinanceRole = roleCodes.some((roleCode) => ["finance", "finance_mgr"].includes(roleCode));

  return {
    canSubmitApplications: hasAnyPermission(permissions, [
      ...LEAVE_PORTAL_PERMISSIONS,
      ...EXPENSE_PORTAL_PERMISSIONS,
      ...PROCUREMENT_PORTAL_PERMISSIONS,
      ...TRAVEL_PORTAL_PERMISSIONS,
    ]),
    canApproveTasks: hasBusinessApproverRole && hasAnyPermission(permissions, APPROVAL_PORTAL_PERMISSIONS),
    canUseFinance: hasFinanceRole && hasAnyPermission(permissions, FINANCE_PORTAL_PERMISSIONS),
    canManageSystem: hasAdminRole || hasAnyPermission(permissions, SYSTEM_PORTAL_PERMISSIONS),
    canViewTeam: hasBusinessApproverRole || hasAnyPermission(permissions, ["report.dashboard.view", "system.users", "project.manage"]),
    isAdminOnly: hasAdminRole && !hasBusinessApproverRole,
  };
}

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 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 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" };
  }
  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.presenceStatus === "travel") {
    return "今日差旅";
  }
  if (item.presenceStatus === "out") {
    return "当前外出";
  }
  if (item.presenceStatus === "remote") {
    return "今日居家办公";
  }
  return "企微考勤见考勤页";
}

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

  return (
    <SectionPanel title={title}>
      <div className="space-y-3">
        {items.map((item) => (
          <Link
            key={item.key}
            to={item.href}
            className={item.tone === "warning" ? "portal-list-card portal-list-card--warning" : "portal-list-card"}
          >
            <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 FinanceSummaryPanel({ summary }: { summary: PortalHomePayload["financeSummary"] }) {
  if (!summary) {
    return null;
  }

  const items: SummaryItem[] = [
    {
      key: "finance-pending-batches",
      href: summary.href,
      label: "待付款批次",
      value: `${summary.pendingBatchCount} 个`,
      tone: summary.pendingBatchCount > 0 ? "warning" : "normal",
    },
    {
      key: "finance-failed-items",
      href: summary.href,
      label: "异常付款",
      value: `${summary.failedItemCount} 项`,
      tone: summary.failedItemCount > 0 ? "warning" : "normal",
    },
    {
      key: "finance-risk-flags",
      href: summary.href,
      label: "待复核风险",
      value: `${summary.riskCount} 项`,
      tone: summary.riskCount > 0 ? "warning" : "normal",
    },
  ];

  return <SummaryPanel title="财务待处理" items={items} />;
}

function ApprovalProductivityPanel({
  summary,
  title = "审批效率摘要",
}: {
  summary: WorkflowTaskProductivitySummary | null;
  title?: string;
}) {
  if (!summary) {
    return null;
  }

  const typeDistribution = summary.byEntityType
    .filter((item) => item.pendingTotal > 0)
    .map((item) => `${workflowEntityLabel(item.key)} ${item.pendingTotal}`)
    .join(" / ");
  const items: SummaryItem[] = [
    {
      key: "workflow-pending-total",
      href: "/workflow/tasks",
      label: "当前待办",
      value: `${summary.pendingTotal} 条`,
      note: summary.earliestPendingAt
        ? `最早待处理：${formatRelativeTime(summary.earliestPendingAt)}`
        : "暂无待处理审批。",
      tone: summary.pendingTotal > 0 ? "warning" : "normal",
    },
    {
      key: "workflow-overdue-total",
      href: "/workflow/tasks",
      label: "超时待办",
      value: `${summary.overdueTotal} 条`,
      note: `平均等待 ${summary.averagePendingAgeHours} 小时`,
      tone: summary.overdueTotal > 0 ? "warning" : "normal",
    },
    {
      key: "workflow-entity-distribution",
      href: "/workflow/tasks",
      label: "业务分布",
      value: typeDistribution || "暂无",
      note: "按报销、请假、采购、差旅汇总。",
    },
  ];

  return <SummaryPanel title={title} items={items} />;
}

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

  return (
    <div className="space-y-3">
      {safeAnnouncements.length ? safeAnnouncements.slice(0, 4).map((item) => (
        <div key={item.id} className="portal-list-card portal-list-card--compact">
          <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>
  );
}

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

  return (
    <SectionPanel title="入口">
      <div className="grid gap-3 sm:grid-cols-2">
        {safeItems.length ? safeItems.map((item) => (
          <Link key={item.key} to={item.href} className="portal-list-card text-sm font-medium text-slate-700">
            {item.title}
          </Link>
        )) : <EmptyStateCard title="暂无常用入口" description="尚未配置。" />}
      </div>
    </SectionPanel>
  );
}

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

  return (
    <SectionPanel title={title}>
      <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 CompactGroup({ title, children }: { title: string; children: ReactNode }) {
  return (
    <section className="portal-compact-group">
      <h3 className="portal-compact-group__title">{title}</h3>
      <div className="portal-compact-group__body">{children}</div>
    </section>
  );
}

function CompactSummaryLinks({ title, items }: { title: string; items: SummaryItem[] }) {
  return (
    <CompactGroup title={title}>
      {items.length ? items.map((item) => (
        <Link key={item.key} to={item.href} className="portal-compact-row">
          <span className="min-w-0 truncate">{item.label}</span>
          <span className={item.tone === "warning" ? "shrink-0 font-semibold text-amber-700" : "shrink-0 font-semibold text-slate-900"}>
            {item.value}
          </span>
        </Link>
      )) : <div className="px-2 py-1.5 text-sm text-slate-500">暂无摘要。</div>}
    </CompactGroup>
  );
}

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

  return (
    <CompactGroup title="继续工作">
      {recentVisits.length ? recentVisits.map((item) => (
        <Link key={item.path} to={item.path} className="portal-compact-row">
          <span className="min-w-0 truncate">{item.title}</span>
          <span className="shrink-0 text-xs text-slate-400">打开</span>
        </Link>
      )) : <div className="px-2 py-1.5 text-sm text-slate-500">暂无最近访问。</div>}
    </CompactGroup>
  );
}

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

  return (
    <CompactGroup title="常用入口">
      {safeItems.length ? safeItems.slice(0, 6).map((item) => (
        <Link key={item.key} to={item.href} className="portal-compact-row">
          <span className="min-w-0 truncate">{item.title}</span>
          <span className="shrink-0 text-xs text-slate-400">进入</span>
        </Link>
      )) : <div className="px-2 py-1.5 text-sm text-slate-500">暂无常用入口。</div>}
    </CompactGroup>
  );
}

function CompactMetricLinks({ title, cards }: { title: string; cards: PortalHomePayload["cards"] }) {
  return (
    <CompactGroup title={title}>
      {cards.length ? cards.slice(0, 6).map((card) => (
        <Link key={card.key} to={card.href} className="portal-compact-row">
          <span className="min-w-0 truncate">{card.title}</span>
          <span className={card.severity === "high" || card.severity === "warning" ? "shrink-0 font-semibold text-amber-700" : "shrink-0 font-semibold text-slate-900"}>
            {card.value}
          </span>
        </Link>
      )) : <div className="px-2 py-1.5 text-sm text-slate-500">暂无统计项。</div>}
    </CompactGroup>
  );
}

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

  return (
    <details className="card-std portal-secondary-drawer">
      <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="portal-status-card text-sm">
          <div className="text-zinc-500">近 7 天登录覆盖率</div>
          <div className="mt-2 text-2xl font-semibold text-zinc-900">{adoptionSummary.login7dRate}%</div>
        </div>
        <div className="portal-status-card text-sm">
          <div className="text-zinc-500">周报提交率</div>
          <div className="mt-2 text-2xl font-semibold text-zinc-900">{adoptionSummary.weeklySubmissionRate}%</div>
        </div>
        <div className="portal-status-card text-sm">
          <div className="text-zinc-500">团队状态覆盖率</div>
          <div className="mt-2 text-2xl font-semibold text-zinc-900">{adoptionSummary.presenceCoverageRate}%</div>
        </div>
        <div className="portal-status-card text-sm">
          <div className="text-zinc-500">当前公告数</div>
          <div className="mt-2 text-2xl font-semibold text-zinc-900">{adoptionSummary.announcementCount}</div>
        </div>
      </div>
      <div className="mt-4 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4 text-sm text-slate-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 SecondaryWorkspacePanel({
  title,
  description,
  children,
}: {
  title: string;
  description: string;
  children: ReactNode;
}) {
  return (
    <details className="card-std portal-secondary-drawer">
      <summary className="portal-secondary-summary">
        <div>
          <div className="text-base font-semibold text-zinc-900">{title}</div>
          <div className="mt-1 text-sm text-zinc-500">{description}</div>
        </div>
        <span className="portal-secondary-summary__toggle">展开 / 收起</span>
      </summary>
      <div className="portal-secondary-drawer__body">
        {children}
      </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="portal-list-card flex items-center gap-3"
          >
            <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-slate-200 bg-slate-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-slate-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,
  compact = false,
}: QuickActionConfig & { compact?: boolean }) {
  const baseClassName = disabled
    ? `portal-action-tile portal-action-tile--disabled${compact ? " portal-action-tile--compact" : ""}`
    : `portal-action-tile${compact ? " portal-action-tile--compact" : ""}`;

  const content = (
    <>
      <div className="flex items-center gap-3">
        <div className={disabled
          ? "portal-action-icon portal-action-icon--muted"
          : "portal-action-icon"}
        >
          <span className="material-symbols-outlined text-[20px]">{icon}</span>
        </div>
        <div className="min-w-0">
          <div className={disabled ? "truncate font-medium text-zinc-500" : "truncate font-medium text-zinc-900"}>{label}</div>
          <div className="mt-1 text-xs leading-5 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,
  layout = "grid",
}: {
  items: QuickActionConfig[];
  layout?: "grid" | "rail";
}) {
  return (
    <SectionPanel
      title="常用"
      className={layout === "rail" ? "portal-panel-fill" : undefined}
    >
      <div className={layout === "rail" ? "portal-action-stack" : "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}
            compact={layout === "rail"}
          />
        )) : <EmptyStateCard title="暂无快捷动作" description="当前账号没有可直接执行的首页动作。" />}
      </div>
    </SectionPanel>
  );
}

function TodoAggregatePanel({ items }: { items: TodoAggregateItem[] }) {
  const visibleItems = items.slice(0, 5);
  const hiddenCount = Math.max(items.length - visibleItems.length, 0);

  return (
    <SectionPanel
      title="待处理"
      className="portal-panel-fill"
    >
      <div className="space-y-3">
        {visibleItems.length ? visibleItems.map((item) => (
          <Link key={`${item.title}-${item.href}-${item.sourceLabel}`} to={item.href} className="portal-list-card">
            <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-1 text-sm text-primary">进入</div>
              </div>
            </div>
          </Link>
        )) : <EmptyStateCard title="暂无待办" description="没有需要立刻处理的事。" />}
      </div>
      {hiddenCount > 0 ? (
        <div className="portal-panel-footer">
          <span>另有 {hiddenCount} 项。</span>
          <Link to="/todos" className="font-medium text-primary hover:underline">查看全部待办</Link>
        </div>
      ) : null}
    </SectionPanel>
  );
}

function TeamStatusBoardPanel({ items }: { items: PortalTeamStatusItem[] }) {
  const safeItems = Array.isArray(items) ? items : [];
  const visibleItems = safeItems.slice(0, 5);
  const hiddenCount = Math.max(safeItems.length - visibleItems.length, 0);

  return (
    <SectionPanel
      title="团队状态"
      actions={<Link to="/team" className="text-sm font-medium text-primary hover:underline">查看团队页</Link>}
      className="portal-panel-fill"
    >
      <div className="portal-team-list">
        {visibleItems.length ? visibleItems.map((item) => {
          const badge = resolveTeamStatusBadge(item);
          return (
            <div key={item.employeeId} className="portal-team-row">
              <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 truncate text-xs text-zinc-500">{formatTeamStatusAttendance(item)}</div>
              </div>
              <span className={badge.className}>{badge.label}</span>
            </div>
          );
        }) : <EmptyStateCard title="暂无团队状态" description="没有成员状态。" />}
      </div>
      {hiddenCount > 0 ? (
        <div className="portal-panel-footer">
          <span>另有 {hiddenCount} 位。</span>
          <Link to="/team" className="font-medium text-primary hover:underline">查看全部</Link>
        </div>
      ) : null}
    </SectionPanel>
  );
}

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

  return (
    <div className="space-y-3">
      {safeItems.length ? safeItems.slice(0, 5).map((item) => (
        <Link key={item.id} to={item.href} className="portal-list-card portal-list-card--compact">
          <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>
  );
}

function ActivityAnnouncementsPanel({
  activities,
  announcements,
}: {
  activities: PortalRecentActivity[];
  announcements: PortalHomePayload["announcements"];
}) {
  return (
    <SectionPanel
      title="通知"
      actions={<Link to="/announcements" className="text-sm font-medium text-primary hover:underline">公告页</Link>}
      className="portal-panel-fill"
    >
      <Tabs defaultValue="activity" className="portal-insight-tabs">
        <TabsList className="portal-insight-tabs__list">
          <TabsTrigger value="activity">动态</TabsTrigger>
          <TabsTrigger value="announcements">公告</TabsTrigger>
        </TabsList>
        <TabsContent value="activity" className="portal-insight-tabs__content">
          <RecentActivitiesList items={activities} />
        </TabsContent>
        <TabsContent value="announcements" className="portal-insight-tabs__content">
          <AnnouncementsList announcements={announcements} />
        </TabsContent>
      </Tabs>
    </SectionPanel>
  );
}

export function PortalHomePage() {
  const { me, permissions } = useAuth();
  const [showWelcome, setShowWelcome] = useState(false);
  const [showGettingStarted, setShowGettingStarted] = useState(false);
  const portalQuery = useQuery({ queryKey: ["portal-home"], queryFn: () => fetchPortalHome() });
  const workflowSummaryQuery = useQuery({
    enabled: hasAnyPermission(permissions, APPROVAL_PORTAL_PERMISSIONS),
    queryKey: ["workflow", "tasks", "summary", "mine"],
    queryFn: () => fetchWorkflowTaskSummary(),
  });
  const workflowSystemSummaryQuery = useQuery({
    enabled: hasAnyPermission(permissions, ["system.audit.view"]),
    queryKey: ["workflow", "tasks", "summary", "system"],
    queryFn: () => fetchWorkflowTaskSummary({ scope: "system" }),
  });
  const canSetupWorkspace = hasAnyPermission(permissions, ["system.settings"]);

  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;

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

  if (portalQuery.isError || !portalQuery.data) {
    const message = isApiError(portalQuery.error)
      ? `${portalQuery.error.code}: ${mapApiErrorMessage(portalQuery.error.code, portalQuery.error.details, portalQuery.error.message)}`
      : "工作台加载失败";
    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 roleCapabilities = payload.roleCapabilities ?? buildFallbackRoleCapabilities(permissions, me?.roleCodes ?? []);
  const isManagerView =
    roleCapabilities.canViewTeam ||
    roleCapabilities.canApproveTasks ||
    roleCapabilities.canUseFinance ||
    roleCapabilities.canManageSystem ||
    isManagerRole(permissions);
  const workspaceEyebrow = roleCapabilities.canUseFinance
    ? "财务工作台"
    : roleCapabilities.canManageSystem
      ? "管理工作台"
      : roleCapabilities.canApproveTasks
        ? "审批工作台"
        : "个人工作台";
  const portalSchema = isManagerView ? managerPortalSchema : employeePortalSchema;
  const primaryCards = pickCards(cards, portalSchema.heroCards);
  const primaryCardKeySet = primaryCards.map((card) => card.key);
  const secondaryCards = compactCards(cards, primaryCardKeySet);
  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 approvalSummaryItems = ([
    roleCapabilities.canApproveTasks
      ? {
          key: "approval-pending",
          href: payload.pendingTasks.href,
          label: "审批待办",
          value: `${payload.pendingTasks.count} 条`,
          note: payload.pendingTasks.count > 0 ? "进入审批中心处理。" : "暂无待处理审批。",
          tone: payload.pendingTasks.count > 0 ? "warning" as const : "normal" as const,
        }
      : null,
    roleCapabilities.canApproveTasks
      ? {
          key: "approval-completed",
          href: "/workflow/tasks?status=completed",
          label: "已处理",
          value: "查看",
          note: "复核历史处理记录。",
        }
      : null,
  ] as Array<SummaryItem | null>).filter(isSummaryItem);

  const systemSummaryItems = ([
    roleCapabilities.canManageSystem
      ? {
          key: "system-users",
          href: "/people",
          label: "账号与人员",
          value: "管理",
          note: "维护账号、角色和组织信息。",
        }
      : null,
    roleCapabilities.canManageSystem
      ? {
          key: "system-workspace",
          href: "/system/workspace",
          label: "工作区设置",
          value: "配置",
          note: "检查入口、通知和基础配置。",
        }
      : null,
    roleCapabilities.canManageSystem
      ? {
          key: "system-audit",
          href: "/audit",
          label: "审计日志",
          value: "查看",
          note: "查询关键操作留痕。",
        }
      : null,
  ] as Array<SummaryItem | null>).filter(isSummaryItem);

  const quickActions: QuickActionConfig[] = [];
  if (roleCapabilities.canApproveTasks) {
    quickActions.push({
      key: "approval",
      icon: "fact_check",
      label: "处理审批",
      description: "待办处理",
      to: "/workflow/tasks",
    });
  }
  if (roleCapabilities.canUseFinance && payload.financeSummary) {
    quickActions.push({
      key: "finance",
      icon: "payments",
      label: "财务处理",
      description: "付款 / 风险",
      to: payload.financeSummary.href,
    });
  }
  if (roleCapabilities.canManageSystem) {
    quickActions.push({
      key: "system",
      icon: "admin_panel_settings",
      label: "系统管理",
      description: "账号 / 配置",
      to: "/people",
    });
  }
  if (!roleCapabilities.isAdminOnly && hasAnyPermission(permissions, LEAVE_PORTAL_PERMISSIONS)) {
    quickActions.push({
      key: "leave",
      icon: "event_available",
      label: "提交请假",
      description: "请假申请",
      to: "/leave-requests?action=create",
    });
  }
  if (!roleCapabilities.isAdminOnly && hasAnyPermission(permissions, EXPENSE_PORTAL_PERMISSIONS)) {
    quickActions.push({
      key: "expense",
      icon: "request_quote",
      label: "提交报销",
      description: "报销单据",
      to: "/reimbursements",
    });
  }
  quickActions.push({
    key: "attendance",
    icon: "schedule",
    label: "考勤汇总",
    description: "企微摘要 / OA 修正",
    to: "/attendance",
  });
  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={workspaceEyebrow}
        title={`你好，${payload.greeting.name}`}
        className="workbench-hero--compact"
        subtitle={roleCapabilities.canUseFinance
          ? "付款、风险、审批。"
          : roleCapabilities.canManageSystem
            ? "配置、审计、通知。"
            : isManagerView
              ? "审批、团队、周报。"
              : "待办、申请、考勤。"}
        actions={
          !payload.workspace.persisted && canSetupWorkspace ? (
            <Button asChild variant="secondary" type="button">
              <Link to="/system/workspace">完成工作区设置</Link>
            </Button>
          ) : null
        }
      />

      <div className="portal-metric-strip ops-status-strip">
        {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="portal-home-grid">
        <TodoAggregatePanel items={todoAggregateItems} />
        <QuickActionsPanel items={quickActions} layout="rail" />
      </div>

      <div className="portal-home-grid portal-home-grid--collaboration">
        <ErrorBoundary
          fallback={(
            <PortalSectionFallback
              title="团队全员状态"
              description="今日团队状态。"
            />
          )}
        >
          <TeamStatusBoardPanel items={teamStatusBoard} />
        </ErrorBoundary>
        <ErrorBoundary
          fallback={(
            <PortalSectionFallback
              title="近期动态流"
              description="最近业务动作。"
            />
          )}
        >
          <ActivityAnnouncementsPanel activities={recentActivities} announcements={announcementItems} />
        </ErrorBoundary>
      </div>

      {isManagerView ? (
        <>
          <SecondaryWorkspacePanel
            title="角色重点"
            description="常用入口"
          >
            <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr),minmax(0,1fr)] 2xl:grid-cols-[minmax(0,1fr),minmax(0,1fr),360px]">
              {roleCapabilities.canApproveTasks ? (
                <SummaryPanel title="审批处理" items={approvalSummaryItems} />
              ) : null}
              {roleCapabilities.canApproveTasks ? (
                <ApprovalProductivityPanel summary={workflowSummaryQuery.data ?? null} />
              ) : null}
              {roleCapabilities.canManageSystem ? (
                <ApprovalProductivityPanel
                  title="全局审批效率摘要"
                  summary={workflowSystemSummaryQuery.data ?? null}
                />
              ) : null}
              {roleCapabilities.canUseFinance ? (
                <FinanceSummaryPanel summary={payload.financeSummary ?? null} />
              ) : null}
              {roleCapabilities.canManageSystem ? (
                <SummaryPanel title="系统管理" items={systemSummaryItems} />
              ) : null}
              {roleCapabilities.canViewTeam ? (
                <SummaryPanel title="今日团队状态" items={managerSummaryItems} />
              ) : null}
              <QuickLinksPanel items={quickLinkItems} />
            </div>

            <SecondaryCardsPanel
              title="项目与组织"
              cards={secondaryCards}
            />
          </SecondaryWorkspacePanel>

          <AdoptionSummaryPanel adoptionSummary={payload.adoptionSummary} />
        </>
      ) : (
        <SecondaryWorkspacePanel
          title="更多入口"
          description="申请、资产、最近访问和项目指标"
        >
          <div className="portal-secondary-compact-grid">
            <CompactSummaryLinks title="我的申请与资产" items={employeeSummaryItems} />
            <CompactRecentVisits />
            <CompactQuickLinks items={quickLinkItems} />
            <CompactMetricLinks title="项目与协同" cards={secondaryCards} />
          </div>
        </SecondaryWorkspacePanel>
      )}
    </PageScaffold>
  );
}