app/components/UserMenu.tsx

'use client';

import { useState, useEffect } from 'react';
import { Menu, Avatar, NavLink, ActionIcon } from '@mantine/core';
import { useRouter } from 'next/navigation';

interface UserProfile {
  did: string;
  handle: string;
  displayName: string | null;
  avatar: string | null;
}

export function UserMenu({ showLabel = false }: { showLabel?: boolean } = {}) {
  const router = useRouter();
  const [profile, setProfile] = useState<UserProfile | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Fetch user profile on mount
    fetch('/api/user/profile')
      .then((res) => res.json())
      .then((data) => {
        if (!data.error) {
          setProfile(data);
        }
      })
      .catch((error) => {
        console.error('Failed to fetch profile:', error);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  const handleLogout = async () => {
    try {
      await fetch('/api/auth/logout', { method: 'POST' });
      router.push('/login');
    } catch (error) {
      console.error('Logout failed:', error);
    }
  };

  if (loading || !profile) {
    return showLabel ? (
      <NavLink
        label="Profile"
        leftSection={
          <Avatar radius="xl" size={20} color="gray">
            ?
          </Avatar>
        }
        variant="filled"
        color="blue"
        styles={{
          root: {
            borderRadius: '8px',
            fontWeight: 400,
          },
        }}
        disabled
      />
    ) : (
      <ActionIcon variant="subtle" color="gray" size={40} radius="md">
        <Avatar radius="xl" size={24} color="gray">
          ?
        </Avatar>
      </ActionIcon>
    );
  }

  // Get display name or handle
  const displayText = profile.displayName || profile.handle;
  // Get initials for fallback
  const initials = profile.displayName
    ? profile.displayName
        .split(' ')
        .map((n) => n[0])
        .join('')
        .toUpperCase()
        .slice(0, 2)
    : profile.handle.slice(0, 2).toUpperCase();

  return (
    <Menu shadow="md" width={200} position="bottom-end">
      <Menu.Target>
        {showLabel ? (
          <NavLink
            label="Profile"
            leftSection={
              <Avatar
                src={profile.avatar}
                alt={displayText}
                radius="xl"
                size={20}
              >
                {initials}
              </Avatar>
            }
            variant="filled"
            color="blue"
            styles={{
              root: {
                borderRadius: '8px',
                fontWeight: 400,
              },
            }}
          />
        ) : (
          <ActionIcon variant="subtle" color="gray" size={40} radius="md">
            <Avatar
              src={profile.avatar}
              alt={displayText}
              radius="xl"
              size={24}
            >
              {initials}
            </Avatar>
          </ActionIcon>
        )}
      </Menu.Target>

      <Menu.Dropdown>
        <Menu.Label>
          {displayText}
          <br />
          <span style={{ color: 'var(--mantine-color-dimmed)', fontSize: '0.75rem' }}>
            @{profile.handle}
          </span>
        </Menu.Label>
        <Menu.Divider />
        <Menu.Item onClick={handleLogout} c="red">
          Log out
        </Menu.Item>
      </Menu.Dropdown>
    </Menu>
  );
}