import { Bell, Sliders, UserIcon } from "lucide-react";
import { useState } from "react";
import { Tabs, TabsList, tabsStyle, TabsTrigger } from "~/components/ui/tabs";
import Preferences from "./preferences";
import BottomNavigation from "~/components/bottom-nav";
import Profile from "./profile";
import type { User } from "~/lib/api";
import NotificationSettings from "./notifications";

export default function SettingsPage({ user }: { user: User }) {
  const tabs = [
    {
      value: "user",
      label: "Profil",
      icon: <UserIcon className="h-4 w-4" />,
      content: <Profile user={user} />,
    },
    {
      value: "preferences",
      label: "Préférences",
      icon: <Sliders className="h-4 w-4" />,
      content: <Preferences user={user} />,
    },
    {
      value: "notifications",
      label: "Notifications",
      icon: <Bell className="h-4 w-4" />,
      content: <NotificationSettings />,
    },
  ];

  // user / notifications / preferences tabs
  const [activeTab, setActiveTab] = useState(tabs[0].value);

  return (
    <div className="space-y-6 pb-20 md:pb-0">
      {/* Tabs */}
      <Tabs
        defaultValue={tabs[0].value}
        value={activeTab}
        onValueChange={setActiveTab}
        className="max-w-md w-full"
      >
        <TabsList className="w-full p-0 bg-background justify-start border-b rounded-none">
          {tabs.map((tab) => (
            <TabsTrigger
              key={tab.value}
              value={tab.value}
              className={tabsStyle}
            >
              {tab.icon}
              {tab.label}
            </TabsTrigger>
          ))}
        </TabsList>
      </Tabs>

      {/* Tab Content */}
      <div className="pt-2">
        {tabs.map((tab) => (
          <div
            key={tab.value}
            className={`${
              activeTab === tab.value ? "block" : "hidden"
            } transition-all duration-300`}
          >
            {tab.content}
          </div>
        ))}
      </div>

      <BottomNavigation activeId="settings" />
    </div>
  );
}