"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 { CustomFieldsManager } from "@/components/settings/custom-fields-manager"
import { LeadScoringSettings } from "@/components/settings/lead-scoring-settings"
import { Building2, User, Palette, Bell, ListChecks, Gauge } from "lucide-react"

export default function SettingsPage() {
  const tabs = [
    { 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 },
    { value: "custom-fields", label: "Custom Fields", icon: ListChecks, component: CustomFieldsManager },
    { value: "lead-scoring", label: "Lead Scoring", icon: Gauge, component: LeadScoringSettings },
  ]

  return (
    <div className="space-y-4">
      <PageHeader
        title="Settings"
        description="Manage your CRM configuration and preferences"
      />

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