"use client";

import * as React from "react";
import { Palette, Save } from "lucide-react";
import { toast } from "sonner";

import { ListPageCard } from "@/app/dashboard/_components";
import { SettingsPanelAppearance } from "@/app/customer/[tenant]/settings/_components/settings-panel-appearance";
import { Button } from "@/components/ui/button";
import {
  applyUiPrefsToStore,
  fetchUiPrefs,
  resetUiPrefs,
  saveUiPrefs,
  useUiPrefsStoreSetters,
} from "@/app/dashboard/_lib/ui-prefs-client";
import { toastApiError, errorMessageOr } from "@/lib/toast-api-error";
import { previewUiPrefsLocally } from "@/lib/preferences/apply-ui-prefs-locally";
import { PREFERENCE_DEFAULTS, type PreferenceValueMap } from "@/lib/preferences/preferences-config";

export function DashboardAppearanceSettingsPage() {
  const [draft, setDraft] = React.useState<PreferenceValueMap>({ ...PREFERENCE_DEFAULTS });
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState<string | null>(null);
  const [isSaving, setIsSaving] = React.useState(false);
  const [isRestoring, setIsRestoring] = React.useState(false);

  const setters = useUiPrefsStoreSetters();

  const applyToApp = React.useCallback(
    (prefs: PreferenceValueMap) => {
      applyUiPrefsToStore(prefs, setters);
    },
    [setters],
  );

  React.useEffect(() => {
    let cancelled = false;
    async function load() {
      setLoading(true);
      setError(null);
      try {
        const prefs = await fetchUiPrefs();
        if (cancelled) return;
        setDraft(prefs);
      } catch (err) {
        if (!cancelled) {
          setError(errorMessageOr(err, "Appearance settings could not be loaded."));
        }
      } finally {
        if (!cancelled) setLoading(false);
      }
    }
    void load();
    return () => {
      cancelled = true;
    };
  }, []);

  const handleSave = async () => {
    setIsSaving(true);
    try {
      const prefs = await saveUiPrefs(draft);
      setDraft(prefs);
      applyToApp(prefs);
      toast.success("Appearance settings saved");
    } catch (err) {
      toastApiError(err, "Unable to save appearance settings.");
    } finally {
      setIsSaving(false);
    }
  };

  const handleRestore = async () => {
    setIsRestoring(true);
    try {
      const prefs = await resetUiPrefs();
      setDraft(prefs);
      applyToApp(prefs);
      toast.success("Appearance defaults restored");
    } catch (err) {
      toastApiError(err, "Unable to restore appearance defaults.");
    } finally {
      setIsRestoring(false);
    }
  };

  return (
    <ListPageCard
      icon={Palette}
      title="Appearance"
      description="Theme, fonts, and layout preferences for your admin account."
      breadcrumb={[
        { label: "Settings", href: "/dashboard/settings/common" },
        { label: "Appearance" },
      ]}
    >
      <div className="space-y-6">
        <SettingsPanelAppearance
          draft={draft}
          isLoading={loading}
          errorMessage={error}
          onChange={(patch) => {
            setDraft((prev) => {
              const next = { ...prev, ...patch };
              previewUiPrefsLocally(next);
              return next;
            });
          }}
        />

        <div className="flex flex-wrap items-center gap-3 border-t pt-4">
          <Button
            type="button"
            variant="outline"
            disabled={isRestoring || loading || isSaving}
            onClick={() => void handleRestore()}
          >
            {isRestoring ? "Restoring…" : "Restore Defaults"}
          </Button>
          <Button
            className="gap-2"
            disabled={isSaving || isRestoring || loading}
            onClick={() => void handleSave()}
          >
            <Save className="size-4" />
            {isSaving ? "Saving…" : "Save changes"}
          </Button>
        </div>
      </div>
    </ListPageCard>
  );
}