"use client";

import { useState } from "react";
import {
  AlertCircle,
  CheckCircle2,
  GripVerticalIcon,
  Loader2Icon,
  PencilIcon,
  PlusIcon,
  TagIcon,
  Trash2Icon,
} from "lucide-react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import { ResourceTagDialog } from "@/components/workspace/tags/resource-tag-dialog";
import { TagChipList } from "@/components/workspace/tags/tag-chip";
import { TagSearchBar } from "@/components/workspace/tags/tag-search-bar";
import { useTheme } from "@/contexts/ThemeContext";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import {
  useAdminRecommendedQuestions,
  useCreateRecommendedQuestion,
  useDeleteRecommendedQuestion,
  useReorderRecommendedQuestions,
  useUpdateRecommendedQuestion,
} from "@/core/recommended-questions/hooks";
import type { RecommendedQuestion } from "@/core/recommended-questions";

type DialogState =
  | { mode: "add" }
  | { mode: "edit"; question: RecommendedQuestion }
  | null;

/** 成功 toast：仅暗色模式，浅色走 Sonner 默认 */
const successToastDarkOptions = {
  classNames: {
    toast:
      "!rounded-[2px] !border !border-[#106455] !bg-[#052934] !text-[#FFFFFF] shadow-md",
    title: "!text-[#FFFFFF]",
    description: "!text-[#FFFFFF]",
  },
  icon: <CheckCircle2 className="size-4 shrink-0 text-[#2FD69A]" />,
} as const;

/** 失败 toast：仅暗色模式，浅色走 Sonner 默认 */
const errorToastDarkOptions = {
  classNames: {
    toast:
      "!rounded-[2px] !border !border-[#7F1A2A] !bg-[#311629] !text-[#FFFFFF] shadow-md",
    title: "!text-[#FFFFFF]",
    description: "!text-[#FFFFFF]",
  },
  icon: <AlertCircle className="size-4 shrink-0 text-[#F5222D]" />,
} as const;

