"use client";

import { useDeferredValue, useState, useId, type ReactNode } from "react";
import {
  DndContext,
  closestCenter,
  PointerSensor,
  KeyboardSensor,
  useSensor,
  useSensors,
} from "@dnd-kit/core";
import {
  SortableContext,
  useSortable,
  verticalListSortingStrategy,
  sortableKeyboardCoordinates,
  arrayMove,
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { GripVertical, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ActionForm } from "@/components/action-form";
import { SubmitButton } from "@/components/submit-button";
import { useFormStatus } from "react-dom";

import {
  deleteProxyGroupAction,
  saveMainProxyGroupAction,
  saveProxyGroupAction,
} from "./actions";

type ProxyGroupNodeOption = {
  slug: string;
  label: string;
  meta: string;
};

type ProxyGroupEditorProps = {
  mode?: "custom" | "main";
  group?: {
    id: string;
    name: string;
    memberSlugs: string[];
    hiddenSlugs?: string[];
  };
  nodes: ProxyGroupNodeOption[];
};

function normalizeSelectedSlugs(
  initialSlugs: string[],
  nodes: ProxyGroupNodeOption[],
  includeMissingNodes = false,
) {
  const availableSlugs = new Set(nodes.map((node) => node.slug));
  const seen = new Set<string>();
  const selectedSlugs = initialSlugs.filter((slug) => {
    if (!availableSlugs.has(slug) || seen.has(slug)) {
      return false;
    }

    seen.add(slug);
    return true;
  });

  if (!includeMissingNodes) {
    return selectedSlugs;
  }

  for (const node of nodes) {
    if (!seen.has(node.slug)) {
      selectedSlugs.push(node.slug);
      seen.add(node.slug);
    }
  }

  return selectedSlugs;
}

function EditorFields({ children }: { children: ReactNode }) {
  const { pending } = useFormStatus();
  return (
    <fieldset disabled={pending} className="stack-md min-w-0 border-0 p-0 m-0">
      {children}
    </fieldset>
  );
}

function SortableNode({
  node,
  index,
  removable,
  onRemove,
  hidden,
  onToggleHidden,
}: {
  node: ProxyGroupNodeOption;
  index: number;
  removable: boolean;
  onRemove: () => void;
  hidden?: boolean;
  onToggleHidden?: () => void;
}) {
  const {
    attributes,
    listeners,
    setNodeRef,
    setActivatorNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id: node.slug });
  return (
    <li
      ref={setNodeRef}
      className="proxy-sort-item"
      style={{
        transform: CSS.Transform.toString(transform),
        transition,
        position: "relative",
        zIndex: isDragging ? 2 : undefined,
        background: isDragging ? "#f4f4f5" : undefined,
      }}
    >
      <Button
        ref={setActivatorNodeRef}
        {...attributes}
        {...listeners}
        aria-label={`拖拽排序 ${node.label}`}
        title="拖拽排序；键盘按空格开始，方向键移动，空格放下"
        type="button"
        variant="ghost"
        size="icon-sm"
        className="drag-handle"
      >
        <GripVertical size={16} />
      </Button>
      <span className="proxy-sort-item__index">{index + 1}</span>
      <div className="stack-tight min-w-0 flex-1">
        <strong>{node.label}</strong>
        <span className="proxy-sort-item__sub">{node.meta}</span>
      </div>
      {onToggleHidden && (
        <label className="inline-flex items-center gap-2 text-sm whitespace-nowrap">
          <input
            type="checkbox"
            aria-label={`主分组隐藏 ${node.label}`}
            checked={hidden}
            onChange={onToggleHidden}
          />
          主分组隐藏
        </label>
      )}
      {removable && (
        <Button
          variant="ghost"
          size="icon-sm"
          type="button"
          aria-label={`移除 ${node.label}`}
          onClick={onRemove}
        >
          <X size={14} />
        </Button>
      )}
      <input type="hidden" name="member_slugs" value={node.slug} />
    </li>
  );
}

