// app/(app)/staff/utilisateurs/page.tsx
import Link from "next/link";
import ConfirmableForm from "@/components/ConfirmableForm";
import ClientUsersTable from "@/components/staff/ClientUsersTable";
import { createSbServer } from "@/lib/supabaseServer";
import { createClient } from "@supabase/supabase-js";
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "Gestion des utilisateurs | Espace Paie Odentas",
};

export const dynamic = "force-dynamic";

async function fetchAllStaffUsers() {
  try {
    const sb = createSbServer();
    
    // Utiliser le service role pour récupérer tous les membres
    const admin = createClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.SUPABASE_SERVICE_ROLE_KEY!,
      { auth: { autoRefreshToken: false, persistSession: false } }
    );

    // Récupérer tous les membres avec leurs organisations
    const { data: members, error: membersError } = await sb
      .from("organization_members")
      .select(`
        user_id,
        role,
        revoked,
        created_at,
        revoked_at,
        org_id,
        organizations(id, name, structure_api)
      `)
      .order("created_at", { ascending: false });

    if (membersError) {
      console.error('Erreur récupération members:', membersError);
      return [];
    }

    if (!members || members.length === 0) {
      return [];
    }

    // Récupérer les informations utilisateur pour chaque membre
    const userIds = members.map((m: any) => m.user_id).filter(Boolean);
    const usersData: any[] = [];

    for (const userId of userIds) {
      try {
        const { data: userData } = await admin.auth.admin.getUserById(userId);
        if (userData?.user) {
          usersData.push({
            id: userData.user.id,
            email: userData.user.email,
            first_name: userData.user.user_metadata?.first_name || userData.user.user_metadata?.display_name?.split(' ')[0] || null
          });
        }
      } catch (e) {
        console.warn("⚠️ Erreur récupération user", userId, ":", e);
      }
    }

    // Combiner les données membres et utilisateurs
    const result = members.map((member: any) => {
      const userData = usersData.find(u => u.id === member.user_id);
      return {
        ...member,
        email: userData?.email || 'Email non disponible',
        first_name: userData?.first_name || '',
        organization_name: member.organizations?.structure_api || member.organizations?.name || 'Organisation inconnue'
      };
    });

    return result;
  } catch (error) {
    console.error('Erreur lors de la récupération des utilisateurs:', error);
    return [];
  }
}

async function fetchStaffMembers() {
  try {
    // Utiliser directement le client admin pour contourner les RLS
    const admin = createClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.SUPABASE_SERVICE_ROLE_KEY!,
      { auth: { autoRefreshToken: false, persistSession: false } }
    );

    // Récupérer tous les utilisateurs staff (actifs ET révoqués) avec le client admin
    const { data: staffUsers, error: staffError } = await admin
      .from("staff_users")
      .select("user_id, is_staff, super_staff, created_at")
      .order("created_at", { ascending: false });

    if (staffError) {
      console.error('Erreur récupération staff_users:', staffError);
      return [];
    }

    if (!staffUsers || staffUsers.length === 0) {
      console.log("Aucun staff_users trouvé");
      return [];
    }

    console.log(`✅ ${staffUsers.length} staff_users trouvés:`, staffUsers.map(s => ({ id: s.user_id, is_staff: s.is_staff, super_staff: s.super_staff })));

    // Récupérer les informations de chaque utilisateur staff
    const staffData: any[] = [];

    for (const staffUser of staffUsers) {
      try {
        const { data: userData, error: userError } = await admin.auth.admin.getUserById(staffUser.user_id);
        
        if (userError) {
          console.error(`❌ Erreur getUserById pour ${staffUser.user_id}:`, userError);
          continue;
        }
        
        if (userData?.user) {
          console.log(`✅ User récupéré: ${userData.user.email}`);
          staffData.push({
            user_id: staffUser.user_id,
            email: userData.user.email,
            first_name: userData.user.user_metadata?.first_name || userData.user.user_metadata?.display_name?.split(' ')[0] || null,
            is_staff: staffUser.is_staff,
            super_staff: staffUser.super_staff || false,
            created_at: staffUser.created_at || userData.user.created_at,
          });
        } else {
          console.warn(`⚠️ Pas de userData.user pour ${staffUser.user_id}`);
        }
      } catch (e) {
        console.error("❌ Exception récupération user staff", staffUser.user_id, ":", e);
      }
    }

    console.log(`📊 Résultat final: ${staffData.length} staff members`);
    return staffData;
  } catch (error) {
    console.error('Erreur lors de la récupération des utilisateurs staff:', error);
    return [];
  }
}