export default function RecommendedQuestionsPage({
  embedded = false,
}: {
  embedded?: boolean;
} = {}) {
  const { theme } = useTheme();
  const { questions, isLoading, error } = useAdminRecommendedQuestions();
  const createMutation = useCreateRecommendedQuestion();
  const updateMutation = useUpdateRecommendedQuestion();
  const deleteMutation = useDeleteRecommendedQuestion();
  const reorderMutation = useReorderRecommendedQuestions();

  const [dialog, setDialog] = useState<DialogState>(null);
  const [formTitle, setFormTitle] = useState("");
  const [formContent, setFormContent] = useState("");
  const [deleteTarget, setDeleteTarget] = useState<RecommendedQuestion | null>(null);
  const [tagTarget, setTagTarget] = useState<RecommendedQuestion | null>(null);

  // drag state
  const [dragIndex, setDragIndex] = useState<number | null>(null);
  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);

  // 名称 / 标签搜索
  const [search, setSearch] = useState("");
  const [tagIds, setTagIds] = useState<string[]>([]);

  const isFiltering = search.trim() !== "" || tagIds.length > 0;
  const needle = search.trim().toLowerCase();
  const visibleQuestions = isFiltering
    ? questions.filter((q) => {
        const matchesText =
          needle === "" ||
          q.title.toLowerCase().includes(needle) ||
          q.content.toLowerCase().includes(needle);
        const matchesTags =
          tagIds.length === 0 ||
          (q.tags ?? []).some((t) => tagIds.includes(t.id));
        return matchesText && matchesTags;
      })
    : questions;

  function openAdd() {
    setFormTitle("");
    setFormContent("");
    setDialog({ mode: "add" });
  }

  function openEdit(q: RecommendedQuestion) {
    setFormTitle(q.title);
    setFormContent(q.content);
    setDialog({ mode: "edit", question: q });
  }

  function closeDialog() {
    setDialog(null);
  }

  async function handleSave() {
    const title = formTitle.trim();
    const content = formContent.trim();
    if (!title || !content) {
      toast.error("标题和内容不能为空", darkToastOpts.error);
      return;
    }

    try {
      if (dialog?.mode === "add") {
        await createMutation.mutateAsync({
          title,
          content,
          sort_order: questions.length,
        });
        toast.success("问题已添加", darkToastOpts.success);
      } else if (dialog?.mode === "edit") {
        await updateMutation.mutateAsync({
          id: dialog.question.id,
          body: { title, content },
        });
        toast.success("问题已更新", darkToastOpts.success);
      }
      closeDialog();
    } catch (e) {
      toast.error(
        e instanceof Error ? e.message : "操作失败",
        darkToastOpts.error,
      );
    }
  }

  async function handleDelete(q: RecommendedQuestion) {
    try {
      await deleteMutation.mutateAsync(q.id);
      setDeleteTarget(null);
      toast.success("问题已删除", darkToastOpts.success);
    } catch (e) {
      toast.error(
        e instanceof Error ? e.message : "删除失败",
        darkToastOpts.error,
      );
    }
  }

  function handleDragStart(index: number) {
    setDragIndex(index);
  }

  function handleDragOver(e: React.DragEvent, index: number) {
    e.preventDefault();
    setDragOverIndex(index);
  }

  async function handleDrop(toIndex: number) {
    if (dragIndex === null || dragIndex === toIndex) {
      setDragIndex(null);
      setDragOverIndex(null);
      return;
    }
    const next = [...questions];
    const [moved] = next.splice(dragIndex, 1);
    next.splice(toIndex, 0, moved!);
    setDragIndex(null);
    setDragOverIndex(null);
    try {
      await reorderMutation.mutateAsync(next.map((q) => q.id));
    } catch {
      toast.error("排序保存失败", darkToastOpts.error);
    }
  }

  const isSaving =
    createMutation.isPending ||
    updateMutation.isPending ||
    deleteMutation.isPending ||
    reorderMutation.isPending;

  const darkToastOpts =
    theme === "dark"
      ? { success: successToastDarkOptions, error: errorToastDarkOptions }
      : { success: undefined, error: undefined };

  return (
    <div
      className={
        embedded
          ? "flex w-full flex-col gap-6"
          : "mx-auto flex w-full max-w-2xl flex-col gap-6 px-6 py-10"
      }
    >
      <div className="flex items-center justify-between">
        <div>
          <h1 className={embedded ? "text-base font-semibold" : "text-xl font-semibold"}>推荐问题配置</h1>
          <p className="text-muted-foreground mt-1 text-sm">
            管理首页展示的推荐问题，点击后直接发送到对话。拖拽可调整顺序。
          </p>
        </div>
        <Button onClick={openAdd} className="shrink-0" disabled={isLoading}>
          <PlusIcon className="mr-1.5 size-4" />
          添加问题
        </Button>
      </div>

      {!isLoading && !error && questions.length > 0 && (
        <TagSearchBar
          targetType="recommended_question"
          searchPlaceholder="搜索标题 / 内容"
          onSearchChange={setSearch}
          tagIds={tagIds}
          onTagIdsChange={setTagIds}
        />
      )}

      {isLoading ? (
        <div className="flex items-center justify-center py-16">
          <Loader2Icon className="text-muted-foreground size-6 animate-spin" />
        </div>
      ) : error ? (
        <div className="text-destructive flex flex-col items-center gap-2 rounded-xl border border-dashed py-16 text-sm">
          <p>加载失败：{error.message}</p>
        </div>
      ) : questions.length === 0 ? (
        <div className="text-muted-foreground flex flex-col items-center gap-3 rounded-xl border border-dashed py-16 text-sm dark:text-[#7FACF2]  dark:!border-[#213F62]">
          <p>暂无推荐问题</p>
          <Button  size="sm" onClick={openAdd}>
            <PlusIcon className="mr-1.5 size-4" />
            添加第一个问题
          </Button>
        </div>
      ) : visibleQuestions.length === 0 ? (
        <div className="text-muted-foreground flex flex-col items-center gap-3 rounded-xl border border-dashed py-16 text-sm dark:text-[#7FACF2] dark:!border-[#213F62]">
          <p>没有匹配的推荐问题</p>
        </div>
      ) : (
        <div className="flex flex-col gap-2 ">
          {visibleQuestions.map((q, index) => (
            <div
              key={q.id}
              draggable={!isFiltering}
              onDragStart={() => !isFiltering && handleDragStart(index)}
              onDragOver={(e) => !isFiltering && handleDragOver(e, index)}
              onDrop={() => !isFiltering && handleDrop(index)}
              onDragEnd={() => {
                setDragIndex(null);
                setDragOverIndex(null);
              }}
              className={`flex items-start gap-3 rounded-xl border bg-white px-4 py-3.5 transition-colors dark:bg-[#022248] dark:!border-[#213D5E] ${
                dragOverIndex === index && dragIndex !== index
                  ? "border-blue-400 bg-blue-50 dark:border-[#2580FF] dark:bg-[#0D2D54]"
                  : "border-[#e4e4e7]"
              }`}
            >
              <GripVerticalIcon
                className={`text-muted-foreground/40 mt-0.5 size-4 shrink-0 dark:text-[#566B7F] ${
                  isFiltering
                    ? "cursor-not-allowed opacity-40"
                    : "cursor-grab active:cursor-grabbing"
                }`}
              />
              <div className="min-w-0 flex-1">
                <div className="truncate text-sm font-medium text-[#18181b] dark:text-white">
                  {q.title}
                </div>
                <div className="text-muted-foreground mt-0.5 line-clamp-2 text-xs dark:text-[#7FACF2]">
                  {q.content}
                </div>
                {(q.tags?.length ?? 0) > 0 && (
                  <TagChipList tags={q.tags!} className="mt-2" />
                )}
              </div>
              <div className="flex shrink-0 items-center gap-1">
                <Button
                  variant="ghost"
                  size="icon"
                  className="size-7"
                  onClick={() => setTagTarget(q)}
                  disabled={isSaving}
                  title="打标签（按岗位分发）"
                >
                  <TagIcon className="size-3.5" />
                </Button>
                <Button
                  variant="ghost"
                  size="icon"
                  className="size-7"
                  onClick={() => openEdit(q)}
                  disabled={isSaving}
                >
                  <PencilIcon className="size-3.5" />
                </Button>
                <Button
                  variant="ghost"
                  size="icon"
                  className="text-destructive hover:text-destructive size-7"
                  onClick={() => setDeleteTarget(q)}
                  disabled={isSaving}
                >
                  <Trash2Icon className="size-3.5" />
                </Button>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* 添加 / 编辑弹窗 */}
      <Dialog open={dialog !== null} onOpenChange={(o) => !o && closeDialog()}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>
              {dialog?.mode === "add" ? "添加推荐问题" : "编辑推荐问题"}
            </DialogTitle>
          </DialogHeader>
          <div className="flex flex-col gap-4 py-2">
            <div className="flex flex-col gap-1.5">
              <p className="text-sm font-medium">卡片标题</p>
              <Input
                placeholder="例：市场分析报告"
                value={formTitle}
                onChange={(e) => setFormTitle(e.target.value)}
              />
            </div>
            <div className="flex flex-col gap-1.5">
              <p className="text-sm font-medium">发送内容</p>
              <Textarea
                placeholder="点击卡片后实际发送给 AI 的消息内容"
                rows={4}
                value={formContent}
                onChange={(e) => setFormContent(e.target.value)}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={closeDialog} disabled={isSaving}>
              取消
            </Button>
            <Button onClick={handleSave} disabled={isSaving}>
              {isSaving && <Loader2Icon className="mr-1.5 size-4 animate-spin" />}
              {dialog?.mode === "add" ? "添加" : "保存"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 打标签弹窗（按岗位分发推荐问题） */}
      {tagTarget && (
        <ResourceTagDialog
          open={tagTarget !== null}
          onOpenChange={(o) => !o && setTagTarget(null)}
          targetType="recommended_question"
          targetId={tagTarget.id}
          title={`为「${tagTarget.title}」打标签`}
        />
      )}

      {/* 删除确认弹窗 */}
      <Dialog
        open={deleteTarget !== null}
        onOpenChange={(o) => !o && setDeleteTarget(null)}
      >
        <DialogContent className="sm:max-w-sm">
          <DialogHeader>
            <DialogTitle>确认删除</DialogTitle>
          </DialogHeader>
          <p className="text-muted-foreground text-sm">
            确定要删除「{deleteTarget?.title}」吗？此操作不可撤销。
          </p>
          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => setDeleteTarget(null)}
              disabled={isSaving}
            >
              取消
            </Button>
            <Button
              variant="destructive"
              disabled={isSaving}
              onClick={() => deleteTarget && handleDelete(deleteTarget)}
            >
              {deleteMutation.isPending && (
                <Loader2Icon className="mr-1.5 size-4 animate-spin" />
              )}
              删除
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}