'use client';

import { useEffect, useState } from 'react';

type UserPayload = {
  id?: number;
  user_id?: number;
  name?: string;
  display_name?: string;
  email?: string;
  user_email?: string;
  role?: string;
  roles?: string[];
  user_display_name?: string;
  user_nicename?: string;
  business_name?: string;
  company?: string;
};

type NormalizedUser = {
  id?: number;
  name: string;
  email?: string;
  role: string;
};

function normalizeUser(raw: any): NormalizedUser {
  const user = raw?.user ?? raw;

  const email =
    user?.email ||
    user?.user_email ||
    user?.billing_email ||
    user?.meta?.email ||
    user?.meta?.billing_email ||
    user?.data?.email ||
    user?.data?.user_email ||
    user?.data?.billing_email ||
    undefined;

  return {
    id: user?.id ?? user?.user_id,
    name:
      user?.business_name ||
      user?.company ||
      user?.display_name ||
      user?.name ||
      user?.user_display_name ||
      user?.user_nicename ||
      email ||
      'Aliado comercial',
    email,
    role:
      user?.role ||
      (Array.isArray(user?.roles) ? user.roles[0] : undefined) ||
      'Aliado comercial',
  };
}

export default function CurrentUserStatus() {
  const [user, setUser] = useState<NormalizedUser | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function loadUser() {
      try {
        const response = await fetch('/api/auth/me');
        const data = await response.json();

        if (!response.ok || !data.success) {
          setError(data.error || 'No se pudo cargar la información de usuario');
          return;
        }

        setUser(normalizeUser(data.user ?? data));
      } catch (error: any) {
        setError(error?.message || 'Error al cargar usuario');
      } finally {
        setLoading(false);
      }
    }

    loadUser();
  }, []);

  if (loading) {
    return <p className="text-sm text-slate-500">Cargando usuario...</p>;
  }

  if (error || !user) {
    return <p className="text-sm text-slate-500">Usuario no disponible</p>;
  }

  return (
    <div className="rounded-3xl bg-slate-50 px-4 py-3 text-sm text-slate-700 shadow-sm">
      <p className="font-semibold text-slate-900">Hola, {user.name}</p>
    </div>
  );
}