"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import {
  Palette,
  Check,
  Loader2,
  Save,
  Undo2,
  RotateCcw,
  ChevronRight,
  Pipette,
} from "lucide-react";
import { apiUpdateSiteSettings } from "@/lib/api";
import { toast } from "@/lib/toast";
import {
  ACCENT_PRESETS,
  DEFAULT_ACCENT,
  applyAccentTheme,
  deriveAccentPair,
  findPreset,
  normalizeHex,
} from "@/lib/theme";

// 后台「外观设置」：站点主题色预设 + 自定义取色 + 实时预览。
// 修改时立即对整页实时预览（仅本地），保存后才写库并对所有用户生效。
export default function AppearanceAdmin({ initialAccent }: { initialAccent: string }) {
  const router = useRouter();
  // 已保存值：空串=内置默认（靛蓝）
  const [savedHex, setSavedHex] = useState(initialAccent || "");
  const [draft, setDraft] = useState(initialAccent || DEFAULT_ACCENT);
  const [saving, setSaving] = useState(false);
  const savedRef = useRef(savedHex);
  savedRef.current = savedHex;

  const normalized = useMemo(() => normalizeHex(draft), [draft]);
  const pair = useMemo(
    () => (normalized ? deriveAccentPair(normalized) : null),
    [normalized]
  );
  const preset = useMemo(() => (normalized ? findPreset(normalized) : null), [normalized]);
  // 保存提交值：默认靛蓝落库为空串（前端不注入覆盖，保持内置令牌单一来源）
  const submitHex = normalized && normalized !== DEFAULT_ACCENT ? normalized : "";
  const dirty = (savedHex || DEFAULT_ACCENT) !== (normalized || "");
  const invalid = draft.trim() !== "" && !normalized;

  // 实时预览：合法颜色即应用；离开页面时还原为已保存值，避免未保存预览残留
  useEffect(() => {
    if (normalized) applyAccentTheme(normalized);
    return () => {
      applyAccentTheme(savedRef.current || null);
    };
  }, [normalized]);

  const handleSave = async () => {
    if (!normalized || saving) return;
    setSaving(true);
    try {
      const res = await apiUpdateSiteSettings(submitHex);
      const next = (res.accent || "").toLowerCase();
      setSavedHex(next);
      applyAccentTheme(next || null);
      router.refresh();
      toast(next ? "主题色已保存并对全站生效" : "已恢复默认主题色");
    } catch (e) {
      toast(e instanceof Error ? e.message : "保存失败", "error");
      applyAccentTheme(savedRef.current || null);
    } finally {
      setSaving(false);
    }
  };

  const discard = () => {
    setDraft(savedHex || DEFAULT_ACCENT);
    applyAccentTheme(savedHex || null);
  };

  return (
    <div className="max-w-3xl mx-auto">
      {/* 面包屑 */}
      <nav className="meta mb-5 flex items-center gap-1.5 text-[13px]">
        <Link href="/" className="hover:text-[var(--accent)] transition-colors">首页</Link>
        <ChevronRight size={13} />
        <span style={{ color: "var(--accent)" }}>外观设置</span>
      </nav>

      <header className="panel p-6 sm:p-7 mb-5 flex items-center gap-4">
        <span
          className="w-12 h-12 rounded-2xl flex items-center justify-center shrink-0"
          style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
        >
          <Palette size={24} />
        </span>
        <div>
          <h1 className="text-xl font-extrabold" style={{ color: "var(--ink)" }}>外观设置</h1>
          <p className="meta mt-1 text-[13px]">配置站点主题色，全站按钮、链接、选中态会统一联动</p>
        </div>
      </header>

      {/* 预设色板 */}
      <section className="j13-module p-5 sm:p-6 mb-5">
        <h2 className="text-[15px] font-extrabold mb-1" style={{ color: "var(--ink)" }}>
          预设主题色
        </h2>
        <p className="meta text-[12.5px] mb-4">浅/暗两套色板均已调校，保证文字对比度达标</p>
        <div className="grid grid-cols-3 sm:grid-cols-6 gap-3">
          {ACCENT_PRESETS.map((p) => {
            const active = normalized === p.light;
            const isDefault = p.light === DEFAULT_ACCENT;
            return (
              <button
                key={p.key}
                type="button"
                onClick={() => setDraft(p.light)}
                className="group flex flex-col items-center gap-2 py-3 rounded-[var(--r-sm)] border transition-colors"
                style={{
                  borderColor: active ? "var(--accent)" : "var(--line)",
                  background: active ? "var(--accent-soft)" : "var(--panel)",
                  cursor: "pointer",
                }}
                aria-pressed={active}
                title={isDefault ? `${p.name}（默认）` : p.name}
              >
                <span className="relative flex items-center justify-center">
                  {/* 上半圆=浅色模式，下半圆=暗色模式 */}
                  <span className="w-9 h-9 rounded-full overflow-hidden grid grid-rows-2 border-2 border-[var(--panel)] shadow-sm">
                    <span style={{ background: p.light }} />
                    <span style={{ background: p.dark }} />
                  </span>
                  {active && (
                    <span
                      className="absolute -bottom-1 -right-1 min-w-[18px] min-h-[18px] w-[18px] h-[18px] rounded-full flex items-center justify-center"
                      style={{ background: "var(--accent)", color: "var(--accent-on)" }}
                    >
                      <Check size={11} strokeWidth={3} />
                    </span>
                  )}
                </span>
                <span
                  className="text-[12px] font-bold leading-none"
                  style={{ color: active ? "var(--accent)" : "var(--ink-2)" }}
                >
                  {p.name}
                </span>
              </button>
            );
          })}
        </div>
      </section>

      {/* 自定义颜色 */}
      <section className="j13-module p-5 sm:p-6 mb-5">
        <h2 className="text-[15px] font-extrabold mb-1 flex items-center gap-1.5" style={{ color: "var(--ink)" }}>
          <Pipette size={15} /> 自定义颜色
        </h2>
        <p className="meta text-[12.5px] mb-4">
          取色器选色或输入 HEX 值；浅色下对比度过低时会自动校正，保证按钮与文字可读
        </p>
        <div className="flex flex-wrap items-center gap-3">
          {/* 原生取色器 */}
          <label
            className="relative w-12 h-12 rounded-[var(--r-sm)] overflow-hidden border cursor-pointer shrink-0"
            style={{ borderColor: "var(--line-2)" }}
            title="打开取色器"
          >
            <input
              type="color"
              className="absolute inset-0 w-[200%] h-[200%] -translate-x-1/4 -translate-y-1/4 cursor-pointer border-0 p-0 bg-transparent"
              value={normalized || DEFAULT_ACCENT}
              onChange={(e) => setDraft(e.target.value)}
              aria-label="自定义主题色取色器"
            />
          </label>
          {/* HEX 文本输入 */}
          <div className="flex flex-col gap-1">
            <div className="flex items-center rounded-[var(--r-sm)] border bg-[var(--panel)] px-3 h-12 font-mono text-[14px] w-40"
              style={{ borderColor: invalid ? "var(--danger)" : "var(--line-2)" }}
            >
              <span style={{ color: "var(--ink-3)" }}>#</span>
              <input
                value={draft.startsWith("#") ? draft.slice(1) : draft}
                onChange={(e) => setDraft("#" + e.target.value.replace(/[^0-9a-fA-F#]/g, ""))}
                className="flex-1 min-w-0 bg-transparent outline-none ml-1 uppercase"
                style={{ color: "var(--ink)" }}
                maxLength={7}
                spellCheck={false}
                aria-label="主题色 HEX 值"
              />
            </div>
          </div>
          {pair && (
            <div className="flex items-center gap-2 text-[12px]" style={{ color: "var(--ink-3)" }}>
              <span className="inline-flex items-center gap-1.5">
                <span className="w-3.5 h-3.5 rounded-full border" style={{ background: pair.light, borderColor: "var(--line)" }} />
                浅色 {pair.light}
              </span>
              <span className="inline-flex items-center gap-1.5">
                <span className="w-3.5 h-3.5 rounded-full border" style={{ background: pair.dark, borderColor: "var(--line)" }} />
                暗色 {pair.dark}
              </span>
            </div>
          )}
        </div>
        {invalid && (
          <p className="mt-2.5 text-[12.5px]" style={{ color: "var(--danger)" }}>
            颜色格式无效，请输入 6 位 HEX 值（如 3B5BDB）
          </p>
        )}
        {pair?.adjusted && (
          <p className="mt-2.5 text-[12.5px]" style={{ color: "var(--gold)" }}>
            该颜色与白底对比度不足，浅色模式已自动校正为 {pair.light}（暗色模式同步派生 {pair.dark}）
          </p>
        )}
        {preset && preset.light === DEFAULT_ACCENT && (
          <p className="mt-2.5 text-[12.5px] meta">当前为内置默认色，保存时会清除自定义配置</p>
        )}
      </section>

      {/* 实时预览（整页已实时换肤，此处展示典型组件） */}
      <section className="j13-module p-5 sm:p-6 mb-6">
        <h2 className="text-[15px] font-extrabold mb-4" style={{ color: "var(--ink)" }}>实时预览</h2>
        <div className="rounded-[var(--r-sm)] border p-4 space-y-4" style={{ borderColor: "var(--line)", background: "var(--bg)" }}>
          <div className="flex flex-wrap items-center gap-2.5">
            <button type="button" className="btn btn-primary btn-sm">
              <Save size={14} /> 主按钮
            </button>
            <button type="button" className="btn btn-line btn-sm">次要按钮</button>
            <a className="text-[13px] font-bold" style={{ color: "var(--accent)" }} href="#preview" onClick={(e) => e.preventDefault()}>
              文字链接示例
            </a>
          </div>
          <div className="flex flex-wrap items-center gap-2">
            <span className="j13-tab" aria-selected="false">未选中</span>
            <span className="j13-tab" aria-selected="true">选中标签</span>
            <span
              className="inline-flex items-center rounded-full px-3.5 py-2 text-[13.5px] font-semibold"
              style={{ background: "var(--nav-active-bg)", color: "var(--nav-active-ink)" }}
            >
              导航选中态
            </span>
          </div>
          <div className="max-w-xs">
            <div className="j13-bcard" aria-current="page">
              <span className="j13-bcard-ico" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}>
                <Palette size={16} />
              </span>
              <span className="j13-bcard-name text-[13px] font-bold flex-1">选中的板块卡片</span>
            </div>
          </div>
        </div>
      </section>

      {/* 操作栏 */}
      <div className="flex items-center justify-between gap-3 sticky bottom-5 panel !p-3.5 pl-5 z-10">
        <p className="text-[12.5px] meta hidden sm:block">
          {dirty ? "有未保存的改动，整页正处于实时预览状态" : "设置已是保存状态"}
        </p>
        <div className="flex items-center gap-2.5 ml-auto">
          {dirty && (
            <button type="button" className="btn btn-line btn-sm" onClick={discard}>
              <Undo2 size={14} /> 撤销改动
            </button>
          )}
          <button
            type="button"
            className="btn btn-line btn-sm"
            onClick={() => {
              setDraft(DEFAULT_ACCENT);
            }}
          >
            <RotateCcw size={14} /> 恢复默认
          </button>
          <button
            type="button"
            className="btn btn-primary btn-sm"
            onClick={handleSave}
            disabled={!normalized || saving || !dirty}
          >
            {saving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
            保存并全站生效
          </button>
        </div>
      </div>
    </div>
  );
}