export function ProxyGroupEditor({
  mode = "custom",
  group,
  nodes,
}: ProxyGroupEditorProps) {
  const dndId = useId();
  const sensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    }),
  );
  const isMainGroup = mode === "main";
  const isEditing = Boolean(group) && !isMainGroup;
  const [query, setQuery] = useState("");
  const deferredQuery = useDeferredValue(query);
  const [selectedSlugs, setSelectedSlugs] = useState(() =>
    normalizeSelectedSlugs(group?.memberSlugs ?? [], nodes, isMainGroup),
  );
  const [hiddenSlugs, setHiddenSlugs] = useState(group?.hiddenSlugs ?? []);
  const [name, setName] = useState(group?.name ?? "");
  const [saved, setSaved] = useState(() =>
    JSON.stringify([
      group?.name ?? "",
      normalizeSelectedSlugs(group?.memberSlugs ?? [], nodes, isMainGroup),
      group?.hiddenSlugs ?? [],
    ]),
  );
  const [feedback, setFeedback] = useState("");
  const dirty = saved !== JSON.stringify([name, selectedSlugs, hiddenSlugs]);
  const selectedSlugSet = new Set(selectedSlugs);
  const nodesBySlug = new Map(nodes.map((node) => [node.slug, node]));
  const selectedNodes = selectedSlugs
    .map((slug) => nodesBySlug.get(slug))
    .filter((node): node is ProxyGroupNodeOption => Boolean(node));
  const normalizedQuery = deferredQuery.trim().toLowerCase();
  const remainingCount = nodes.length - selectedNodes.length;
  const availableNodes = nodes.filter((node) => {
    if (selectedSlugSet.has(node.slug)) {
      return false;
    }

    if (!normalizedQuery) {
      return true;
    }

    return [node.label, node.meta, node.slug].some((value) =>
      value.toLowerCase().includes(normalizedQuery),
    );
  });

  function addNode(slug: string) {
    setFeedback("");
    setSelectedSlugs((current) => {
      if (current.includes(slug)) {
        return current;
      }

      return [...current, slug];
    });
  }

  function removeNode(slug: string) {
    setFeedback("");
    setSelectedSlugs((current) =>
      current.filter((currentSlug) => currentSlug !== slug),
    );
  }

  function addAllVisibleNodes() {
    setFeedback("");
    setSelectedSlugs((current) => {
      const next = [...current];
      const seen = new Set(current);

      for (const node of availableNodes) {
        if (seen.has(node.slug)) {
          continue;
        }

        next.push(node.slug);
        seen.add(node.slug);
      }

      return next;
    });
  }

  function clearSelection() {
    setFeedback("");
    setSelectedSlugs([]);
  }

  return (
    <article className="instruction-block proxy-group-card">
      <form
        action={async (formData) => {
          setFeedback("");
          try {
            await (
              isMainGroup ? saveMainProxyGroupAction : saveProxyGroupAction
            )(formData);
            setSaved(JSON.stringify([name, selectedSlugs, hiddenSlugs]));
            setFeedback("已保存");
          } catch {
            setFeedback("保存失败，请重试。当前修改已保留。");
          }
        }}
        className="stack-md"
      >
        <EditorFields>
          {isMainGroup && (
            <>
              <p className="muted">
                隐藏仅影响主分组，节点及其他分组仍保留。新节点默认显示；全部隐藏时主分组回退为
                DIRECT。
              </p>
              {hiddenSlugs.map((slug) => (
                <input
                  key={slug}
                  type="hidden"
                  name="hidden_slugs"
                  value={slug}
                />
              ))}
            </>
          )}
          {group && !isMainGroup ? (
            <input type="hidden" name="id" value={group.id} />
          ) : null}
          <div className="section-title section-title--top">
            <div className="stack-tight">
              <h4 className="proxy-group-title">
                {isMainGroup
                  ? `默认主分组：${group?.name ?? "FeieProxy"}`
                  : isEditing
                    ? group?.name
                    : "新建分组"}
              </h4>
            </div>
            <div className="badge-row badge-row--end">
              <span className="status-pill status-pill--ink">
                已选 {selectedNodes.length}
              </span>
              {!isMainGroup ? (
                <span className="status-pill status-pill--warm">
                  未加入 {remainingCount}
                </span>
              ) : null}
            </div>
          </div>

          {!isMainGroup ? (
            <label className="field">
              <span>{isEditing ? "组名" : "新建分组名"}</span>
              <Input
                name="name"
                value={name}
                onChange={(event) => {
                  setName(event.target.value);
                  setFeedback("");
                }}
                placeholder="ChatGPT"
                required
              />
            </label>
          ) : null}

          <div
            className={`proxy-group-builder${isMainGroup ? " proxy-group-builder--main" : ""}`}
          >
            {!isMainGroup ? (
              <section className="proxy-group-panel">
                <div className="proxy-group-panel__header">
                  <div className="stack-tight">
                    <strong>候选节点</strong>
                  </div>
                  <div className="proxy-group-toolbar">
                    <label className="proxy-group-search">
                      <input
                        aria-label="搜索候选节点"
                        type="search"
                        value={query}
                        onChange={(event) => setQuery(event.target.value)}
                        onKeyDown={(event) => {
                          if (event.key === "Enter") {
                            event.preventDefault();
                          }
                        }}
                        placeholder="搜索节点名称 / slug"
                      />
                    </label>
                    <Button
                      size="sm"
                      variant="outline"
                      type="button"
                      onClick={addAllVisibleNodes}
                      disabled={availableNodes.length === 0}
                    >
                      {normalizedQuery ? "添加筛选结果" : "全部添加"}
                    </Button>
                  </div>
                </div>

                {availableNodes.length > 0 ? (
                  <div className="proxy-node-grid">
                    {availableNodes.map((node) => (
                      <Button
                        variant="ghost"
                        key={node.slug}
                        className="proxy-node-chip"
                        type="button"
                        onClick={() => addNode(node.slug)}
                      >
                        <span className="proxy-node-chip__copy">
                          <strong>{node.label}</strong>
                          <span>{node.meta}</span>
                        </span>
                        <span className="proxy-node-chip__action">添加</span>
                      </Button>
                    ))}
                  </div>
                ) : (
                  <p className="muted proxy-group-empty">
                    {remainingCount === 0
                      ? "所有可用节点都已加入当前分组。"
                      : "没有匹配当前筛选条件的节点。"}
                  </p>
                )}
              </section>
            ) : null}

            <section className="proxy-group-panel proxy-group-panel--selected">
              <div className="proxy-group-panel__header">
                <div className="stack-tight">
                  <strong>{isMainGroup ? "节点顺序" : "已选顺序"}</strong>
                  <span className="muted text-xs">拖动手柄排序 · 支持键盘</span>
                </div>
                {!isMainGroup ? (
                  <Button
                    size="sm"
                    variant="outline"
                    type="button"
                    onClick={clearSelection}
                    disabled={selectedNodes.length === 0}
                  >
                    清空已选
                  </Button>
                ) : null}
              </div>

              {selectedNodes.length > 0 ? (
                <DndContext
                  id={dndId}
                  sensors={sensors}
                  collisionDetection={closestCenter}
                  accessibility={{
                    screenReaderInstructions: {
                      draggable:
                        "按空格开始拖拽，使用方向键调整顺序，再按空格放下，Escape 取消。",
                    },
                    announcements: {
                      onDragStart: ({ active }) =>
                        `开始移动 ${nodesBySlug.get(String(active.id))?.label ?? active.id}`,
                      onDragOver: ({ over }) =>
                        over
                          ? `目标位置 ${selectedSlugs.indexOf(String(over.id)) + 1}`
                          : "已离开列表",
                      onDragEnd: ({ over }) =>
                        over
                          ? `已放到第 ${selectedSlugs.indexOf(String(over.id)) + 1} 位，请保存顺序`
                          : "顺序未变",
                      onDragCancel: () => "已取消排序",
                    },
                  }}
                  onDragEnd={({ active, over }) => {
                    if (over && active.id !== over.id) {
                      setSelectedSlugs((current) =>
                        arrayMove(
                          current,
                          current.indexOf(String(active.id)),
                          current.indexOf(String(over.id)),
                        ),
                      );
                      setFeedback("");
                    }
                  }}
                >
                  <SortableContext
                    items={selectedSlugs}
                    strategy={verticalListSortingStrategy}
                  >
                    <ol className="proxy-sort-list">
                      {selectedNodes.map((node, index) => (
                        <SortableNode
                          key={node.slug}
                          node={node}
                          index={index}
                          hidden={hiddenSlugs.includes(node.slug)}
                          onToggleHidden={
                            isMainGroup
                              ? () => {
                                  setHiddenSlugs((current) =>
                                    current.includes(node.slug)
                                      ? current.filter((s) => s !== node.slug)
                                      : [...current, node.slug],
                                  );
                                  setFeedback("");
                                }
                              : undefined
                          }
                          removable={!isMainGroup}
                          onRemove={() => removeNode(node.slug)}
                        />
                      ))}
                    </ol>
                  </SortableContext>
                </DndContext>
              ) : (
                <p className="muted proxy-group-empty">
                  {isMainGroup
                    ? "暂无可用节点。"
                    : "还没有选择节点。先从左侧添加，再在这里调整最终顺序。"}
                </p>
              )}
            </section>
          </div>

          <div className="action-row action-row--end">
            <span role="status" className="muted">
              {feedback || (dirty ? "有未保存的修改" : "")}
            </span>
            {dirty && (
              <Button
                type="button"
                variant="ghost"
                size="sm"
                onClick={() => {
                  const [oldName, oldSlugs, oldHidden] = JSON.parse(saved) as [
                    string,
                    string[],
                    string[],
                  ];
                  setName(oldName);
                  setSelectedSlugs(oldSlugs);
                  setHiddenSlugs(oldHidden);
                  setFeedback("");
                }}
              >
                撤销修改
              </Button>
            )}
            <SubmitButton disabled={!dirty && (isEditing || isMainGroup)}>
              {isMainGroup ? "保存主分组" : isEditing ? "保存分组" : "新建分组"}
            </SubmitButton>
          </div>
        </EditorFields>
      </form>

      {group && !isMainGroup ? (
        <ActionForm action={deleteProxyGroupAction}>
          <input type="hidden" name="id" value={group.id} />
          <SubmitButton
            variant="destructive"
            confirm={`将删除分组「${group.name}」，节点本身不受影响。`}
          >
            删除分组
          </SubmitButton>
        </ActionForm>
      ) : null}
    </article>
  );
}