"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useAuth } from "@/lib/auth";
import { ProfileTab } from "@/components/settings/ProfileTab";
import { NotificationPreferencesTab } from "@/components/settings/NotificationPreferencesTab";
import { AppearanceTab } from "@/components/settings/AppearanceTab";
import { AccountTab } from "@/components/settings/AccountTab";
import { ArrowLeft, User as UserIcon, Bell, Palette, Shield } from "lucide-react";

type SettingsTab = "profile" | "notifications" | "appearance" | "account";

export default function SettingsPage() {
  const { isAuthenticated, loading: authLoading } = useAuth();
  const router = useRouter();
  const [activeTab, setActiveTab] = useState<SettingsTab>("profile");

  useEffect(() => {
    if (!authLoading && !isAuthenticated) {
      router.replace("/login");
    }
  }, [authLoading, isAuthenticated, router]);

  if (authLoading) {
    return (
      <div className="flex h-screen items-center justify-center bg-slack-darkpurple">
        <div className="text-white text-lg animate-pulse">Loading Settings...</div>
      </div>
    );
  }

  const tabs: { key: SettingsTab; label: string; icon: typeof UserIcon }[] = [
    { key: "profile", label: "Profile", icon: UserIcon },
    { key: "notifications", label: "Notifications", icon: Bell },
    { key: "appearance", label: "Appearance", icon: Palette },
    { key: "account", label: "Account", icon: Shield },
  ];

  return (
    <div className="min-h-screen bg-[#f9f9f9]">
      {/* Header */}
      <header className="bg-slack-purple text-white px-6 py-3 flex items-center gap-4">
        <button
          onClick={() => router.push("/chat")}
          className="flex items-center gap-2 text-white/80 hover:text-white transition-colors"
        >
          <ArrowLeft size={20} />
          <span className="text-sm font-medium">Back to ChatApp</span>
        </button>
        <h1 className="text-lg font-bold">Settings</h1>
      </header>

      {/* Layout with sidebar tabs + content */}
      <div className="max-w-4xl mx-auto py-8 px-4 flex gap-6">
        {/* Left tab nav */}
        <nav className="w-48 flex-shrink-0">
          <ul className="space-y-1">
            {tabs.map((tab) => {
              const Icon = tab.icon;
              const isActive = activeTab === tab.key;
              return (
                <li key={tab.key}>
                  <button
                    onClick={() => setActiveTab(tab.key)}
                    className={`w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                      isActive
                        ? "bg-slack-purple text-white"
                        : "text-gray-600 hover:bg-gray-100"
                    }`}
                  >
                    <Icon size={16} />
                    {tab.label}
                  </button>
                </li>
              );
            })}
          </ul>
        </nav>

        {/* Content area */}
        <div className="flex-1 min-w-0">
          {activeTab === "profile" && (
            <section className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <div className="flex items-center gap-2 mb-4 pb-3 border-b border-gray-100">
                <UserIcon size={18} className="text-gray-500" />
                <h2 className="font-bold text-gray-800">Profile</h2>
              </div>
              <ProfileTab />
            </section>
          )}
          {activeTab === "notifications" && (
            <section className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <div className="flex items-center gap-2 mb-4 pb-3 border-b border-gray-100">
                <Bell size={18} className="text-gray-500" />
                <h2 className="font-bold text-gray-800">Notification Preferences</h2>
              </div>
              <NotificationPreferencesTab />
            </section>
          )}
          {activeTab === "appearance" && (
            <section className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <div className="flex items-center gap-2 mb-4 pb-3 border-b border-gray-100">
                <Palette size={18} className="text-gray-500" />
                <h2 className="font-bold text-gray-800">Appearance</h2>
              </div>
              <AppearanceTab />
            </section>
          )}
          {activeTab === "account" && (
            <section className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <div className="flex items-center gap-2 mb-4 pb-3 border-b border-gray-100">
                <Shield size={18} className="text-gray-500" />
                <h2 className="font-bold text-gray-800">Account</h2>
              </div>
              <AccountTab />
            </section>
          )}
        </div>
      </div>
    </div>
  );
}