'use client';

import { useEffect, useRef, useState } from 'react';
import Link from 'next/link';
import { ChevronDown, LogOut, User, LifeBuoy } from 'lucide-react';
import { useAuth } from '@/hooks/useAuth';
import { logoutAndRedirect } from '@/lib/auth-actions';
import { getDisplayName, colorFromString } from '@/lib/utils';

export function ProfileDropdown() {
  const { user } = useAuth();
  const [open, setOpen] = useState(false);
  const [loggingOut, setLoggingOut] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    function handleClick(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }
    document.addEventListener('mousedown', handleClick);
    return () => document.removeEventListener('mousedown', handleClick);
  }, []);

  const displayName = getDisplayName(user);
  const initial = (user?.firstName?.[0] ?? user?.email?.[0] ?? 'U').toUpperCase();
  const accent = colorFromString(user?.email ?? 'user');

  const handleLogout = async () => {
    setLoggingOut(true);
    try {
      await logoutAndRedirect();
    } finally {
      setLoggingOut(false);
    }
  };

  return (
    <div className="relative" ref={ref}>
      <button
        onClick={() => setOpen((v) => !v)}
        className="flex items-center gap-2 rounded-xl border border-line bg-surface px-2 py-1.5 text-sm transition-colors hover:bg-surface-raised"
        aria-haspopup="menu"
        aria-expanded={open}
      >
        <div
          className="flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold text-white"
          style={{ backgroundColor: accent }}
        >
          {initial}
        </div>
        <div className="hidden text-left lg:block">
          <p className="max-w-[140px] truncate text-xs font-semibold text-ink">{displayName}</p>
          <p className="max-w-[140px] truncate text-[10px] text-ink-faint">{user?.email}</p>
        </div>
        <ChevronDown className="h-3.5 w-3.5 text-ink-faint" />
      </button>

      {open && (
        <div className="absolute right-0 top-full z-50 mt-2 w-60 overflow-hidden rounded-2xl border border-line bg-surface shadow-popover">
          <div className="border-b border-line px-4 py-3">
            <p className="truncate text-sm font-semibold text-ink">{displayName}</p>
            <p className="truncate text-xs text-ink-faint">{user?.email}</p>
          </div>
          <div className="p-1.5">
            <DropdownLink href="/dashboard/profile" icon={User} label="My Profile" onClick={() => setOpen(false)} />
            <DropdownLink href="/dashboard/appeals" icon={LifeBuoy} label="Appeals" onClick={() => setOpen(false)} />
          </div>
          <div className="border-t border-line p-1.5">
            <button
              onClick={handleLogout}
              disabled={loggingOut}
              className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-red-600 transition-colors hover:bg-red-500/10 dark:text-red-400"
            >
              <LogOut className="h-4 w-4" />
              {loggingOut ? 'Signing out...' : 'Sign Out'}
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

function DropdownLink({
  href,
  icon: Icon,
  label,
  onClick,
}: {
  href: string;
  icon: typeof User;
  label: string;
  onClick?: () => void;
}) {
  return (
    <Link
      href={href}
      onClick={onClick}
      className="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-ink-muted transition-colors hover:bg-surface-raised hover:text-ink"
    >
      <Icon className="h-4 w-4" />
      {label}
    </Link>
  );
}