import {
  Activity,
  ArrowRightLeft,
  Bell,
  Bot,
  CheckCircle2,
  ChevronDown,
  Columns2,
  FileText,
  Keyboard,
  LogOut,
  Map,
  RefreshCw,
  ShieldCheck,
  X,
  UserRound,
  type LucideIcon
} from "lucide-react";
import { useRef, useState, type ReactNode } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { ProjectSwitchDialog } from "./project-switch-dialog";
import {
  MAP_COMPACT_RADIUS_CLASS_NAME,
  MAP_ICON_CELL_RADIUS_CLASS_NAME,
  MAP_MAJOR_PANEL_RADIUS_CLASS_NAME,
  MAP_READABLE_RADIUS_CLASS_NAME
} from "@/features/map/core";
import { cn } from "@/shared/ui/cn";
import {
  StatusBadge,
  StatusDot,
  StatusIcon as SemanticStatusIcon,
  type StatusTone
} from "@/shared/ui/status";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger
} from "@/shared/ui/dropdown-menu";
import type { WorkbenchProject } from "../api/project-client";
import type { WorkbenchAlert, WorkbenchUser } from "../types";
import {
  compactHeaderControlButtonClassName,
  compactHeaderTextClassName,
  headerControlButtonClassName,
  headerControlIconClassName
} from "./workbench-top-bar-styles";

const menuSurfaceClassName = cn(
  MAP_MAJOR_PANEL_RADIUS_CLASS_NAME,
  "acrylic-panel border p-2 text-slate-900"
);
const menuReadableRowClassName =
  "surface-well focus:bg-[var(--action-soft)] focus:text-slate-950";
const alertActionClassName = cn(
  MAP_COMPACT_RADIUS_CLASS_NAME,
  "h-10 w-10 shrink-0 justify-center border border-transparent bg-transparent p-0 text-[var(--ink-muted)] transition-colors hover:border-[var(--action-blue)] hover:bg-[var(--action-blue)] hover:text-white focus:border-[var(--action-blue)] focus:bg-[var(--action-blue)] focus:text-white data-[highlighted]:border-[var(--action-blue)] data-[highlighted]:bg-[var(--action-blue)] data-[highlighted]:text-white active:scale-95"
);

