"use client"

import { useUserInterfaceStore } from "@/lib/stores/user-interface-store"
import { SubscriptionsSettings } from "./subscriptions-settings"
import { FoldersSettings } from "./folders-settings"
import { MutedPhrasesSettings } from "./muted-phrases-settings"
import { CustomFeedsSettings } from "./custom-feeds-settings"
import { ImportExportSettings } from "./import-export-settings"
import { AppearanceSettings } from "./appearance-settings"
import { AccountSettings } from "./account-settings"
import { BillingSettings } from "./billing-settings"
import { ApiSettings } from "./api-settings"
import { DangerZoneSettings } from "./danger-zone-settings"

const TABS = [
  { key: "subscriptions", label: "subscriptions" },
  { key: "folders", label: "folders" },
  { key: "muted-phrases", label: "muted phrases" },
  { key: "custom-feeds", label: "custom feeds" },
  { key: "import-export", label: "import / export" },
  { key: "appearance", label: "appearance" },
  { key: "account", label: "account" },
  { key: "billing", label: "billing" },
  { key: "api", label: "api" },
  { key: "danger", label: "danger zone" },
] as const

export function SettingsShell() {
  const activeTab = useUserInterfaceStore((state) => state.activeSettingsTab)
  const setActiveTab = useUserInterfaceStore(
    (state) => state.setActiveSettingsTab
  )

  return (
    <div className="flex h-full flex-col">
      <header className="flex items-center border-b border-border px-4 py-3">
        <h1 className="text-text-primary">settings</h1>
      </header>
      <nav className="border-b border-border">
        <select
          value={activeTab}
          onChange={(event) => setActiveTab(event.target.value as typeof activeTab)}
          className="w-full border-none bg-background-primary px-4 py-2 text-text-primary outline-none md:hidden"
        >
          {TABS.map((tab) => (
            <option key={tab.key} value={tab.key}>
              {tab.label}
            </option>
          ))}
        </select>
        <div className="hidden md:flex">
          {TABS.map((tab) => (
            <button
              key={tab.key}
              onClick={() => setActiveTab(tab.key)}
              className={`shrink-0 px-4 py-2 transition-colors ${
                activeTab === tab.key
                  ? "border-b-2 border-text-primary text-text-primary"
                  : "text-text-dim hover:text-text-secondary"
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>
      </nav>
      <div className="flex-1 overflow-y-auto">
        <div className="max-w-4xl">
          {activeTab === "subscriptions" && <SubscriptionsSettings />}
          {activeTab === "folders" && <FoldersSettings />}
          {activeTab === "muted-phrases" && <MutedPhrasesSettings />}
          {activeTab === "custom-feeds" && <CustomFeedsSettings />}
          {activeTab === "import-export" && <ImportExportSettings />}
          {activeTab === "appearance" && <AppearanceSettings />}
          {activeTab === "account" && <AccountSettings />}
          {activeTab === "billing" && <BillingSettings />}
          {activeTab === "api" && <ApiSettings />}
          {activeTab === "danger" && <DangerZoneSettings />}
        </div>
      </div>
    </div>
  )
}