async function fetchOrganizations() {
  const sb = createSbServer();
  const { data: orgs } = await sb
    .from("organizations")
    .select("id, name, structure_api")
    .order("name", { ascending: true });
  return orgs || [];
}

export default async function StaffUsersListPage() {
  const sb = createSbServer();
  const { data: { user } } = await sb.auth.getUser();

  // 1) Refus si pas connecté
  if (!user) {
    return (
      <main className="p-6">
        <h1 className="text-lg font-semibold">Accès refusé</h1>
        <p className="text-sm text-slate-600">Vous devez être connecté.</p>
      </main>
    );
  }

  // 2) Vérifier Staff
  const { data: me } = await sb
    .from("staff_users")
    .select("is_staff, super_staff")
    .eq("user_id", user.id)
    .maybeSingle();

  const isStaff = !!me?.is_staff;
  const isSuperStaff = !!me?.super_staff;
  
  if (!isStaff) {
    return (
      <main className="p-6">
        <h1 className="text-lg font-semibold">Accès refusé</h1>
        <p className="text-sm text-slate-600">Cette page est réservée au Staff.</p>
      </main>
    );
  }

  // 3) Récupérer tous les utilisateurs (mode staff global) et les organisations
  const [members, organizations, staffMembers] = await Promise.all([
    fetchAllStaffUsers(),
    fetchOrganizations(),
    fetchStaffMembers()
  ]);

  // Créer un map des organisations pour l'affichage
  const orgMap = new Map(organizations.map(org => [org.id, org]));

  if (!members) {
    return (
      <main className="p-6">
        <h1 className="text-lg font-semibold">Gestion des utilisateurs</h1>
        <p className="text-sm text-red-600">Erreur de chargement des utilisateurs.</p>
      </main>
    );
  }

  return (
    <main className="p-6 space-y-4">
      <div className="flex items-center justify-between">
        <h1 className="text-lg font-semibold">Gestion des utilisateurs</h1>
        <Link
          href={`/staff/utilisateurs/nouveau${isSuperStaff ? '?type=staff' : '?type=client'}`}
          className="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm bg-emerald-600 text-white hover:bg-emerald-700"
        >
          + Créer un utilisateur
        </Link>
      </div>

      <section className="rounded-2xl border bg-white p-4">
        <h2 className="text-sm font-semibold mb-2">Niveaux d'habilitation</h2>
        <ul className="text-sm leading-6 text-slate-700 list-disc pl-5 space-y-1">
          <li>
            <span className="font-medium">Super Admin</span> — accès total : gestion des utilisateurs (création, modification de niveau, révocation),
            toutes les données (contrats, paies, salarié·es, facturation). Ne peut être modifié que par le support Odentas.
          </li>
          <li>
            <span className="font-medium">Admin</span> — accès total : gestion des utilisateurs (création, modification de niveau, révocation) sauf le Super Admin,
            toutes les données (contrats, paies, salarié·es, facturation).
          </li>
          <li>
            <span className="font-medium">Agent</span> — accès opérationnel courant : création et suivi des contrats/paies et consultation salariés.
            Pas d'accès à la facturation ni à la gestion des utilisateurs.
          </li>
          <li>
            <span className="font-medium">Compta</span> — accès en lecture aux éléments financiers (paies, cotisations, facturation) et documents associés.
            Pas de création/modification de contrats ni gestion des utilisateurs.
          </li>
        </ul>
      </section>

      {/* Section Utilisateurs Staff */}
      {staffMembers && staffMembers.length > 0 && (
        <section className="space-y-2">
          <h2 className="text-base font-semibold">Utilisateurs Staff ({staffMembers.length})</h2>
          <div className="rounded-2xl border bg-white overflow-hidden">
            <table className="w-full text-sm">
              <thead className="bg-slate-50 text-slate-600">
                <tr>
                  <th className="text-left px-4 py-3">Prénom</th>
                  <th className="text-left px-4 py-3">Email</th>
                  <th className="text-left px-4 py-3">Type</th>
                  <th className="text-left px-4 py-3">Créé le</th>
                  <th className="text-left px-4 py-3">Statut</th>
                  <th className="text-left px-4 py-3">Actions</th>
                </tr>
              </thead>
              <tbody>
                {staffMembers.map((s) => {
                  const created = s.created_at ? new Date(s.created_at) : null;
                  const createdFmt = created
                    ? created.toLocaleString("fr-FR", {
                        year: "numeric",
                        month: "2-digit",
                        day: "2-digit",
                        hour: "2-digit",
                        minute: "2-digit",
                      })
                    : "—";
                  const status = s.is_staff ? "Actif" : "Révoqué";
                  const isActive = s.is_staff;
                  
                  return (
                    <tr key={s.user_id} className="border-t align-top">
                      <td className="px-4 py-3 whitespace-nowrap">{s.first_name || "—"}</td>
                      <td className="px-4 py-3">{s.email}</td>
                      <td className="px-4 py-3 uppercase tracking-wide text-xs font-medium">
                        <span className={s.super_staff ? 'text-purple-600' : 'text-indigo-600'}>
                          {s.super_staff ? 'SUPER_STAFF' : 'STAFF'}
                        </span>
                      </td>
                      <td className="px-4 py-3 whitespace-nowrap">{createdFmt}</td>
                      <td className="px-4 py-3">
                        <span className={`inline-flex items-center px-2 py-1 rounded text-xs font-medium ${
                          isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
                        }`}>
                          {status}
                        </span>
                      </td>
                      <td className="px-4 py-2">
                        <div className="flex flex-col gap-2">
                          {isActive ? (
                            s.super_staff ? (
                              <div className="text-xs text-slate-500 italic">
                                Super Staff ne peut pas être révoqué
                              </div>
                            ) : (
                              <ConfirmableForm
                                method="post"
                                action="/api/staff/users/revoke-staff"
                                className="flex items-center gap-2"
                                confirmTitle="Confirmer la révocation"
                                confirmMessage={`Voulez-vous révoquer l'accès staff de ${s.first_name || s.email} ?`}
                                confirmCta="Révoquer"
                              >
                                <input type="hidden" name="user_id" value={s.user_id} />
                                <button
                                  type="submit"
                                  className="px-3 py-1 rounded text-xs bg-red-600 text-white hover:bg-red-700"
                                >
                                  Révoquer
                                </button>
                              </ConfirmableForm>
                            )
                          ) : (
                            <ConfirmableForm
                              method="post"
                              action="/api/staff/users/restore-staff"
                              className="flex items-center gap-2"
                              confirmTitle="Confirmer la restauration"
                              confirmMessage={`Restaurer ${s.first_name || s.email} en tant qu'utilisateur staff ?`}
                              confirmCta="Restaurer"
                            >
                              <input type="hidden" name="user_id" value={s.user_id} />
                              <button
                                type="submit"
                                className="px-3 py-1 rounded text-xs bg-emerald-600 text-white hover:bg-emerald-700"
                              >
                                Restaurer
                              </button>
                            </ConfirmableForm>
                          )}
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </section>
      )}

      {/* Section Utilisateurs Clients */}
      <ClientUsersTable members={members} organizations={organizations} />

      <div className="text-xs text-slate-500">
        * La suppression est une révocation : l'utilisateur reste historisé dans la base, mais ne peut plus se connecter.
      </div>
    </main>
  );
}