"use client";

import { Loader2, Save } from "lucide-react";
import { useState } from "react";
import { AdminField, AdminSection } from "@/components/admin";
import { apiUpdateSiteSettings, type PublicSettings } from "@/lib/api";
import { BRAND_LIMITS, siteDocumentTitle } from "@/lib/brand";
import { toast } from "@/lib/toast";

export default function BasicIdentityPanel({
  initial,
  onSaved,
}: {
  initial: PublicSettings;
  onSaved?: (next: PublicSettings) => void;
}) {
  const [name, setName] = useState(initial.site_name);
  const [wordmark, setWordmark] = useState(initial.site_wordmark);
  const [slogan, setSlogan] = useState(initial.site_slogan);
  const [desc, setDesc] = useState(initial.site_description);
  const [saved, setSaved] = useState({
    name: initial.site_name,
    wordmark: initial.site_wordmark,
    slogan: initial.site_slogan,
    desc: initial.site_description,
  });
  const [saving, setSaving] = useState(false);

  const dirty =
    name.trim() !== saved.name ||
    wordmark.trim() !== saved.wordmark ||
    slogan.trim() !== saved.slogan ||
    desc.trim() !== saved.desc;

  const preview = siteDocumentTitle(name, slogan);

  const save = async () => {
    if (saving) return;
    const nextName = name.trim();
    if (!nextName) {
      toast("显示名称不能为空");
      return;
    }
    setSaving(true);
    try {
      const res = await apiUpdateSiteSettings({
        site_name: nextName,
        site_wordmark: wordmark.trim(),
        site_slogan: slogan.trim(),
        site_description: desc.trim(),
      });
      setName(res.site_name);
      setWordmark(res.site_wordmark);
      setSlogan(res.site_slogan);
      setDesc(res.site_description);
      setSaved({
        name: res.site_name,
        wordmark: res.site_wordmark,
        slogan: res.site_slogan,
        desc: res.site_description,
      });
      onSaved?.(res);
      toast("基本信息已保存", "ok");
    } catch (e) {
      toast(e instanceof Error ? e.message : "保存失败");
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="admin-settings-grid">
      <AdminSection title="名称与字标" description="显示名称用于版权与标题；无 Logo 时页眉改用字标">
        <div className="flex flex-col gap-4">
          <AdminField
            id="site-name"
            label="显示名称"
            maxLength={32}
            value={name}
            onChange={setName}
            placeholder="姜十三论坛"
          />
          <AdminField
            id="site-wordmark"
            label="字标"
            hint="留空则回退为显示名称，最多 16 字"
            maxLength={BRAND_LIMITS.wordmark}
            value={wordmark}
            onChange={setWordmark}
            placeholder="姜十三"
          />
        </div>
      </AdminSection>
      <AdminSection
        title="标语与简介"
        description="标语出现在浏览器标题和页眉副标题"
        extra={
          <button
            type="button"
            className="btn btn-primary btn-sm"
            disabled={!dirty || saving}
            onClick={() => void save()}
          >
            {saving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
            保存
          </button>
        }
      >
        <div className="flex flex-col gap-4">
          <AdminField
            id="site-slogan"
            label="标语"
            maxLength={BRAND_LIMITS.slogan}
            value={slogan}
            onChange={setSlogan}
            placeholder="技术分享与讨论"
          />
          <p className="meta text-[12.5px]">
            标题预览：<span style={{ color: "var(--ink)" }}>{preview}</span>
          </p>
          <AdminField
            id="site-desc"
            label="简介"
            as="textarea"
            minHeight="96px"
            maxLength={160}
            value={desc}
            onChange={setDesc}
            placeholder="一句话介绍社区定位…"
          />
        </div>
      </AdminSection>
    </div>
  );
}