import { useEffect, useMemo, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { BellRing } from "lucide-react";
import { aiPmoApi } from "@/api/aiPmo";
import { notificationsApi } from "@/api/notifications";
import { projectsApi } from "@/api/projects";
import InboxActionPanel, { type InboxProjectOption } from "@/components/inbox/InboxActionPanel";
import InboxListItem, { buildInboxActionKey } from "@/components/inbox/InboxListItem";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useToast } from "@/components/ui/toast";
import { getApiErrorMessage } from "@/lib/apiError";
import { parseBackendDate } from "@/lib/datetime";
import { buildInboxView } from "@/lib/inbox";
import { cn } from "@/lib/utils";
import type { InboxActionDescriptor, InboxDisplayKind, InboxItemViewModel } from "@/types/inbox";

const POLL_INTERVAL_MS = 15000;

type InboxTabKey = "all" | "needs_action" | "in_progress" | "done";

const TAB_LABELS: Record<InboxTabKey, string> = {
  all: "全部",
  needs_action: "待处理",
  in_progress: "进行中",
  done: "已完成",
};

const TAB_TO_DISPLAY_KIND: Partial<Record<InboxTabKey, InboxDisplayKind>> = {
  needs_action: "action_required",
  in_progress: "auto_running",
  done: "auto_done",
};

function normalizeTabKey(raw?: string | null): InboxTabKey {
  const value = String(raw || "").trim();
  if (value === "action_required" || value === "needs_action") return "needs_action";
  if (value === "auto_running" || value === "in_progress") return "in_progress";
  if (value === "auto_done" || value === "done") return "done";
  return "all";
}

function sortByLatest(items: InboxItemViewModel[]): InboxItemViewModel[] {
  const toTimestamp = (item: InboxItemViewModel): number => {
    const date = parseBackendDate(item.updated_at || item.created_at);
    return date ? date.getTime() : -1;
  };

  return [...items].sort((a, b) => toTimestamp(b) - toTimestamp(a));
}

function matchesTab(item: InboxItemViewModel, tab: InboxTabKey): boolean {
  if (tab === "all") return true;
  return item.display_kind === TAB_TO_DISPLAY_KIND[tab];
}

function parsePositiveInt(value: unknown): number | null {
  const parsed = Number(value);
  if (!Number.isFinite(parsed)) return null;
  const integer = Math.trunc(parsed);
  return integer > 0 ? integer : null;
}

function isMissingProjectScopeItem(item: InboxItemViewModel): boolean {
  if (item.source_kind !== "ai_pmo_work_item" || !item.source_work_item) return false;
  const state = String(item.source_work_item.state || "").toLowerCase();
  const gateCode = String(item.latest_policy_gate_code || item.source_work_item.latest_policy_gate_code || "").toLowerCase();
  return state === "waiting_manual" && gateCode === "missing_project_scope";
}

