"use client";

import { useState, useEffect, useRef, useCallback } from "react";
import { useRouter } from "next/navigation";
import { ArrowLeft, CodeXml, Eye, EyeOff, Trash2 } from "lucide-react";
import { apiCreateSnippet, apiUpdateSnippet, apiDeleteSnippet, fetchSnippetLanguages, type SnippetInput, type SnippetVisibility } from "@/lib/api";
import { toast } from "@/lib/toast";
import { snippetPath, snippetsPath, type UrlStyle } from "@/lib/urlStyle";
import Modal from "@/components/Modal";
import SnippetLangSelect from "@/components/SnippetLangSelect";
import { hasAuthCookieHint } from "@/lib/cookies";
import { useSiteBrand } from "@/components/SiteBrandProvider";

const TITLE_MAX = 120;
const CODE_MAX = 64 * 1024; // 64KB
const DESC_MAX = 8 * 1024; // 8KB

const VISIBILITY_OPTIONS: { value: SnippetVisibility; label: string; desc: string }[] = [
  { value: "private", label: "私有", desc: "仅自己可见" },
  { value: "public", label: "公开", desc: "所有人可见，出现在广场" },
];

export default function SnippetEditor({
  mode,
  snippetId,
  initialTitle = "",
  initialLanguage = "plaintext",
  initialDescription = "",
  initialCode = "",
  initialVisibility = "private",
}: {
  mode: "create" | "edit";
  snippetId?: number;
  initialTitle?: string;
  initialLanguage?: string;
  initialDescription?: string;
  initialCode?: string;
  initialVisibility?: SnippetVisibility;
}) {
  const router = useRouter();
  const { url_style: urlStyle } = useSiteBrand();
  const [title, setTitle] = useState(initialTitle);
  const [language, setLanguage] = useState(initialLanguage);
  const [description, setDescription] = useState(initialDescription);
  const [code, setCode] = useState(initialCode);
  const [visibility, setVisibility] = useState<SnippetVisibility>(initialVisibility);
  const [languages, setLanguages] = useState<string[]>([]);
  const [loading, setLoading] = useState(false);
  const [deleteOpen, setDeleteOpen] = useState(false);
  const [deleting, setDeleting] = useState(false);
  const codeRef = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
    if (!hasAuthCookieHint()) {
      router.push("/login?redirect=/snippets/new");
      return;
    }
    fetchSnippetLanguages()
      .then((res) => setLanguages(res.languages))
      .catch(() => {});
  }, [router]);

  // Tab 键缩进
  const handleCodeKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === "Tab") {
      e.preventDefault();
      const el = e.currentTarget;
      const start = el.selectionStart;
      const end = el.selectionEnd;
      const newValue = code.substring(0, start) + "  " + code.substring(end);
      setCode(newValue);
      requestAnimationFrame(() => {
        el.selectionStart = el.selectionEnd = start + 2;
      });
    }
  };

  const codeBytes = new TextEncoder().encode(code).length;
  const descBytes = new TextEncoder().encode(description).length;

  const canSubmit =
    !loading &&
    title.trim().length > 0 &&
    code.trim().length > 0 &&
    codeBytes <= CODE_MAX &&
    descBytes <= DESC_MAX;

  const handleSubmit = async (e?: React.FormEvent) => {
    e?.preventDefault();
    if (!canSubmit) return;
    setLoading(true);
    const input: SnippetInput = {
      title: title.trim(),
      language,
      description: description.trim(),
      code: code.trim(),
      visibility,
    };
    try {
      if (mode === "create") {
        const res = await apiCreateSnippet(input);
        toast("创建成功", "ok");
        router.push(snippetPath(urlStyle, res.snippet.id));
      } else if (snippetId) {
        const res = await apiUpdateSnippet(snippetId, input);
        toast("已保存", "ok");
        router.push(snippetPath(urlStyle, res.snippet.id));
      }
    } catch (err) {
      toast(err instanceof Error ? err.message : "操作失败");
    } finally {
      setLoading(false);
    }
  };

  const handleDelete = async () => {
    if (!snippetId || deleting) return;
    setDeleting(true);
    try {
      await apiDeleteSnippet(snippetId);
      toast("已删除", "ok");
      router.push(snippetsPath(urlStyle));
    } catch (err) {
      toast(err instanceof Error ? err.message : "删除失败");
    } finally {
      setDeleting(false);
      setDeleteOpen(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="j13-compose-stage is-studio">
      <header className="j13-compose-toolbar">
        <div className="j13-compose-toolbar-lead">
          <button
            type="button"
            onClick={() => router.back()}
            className="j13-compose-back"
            aria-label="返回"
            data-tip="返回"
          >
            <ArrowLeft size={18} strokeWidth={2.2} />
          </button>
          <div className="j13-compose-toolbar-copy min-w-0">
            <h1 className="j13-compose-toolbar-title">
              {mode === "create" ? "新建片段" : "编辑片段"}
            </h1>
            <p className="j13-compose-toolbar-sub">
              {mode === "create" ? "保存一段可复用的代码" : "修改片段内容"}
            </p>
          </div>
        </div>
        <div className="j13-compose-toolbar-actions">
          {mode === "edit" && (
            <button
              type="button"
              onClick={() => setDeleteOpen(true)}
              className="btn btn-line btn-sm"
              style={{ color: "var(--danger)" }}
            >
              <Trash2 size={14} /> 删除
            </button>
          )}
          <button
            type="submit"
            disabled={!canSubmit}
            className="btn btn-primary min-w-[5.5rem] h-9 px-4 text-[13.5px] font-semibold"
          >
            {loading ? "保存中…" : mode === "create" ? "创建" : "保存"}
          </button>
        </div>
      </header>

      <div className="j13-compose-studio">
        <div className="j13-compose-studio-canvas">
          {/* 标题 */}
          <div className="j13-compose-title-row">
            <label className="sr-only" htmlFor="snippet-title">
              标题
            </label>
            <input
              id="snippet-title"
              type="text"
              value={title}
              onChange={(e) => setTitle(e.target.value.slice(0, TITLE_MAX))}
              required
              maxLength={TITLE_MAX}
              placeholder="片段标题"
              className="j13-compose-title"
              disabled={loading}
            />
            <span className="j13-compose-title-count tabular-nums">
              {title.length}/{TITLE_MAX}
            </span>
          </div>

          {/* 语言 + 可见性 */}
          <div className="flex flex-wrap items-center gap-3 px-4 sm:px-6 py-3">
            <div className="flex items-center gap-2">
              <CodeXml size={14} style={{ color: "var(--ink-3)" }} />
              <SnippetLangSelect
                value={language}
                onChange={setLanguage}
                languages={languages}
                allowAll={false}
                variant="editor"
                ariaLabel="编程语言"
                disabled={loading}
              />
            </div>

            <div className="flex items-center gap-1 rounded-full p-0.5" style={{ background: "var(--panel-2)" }}>
              {VISIBILITY_OPTIONS.map((opt) => (
                <button
                  key={opt.value}
                  type="button"
                  onClick={() => setVisibility(opt.value)}
                  className={`px-3 py-1 rounded-full text-[12px] font-medium transition-colors ${
                    visibility === opt.value ? "" : "hover:bg-[var(--panel)]"
                  }`}
                  style={
                    visibility === opt.value
                      ? { background: "var(--accent-soft)", color: "var(--accent)" }
                      : { color: "var(--ink-2)" }
                  }
                  disabled={loading}
                >
                  {opt.value === "public" ? <Eye size={12} className="inline mr-1" /> : <EyeOff size={12} className="inline mr-1" />}
                  {opt.label}
                </button>
              ))}
            </div>
            <span className="meta text-[11.5px]">
              {VISIBILITY_OPTIONS.find((o) => o.value === visibility)?.desc}
            </span>
          </div>

          {/* 代码编辑区 */}
          <div className="j13-compose-canvas">
            <label className="sr-only" htmlFor="snippet-code">
              代码
            </label>
            <textarea
              ref={codeRef}
              id="snippet-code"
              value={code}
              onChange={(e) => setCode(e.target.value)}
              onKeyDown={handleCodeKeyDown}
              placeholder="粘贴或输入代码…"
              className="w-full min-h-[320px] px-4 py-3 text-[13.5px] font-mono resize-y"
              style={{
                background: "var(--bg)",
                border: "1px solid var(--line)",
                color: "var(--ink)",
                borderRadius: "var(--r)",
                tabSize: 2,
              }}
              disabled={loading}
            />
            <div className="mt-1 flex justify-end">
              <span
                className="meta text-[11px] tabular-nums"
                style={codeBytes > CODE_MAX ? { color: "var(--danger)", fontWeight: 600 } : undefined}
              >
                {codeBytes > 1024 ? `${(codeBytes / 1024).toFixed(1)} KB` : `${codeBytes} B`} / 64 KB
              </span>
            </div>
          </div>

          {/* 描述 */}
          <div className="px-4 sm:px-6 pb-6">
            <label className="field-label" htmlFor="snippet-desc">
              描述（可选）
            </label>
            <textarea
              id="snippet-desc"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="用 Markdown 描述这段代码的用途、用法或注意事项…"
              rows={4}
              className="w-full rounded-lg px-4 py-3 text-[13.5px]"
              style={{
                background: "var(--bg)",
                border: "1px solid var(--line)",
                color: "var(--ink)",
              }}
              disabled={loading}
            />
            <div className="mt-1 flex justify-end">
              <span
                className="meta text-[11px] tabular-nums"
                style={descBytes > DESC_MAX ? { color: "var(--danger)", fontWeight: 600 } : undefined}
              >
                {descBytes > 1024 ? `${(descBytes / 1024).toFixed(1)} KB` : `${descBytes} B`} / 8 KB
              </span>
            </div>
          </div>
        </div>
      </div>

      <Modal
        open={deleteOpen}
        title="删除片段"
        description="删除后不可恢复，确定要删除这个代码片段吗？"
        onClose={() => setDeleteOpen(false)}
        dismissOnOverlay
        maxWidthClass="max-w-sm"
        footer={
          <>
            <button type="button" className="btn btn-line btn-sm" onClick={() => setDeleteOpen(false)}>
              取消
            </button>
            <button
              type="button"
              className="btn btn-primary btn-sm"
              style={{ background: "var(--danger)", borderColor: "var(--danger)" }}
              onClick={handleDelete}
              disabled={deleting}
            >
              {deleting ? "删除中…" : "确认删除"}
            </button>
          </>
        }
      >
        <p className="text-[13.5px]" style={{ color: "var(--ink-2)" }}>
          此操作不可撤销。
        </p>
      </Modal>
    </form>
  );
}