'use client';

import { useState, useEffect } from 'react';
import { Menu, Avatar, UnstyledButton, Group, Text } from '@mantine/core';
import { useRouter } from 'next/navigation';

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

export function UserMenu() {
  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 (
      <Avatar radius="xl" size="md" color="gray">
        ?
      </Avatar>
    );
  }

  // 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>
        <UnstyledButton>
          <Group gap="xs">
            <Avatar
              src={profile.avatar}
              alt={displayText}
              radius="xl"
              size="md"
              style={{ cursor: 'pointer' }}
            >
              {initials}
            </Avatar>
          </Group>
        </UnstyledButton>
      </Menu.Target>

      <Menu.Dropdown>
        <Menu.Label>
          <Text size="xs" fw={600}>
            {displayText}
          </Text>
          <Text size="xs" c="dimmed">
            @{profile.handle}
          </Text>
        </Menu.Label>
        <Menu.Divider />
        <Menu.Item onClick={handleLogout} c="red">
          Log out
        </Menu.Item>
      </Menu.Dropdown>
    </Menu>
  );
}