export default function InboxPage() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { toast } = useToast();
  const [searchParams, setSearchParams] = useSearchParams();
  const [pendingActionKey, setPendingActionKey] = useState<string | null>(null);
  const [expandedItemId, setExpandedItemId] = useState<string | null>(null);
  const [selectedProjectByItem, setSelectedProjectByItem] = useState<Record<string, string>>({});
  const [autoExpandedByQuery, setAutoExpandedByQuery] = useState(false);

  const activeTab = normalizeTabKey(searchParams.get("section"));
  const projectFilter = searchParams.get("project_id") || "all";
  const searchValue = searchParams.get("q") || "";

  const notificationsQuery = useQuery({
    queryKey: ["notifications", "inbox"],
    queryFn: () => notificationsApi.list({ limit: 80 }),
    refetchInterval: POLL_INTERVAL_MS,
  });

  const workItemsQuery = useQuery({
    queryKey: ["ai-pmo-work-items", "inbox"],
    queryFn: () => aiPmoApi.listWorkItems({ limit: 80 }),
    refetchInterval: POLL_INTERVAL_MS,
  });

  const activeProjectsQuery = useQuery({
    queryKey: ["projects", "active", "inbox-inline-actions"],
    queryFn: () => projectsApi.list({ status: "active" }),
    refetchInterval: POLL_INTERVAL_MS,
  });

  const inboxData = useMemo(() => {
    return buildInboxView({
      notifications: notificationsQuery.data || { items: [], unread_count: 0 },
      workItems: workItemsQuery.data || { items: [] },
    });
  }, [notificationsQuery.data, workItemsQuery.data]);

  const projectOptions = useMemo(() => {
    const map = new Map<string, string>();
    for (const item of inboxData.items) {
      if (!item.project_id) continue;
      map.set(String(item.project_id), item.project_name || `项目 #${item.project_id}`);
    }
    return Array.from(map.entries()).map(([value, label]) => ({ value, label }));
  }, [inboxData.items]);

  const activeProjectOptions = useMemo<InboxProjectOption[]>(() => {
    const projects = activeProjectsQuery.data || [];
    return projects.map((project) => ({
      value: String(project.id),
      label: String(project.title || `项目 #${project.id}`),
    }));
  }, [activeProjectsQuery.data]);

  const projectScopedItems = useMemo(() => {
    return inboxData.items.filter((item) => {
      if (projectFilter === "all") return true;
      return String(item.project_id || "") === projectFilter;
    });
  }, [inboxData.items, projectFilter]);

  const tabCounts = useMemo(() => {
    return {
      all: projectScopedItems.length,
      needs_action: projectScopedItems.filter((item) => item.display_kind === "action_required").length,
      in_progress: projectScopedItems.filter((item) => item.display_kind === "auto_running").length,
      done: projectScopedItems.filter((item) => item.display_kind === "auto_done").length,
    } satisfies Record<InboxTabKey, number>;
  }, [projectScopedItems]);

  const searchedItems = useMemo(() => {
    const query = searchValue.trim().toLowerCase();
    if (!query) return projectScopedItems;

    return projectScopedItems.filter((item) => {
      return `${item.title} ${item.summary} ${item.project_name || ""} ${item.stage_text || ""}`
        .toLowerCase()
        .includes(query);
    });
  }, [projectScopedItems, searchValue]);

  const feedItems = useMemo(() => {
    const tabItems = searchedItems.filter((item) => matchesTab(item, activeTab));
    return sortByLatest(tabItems);
  }, [searchedItems, activeTab]);

  useEffect(() => {
    if (autoExpandedByQuery) return;
    const targetId = parsePositiveInt(searchParams.get("workItemId"));
    if (!targetId) return;
    const targetKey = `work-item-${targetId}`;
    const matched = feedItems.find((item) => item.id === targetKey);
    if (matched) {
      setExpandedItemId(targetKey);
      setAutoExpandedByQuery(true);
    }
  }, [autoExpandedByQuery, feedItems, searchParams]);

  const setTab = (tab: string) => {
    const normalized = normalizeTabKey(tab);
    const next = new URLSearchParams(searchParams);
    next.set("section", normalized);
    setSearchParams(next);
  };

  const setProject = (projectId: string) => {
    const next = new URLSearchParams(searchParams);
    if (projectId === "all") next.delete("project_id");
    else next.set("project_id", projectId);
    setSearchParams(next);
  };

  const setSearch = (value: string) => {
    const next = new URLSearchParams(searchParams);
    if (!value.trim()) next.delete("q");
    else next.set("q", value.trim());
    setSearchParams(next);
  };

  const toggleExpand = (itemId: string) => {
    setExpandedItemId((current) => (current === itemId ? null : itemId));
  };

  const getSelectedProjectId = (item: InboxItemViewModel): number | null => {
    const selected = selectedProjectByItem[item.id];
    if (selected) return parsePositiveInt(selected);
    if (item.project_id) return parsePositiveInt(item.project_id);
    return null;
  };

  const getSelectedProjectValue = (item: InboxItemViewModel): string => {
    const selected = selectedProjectByItem[item.id];
    if (selected) return selected;
    return item.project_id ? String(item.project_id) : "";
  };

  const setSelectedProjectValue = (item: InboxItemViewModel, value: string) => {
    setSelectedProjectByItem((current) => ({ ...current, [item.id]: value }));
  };

  const refreshAll = async () => {
    await Promise.all([
      queryClient.invalidateQueries({ queryKey: ["notifications", "inbox"] }),
      queryClient.invalidateQueries({ queryKey: ["ai-pmo-work-items", "inbox"] }),
    ]);
  };

  const markNotificationRead = async (item: InboxItemViewModel) => {
    if (item.source_kind === "notification" && item.source_notification && !item.source_notification.is_read) {
      try {
        await notificationsApi.markRead(Number(item.source_notification.id));
      } catch {
        // 不阻断后续操作。
      }
    }
  };

  const openTarget = async (item: InboxItemViewModel) => {
    await markNotificationRead(item);

    if (item.target_url) {
      if (item.target_url.startsWith("/")) navigate(item.target_url);
      else window.location.assign(item.target_url);
      await refreshAll();
      return;
    }

    toast({ title: "当前消息暂无可打开的目标入口", variant: "default" });
  };

  const handleAction = async (item: InboxItemViewModel, action: InboxActionDescriptor) => {
    const actionKey = buildInboxActionKey(item, action);
    setPendingActionKey(actionKey);

    try {
      if (action.kind === "open_target") {
        await openTarget(item);
        return;
      }

      if (action.kind === "open_detail") {
        await markNotificationRead(item);
        toggleExpand(item.id);
        await refreshAll();
        return;
      }

      if (action.kind === "confirm" && item.source_kind === "ai_pmo_work_item" && item.source_work_item) {
        const missingProjectScope = isMissingProjectScopeItem(item);
        const selectedProjectId = missingProjectScope ? getSelectedProjectId(item) : (item.project_id ?? null);
        if (missingProjectScope && !selectedProjectId) {
          setExpandedItemId(item.id);
          toast({ title: "请先选择关联项目后再确认", variant: "default" });
          return;
        }
        const result = await aiPmoApi.decideWorkItem(item.source_work_item.id, {
          action: "approve",
          project_id: selectedProjectId ?? undefined,
        });
        await refreshAll();

        const followupReply = String(result.followup_reply || "").trim();
        if (result.status === "succeeded") {
          toast({ title: followupReply || "已继续执行并完成", variant: "success" });
        } else if (result.status === "pending_manual") {
          toast({ title: followupReply || "继续执行后仍需人工确认", variant: "default" });
        } else {
          toast({ title: followupReply || "继续执行失败，请查看详情", variant: "error" });
        }
        setSelectedProjectByItem((current) => {
          if (!(item.id in current)) return current;
          const next = { ...current };
          delete next[item.id];
          return next;
        });
        setExpandedItemId(item.id);
        return;
      }

      if (action.kind === "reject" && item.source_kind === "ai_pmo_work_item" && item.source_work_item) {
        const result = await aiPmoApi.decideWorkItem(item.source_work_item.id, {
          action: "reject",
          reason: "人工审批拒绝，已标记失效",
        });
        await refreshAll();
        const followupReply = String(result.followup_reply || "").trim();
        toast({ title: followupReply || "已标记失效，不再继续执行", variant: "default" });
        return;
      }

      if (action.kind === "mark_read" && item.source_kind === "notification" && item.source_notification) {
        await notificationsApi.markRead(item.source_notification.id);
        await refreshAll();
        return;
      }

      if (action.kind === "none") {
        toggleExpand(item.id);
      }
    } catch (error) {
      toast({ title: getApiErrorMessage(error), variant: "error" });
    } finally {
      setPendingActionKey((current) => (current === actionKey ? null : current));
    }
  };

  const markAllRead = async () => {
    try {
      await notificationsApi.markAllRead();
      await refreshAll();
      toast({ title: "站内通知已全部设为已读", variant: "success" });
    } catch (error) {
      toast({ title: getApiErrorMessage(error, "全部已读失败"), variant: "error" });
    }
  };

  const isLoading = notificationsQuery.isLoading || workItemsQuery.isLoading;
  const activeProjectErrorText = activeProjectsQuery.isError
    ? getApiErrorMessage(activeProjectsQuery.error, "项目列表加载失败")
    : null;

  return (
    <div className="space-y-4 pb-12">
      <section className="rounded-2xl bg-[#F8F9FA] p-3 md:p-4">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
          <div>
            <h1 className="text-xl font-bold tracking-tight text-slate-900 md:text-2xl">消息台</h1>
            <p className="mt-1 text-xs text-slate-500 md:text-sm">列表 Feed · 最新在上 · 支持移动端</p>
            <p className="mt-1 text-xs text-slate-500">当前结果：{feedItems.length} 条</p>
          </div>

          <Button
            variant="outline"
            className="h-9 border-slate-200 bg-white text-slate-700 hover:bg-slate-50"
            onClick={markAllRead}
            disabled={notificationsQuery.data?.unread_count === 0}
          >
            全部已读
          </Button>
        </div>

        <div className="mt-3 grid gap-2 md:grid-cols-[minmax(0,1fr)_180px]">
          <Input
            placeholder="搜索标题、副标题、项目"
            defaultValue={searchValue}
            className="border-slate-200 bg-white text-slate-700 placeholder:text-slate-400"
            onBlur={(event) => setSearch(event.target.value)}
            onKeyDown={(event) => {
              if (event.key === "Enter") setSearch((event.target as HTMLInputElement).value);
            }}
          />

          <select
            value={projectFilter}
            onChange={(event) => setProject(event.target.value)}
            className="h-10 w-full rounded-md border border-slate-200 bg-white px-3 text-sm text-slate-700"
          >
            <option value="all">全部项目</option>
            {projectOptions.map((option) => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
        </div>

        <div className="mt-3">
          <div className="mb-2 text-xs text-slate-500">信息流筛选（单列时间流，不分栏）</div>
          <div className="overflow-x-auto [-webkit-overflow-scrolling:touch]">
            <div className="flex w-max items-center gap-2 whitespace-nowrap pr-1">
              {(Object.keys(TAB_LABELS) as InboxTabKey[]).map((tabKey) => (
                <button
                  key={tabKey}
                  type="button"
                  onClick={() => setTab(tabKey)}
                  className={cn(
                    "inline-flex h-8 items-center gap-1 rounded-full border px-3 text-xs transition sm:text-sm",
                    activeTab === tabKey
                      ? "border-slate-300 bg-white text-slate-900"
                      : "border-slate-200 bg-slate-50 text-slate-600 hover:bg-white"
                  )}
                >
                  <span>{TAB_LABELS[tabKey]}</span>
                  <span className="text-[11px] text-slate-500">{tabCounts[tabKey]}</span>
                </button>
              ))}
            </div>
          </div>
        </div>
      </section>

      {isLoading ? (
        <section className="rounded-2xl bg-[#F8F9FA] p-4">
          <div className="flex items-center gap-2 rounded-xl bg-white px-4 py-3 text-slate-500">
            <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-blue-600 border-t-transparent" />
            加载消息台中…
          </div>
        </section>
      ) : feedItems.length === 0 ? (
        <section className="rounded-2xl bg-[#F8F9FA] p-4">
          <div className="rounded-xl bg-white px-4 py-10 text-center text-slate-500">
            <BellRing className="mx-auto mb-3 h-10 w-10 opacity-50" />
            <p className="font-medium text-slate-700">当前没有匹配收件项</p>
            <p className="mt-1 text-sm">请调整筛选条件后重试</p>
          </div>
        </section>
      ) : (
        <section className="space-y-2 rounded-2xl bg-[#F8F9FA] p-2 md:p-3">
          {feedItems.map((item) => (
            <InboxListItem
              key={item.id}
              item={item}
              expanded={expandedItemId === item.id}
              pendingActionKey={pendingActionKey}
              inlinePanel={
                expandedItemId === item.id && isMissingProjectScopeItem(item) ? (
                  <InboxActionPanel
                    selectedProjectId={getSelectedProjectValue(item)}
                    projectOptions={activeProjectOptions}
                    loadingProjects={activeProjectsQuery.isLoading}
                    projectsErrorText={activeProjectErrorText}
                    pending={pendingActionKey === buildInboxActionKey(item, item.primary_action)}
                    onSelectProject={(value) => setSelectedProjectValue(item, value)}
                    onCancel={() => setExpandedItemId(null)}
                    onConfirm={() => void handleAction(item, item.primary_action)}
                  />
                ) : undefined
              }
              onToggleExpand={toggleExpand}
              onAction={(target, action) => void handleAction(target, action)}
            />
          ))}
        </section>
      )}
    </div>
  );
}