"use client";

import {
  useCallback,
  useEffect,
  useRef,
  useState,
  type DragEvent,
  type KeyboardEvent as ReactKeyboardEvent,
} from "react";
import {
  Check,
  ChevronDown,
  ChevronUp,
  FolderOpen,
  Globe,
  GripVertical,
  Loader2,
  Pin,
} from "lucide-react";
import {
  apiAdminPinnedPosts,
  apiAdminSavePinOrder,
  type AdminPinnedPost,
} from "@/lib/api";
import { formatRelative } from "@/lib/format";
import { toast } from "@/lib/toast";
import {
  AdminEmpty,
  AdminIconButton,
  AdminPageHeader,
  AdminSegmented,
} from "@/components/admin";

interface BoardOpt {
  id: number;
  name: string;
}

interface PinnedAdminProps {
  boards: BoardOpt[];
  /** 管理员及以上：可排全站置顶 */
  canGlobal: boolean;
}

type Level = 1 | 2;

export default function PinnedAdmin({ boards, canGlobal }: PinnedAdminProps) {
  const [level, setLevel] = useState<Level>(canGlobal ? 2 : 1);
  const [boardId, setBoardId] = useState<number>(boards[0]?.id ?? 0);
  const [posts, setPosts] = useState<AdminPinnedPost[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");
  /** 拖拽排序：被拖行下标 + 插入位置（0..N，N 表示末尾） */
  const [dragIndex, setDragIndex] = useState<number | null>(null);
  const [dropIndex, setDropIndex] = useState<number | null>(null);

  const load = useCallback(async (lv: Level, bid: number) => {
    setLoading(true);
    setError("");
    try {
      const r = await apiAdminPinnedPosts(lv, lv === 1 ? bid : undefined);
      setPosts(r.posts ?? []);
    } catch (e) {
      setPosts([]);
      setError(e instanceof Error ? e.message : "获取置顶列表失败");
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    void load(level, boardId);
  }, [level, boardId, load]);

  const switchLevel = (lv: Level) => {
    if (lv === level) return;
    setLevel(lv);
    setPosts([]);
    setError("");
  };

  /** 统一保存：乐观更新新顺序，失败回滚并提示 */
  const saveOrder = useCallback(
    async (next: AdminPinnedPost[], prev: AdminPinnedPost[]) => {
      setPosts(next);
      setSaving(true);
      try {
        await apiAdminSavePinOrder(
          level,
          level === 1 ? boardId : 0,
          next.map((p) => p.id)
        );
        toast("置顶顺序已更新", "ok");
      } catch (e) {
        setPosts(prev);
        toast(e instanceof Error ? e.message : "保存顺序失败");
      } finally {
        setSaving(false);
      }
    },
    [level, boardId]
  );

  // 上移/下移按钮与键盘共用
  const move = (idx: number, dir: -1 | 1) => {
    const target = idx + dir;
    if (target < 0 || target >= posts.length || saving) return;
    const prev = posts;
    const next = [...posts];
    const tmp = next[idx];
    next[idx] = next[target];
    next[target] = tmp;
    void saveOrder(next, prev);
  };

  const resetDrag = () => {
    setDragIndex(null);
    setDropIndex(null);
  };

  const onRowDragOver = (e: DragEvent<HTMLLIElement>, i: number) => {
    if (dragIndex === null) return;
    e.preventDefault();
    e.dataTransfer.dropEffect = "move";
    // 指针过行中线则插到行后，否则插到行前
    const rect = e.currentTarget.getBoundingClientRect();
    const after = e.clientY > rect.top + rect.height / 2;
    setDropIndex(i + (after ? 1 : 0));
  };

  const onRowDrop = (e: DragEvent<HTMLLIElement>) => {
    e.preventDefault();
    if (dragIndex === null || dropIndex === null || saving) {
      resetDrag();
      return;
    }
    // 落在原位置前后：无变化
    if (dropIndex === dragIndex || dropIndex === dragIndex + 1) {
      resetDrag();
      return;
    }
    const prev = posts;
    const next = [...posts];
    const [moved] = next.splice(dragIndex, 1);
    next.splice(dropIndex > dragIndex ? dropIndex - 1 : dropIndex, 0, moved);
    resetDrag();
    void saveOrder(next, prev);
  };

  /** 插入指示线：仅当落点确实改变位置时显示 */
  const showLineAt = (pos: number) =>
    dragIndex !== null && dropIndex === pos && pos !== dragIndex && pos !== dragIndex + 1;

  const segOptions = [
    ...(canGlobal
      ? [{ key: "2", label: "全站置顶", icon: <Globe size={13} aria-hidden /> }]
      : []),
    { key: "1", label: "板块置顶", icon: <FolderOpen size={13} aria-hidden /> },
  ];

  return (
    <div>
      <AdminPageHeader
        icon={Pin}
        title="置顶管理"
        description="拖拽手柄或上下箭头调整置顶帖顺序，改动自动保存，越靠前越先展示。板块管理员仅可排序授权板块的板块置顶。"
      />

      {error && (
        <div
          className="mb-3 px-3 py-2 rounded-[var(--r-sm)] text-[12.5px]"
          style={{ background: "var(--danger-soft)", color: "var(--danger)" }}
        >
          {error}
        </div>
      )}

      {/* 层级切换 + 板块选择 */}
      <div className="mb-4 flex items-center gap-3 flex-wrap">
        <AdminSegmented
          options={segOptions}
          value={String(level)}
          onChange={(k) => switchLevel(Number(k) as Level)}
          ariaLabel="置顶层级"
        />
        {level === 1 && (
          <BoardSelect
            boards={boards}
            value={boardId}
            onChange={setBoardId}
            disabled={loading || saving}
          />
        )}
      </div>

      <div className="panel overflow-hidden">
        {loading ? (
          <PinListSkeleton />
        ) : posts.length === 0 ? (
          <AdminEmpty
            icon={<Pin size={20} />}
            title={level === 2 ? "暂无全站置顶帖" : "该板块暂无置顶帖"}
            description="在帖子页的「管理」菜单中可将帖子设为置顶。"
          />
        ) : (
          <>
            {/* 列表状态条：数量 + 保存状态/操作提示 */}
            <div
              className="flex items-center justify-between gap-3 px-4 py-2.5"
              style={{ borderBottom: "1px solid var(--line)" }}
            >
              <span
                className="text-[12.5px] font-semibold inline-flex items-center gap-1"
                style={{ color: "var(--ink-2)" }}
              >
                共
                <b className="tabular-nums" style={{ color: "var(--accent)" }}>
                  {posts.length}
                </b>
                篇置顶
              </span>
              <span className="meta text-[12px] inline-flex items-center gap-1.5">
                {saving ? (
                  <>
                    <Loader2 size={12} className="animate-spin" aria-hidden />
                    保存中…
                  </>
                ) : (
                  "拖拽手柄或上下按钮调整，自动保存"
                )}
              </span>
            </div>

            <ul
              onDragLeave={(e) => {
                // 仅当指针真正离开列表时清除指示线，避免行间移动时闪烁
                if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {
                  setDropIndex(null);
                }
              }}
            >
              {posts.map((p, i) => (
                <li
                  key={p.id}
                  className={`pin-row relative flex items-center gap-3 px-4 py-3${
                    dragIndex === i ? " is-dragging" : ""
                  }`}
                  style={{ borderTop: i === 0 ? "none" : "1px solid var(--line)" }}
                  onDragOver={(e) => onRowDragOver(e, i)}
                  onDrop={onRowDrop}
                >
                  {/* 拖拽插入位置指示线 */}
                  {showLineAt(i) && (
                    <span
                      className="absolute left-3 right-3 -top-px h-[2px] rounded-full pointer-events-none"
                      style={{ background: "var(--accent)" }}
                      aria-hidden
                    />
                  )}
                  {i === posts.length - 1 && showLineAt(posts.length) && (
                    <span
                      className="absolute left-3 right-3 -bottom-px h-[2px] rounded-full pointer-events-none"
                      style={{ background: "var(--accent)" }}
                      aria-hidden
                    />
                  )}

                  {/* 拖拽手柄：键盘上下方向键同样可排序 */}
                  <span
                    role="button"
                    tabIndex={0}
                    aria-label={`拖拽调整「${p.title}」的顺序，也可使用上下方向键`}
                    className="pin-drag-handle w-5 h-8 -ml-1 inline-flex items-center justify-center rounded-md shrink-0"
                    draggable={!saving}
                    onDragStart={(e) => {
                      e.dataTransfer.effectAllowed = "move";
                      e.dataTransfer.setData("text/plain", String(i));
                      setDragIndex(i);
                    }}
                    onDragEnd={resetDrag}
                    onKeyDown={(e) => {
                      if (e.key === "ArrowUp") {
                        e.preventDefault();
                        move(i, -1);
                      } else if (e.key === "ArrowDown") {
                        e.preventDefault();
                        move(i, 1);
                      }
                    }}
                  >
                    <GripVertical size={14} aria-hidden />
                  </span>

                  {/* 名次徽章：前三名高亮 */}
                  <span
                    className="w-7 h-7 rounded-lg inline-flex items-center justify-center text-[12.5px] font-bold tabular-nums shrink-0"
                    style={
                      i < 3
                        ? { background: "var(--accent-soft)", color: "var(--accent)" }
                        : { background: "var(--panel-2)", color: "var(--ink-3)" }
                    }
                  >
                    {i + 1}
                  </span>

                  <div className="min-w-0 flex-1">
                    <a
                      href={`/post/${p.id}`}
                      target="_blank"
                      rel="noreferrer"
                      className="text-[13.5px] font-semibold truncate block hover:underline"
                      style={{ color: "var(--ink)" }}
                    >
                      {p.title}
                    </a>
                    <p className="meta text-[12px] mt-0.5 flex items-center gap-1.5 truncate">
                      {level === 2 && (
                        <span
                          className="inline-flex items-center gap-1 px-1.5 py-px rounded-full shrink-0"
                          style={{ background: "var(--panel-2)", color: "var(--ink-3)" }}
                        >
                          <FolderOpen size={10} aria-hidden />
                          {p.board_name}
                        </span>
                      )}
                      <span className="shrink-0">{formatRelative(p.created_at)}</span>
                    </p>
                  </div>

                  <div className="flex items-center gap-1 shrink-0">
                    <AdminIconButton
                      ariaLabel={`上移「${p.title}」`}
                      tip="上移"
                      disabled={i === 0 || saving}
                      onClick={() => move(i, -1)}
                    >
                      <ChevronUp size={15} />
                    </AdminIconButton>
                    <AdminIconButton
                      ariaLabel={`下移「${p.title}」`}
                      tip="下移"
                      disabled={i === posts.length - 1 || saving}
                      onClick={() => move(i, 1)}
                    >
                      <ChevronDown size={15} />
                    </AdminIconButton>
                  </div>
                </li>
              ))}
            </ul>
          </>
        )}
      </div>
    </div>
  );
}

/** 板块自定义下拉：浮层 + 键盘导航 + 滚动列表，替代原生 select */
function BoardSelect({
  boards,
  value,
  onChange,
  disabled,
}: {
  boards: BoardOpt[];
  value: number;
  onChange: (id: number) => void;
  disabled?: boolean;
}) {
  const [open, setOpen] = useState(false);
  /** 键盘/悬停高亮下标 */
  const [hi, setHi] = useState(0);
  const ref = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const listRef = useRef<HTMLUListElement>(null);
  const current = boards.find((b) => b.id === value);

  useEffect(() => {
    if (!open) return;
    setHi(Math.max(0, boards.findIndex((b) => b.id === value)));
    const onDown = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener("mousedown", onDown);
    return () => document.removeEventListener("mousedown", onDown);
  }, [open, boards, value]);

  // 高亮项保持在可视区内
  useEffect(() => {
    if (!open) return;
    const el = listRef.current?.children[hi];
    el?.scrollIntoView({ block: "nearest" });
  }, [hi, open]);

  const close = (refocus = false) => {
    setOpen(false);
    if (refocus) triggerRef.current?.focus();
  };

  const select = (id: number) => {
    onChange(id);
    close(true);
  };

  const onKeyDown = (e: ReactKeyboardEvent) => {
    if (!open) {
      if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) {
        e.preventDefault();
        setOpen(true);
      }
      return;
    }
    if (e.key === "Escape") {
      e.preventDefault();
      close(true);
    } else if (e.key === "ArrowDown") {
      e.preventDefault();
      setHi((v) => Math.min(boards.length - 1, v + 1));
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      setHi((v) => Math.max(0, v - 1));
    } else if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      if (boards[hi]) select(boards[hi].id);
    } else if (e.key === "Tab") {
      close();
    }
  };

  if (boards.length === 0) {
    return <span className="meta text-[13px] py-2">无可用板块</span>;
  }

  return (
    <div ref={ref} className="relative" onKeyDown={onKeyDown}>
      <button
        ref={triggerRef}
        type="button"
        aria-haspopup="listbox"
        aria-expanded={open}
        aria-label="选择板块"
        disabled={disabled}
        onClick={() => setOpen((v) => !v)}
        className="pin-board-trigger h-9 pl-3 pr-2.5 rounded-lg inline-flex items-center gap-2 text-[13px] font-medium transition-[border-color,box-shadow] disabled:opacity-60 disabled:cursor-not-allowed"
        style={{
          minWidth: 176,
          background: "var(--panel)",
          border: `1px solid ${open ? "var(--accent)" : "var(--line-2)"}`,
          color: "var(--ink)",
          boxShadow: open ? "0 0 0 3px var(--accent-soft)" : "var(--shadow-sm)",
        }}
      >
        <FolderOpen
          size={14}
          className="shrink-0 transition-colors"
          style={{ color: open ? "var(--accent)" : "var(--ink-3)" }}
          aria-hidden
        />
        <span className="truncate max-w-44">{current?.name ?? "选择板块"}</span>
        <ChevronDown
          size={13}
          className={`ml-auto shrink-0 transition-transform duration-150${
            open ? " rotate-180" : ""
          }`}
          style={{ color: "var(--ink-3)" }}
          aria-hidden
        />
      </button>

      {open && (
        <div
          className="absolute z-30 mt-1.5 left-0 w-full min-w-52 rounded-xl overflow-hidden"
          style={{
            background: "var(--panel)",
            border: "1px solid var(--line-2)",
            boxShadow: "var(--shadow-lg)",
          }}
        >
          <ul
            ref={listRef}
            role="listbox"
            aria-label="板块列表"
            className="max-h-60 overflow-y-auto p-1.5"
          >
            {boards.map((b, i) => {
              const active = b.id === value;
              return (
                <li key={b.id}>
                  <button
                    type="button"
                    role="option"
                    aria-selected={active}
                    tabIndex={-1}
                    onClick={() => select(b.id)}
                    onMouseEnter={() => setHi(i)}
                    className="w-full flex items-center gap-2 px-2.5 py-2 rounded-lg text-left text-[13px] transition-colors"
                    style={{
                      background: active
                        ? "var(--nav-active-bg)"
                        : i === hi
                          ? "var(--panel-2)"
                          : undefined,
                      color: active ? "var(--nav-active-ink)" : "var(--ink-2)",
                    }}
                  >
                    <span className="flex-1 truncate font-medium">{b.name}</span>
                    {active && <Check size={13} className="shrink-0" aria-hidden />}
                  </button>
                </li>
              );
            })}
          </ul>
        </div>
      )}
    </div>
  );
}

/** 加载骨架：模拟 手柄/徽章/标题/摘要 行结构 */
function PinListSkeleton() {
  return (
    <ul aria-hidden>
      {[0, 1, 2, 3].map((i) => (
        <li
          key={i}
          className="flex items-center gap-3 px-4 py-3"
          style={{ borderTop: i === 0 ? "none" : "1px solid var(--line)" }}
        >
          <span
            className="w-5 h-7 -ml-1 rounded-md animate-pulse shrink-0"
            style={{ background: "var(--panel-2)" }}
          />
          <span
            className="w-7 h-7 rounded-lg animate-pulse shrink-0"
            style={{ background: "var(--panel-2)" }}
          />
          <div className="flex-1 min-w-0 flex flex-col gap-1.5">
            <span
              className="h-3.5 rounded animate-pulse"
              style={{ background: "var(--panel-2)", width: `${52 - i * 9}%` }}
            />
            <span
              className="h-3 w-28 rounded animate-pulse"
              style={{ background: "var(--panel-2)" }}
            />
          </div>
        </li>
      ))}
    </ul>
  );
}