"use client";

import { useCallback, useState } from "react";
import ConfirmDialog from "@/components/ConfirmDialog";
import useUnsavedGuard from "@/hooks/useUnsavedGuard";
import BasicIdentityPanel from "./BasicIdentityPanel";
import BrandSeoPanel from "./BrandSeoPanel";
import FooterLinksPanel from "./FooterLinksPanel";
import HeaderNavPanel from "./HeaderNavPanel";
import MobileTabBarPanel from "./MobileTabBarPanel";
import UrlStylePanel from "./UrlStylePanel";
import type { PublicSettings } from "@/lib/api";

export default function BasicSettings({ initial }: { initial: PublicSettings }) {
  const [live, setLive] = useState(initial);
  const [basicDirty, setBasicDirty] = useState(false);
  const [brandDirty, setBrandDirty] = useState(false);
  const [seoDirty, setSeoDirty] = useState(false);
  const [urlStyleDirty, setUrlStyleDirty] = useState(false);
  const [mobileTabsDirty, setMobileTabsDirty] = useState(false);
  const [headerNavDirty, setHeaderNavDirty] = useState(false);
  const dirty = basicDirty || brandDirty || seoDirty || urlStyleDirty || mobileTabsDirty || headerNavDirty;
  const leave = useUnsavedGuard(dirty);

  const onBasicDirty = useCallback((d: boolean) => setBasicDirty(d), []);
  const onBrandDirty = useCallback((d: boolean) => setBrandDirty(d), []);
  const onSeoDirty = useCallback((d: boolean) => setSeoDirty(d), []);
  const onUrlStyleDirty = useCallback((d: boolean) => setUrlStyleDirty(d), []);
  const onMobileTabsDirty = useCallback((d: boolean) => setMobileTabsDirty(d), []);
  const onHeaderNavDirty = useCallback((d: boolean) => setHeaderNavDirty(d), []);

  return (
    <div className="admin-settings-stack">
      <BasicIdentityPanel initial={live} onSaved={setLive} onDirtyChange={onBasicDirty} />
      <BrandSeoPanel initial={live} onSaved={setLive} onDirtyChange={onBrandDirty} />
      <UrlStylePanel initial={live} onSaved={setLive} onDirtyChange={onUrlStyleDirty} />
      <HeaderNavPanel initial={live} onSaved={setLive} onDirtyChange={onHeaderNavDirty} />
      <MobileTabBarPanel initial={live} onSaved={setLive} onDirtyChange={onMobileTabsDirty} />
      <FooterLinksPanel initial={live} onSaved={setLive} onDirtyChange={onSeoDirty} />
      <ConfirmDialog
        open={leave.leaveOpen}
        title="有未保存的修改"
        message="离开后，当前保存单元里尚未写入的修改会丢失。确定离开？"
        confirmLabel="离开"
        danger
        onCancel={leave.cancelLeave}
        onConfirm={leave.confirmLeave}
      />
    </div>
  );
}