// ───────────────────────────────────────────────
// Settings Page (/(dashboard)/settings)
// ───────────────────────────────────────────────
// Route: /settings
// Purpose: Tabbed settings panel covering company
//   info, user preferences, theme choices, and
//   notification configuration.
// Layout: PageHeader + <Tabs> with 4 tab panels.
//   Each tab renders a dedicated settings form
//   component.
// ───────────────────────────────────────────────

"use client"

import { PageHeader } from "@/components/shared/page-header"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { CompanySettingsForm } from "@/components/settings/company-settings-form"
import { UserPreferencesForm } from "@/components/settings/user-preferences-form"
import { ThemeSettings } from "@/components/settings/theme-settings"
import { NotificationSettings } from "@/components/settings/notification-settings"
import { Building2, User, Palette, Bell } from "lucide-react"

/** Tab configuration: value, label, icon, and the component to render. */
const settingsTabs = [
  { value: "company", label: "Company", icon: Building2, component: CompanySettingsForm },
  { value: "preferences", label: "Preferences", icon: User, component: UserPreferencesForm },
  { value: "theme", label: "Theme", icon: Palette, component: ThemeSettings },
  { value: "notifications", label: "Notifications", icon: Bell, component: NotificationSettings },
]

/**
 * SettingsPage
 * ────────────
 * Renders a tabbed settings interface. Each tab
 * dynamically renders its associated form component.
 *
 * @returns Settings layout with navigation tabs.
 */
export default function SettingsPage() {
  return (
    <div className="space-y-4">
      <PageHeader
        title="Settings"
        description="Manage your CRM configuration and preferences"
      />

      {/* ── Tabbed settings sections ── */}
      <Tabs defaultValue="company" className="space-y-6">
        <TabsList>
          {settingsTabs.map((tab) => (
            <TabsTrigger key={tab.value} value={tab.value} className="gap-2">
              <tab.icon className="h-4 w-4" />
              {tab.label}
            </TabsTrigger>
          ))}
        </TabsList>
        {settingsTabs.map((tab) => (
          <TabsContent key={tab.value} value={tab.value}>
            <tab.component />
          </TabsContent>
        ))}
      </Tabs>
    </div>
  )
}
