import { useEffect, useState } from 'react';
import { useAuthStore, type PublicProfile } from '../stores/auth.ts';

interface UserProfileModalProps {
  userId: string;
  onClose: () => void;
}

export function UserProfileModal({ userId, onClose }: UserProfileModalProps) {
  const getPublicProfile = useAuthStore((s) => s.getPublicProfile);
  const blockUser = useAuthStore((s) => s.blockUser);
  const [profile, setProfile] = useState<PublicProfile | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    getPublicProfile(userId).then(setProfile).catch(setError);
  }, [userId, getPublicProfile]);

  const statusColor = {
    online: 'bg-gb-green',
    idle: 'bg-gb-orange',
    dnd: 'bg-gb-red',
    offline: 'bg-gb-fg-t',
  }[profile?.status || 'offline'];

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-gb-bg/90 p-4" onClick={onClose}>
      <div className="bg-gb-bg border border-gb-fg-t w-full max-w-md max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
        {error && <div className="p-3 text-gb-red text-xs">ERR: {error}</div>}
        {!profile && !error && <div className="p-6 text-gb-fg-f text-center text-xs">[loading...]</div>}
        {profile && (
          <>
            <div
              className="h-24 bg-cover bg-center border-b border-gb-bg-t"
              style={{ backgroundImage: profile.banner_url ? `url(${profile.banner_url})` : undefined, backgroundColor: profile.accent_color || '#2D3436' }}
            />
            <div className="p-4">
              <div className="flex items-start gap-3 -mt-12 mb-3">
                <img src={profile.avatar} alt="" className="w-20 h-20 border-2 border-gb-bg bg-gb-bg object-cover" />
                <div className="mt-12">
                  <div className="flex items-center gap-2">
                    <span className={`w-2 h-2 rounded-full ${statusColor}`} />
                    <span className="text-gb-fg font-bold">{profile.display_name || profile.username}</span>
                  </div>
                  <div className="text-gb-fg-s text-xs">@{profile.username}</div>
                  {profile.pronouns && <div className="text-gb-fg-t text-[10px]">{profile.pronouns}</div>}
                </div>
              </div>
              {profile.tagline && <div className="text-gb-fg text-sm mb-2 italic">"{profile.tagline}"</div>}
              {profile.bio && <div className="text-gb-fg-s text-xs mb-3 whitespace-pre-wrap">{profile.bio}</div>}
              {profile.social_links && profile.social_links.length > 0 && (
                <div className="mb-3 space-y-1">
                  {profile.social_links.map((link, idx) => (
                    <a key={idx} href={link.url} target="_blank" rel="noreferrer" className="text-gb-aqua text-xs block hover:underline">
                      {link.platform}
                    </a>
                  ))}
                </div>
              )}
              {profile.badges && profile.badges.length > 0 && (
                <div className="flex flex-wrap gap-1 mb-3">
                  {profile.badges.map((badge) => (
                    <span key={badge.id} className="text-[10px] px-1.5 py-0.5 border border-gb-bg-t text-gb-fg-s" title={badge.description}>
                      {badge.icon && <span className="mr-1">{badge.icon}</span>}
                      {badge.name}
                    </span>
                  ))}
                </div>
              )}
              <div className="flex justify-end gap-2">
                <button onClick={onClose} className="text-xs text-gb-fg-f hover:text-gb-orange font-mono">[CLOSE]</button>
                <button
                  onClick={() => blockUser(userId).then(onClose)}
                  className="text-xs text-gb-red hover:text-gb-orange font-mono"
                >
                  [BLOCK]
                </button>
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
}