"use client";

import { Building2, RefreshCw, Shield, Sliders, Users } from "lucide-react";
import { CompanyProfileTab } from "@/components/settings/company-profile-tab";
import { RolesPermissionsTab } from "@/components/settings/roles-permissions-tab";
import { SystemPreferencesTab } from "@/components/settings/system-preferences-tab";
import { UsersManagementTab } from "@/components/settings/users-management-tab";
import { Button } from "@/components/ui/button";
import { useSettings } from "@/hooks/use-settings";
import { SettingsTabType } from "@/types/settings";

export default function ConfiguracoesPage() {
  const {
    activeTab,
    company,
    users,
    roles,
    preferences,
    isLoading,
    isSaving,
    setActiveTab,
    loadData,
    updateCompany,
    createUser,
    updateUser,
    deleteUser,
    createRole,
    updateRole,
    deleteRole,
    resetRoles,
    updatePreferences,
  } = useSettings();

  const tabs: { id: SettingsTabType; label: string; icon: any }[] = [
    { id: "company", label: "Dados da Empresa & Logo", icon: Building2 },
    { id: "users", label: "Gestão de Usuários", icon: Users },
    { id: "roles", label: "Grupos de Acesso & Permissões", icon: Shield },
    { id: "preferences", label: "Preferências do Sistema", icon: Sliders },
  ];

  return (
    <div className="space-y-6">
      {/* Header da Página */}
      <div className="flex flex-wrap items-center justify-between gap-4">
        <div>
          <p className="text-sm font-medium text-muted-foreground">Dashboard / Administração</p>
          <h1 className="mt-1 text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
            Configurações do Sistema
          </h1>
        </div>
        <Button variant="secondary" size="icon" onClick={() => loadData()} title="Atualizar dados">
          <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
        </Button>
      </div>

      {/* Navegação por Abas */}
      <div className="flex flex-wrap items-center gap-2 border-b pb-3">
        {tabs.map((tab) => {
          const Icon = tab.icon;
          const isActive = activeTab === tab.id;
          return (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`flex items-center gap-2 rounded-lg px-4 py-2 text-xs font-semibold transition-all ${
                isActive
                  ? "bg-primary text-primary-foreground shadow-xs"
                  : "bg-card border text-muted-foreground hover:bg-muted hover:text-foreground"
              }`}
            >
              <Icon className="h-4 w-4" />
              {tab.label}
            </button>
          );
        })}
      </div>

      {/* Conteúdo Dinâmico por Aba */}
      {activeTab === "company" && (
        <CompanyProfileTab company={company} onSave={updateCompany} isSaving={isSaving} />
      )}

      {activeTab === "users" && (
        <UsersManagementTab
          users={users}
          roles={roles}
          onCreateUser={createUser}
          onUpdateUser={updateUser}
          onDeleteUser={deleteUser}
          isSaving={isSaving}
        />
      )}

      {activeTab === "roles" && (
        <RolesPermissionsTab
          roles={roles}
          onCreateRole={createRole}
          onUpdateRole={updateRole}
          onDeleteRole={deleteRole}
          onResetRoles={resetRoles}
          isSaving={isSaving}
        />
      )}

      {activeTab === "preferences" && (
        <SystemPreferencesTab
          preferences={preferences}
          onSave={updatePreferences}
          isSaving={isSaving}
        />
      )}
    </div>
  );
}