"use client";

/**
 * Settings page — tabbed layout: Profile, Workspace, Notifications,
 * Team, Billing, Usage. Each tab is a separate component.
 */

import { useState } from "react";
import { User, Building2, Bell, Users, CreditCard, BarChart3, Palette } from "lucide-react";

import ProfileTab from "@/components/settings/profile-tab";
import WorkspaceTab from "@/components/settings/workspace-tab";
import NotificationsTab from "@/components/settings/notifications-tab";
import TeamTab from "@/components/settings/team-tab";
import BillingTab from "@/components/settings/billing-tab";
import UsageTab from "@/components/settings/usage-tab";
import WhiteLabelTab from "@/components/settings/white-label-tab";

const TABS = [
  { id: "profile", label: "Profile", icon: User },
  { id: "workspace", label: "Workspace", icon: Building2 },
  { id: "notifications", label: "Notifications", icon: Bell },
  { id: "team", label: "Team", icon: Users },
  { id: "billing", label: "Billing", icon: CreditCard },
  { id: "usage", label: "Usage", icon: BarChart3 },
  { id: "white-label", label: "White-Label", icon: Palette },
] as const;

type TabId = (typeof TABS)[number]["id"];

export default function SettingsPage() {
  const [tab, setTab] = useState<TabId>("profile");

  return (
    <div className="max-w-4xl space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-slate-900">Settings</h1>
        <p className="text-slate-500 text-sm mt-1">Manage your account, workspace, and preferences</p>
      </div>

      {/* Tab bar */}
      <div className="flex items-center gap-1 border-b border-slate-200 overflow-x-auto">
        {TABS.map((t) => {
          const Icon = t.icon;
          const active = tab === t.id;
          return (
            <button
              key={t.id}
              onClick={() => setTab(t.id)}
              className={`flex items-center gap-1.5 px-4 py-2.5 text-sm font-semibold whitespace-nowrap border-b-2 transition-colors ${
                active
                  ? "border-slate-900 text-slate-900"
                  : "border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300"
              }`}
            >
              <Icon className="w-3.5 h-3.5" />
              {t.label}
            </button>
          );
        })}
      </div>

      {/* Tab content */}
      {tab === "profile" && <ProfileTab />}
      {tab === "workspace" && <WorkspaceTab />}
      {tab === "notifications" && <NotificationsTab />}
      {tab === "team" && <TeamTab />}
      {tab === "billing" && <BillingTab />}
      {tab === "usage" && <UsageTab />}
      {tab === "white-label" && <WhiteLabelTab />}
    </div>
  );
}
