/**
 * User Meta Card Component
 * 
 * Displays user profile summary including avatar, name, role, and location.
 * Uses the new auth system for user data access.
 */

"use client";
import React, { useEffect } from "react";
import Image from "next/image";
import { useProfile } from "@/modules/profileModule/hook/useProfile";
import { User } from "@/types/auth";
import AvatarText from "@/components/ui/avatar/AvatarText";

export const UserMetaCardSection: React.FC<{initialProfile: User | null}> = ({initialProfile}) => {
  const { profile, refreshProfile } = useProfile({initialProfile});
  
  useEffect(() => {
    if (!initialProfile) {
      refreshProfile();
    }
  }, []);

  return (
    <div className="p-5 border border-gray-200 rounded-2xl dark:border-gray-800 lg:p-6">
      <div className="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between">
        <div className="flex flex-col items-center w-full gap-6 xl:flex-row">
          <div className="w-20 h-20 overflow-hidden border border-gray-200 rounded-full dark:border-gray-800 flex items-center justify-center">
            {profile?.profile?.avatar_url ? (
              <Image
                width={80}
                height={80}
                src={profile.profile.avatar_url}
                alt="user"
              />
            ) : (
              <AvatarText
                name={`${profile?.firstname ?? ""} ${profile?.lastname ?? ""}`.trim() || (profile?.email ?? "User")}
                className="h-20 w-20 text-xl"
              />
            )}
          </div>
          <div className="order-3 xl:order-2">
            <h4 className="mb-2 text-lg font-semibold text-center text-gray-800 dark:text-white/90 xl:text-left">
              {profile?.firstname} {profile?.lastname}
            </h4>
            <div className="flex flex-col items-center gap-1 text-center xl:flex-row xl:gap-3 xl:text-left">
              <p className="text-sm text-gray-500 dark:text-gray-400">
                {profile?.roles?.[0]?.name?.toUpperCase() || "No Role Assigned"}
              </p>
              <div className="hidden h-3.5 w-px bg-gray-300 dark:bg-gray-700 xl:block"></div>
              <p className="text-sm text-gray-500 dark:text-gray-400">
                {profile?.profile?.address?.city || "No City"}, {profile?.profile?.address?.country || "No Country"}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}