'use client';

import { useEffect, useState } from 'react';

type RawUser = {
  id?: number;
  user_id?: number;
  name?: string;
  display_name?: string;
  email?: string;
  user_email?: string;
  billing_email?: string;
  role?: string;
  roles?: string[];
  user_display_name?: string;
  user_nicename?: string;
  phone?: string;
  user_phone?: string;
  business_name?: string;
  company?: string;
  billing_phone?: string;
  billing_company?: string;
  billing_address_1?: string;
  billing_address_2?: string;
  billing_city?: string;
  billing_state?: string;
  billing_postcode?: string;
  meta?: Record<string, any>;
};

type NormalizedUser = {
  id?: number;
  name: string;
  email?: string;
  role: string;
  phone?: string;
  businessName?: string;
  address?: string;
  status?: string;
};

function joinAddress(fields: Array<string | undefined | null>): string | undefined {
  return fields.filter(Boolean).join(', ') || undefined;
}

function normalizeUser(rawUser: RawUser): NormalizedUser {
  const user = (rawUser as any)?.user ?? rawUser;

  const email =
    user?.email ||
    user?.user_email ||
    user?.billing_email ||
    user?.meta?.email ||
    user?.meta?.billing_email ||
    (user as any)?.data?.email ||
    (user as any)?.data?.user_email ||
    (user as any)?.data?.billing_email ||
    (user as any)?.user?.email ||
    (user as any)?.user?.user_email;
  const role =
    user?.role ||
    (Array.isArray(user?.roles) ? user.roles[0] : undefined) ||
    'Aliado comercial';

  const businessName =
    user?.business_name ||
    user?.company ||
    user?.billing_company ||
    user?.meta?.business_name ||
    user?.meta?.company ||
    undefined;

  const phone =
    user?.phone ||
    user?.billing_phone ||
    user?.user_phone ||
    user?.meta?.telefono ||
    user?.meta?.phone ||
    (user as any)?.user?.billing_phone ||
    undefined;

  const address =
    user?.billing_address_1 ||
    user?.meta?.direccion ||
    user?.meta?.address ||
    joinAddress([
      user?.billing_address_1,
      user?.billing_address_2,
      user?.billing_city,
      user?.billing_state,
      user?.billing_postcode,
      user?.meta?.direccion,
      user?.meta?.address,
    ]);

  return {
    id: user?.id ?? user?.user_id,
    name:
      businessName ||
      user?.display_name ||
      user?.name ||
      user?.user_display_name ||
      user?.user_nicename ||
      email ||
      'Aliado comercial',
    email,
    role,
    phone,
    businessName,
    address,
    status: (user as any)?.status || user?.meta?.status || 'Activa',
  };
}

export default function ProfileDetails() {
  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 del perfil');
          return;
        }

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

    loadUser();
  }, []);

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

  if (error) {
    return <p className="text-sm text-rose-600">{error}</p>;
  }

  if (!user) {
    return <p className="text-sm text-slate-500">No hay datos de usuario disponibles.</p>;
  }

  const profileFields = [
    { label: 'Nombre del comercio', value: user.businessName || user.name },
    { label: 'Email de acceso', value: user.email || 'No registrado' },
    { label: 'Teléfono', value: user.phone || 'No registrado' },
    { label: 'Rol', value: user.role },
    { label: 'Estado de la cuenta', value: user.status || 'Activa' },
    { label: 'Dirección', value: user.address || 'No registrada' },
  ];

  return (
    <div className="mt-8 grid gap-4 md:grid-cols-2">
      {profileFields.map((field) => (
        <div key={field.label} className="rounded-xl border border-slate-200 bg-slate-50 p-4">
          <p className="text-sm font-medium text-slate-500">{field.label}</p>
          <p className="mt-2 text-base font-semibold text-slate-900">{field.value}</p>
        </div>
      ))}
    </div>
  );
}