export function AnalysisViewMenu({
  open,
  onOpenChange,
  title,
  subtitle,
  sourceLabel,
  splitAvailable,
  hasSpatialView,
  onShowResult,
  onShowMapSplit,
  onShowMapOnly,
  onClose
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title: string;
  subtitle: string;
  sourceLabel: string;
  splitAvailable: boolean;
  hasSpatialView: boolean;
  onShowResult: () => void;
  onShowMapSplit: () => void;
  onShowMapOnly: () => void;
  onClose: () => void;
}) {
  return (
    <DropdownMenu modal={false} open={open} onOpenChange={onOpenChange}>
      <DropdownMenuTrigger asChild>
        <button
          type="button"
          className={cn("group max-w-[220px] px-2", headerControlButtonClassName)}
          aria-label={`当前分析视图：${title}`}
        >
          <span className={headerControlIconClassName}>
            <Activity size={14} aria-hidden="true" />
          </span>
          <span className="hidden max-w-[160px] truncate text-sm font-semibold xl:inline 2xl:max-w-[200px]">
            分析视图 · {title}
          </span>
          <ChevronDown size={14} className="hidden shrink-0 text-[var(--ink-muted)] transition group-hover:text-[var(--action-blue-hover)] group-data-[state=open]:rotate-180 group-data-[state=open]:text-[var(--action-blue-hover)] 2xl:block" aria-hidden="true" />
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className={cn("w-[340px]", menuSurfaceClassName)}>
        <MenuHeader title={title} meta={`${subtitle} · ${sourceLabel}`} />
        <MenuSectionLabel>查看方式</MenuSectionLabel>
        <MenuAction icon={FileText} label="查看完整成果" description="打开指标、图表和结果表" tone="primary" onSelect={onShowResult} />
        {splitAvailable ? (
          <MenuAction icon={Columns2} label="半屏显示" description="分析报告与地图各占半屏" onSelect={onShowMapSplit} />
        ) : null}
        {hasSpatialView ? (
          <MenuAction icon={Map} label="仅看地图" description="保留当前分析图层并展开地图" onSelect={onShowMapOnly} />
        ) : null}
        <MenuSeparator />
        <MenuAction icon={X} label="关闭分析视图" description="移除当前成果及其地图图层" onSelect={onClose} />
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

export function AlertMenu({
  open,
  onOpenChange,
  alerts,
  sourceLabel,
  compact = false,
  conditionFeedVisible,
  onSelectAlert,
  onRemoveAlert,
  onToggleConditionFeed,
  onAnalyzeAlertsWithAgent
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  alerts: WorkbenchAlert[];
  sourceLabel: string;
  compact?: boolean;
  conditionFeedVisible: boolean;
  onSelectAlert: (alert: WorkbenchAlert) => void;
  onRemoveAlert?: (alert: WorkbenchAlert) => void;
  onToggleConditionFeed: () => void;
  onAnalyzeAlertsWithAgent: () => void | Promise<void>;
}) {
  const reduceMotion = useReducedMotion();
  const keyboardInteraction = useRef(false);
  const skipRemovalMotion = reduceMotion === true || keyboardInteraction.current;
  const hasAlerts = alerts.length > 0;
  const hasCriticalAlerts = alerts.some((alert) => alert.severity !== "warning");
  const alertSummaryTone = hasCriticalAlerts ? "danger" : hasAlerts ? "warning" : "neutral";
  const latestAlertTime = alerts[0]?.time;

  return (
    <DropdownMenu modal={false} open={open} onOpenChange={onOpenChange}>
      <DropdownMenuTrigger asChild>
        <button
          type="button"
          className={cn(
            "group relative px-2",
            headerControlButtonClassName,
            hasAlerts && !compact &&
              (hasCriticalAlerts ? "status-tone-danger" : "status-tone-warning"),
            hasAlerts && !compact &&
              "border-transparent bg-[color-mix(in_oklch,var(--status-soft),var(--status-border)_45%)] text-[var(--status-foreground)] [@media(hover:hover)]:hover:border-[var(--status-border)] [@media(hover:hover)]:hover:bg-[color-mix(in_oklch,var(--status-soft),var(--status-border)_75%)] [@media(hover:hover)]:hover:text-[var(--status-foreground)] data-[state=open]:border-transparent data-[state=open]:bg-[color-mix(in_oklch,var(--status-soft),var(--status-border)_75%)] data-[state=open]:text-[var(--status-foreground)]",
            compact && compactHeaderControlButtonClassName
          )}
          aria-label={`查看待办与告警，当前 ${alerts.length} 条待处理事项`}
        >
          <span
            className={cn(
              headerControlIconClassName,
              hasAlerts
                ? cn("status-icon", hasCriticalAlerts ? "status-tone-danger" : "status-tone-warning")
                : "bg-transparent!"
            )}
          >
            <Bell size={14} aria-hidden="true" />
          </span>
          <span className={compact ? "sr-only" : compactHeaderTextClassName}>待办与告警</span>
          {compact ? (
            <StatusBadge
              tone={alertSummaryTone}
              className={cn(
                "absolute right-0 top-0 min-h-4 min-w-4 justify-center px-1 py-0 leading-none",
                !hasAlerts && "border-transparent! bg-transparent!"
              )}
            >
              {alerts.length}
            </StatusBadge>
          ) : (
            <StatusBadge
              tone={alertSummaryTone}
              className={cn("leading-none", !hasAlerts && "border-transparent! bg-transparent!")}
            >
              {alerts.length}
            </StatusBadge>
          )}
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" sideOffset={8} className={cn("w-[min(392px,calc(100vw-24px))]", menuSurfaceClassName)}
        onKeyDownCapture={() => { keyboardInteraction.current = true; }}
        onPointerDownCapture={() => { keyboardInteraction.current = false; }}
      >
        <AlertQueueSummary
          count={alerts.length}
          latestAlertTime={latestAlertTime}
          conditionFeedVisible={conditionFeedVisible}
          sourceLabel={sourceLabel}
          tone={hasAlerts ? alertSummaryTone : "success"}
        />
        <MenuSectionLabel>待处理事项</MenuSectionLabel>
        <div className="scheduled-feed-scroll relative max-h-[min(52dvh,420px)] overflow-x-hidden overflow-y-auto pr-1">
          <AnimatePresence initial={false} mode="popLayout" custom={skipRemovalMotion}>
            {hasAlerts ? alerts.map((alert) => {
              const tone = alert.severity === "warning" ? "warning" : "danger";
              return (
                <motion.div
                  key={alert.id}
                  data-alert-id={alert.id}
                  layout="position"
                  initial={false}
                  animate={{ opacity: 1, x: 0 }}
                  exit="removed"
                  variants={{ removed: (skip: boolean) => ({
                    opacity: 0, x: skip ? 0 : 12, pointerEvents: "none",
                    transition: { duration: skip ? 0 : 0.18, ease: [0.4, 0, 1, 1] }
                  }) }}
                  transition={{ duration: skipRemovalMotion ? 0 : 0.18, ease: [0.4, 0, 1, 1] }}
                  className={cn(
                    tone === "warning" ? "status-tone-warning" : "status-tone-danger",
                    "relative my-1 min-h-[76px] border border-transparent px-3 py-2 transition-colors hover:border-[var(--action-border-hover)] hover:bg-[var(--action-selection-soft)] focus-within:border-[var(--action-border-hover)] focus-within:bg-[var(--action-selection-soft)]",
                    MAP_COMPACT_RADIUS_CLASS_NAME,
                    menuReadableRowClassName
                  )}
                >
                  <DropdownMenuItem
                    asChild
                    className="absolute inset-0 z-0 h-full w-full cursor-pointer rounded-[inherit] border-0 bg-transparent p-0 hover:bg-transparent focus:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--action-focus-ring)]"
                    onSelect={() => onSelectAlert(alert)}
                  >
                    <button
                      type="button"
                      aria-label={`打开通知：${alert.title}`}
                    />
                  </DropdownMenuItem>
                  <div className="pointer-events-none relative">
                    <span className="flex min-w-0 items-center gap-2 pr-10 text-xs text-[var(--ink-muted)]">
                      <StatusDot tone={tone} size="md" />
                      <span className="font-mono tabular-nums">{alert.time}</span>
                    </span>
                    <p className="mt-1 break-words pr-10 text-sm font-semibold leading-5 text-slate-950">{alert.title}</p>
                    <p className="mt-0.5 break-words text-xs leading-5 text-[var(--ink-muted)]">{alert.description}</p>
                  </div>
                  {onRemoveAlert ? (
                    <DropdownMenuItem
                      aria-label={`移除通知：${alert.title}`}
                      title="移除通知"
                      className={cn(alertActionClassName, "absolute right-1 top-1 z-10")}
                      onSelect={(event) => {
                        event.preventDefault();
                        onRemoveAlert(alert);
                      }}
                    >
                      <X size={14} aria-hidden="true" />
                    </DropdownMenuItem>
                  ) : null}
                </motion.div>
              );
            }) : (
              <div key="empty-alert-queue" className={cn("surface-reading my-1 grid min-h-[76px] place-items-center border border-dashed border-[var(--surface-divider)] px-3 py-3 text-center", MAP_COMPACT_RADIUS_CLASS_NAME)}>
                <div className="min-w-0">
                  <SemanticStatusIcon tone="success" size="md" className="mx-auto">
                    <CheckCircle2 size={16} />
                  </SemanticStatusIcon>
                  <p className="mt-1 text-xs font-semibold text-slate-700">当前无待处理事项</p>
                  <p className="mt-0.5 text-xs leading-4 text-[var(--ink-muted)]">新的待办和告警会进入这里。</p>
                </div>
              </div>
            )}
          </AnimatePresence>
        </div>
        <div className="mt-2 grid grid-cols-[minmax(0,1fr)_auto] gap-2 border-t border-[var(--surface-divider)]/70 pt-2">
          <MenuPlainButton
            label={conditionFeedVisible ? "工况面板已打开" : "打开工况面板"}
            description="查看时间线与处置详情"
            disabled={conditionFeedVisible}
            onClick={() => {
              onToggleConditionFeed();
              onOpenChange(false);
            }}
          />
          <MenuPrimaryButton
            disabled={!hasAlerts}
            icon={Bot}
            label={hasAlerts ? "工况汇总" : "等待提醒"}
            onClick={() => {
              void onAnalyzeAlertsWithAgent();
              onOpenChange(false);
            }}
          />
        </div>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

export type WorkbenchProjectSelection = {
  projects: WorkbenchProject[];
  selectedProjectId: string;
  pendingProjectId: string | null;
  error: string | null;
  onSelectProject: (projectId: string) => void;
  onOpen?: () => void;
  onRefresh?: () => void;
  refreshing?: boolean;
};

export function UserMenu({
  open,
  onOpenChange,
  user,
  projectSelection,
  onRefreshTiles,
  onShowDataStatus,
  onShowShortcuts,
  onLogout
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  user: WorkbenchUser;
  projectSelection?: WorkbenchProjectSelection;
  onRefreshTiles: () => void;
  onShowDataStatus: () => void;
  onShowShortcuts: () => void;
  onLogout?: () => Promise<void>;
}) {
  const [projectDialogOpen, setProjectDialogOpen] = useState(false);
  const [projectDialogKeyboard, setProjectDialogKeyboard] = useState(false);
  const triggerRef = useRef<HTMLButtonElement>(null);

  return (
    <>
    <DropdownMenu modal={false} open={open} onOpenChange={onOpenChange}>
      <DropdownMenuTrigger asChild>
        <button
          ref={triggerRef}
          type="button"
          className={cn(
            "group lg:h-8 lg:w-auto lg:justify-start lg:px-2",
            headerControlButtonClassName,
            compactHeaderControlButtonClassName
          )}
          aria-label="打开用户菜单"
        >
          <span className={headerControlIconClassName}>
            <UserRound size={14} aria-hidden="true" />
          </span>
          <span className={cn(compactHeaderTextClassName, "text-sm font-semibold")}>{user.name}</span>
          <ChevronDown size={14} className="hidden shrink-0 text-[var(--ink-muted)] transition group-hover:text-[var(--action-blue-hover)] group-data-[state=open]:rotate-180 group-data-[state=open]:text-[var(--action-blue-hover)] 2xl:block" aria-hidden="true" />
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className={cn("z-[90] w-72", menuSurfaceClassName)}
        onKeyDownCapture={() => setProjectDialogKeyboard(true)}
        onPointerDownCapture={() => setProjectDialogKeyboard(false)}
        onCloseAutoFocus={(event) => { if (projectDialogOpen) event.preventDefault(); }}>
        <MenuHeader title={user.name} meta={user.role} icon={ShieldCheck} />
        {projectSelection ? (
          <>
            <MenuAction icon={ArrowRightLeft} label="切换项目" description="选择要进入的供水项目"
              onSelect={() => { onOpenChange(false); setProjectDialogOpen(true); projectSelection.onOpen?.(); }} />
            <MenuSeparator />
          </>
        ) : null}
        <MenuSectionLabel>会话控制</MenuSectionLabel>
        <MenuAction icon={Activity} label="查看运行状态" description="检查数据源与运行健康度" onSelect={onShowDataStatus} />
        <MenuAction icon={RefreshCw} label="刷新地图瓦片" description="请求地图重新渲染业务图层" onSelect={onRefreshTiles} />
        <MenuAction icon={Keyboard} label="操作参考" description="查看绘制与测量操作提示" onSelect={onShowShortcuts} />
        <MenuSeparator />
        <DropdownMenuItem
          disabled={!onLogout}
          onSelect={onLogout ? () => void onLogout() : undefined}
          className={cn(
            "px-2 py-2",
            !onLogout && "text-[var(--ink-muted)]",
            MAP_COMPACT_RADIUS_CLASS_NAME
          )}
        >
          <LogOut size={15} aria-hidden="true" />
          退出登录
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
    <AnimatePresence>
    {projectDialogOpen && projectSelection ? <ProjectSwitchDialog selection={projectSelection} keyboardOpened={projectDialogKeyboard}
      onClose={() => setProjectDialogOpen(false)}
      onRestoreFocus={() => triggerRef.current?.focus()} /> : null}
    </AnimatePresence>
    </>
  );
}

function AlertQueueSummary({
  count,
  latestAlertTime,
  conditionFeedVisible,
  sourceLabel,
  tone
}: {
  count: number;
  latestAlertTime?: string;
  conditionFeedVisible: boolean;
  sourceLabel: string;
  tone: StatusTone;
}) {
  const hasAlerts = count > 0;

  return (
    <div className={cn("surface-reading overflow-hidden px-3 py-3", MAP_READABLE_RADIUS_CLASS_NAME)}>
      <div className="flex items-start justify-between gap-3">
        <div className="flex min-w-0 items-start gap-2.5">
          <SemanticStatusIcon
            tone={tone}
            size="md"
            className={cn("h-8 w-8", MAP_ICON_CELL_RADIUS_CLASS_NAME)}
          >
            {hasAlerts ? <Bell size={16} /> : <CheckCircle2 size={16} />}
          </SemanticStatusIcon>
          <div className="min-w-0">
            <h2 className="truncate text-sm font-semibold leading-5 text-slate-950">待办与告警</h2>
            <p className="mt-0.5 text-xs leading-5 text-[var(--ink-muted)]">
              {hasAlerts ? `${count} 条待处理${latestAlertTime ? ` · 最近 ${latestAlertTime}` : ""}` : "当前无待处理事项"}
            </p>
            <p className="mt-0.5 text-xs leading-4 text-[var(--ink-muted)]">业务告警来源：{sourceLabel}</p>
          </div>
        </div>
        <StatusBadge tone={tone}>
          {hasAlerts ? "待处理" : "暂无待办"}
        </StatusBadge>
      </div>
      <div className="mt-2 flex items-center gap-1.5 text-xs leading-4 text-[var(--ink-muted)]">
        <StatusDot tone={conditionFeedVisible ? "info" : "neutral"} />
        <span className="truncate">{conditionFeedVisible ? "工况面板已显示，可查看详情。" : "点击条目可打开工况任务。"}</span>
      </div>
    </div>
  );
}

function MenuPlainButton({
  label,
  description,
  disabled = false,
  onClick
}: {
  label: string;
  description: string;
  disabled?: boolean;
  onClick: () => void;
}) {
  return (
    <button
      type="button"
      disabled={disabled}
      onClick={onClick}
      className={cn(
        "flex h-11 min-w-0 flex-col justify-center border px-3 text-left transition-colors disabled:cursor-default disabled:opacity-70",
        MAP_COMPACT_RADIUS_CLASS_NAME,
        disabled
          ? "border-[var(--surface-divider)] bg-[var(--surface-reading)] text-[var(--ink-muted)]"
          : "border-[var(--surface-divider)] bg-[var(--surface-reading)] text-slate-800 hover:border-[var(--surface-border)] hover:bg-[var(--action-soft)]/55 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--action-focus-ring)]"
      )}
    >
      <span className="truncate text-xs font-semibold leading-4">{label}</span>
      <span className="truncate text-xs font-medium leading-4 text-[var(--ink-muted)]">{description}</span>
    </button>
  );
}

function MenuPrimaryButton({
  icon: Icon,
  label,
  disabled = false,
  onClick
}: {
  icon: LucideIcon;
  label: string;
  disabled?: boolean;
  onClick: () => void | Promise<void>;
}) {
  return (
    <button
      type="button"
      disabled={disabled}
      onClick={onClick}
      className={cn(
        "inline-flex h-11 shrink-0 items-center justify-center gap-2 border px-3 text-xs font-semibold transition-colors disabled:cursor-not-allowed",
        MAP_COMPACT_RADIUS_CLASS_NAME,
        disabled
          ? "border-[var(--surface-divider)] bg-[var(--surface-reading)] text-[var(--ink-muted)]"
          : "border-[var(--surface-border)] bg-[var(--action-blue)] text-white shadow-lg shadow-[color:var(--action-blue)]/20 hover:bg-[var(--action-blue-hover)] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--action-focus-ring)]"
      )}
    >
      <Icon size={14} aria-hidden="true" />
      <span className="max-w-[92px] truncate">{label}</span>
    </button>
  );
}

function MenuHeader({
  title,
  meta,
  tone = "default",
  icon: Icon
}: {
  title: string;
  meta: string;
  tone?: "default" | "warning";
  icon?: LucideIcon;
}) {
  return (
    <div className={cn("surface-control flex items-center justify-between gap-3 border px-2 py-2", MAP_READABLE_RADIUS_CLASS_NAME)}>
      <div className="min-w-0">
        <div className="flex min-w-0 items-center gap-1.5">
          {Icon ? <Icon size={13} className="shrink-0 text-[var(--ink-muted)]" aria-hidden="true" /> : null}
          <span className="truncate text-sm font-semibold text-slate-950">{title}</span>
        </div>
        <p className={cn("mt-0.5 truncate text-xs text-[var(--ink-muted)]", tone === "warning" && "status-tone-danger text-[var(--status-foreground)]")}>{meta}</p>
      </div>
      {tone === "warning" ? <StatusDot tone="danger" size="md" /> : null}
    </div>
  );
}

function MenuSectionLabel({ children }: { children: ReactNode }) {
  return <DropdownMenuLabel className="px-2 pb-1 pt-2.5 text-xs font-semibold uppercase text-[var(--ink-muted)]">{children}</DropdownMenuLabel>;
}

function MenuSeparator() {
  return <DropdownMenuSeparator className="my-2 bg-[var(--surface-divider)]/70" />;
}

function MenuAction({
  icon: Icon,
  label,
  description,
  tone = "default",
  onSelect
}: {
  icon: LucideIcon;
  label: string;
  description: string;
  tone?: "default" | "primary" | "warning";
  onSelect: () => void;
}) {
  return (
    <DropdownMenuItem
      className={cn(
        "my-0.5 items-center border border-transparent px-2 py-2 transition",
        MAP_COMPACT_RADIUS_CLASS_NAME,
        menuReadableRowClassName
      )}
      onSelect={onSelect}
    >
      <span
        className={cn(
          "grid h-7 w-7 shrink-0 place-items-center border",
          MAP_ICON_CELL_RADIUS_CLASS_NAME,
          tone === "primary" && "border-[var(--surface-border)] bg-[var(--action-soft)] text-[var(--action-blue-hover)]",
          tone === "warning" && "status-icon status-tone-warning",
          tone === "default" && "border-[var(--surface-divider)] bg-[var(--surface-reading)] text-slate-600"
        )}
      >
        <Icon size={15} aria-hidden="true" />
      </span>
      <span className="min-w-0">
        <span className="block text-sm font-semibold leading-5 text-slate-900">{label}</span>
        <span className="mt-0.5 block truncate text-xs text-[var(--ink-muted)]">{description}</span>
      </span>
    </DropdownMenuItem>
  );
}