"use client"

import { useState, useRef, useEffect } from "react"
import { Icon, addCollection } from "@iconify/react"
import { icons as mdiIcons } from "@iconify-json/mdi"
import { Pencil } from "lucide-react"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

addCollection(mdiIcons)

const googleApps = [
  { name: "Compte", icon: "/compte-mark.svg" },
  { name: "Agenda", icon: "/agenda-mark.svg" },
  { name: "Photos", icon: "/photos-mark.svg" },
  { name: "Ultimail", icon: "/brand/ultimail-header-icon.png" },
  { name: "UltiDrive", icon: "/ultidrive-mark.svg" },
  { name: "UltiMeet", icon: "/ultimeet-mark.svg" },
  { name: "Administration", icon: "/admin-mark.svg" },
  { name: "OpenMaps", icon: "/openstreetmap-mark.svg" },
  { name: "Mistral", icon: "/mistral-mark.svg" },
  { name: "Qwant", icon: "/qwant-mark.svg" },
  { name: "Ground News", icon: "/ground-news-mark.svg" },
]

interface HeaderAccountActionsProps {
  className?: string
}

export function HeaderAccountActions({ className }: HeaderAccountActionsProps) {
  const [appsMenuOpen, setAppsMenuOpen] = useState(false)
  const menuRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
        setAppsMenuOpen(false)
      }
    }
    document.addEventListener("mousedown", handleClickOutside)
    return () => document.removeEventListener("mousedown", handleClickOutside)
  }, [])

  return (
    <div className={cn("flex shrink-0 items-center gap-1", className)}>
      <Button variant="ghost" size="icon" className="hidden text-gray-600 sm:inline-flex" aria-label="Aide">
        <Icon icon="mdi:help-circle-outline" className="size-6 shrink-0" aria-hidden />
      </Button>
      <Button variant="ghost" size="icon" className="text-gray-600" aria-label="Réglages">
        <Icon icon="mdi:cog-outline" className="size-6 shrink-0" aria-hidden />
      </Button>

      <div className="relative hidden sm:block" ref={menuRef}>
        <Button
          variant="ghost"
          size="icon"
          className="text-gray-600"
          aria-label="Applications"
          onClick={() => setAppsMenuOpen(!appsMenuOpen)}
        >
          <Icon icon="mdi:view-grid-outline" className="size-6 shrink-0" aria-hidden />
        </Button>

        {appsMenuOpen && (
          <div className="absolute right-0 top-12 z-50 w-96 rounded-2xl border border-gray-200 bg-white shadow-xl">
            <div className="flex items-center justify-between border-b border-gray-100 p-4">
              <span className="text-lg font-normal text-gray-800">Vos favoris</span>
              <Button variant="ghost" size="icon" className="h-8 w-8 text-gray-600">
                <Pencil className="h-4 w-4" />
              </Button>
            </div>
            <div className="grid grid-cols-3 gap-1 p-3">
              {googleApps.map((app) => (
                <button
                  key={app.name}
                  type="button"
                  className="flex flex-col items-center gap-2 rounded-lg p-3 transition-colors hover:bg-gray-100"
                >
                  <div className="flex h-10 w-10 items-center justify-center">
                    <img
                      src={app.icon}
                      alt={app.name}
                      className="h-10 w-10 object-contain"
                      onError={(e) => {
                        const target = e.target as HTMLImageElement
                        target.style.display = "none"
                        target.parentElement!.innerHTML = `<div class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-500 font-bold text-white">${app.name[0]}</div>`
                      }}
                    />
                  </div>
                  <span className="w-full text-center text-xs text-gray-700">{app.name}</span>
                </button>
              ))}
            </div>
          </div>
        )}
      </div>

      <Button variant="ghost" size="icon-lg" className="ml-2 size-11 overflow-hidden rounded-full p-0">
        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-purple-500 text-base font-bold text-white">
          E
        </div>
      </Button>
    </div>
  )
}