"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { LogOut, User as UserIcon, Shield } from "lucide-react";
import { useAuthStore } from "@/lib/store/useAuthStore";
import RichardLauncher from "@/components/agente/RichardLauncher";

export default function Topbar() {
  const router = useRouter();
  const { user, logout } = useAuthStore();
  const [open, setOpen] = useState(false);

  if (!user) return null;

  const initials = (user.name || user.phone.slice(-2)).slice(0, 2).toUpperCase();

  return (
    <header className="sticky top-0 z-10 h-14 bg-surface border-b border-line flex items-center justify-end px-5 gap-3">
      <RichardLauncher />

      <div className="relative">
        <button
          onClick={() => setOpen((v) => !v)}
          onBlur={() => setTimeout(() => setOpen(false), 100)}
          className="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-canvas transition-colors"
        >
          <div className="w-8 h-8 rounded-full bg-brand-soft text-brand-dark grid place-items-center text-xs font-bold">
            {initials}
          </div>
          <div className="hidden sm:flex flex-col items-start leading-tight">
            <span className="text-sm font-semibold text-ink">{user.name || user.phone}</span>
            <span className="text-[11px] text-faint flex items-center gap-1">
              {user.role === "admin" ? <Shield size={10} /> : <UserIcon size={10} />}
              {user.role}
            </span>
          </div>
        </button>

        {open && (
          <div className="absolute right-0 top-full mt-1 w-44 bg-surface border border-line rounded-xl shadow-[var(--shadow-lg)] py-1 z-20">
            <button
              onClick={() => {
                logout();
                router.replace("/login");
              }}
              onMouseDown={(e) => e.preventDefault()}
              className="w-full flex items-center gap-2 px-3 py-2 text-sm text-ink-soft hover:bg-canvas hover:text-bad"
            >
              <LogOut size={14} /> Cerrar sesión
            </button>
          </div>
        )}
      </div>
    </header>
  );
}