"use client";

import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { User, LogOut, ChevronDown, Loader2 } from "lucide-react";
import { useAuth } from "@/lib/auth/AuthContext";
import { toast } from "sonner";
import ConfirmDialog from "@/components/ui/ConfirmDialog";

export default function AuthMenu({ compact = false }: { compact?: boolean }) {
  const { isAuthenticated, user, logout, loading } = useAuth();
  const [open, setOpen] = useState(false);
  const [busy, setBusy] = useState(false);
  const [confirmOpen, setConfirmOpen] = useState(false);
  const router = useRouter();

  if (loading) {
    return (
      <span className={compact ? "hidden" : "inline-flex items-center text-gray-400"}>
        <Loader2 size={16} className="animate-spin" />
      </span>
    );
  }

  if (!isAuthenticated || !user) {
    return (
      <Link
        href="/login"
        className={
          compact
            ? "flex items-center justify-center gap-2 bg-[#CC1414] text-white text-sm font-semibold py-3 rounded-lg hover:bg-[#A50E0E] transition-colors"
            : "flex items-center gap-1.5 bg-[#CC1414] text-white text-xs sm:text-sm font-semibold px-3 sm:px-4 py-2 rounded-lg hover:bg-[#A50E0E] transition-colors whitespace-nowrap"
        }
      >
        <User size={14} />
        {compact ? "Login / Sign Up" : "Login"}
      </Link>
    );
  }

  async function handleLogout() {
    setBusy(true);
    try {
      await logout();
      setOpen(false);
      toast.success("Logged out successfully.");
      router.replace("/");
      router.refresh();
    } catch {
      toast.error("Logout failed. Please try again.");
    } finally {
      setBusy(false);
    }
  }

  const displayName = user.company_name?.trim() || user.name || user.email || "Account";
  const initial = displayName.trim()?.[0]?.toUpperCase() || "U";

  // Mobile menu: show account actions inline (no dropdown) for an app-like feel.
  if (compact) {
    return (
      <div className="space-y-1">
        <div className="flex items-center gap-2.5 px-1 py-2">
          <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#CC1414] text-sm font-bold text-white">
            {initial}
          </span>
          <div className="min-w-0">
            <div title={displayName} className="truncate text-sm font-semibold text-gray-900">{displayName}</div>
            {user.email && <div className="truncate text-xs text-gray-400">{user.email}</div>}
          </div>
        </div>
        <Link
          href="/dashboard"
          className="flex items-center gap-2.5 rounded-lg px-1 py-2.5 text-sm font-medium text-gray-700 hover:bg-red-50 hover:text-[#CC1414]"
        >
          <User size={16} className="shrink-0" /> My Dashboard
        </Link>
        <button
          type="button"
          onClick={() => setConfirmOpen(true)}
          disabled={busy}
          className="flex w-full items-center gap-2.5 rounded-lg px-1 py-2.5 text-sm font-medium text-gray-700 hover:bg-red-50 hover:text-[#CC1414] disabled:opacity-60"
        >
          {busy ? <Loader2 size={16} className="animate-spin shrink-0" /> : <LogOut size={16} className="shrink-0" />}
          Logout
        </button>

        <ConfirmDialog
          open={confirmOpen}
          title="Logout from your account?"
          description="You will need to login again to access your dashboard features."
          confirmLabel="Logout"
          loading={busy}
          onCancel={() => setConfirmOpen(false)}
          onConfirm={async () => {
            setConfirmOpen(false);
            await handleLogout();
          }}
        />
      </div>
    );
  }

  return (
    <div className="relative">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        className="flex items-center gap-2 bg-white border border-gray-200 hover:border-[#CC1414] text-gray-800 text-sm font-semibold px-3 py-2 rounded-lg transition-colors"
      >
        <span className="w-6 h-6 rounded-full bg-[#CC1414] text-white text-xs flex items-center justify-center font-bold">
          {initial}
        </span>
        <span title={displayName} className="hidden md:inline max-w-[140px] truncate">{displayName}</span>
        <ChevronDown size={14} />
      </button>
      {open && (
        <div
          className="absolute right-0 top-full mt-1 w-56 bg-white border border-gray-100 rounded-xl shadow-2xl py-2 z-50"
          onMouseLeave={() => setOpen(false)}
        >
          <div className="px-4 py-2 border-b border-gray-100">
            <div title={displayName} className="max-w-[180px] truncate text-sm font-semibold text-gray-900">{displayName}</div>
            <div className="text-xs text-gray-400 truncate">{user.email}</div>
          </div>
          <Link
            href="/dashboard"
            onClick={() => setOpen(false)}
            className="block px-4 py-2 text-sm text-gray-700 hover:bg-red-50 hover:text-[#CC1414]"
          >
            My Dashboard
          </Link>
          <Link
            href="/orders"
            onClick={() => setOpen(false)}
            className="block px-4 py-2 text-sm text-gray-700 hover:bg-red-50 hover:text-[#CC1414]"
          >
            My Orders
          </Link>
          <button
            type="button"
            onClick={() => {
              setOpen(false);
              setConfirmOpen(true);
            }}
            disabled={busy}
            className="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-red-50 hover:text-[#CC1414] flex items-center gap-2"
          >
            {busy ? <Loader2 size={14} className="animate-spin" /> : <LogOut size={14} />}
            Logout
          </button>
        </div>
      )}

      <ConfirmDialog
        open={confirmOpen}
        title="Logout from your account?"
        description="You will need to login again to access your dashboard features."
        confirmLabel="Logout"
        loading={busy}
        onCancel={() => setConfirmOpen(false)}
        onConfirm={async () => {
          setConfirmOpen(false);
          await handleLogout();
        }}
      />
    </div>
  );
}