"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import { useAuthStore } from "@/lib/stores/auth.store";
import { PageHeader } from "@/components/layout/page-header";
import { SettingsNav } from "@/components/settings/settings-nav";
import { SettingsAppearancePanel } from "@/components/settings/settings-appearance-panel";
import { CafeDiscoverProfilePanel } from "@/components/discover/cafe-discover-profile-panel";
import { CafePublicProfilePanel } from "@/components/discover/cafe-public-profile-panel";
import { SettingsShopPanel } from "@/components/settings/settings-shop-panel";
import { SettingsTerminalsPanel } from "@/components/settings/settings-terminals-panel";
import { SettingsPrinterPanel } from "@/components/settings/settings-printer-panel";
import { SettingsPrintTestPanel } from "@/components/settings/settings-print-test-panel";
import {
  DEFAULT_SETTINGS_LEAF,
  groupForLeaf,
  type SettingsGroupId,
  type SettingsLeafId,
} from "@/components/settings/settings-types";

const LEAF_PAGE_TITLE: Record<SettingsLeafId, string> = {
  "shop-general": "nav.shopGeneral",
  "shop-appearance": "nav.shopAppearance",
  "shop-discover": "nav.shopDiscover",
  "printer-config": "nav.printerSettings",
  "print-test": "nav.printTest",
};

export function SettingsScreen() {
  const t = useTranslations("settings");
  const cafeId = useAuthStore((s) => s.user?.cafeId);
  const [activeLeaf, setActiveLeaf] = useState<SettingsLeafId>(DEFAULT_SETTINGS_LEAF);
  const [expandedGroup, setExpandedGroup] = useState<SettingsGroupId>("shop");

  const selectLeaf = (leaf: SettingsLeafId) => {
    setActiveLeaf(leaf);
    setExpandedGroup(groupForLeaf(leaf));
  };

  const toggleGroup = (group: SettingsGroupId) => {
    setExpandedGroup((prev) => (prev === group ? prev : group));
    const firstChild = group === "shop" ? "shop-general" : "printer-config";
    if (groupForLeaf(activeLeaf) !== group) {
      selectLeaf(firstChild);
    }
  };

  if (!cafeId) return null;

  const pageTitle = t(LEAF_PAGE_TITLE[activeLeaf]);

  return (
    <div className="space-y-6">
      <PageHeader title={t("title")} subtitle={t("subtitle")} />

      <div className="flex flex-col gap-6 md:flex-row md:items-start md:gap-8">
        <SettingsNav
          activeLeaf={activeLeaf}
          expandedGroup={expandedGroup}
          onSelectLeaf={selectLeaf}
          onToggleGroup={toggleGroup}
        />

        <div className="min-w-0 flex-1 space-y-4">
          <p className="pb-0.5 text-[11px] font-medium uppercase tracking-[0.06em] text-muted-foreground">
            {pageTitle}
          </p>

          {activeLeaf === "shop-general" ? (
            <div className="space-y-4">
              <SettingsShopPanel cafeId={cafeId} />
              <SettingsTerminalsPanel />
            </div>
          ) : null}

          {activeLeaf === "shop-appearance" ? (
            <SettingsAppearancePanel cafeId={cafeId} />
          ) : null}

          {activeLeaf === "shop-discover" ? (
            <div className="space-y-6">
              <CafeDiscoverProfilePanel cafeId={cafeId} mode="merchant" />
              <CafePublicProfilePanel cafeId={cafeId} />
            </div>
          ) : null}

          {activeLeaf === "printer-config" ? (
            <SettingsPrinterPanel
              cafeId={cafeId}
              onOpenPrintTest={() => selectLeaf("print-test")}
            />
          ) : null}

          {activeLeaf === "print-test" ? (
            <SettingsPrintTestPanel
              cafeId={cafeId}
              onOpenPrinterSettings={() => selectLeaf("printer-config")}
            />
          ) : null}
        </div>
      </div>
    </div>
  );
}