"use client";

import { useState } from "react";
import {
  Code2,
  Globe,
  Loader2,
  MessageSquare,
  Save,
  Sparkles,
  UserPlus,
} from "lucide-react";
import {
  apiUpdateSiteSettings,
  type PublicSettings,
} from "@/lib/api";
import { toast } from "@/lib/toast";

function Switch({
  checked,
  disabled,
  onChange,
  label,
}: {
  checked: boolean;
  disabled?: boolean;
  onChange: () => void;
  label: string;
}) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      aria-label={label}
      disabled={disabled}
      onClick={onChange}
      className="shrink-0 relative h-7 w-12 rounded-full transition-colors disabled:opacity-60"
      style={{ background: checked ? "var(--accent)" : "var(--line-2)" }}
    >
      <span
        className="absolute top-0.5 left-0.5 h-6 w-6 rounded-full bg-[var(--panel)] shadow transition-transform"
        style={{ transform: checked ? "translateX(1.25rem)" : "translateX(0)" }}
      />
    </button>
  );
}

export default function SettingsAdmin({ initial }: { initial: PublicSettings }) {
  const [siteName, setSiteName] = useState(initial.site_name);
  const [siteDescription, setSiteDescription] = useState(initial.site_description);
  const [allowRegister, setAllowRegister] = useState(initial.allow_register);
  const [allowComments, setAllowComments] = useState(initial.allow_comments !== false);
  const [codeAutoFold, setCodeAutoFold] = useState(
    initial.code_block_auto_fold !== false
  );
  const [foldLines, setFoldLines] = useState(
    Number.isFinite(initial.code_block_fold_lines) ? initial.code_block_fold_lines : 5
  );
  const [savedFoldLines, setSavedFoldLines] = useState(
    Number.isFinite(initial.code_block_fold_lines) ? initial.code_block_fold_lines : 5
  );
  const [savedName, setSavedName] = useState(initial.site_name);
  const [savedDesc, setSavedDesc] = useState(initial.site_description);
  const [saving, setSaving] = useState(false);
  const [togglingReg, setTogglingReg] = useState(false);
  const [togglingComments, setTogglingComments] = useState(false);
  const [togglingFold, setTogglingFold] = useState(false);
  const [savingFoldLines, setSavingFoldLines] = useState(false);
  const [uiAnimations, setUiAnimations] = useState(initial.ui_animations !== false);
  const [animCodeFold, setAnimCodeFold] = useState(initial.anim_code_fold !== false);
  const [animSmoothScroll, setAnimSmoothScroll] = useState(
    initial.anim_smooth_scroll !== false
  );
  const [animChrome, setAnimChrome] = useState(initial.anim_chrome !== false);
  const [togglingMotion, setTogglingMotion] = useState(false);

  const dirty =
    siteName.trim() !== savedName || siteDescription.trim() !== savedDesc;
  const foldLinesDirty = foldLines !== savedFoldLines;

  const saveIdentity = async () => {
    if (saving) return;
    const name = siteName.trim();
    if (!name) {
      toast("站点名称不能为空");
      return;
    }
    setSaving(true);
    try {
      const res = await apiUpdateSiteSettings({
        site_name: name,
        site_description: siteDescription.trim(),
      });
      setSiteName(res.site_name);
      setSiteDescription(res.site_description);
      setSavedName(res.site_name);
      setSavedDesc(res.site_description);
      toast("站点信息已保存", "ok");
    } catch (e) {
      toast(e instanceof Error ? e.message : "保存失败");
    } finally {
      setSaving(false);
    }
  };

  const toggleRegister = async () => {
    if (togglingReg) return;
    const next = !allowRegister;
    setTogglingReg(true);
    try {
      const res = await apiUpdateSiteSettings({ allow_register: next });
      setAllowRegister(res.allow_register);
      toast(res.allow_register ? "已开放注册" : "已关闭注册", "ok");
    } catch (e) {
      toast(e instanceof Error ? e.message : "保存失败");
    } finally {
      setTogglingReg(false);
    }
  };

  const toggleComments = async () => {
    if (togglingComments) return;
    const next = !allowComments;
    setTogglingComments(true);
    try {
      const res = await apiUpdateSiteSettings({ allow_comments: next });
      setAllowComments(res.allow_comments);
      toast(res.allow_comments ? "已开放评论" : "已关闭评论", "ok");
    } catch (e) {
      toast(e instanceof Error ? e.message : "保存失败");
    } finally {
      setTogglingComments(false);
    }
  };

  const toggleCodeFold = async () => {
    if (togglingFold) return;
    const next = !codeAutoFold;
    setTogglingFold(true);
    try {
      const res = await apiUpdateSiteSettings({ code_block_auto_fold: next });
      setCodeAutoFold(res.code_block_auto_fold);
      toast(
        res.code_block_auto_fold
          ? `已开启代码块自动折叠（超过 ${res.code_block_fold_lines} 行）`
          : "已关闭代码块自动折叠",
        "ok"
      );
    } catch (e) {
      toast(e instanceof Error ? e.message : "保存失败");
    } finally {
      setTogglingFold(false);
    }
  };

  const saveFoldLines = async () => {
    if (savingFoldLines) return;
    const raw = Math.round(Number(foldLines));
    const n = Number.isFinite(raw) ? Math.max(0, Math.min(100, raw)) : 5;
    setSavingFoldLines(true);
    try {
      const res = await apiUpdateSiteSettings({ code_block_fold_lines: n });
      setFoldLines(res.code_block_fold_lines);
      setSavedFoldLines(res.code_block_fold_lines);
      toast(
        res.code_block_fold_lines === 0
          ? "折叠预览已设为 0 行（无预览）"
          : `折叠阈值已设为超过 ${res.code_block_fold_lines} 行`,
        "ok"
      );
    } catch (e) {
      toast(e instanceof Error ? e.message : "保存失败");
    } finally {
      setSavingFoldLines(false);
    }
  };

  const toggleMotionField = async (
    key: "ui_animations" | "anim_code_fold" | "anim_smooth_scroll" | "anim_chrome",
    next: boolean
  ) => {
    if (togglingMotion) return;
    setTogglingMotion(true);
    try {
      const res = await apiUpdateSiteSettings({ [key]: next });
      setUiAnimations(res.ui_animations);
      setAnimCodeFold(res.anim_code_fold);
      setAnimSmoothScroll(res.anim_smooth_scroll);
      setAnimChrome(res.anim_chrome);
      const labels: Record<typeof key, [string, string]> = {
        ui_animations: ["已开启界面动画", "已关闭界面动画（全站减少动态效果）"],
        anim_code_fold: ["已开启代码折叠动画", "已关闭代码折叠动画"],
        anim_smooth_scroll: ["已开启平滑滚动", "已关闭平滑滚动"],
        anim_chrome: ["已开启装饰入场动画", "已关闭装饰入场动画"],
      };
      toast(next ? labels[key][0] : labels[key][1], "ok");
    } catch (e) {
      toast(e instanceof Error ? e.message : "保存失败");
    } finally {
      setTogglingMotion(false);
    }
  };

  return (
    <div className="max-w-3xl">
      <div className="mb-5">
        <h1
          className="text-[22px] sm:text-[26px] font-extrabold tracking-tight flex items-center gap-2.5"
          style={{ color: "var(--ink)" }}
        >
          <span
            className="w-9 h-9 rounded-xl flex items-center justify-center"
            style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
          >
            <Globe size={18} />
          </span>
          站点设置
        </h1>
        <p className="meta mt-1.5 text-[12.5px]">
          配置站点名称、简介与注册/评论开关；主题色请到「外观」页调整
        </p>
      </div>

      <section className="j13-module p-5 sm:p-6 mb-5">
        <h2 className="text-[15px] font-semibold mb-1" style={{ color: "var(--ink)" }}>
          基本信息
        </h2>
        <p className="meta text-[12.5px] mb-4">用于页眉品牌、页脚版权与 SEO 元信息</p>

        <label className="field-label" htmlFor="site-name">
          站点名称
        </label>
        <input
          id="site-name"
          className="field mb-4"
          maxLength={32}
          value={siteName}
          onChange={(e) => setSiteName(e.target.value)}
          placeholder="姜十三论坛"
        />

        <label className="field-label" htmlFor="site-desc">
          站点简介
        </label>
        <textarea
          id="site-desc"
          className="field min-h-[96px] mb-4"
          maxLength={160}
          value={siteDescription}
          onChange={(e) => setSiteDescription(e.target.value)}
          placeholder="一句话介绍社区定位…"
        />

        <div className="flex justify-end">
          <button
            type="button"
            className="btn btn-primary btn-sm"
            disabled={!dirty || saving}
            onClick={() => void saveIdentity()}
          >
            {saving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
            保存基本信息
          </button>
        </div>
      </section>

      <section className="j13-module p-5 sm:p-6 mb-5 flex items-start justify-between gap-4 flex-wrap">
        <div className="min-w-0 flex-1">
          <h2 className="text-[15px] font-semibold flex items-center gap-1.5" style={{ color: "var(--ink)" }}>
            <UserPlus size={15} /> 开放注册
          </h2>
          <p className="meta text-[12.5px] mt-1 leading-relaxed">
            关闭后，游客将无法提交注册；已有账号仍可登录。适用于内测或维护期。
          </p>
        </div>
        <Switch
          checked={allowRegister}
          disabled={togglingReg}
          onChange={() => void toggleRegister()}
          label="开放注册"
        />
      </section>

      <section className="j13-module p-5 sm:p-6 mb-5 flex items-start justify-between gap-4 flex-wrap">
        <div className="min-w-0 flex-1">
          <h2 className="text-[15px] font-semibold flex items-center gap-1.5" style={{ color: "var(--ink)" }}>
            <MessageSquare size={15} /> 开放评论
          </h2>
          <p className="meta text-[12.5px] mt-1 leading-relaxed">
            关闭后全站禁止发表新评论与回复，已有评论仍可浏览。适用于 ICP/IPC
            备案审核等合规需要；前台仅提示「暂停评论」，不会展示备案事由。
          </p>
        </div>
        <Switch
          checked={allowComments}
          disabled={togglingComments}
          onChange={() => void toggleComments()}
          label="开放评论"
        />
      </section>

      <section className="j13-module p-5 sm:p-6 mb-5">
        <div className="flex items-start justify-between gap-4 flex-wrap">
          <div className="min-w-0 flex-1">
            <h2 className="text-[15px] font-semibold flex items-center gap-1.5" style={{ color: "var(--ink)" }}>
              <Code2 size={15} /> 代码块自动折叠
            </h2>
            <p className="meta text-[12.5px] mt-1 leading-relaxed">
              开启后，帖子与评论中超过阈值行数的 Markdown 代码块默认折叠，读者可点「展开全部」。关闭则始终完整展示。
            </p>
          </div>
          <Switch
            checked={codeAutoFold}
            disabled={togglingFold}
            onChange={() => void toggleCodeFold()}
            label="代码块自动折叠"
          />
        </div>
        {codeAutoFold ? (
          <div className="mt-4 pt-4 border-t border-[var(--line)]">
            <label className="field-label" htmlFor="fold-lines">
              折叠行数阈值
            </label>
            <p className="meta text-[12.5px] mb-2.5 leading-relaxed">
              代码块行数超过该值时折叠；折叠后约露出同样行数。设为 0 表示无预览。范围 0–100，默认 5。
            </p>
            <div className="flex flex-wrap items-center gap-2.5">
              <input
                id="fold-lines"
                type="number"
                min={0}
                max={100}
                className="field w-24"
                value={foldLines}
                onChange={(e) => setFoldLines(Number(e.target.value))}
                aria-label="折叠行数阈值"
              />
              <span className="meta text-[12.5px]">行</span>
              <button
                type="button"
                className="btn btn-line btn-sm"
                disabled={!foldLinesDirty || savingFoldLines}
                onClick={() => void saveFoldLines()}
              >
                {savingFoldLines ? (
                  <Loader2 size={14} className="animate-spin" />
                ) : (
                  <Save size={14} />
                )}
                保存
              </button>
            </div>
          </div>
        ) : null}
      </section>

      <section className="j13-module p-5 sm:p-6 mb-5">
        <div className="flex items-start justify-between gap-4 flex-wrap">
          <div className="min-w-0 flex-1">
            <h2 className="text-[15px] font-semibold flex items-center gap-1.5" style={{ color: "var(--ink)" }}>
              <Sparkles size={15} /> 界面动画
            </h2>
            <p className="meta text-[12.5px] mt-1 leading-relaxed">
              总开关关闭后全站即时切换（等同减少动态效果）。系统若已开启「减少动态效果」，始终优先生效。开启总开关后可细调子项。
            </p>
          </div>
          <Switch
            checked={uiAnimations}
            disabled={togglingMotion}
            onChange={() => void toggleMotionField("ui_animations", !uiAnimations)}
            label="界面动画总开关"
          />
        </div>
        {uiAnimations ? (
          <div className="mt-4 pt-4 border-t border-[var(--line)] space-y-4">
            <div className="flex items-start justify-between gap-4 flex-wrap">
              <div className="min-w-0 flex-1">
                <p className="text-[13.5px] font-medium" style={{ color: "var(--ink)" }}>
                  代码折叠动画
                </p>
                <p className="meta text-[12.5px] mt-0.5 leading-relaxed">
                  代码块展开/收起的高度过渡与跟滚。
                </p>
              </div>
              <Switch
                checked={animCodeFold}
                disabled={togglingMotion}
                onChange={() => void toggleMotionField("anim_code_fold", !animCodeFold)}
                label="代码折叠动画"
              />
            </div>
            <div className="flex items-start justify-between gap-4 flex-wrap">
              <div className="min-w-0 flex-1">
                <p className="text-[13.5px] font-medium" style={{ color: "var(--ink)" }}>
                  平滑滚动
                </p>
                <p className="meta text-[12.5px] mt-0.5 leading-relaxed">
                  目录跳转、回顶、新内容提示等 scroll 行为。
                </p>
              </div>
              <Switch
                checked={animSmoothScroll}
                disabled={togglingMotion}
                onChange={() =>
                  void toggleMotionField("anim_smooth_scroll", !animSmoothScroll)
                }
                label="平滑滚动"
              />
            </div>
            <div className="flex items-start justify-between gap-4 flex-wrap">
              <div className="min-w-0 flex-1">
                <p className="text-[13.5px] font-medium" style={{ color: "var(--ink)" }}>
                  装饰入场
                </p>
                <p className="meta text-[12.5px] mt-0.5 leading-relaxed">
                  列表入场、Toast、点赞弹出、在线脉冲等装饰性动画。
                </p>
              </div>
              <Switch
                checked={animChrome}
                disabled={togglingMotion}
                onChange={() => void toggleMotionField("anim_chrome", !animChrome)}
                label="装饰入场"
              />
            </div>
          </div>
        ) : null}
      </section>
    </div>
  );
}