"use client"

import Link from "next/link"
import { Calendar, Users, CheckSquare, Plus, Sparkles } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useContactsStore } from "@/lib/contacts/contacts-store"
import { useAiPanelStore } from "@/lib/ai/use-ai-panel"
import { cn } from "@/lib/utils"

export function RightPanel() {
  const { panelOpen, togglePanel } = useContactsStore()
  const aiOpen = useAiPanelStore((s) => s.open)
  const openAiPanel = useAiPanelStore((s) => s.openPanel)

  return (
    <aside className="hidden w-10 shrink-0 flex-col items-center gap-2 bg-transparent py-3 sm:flex">
      <Button
        variant="ghost"
        size="icon"
        className="h-9 w-9 text-gray-600 rounded-full"
        aria-label="Ouvrir l'agenda"
        asChild
      >
        <Link href="/agenda">
          <Calendar className="h-4 w-4" />
        </Link>
      </Button>
      <Button variant="ghost" size="icon" className="h-9 w-9 text-gray-600 rounded-full">
        <CheckSquare className="h-4 w-4" />
      </Button>
      <Button
        variant="ghost"
        size="icon"
        className={cn(
          "h-9 w-9 rounded-full",
          aiOpen ? "bg-blue-100 text-[#1a73e8]" : "text-gray-600"
        )}
        onClick={() => openAiPanel({ app: "mail", temporary: true })}
        aria-label="UltiAI"
      >
        <Sparkles className="h-4 w-4" />
      </Button>
      <Button
        variant="ghost"
        size="icon"
        className={cn(
          "h-9 w-9 rounded-full",
          panelOpen ? "bg-blue-100 text-[#1a73e8]" : "text-gray-600"
        )}
        onClick={togglePanel}
        aria-label="Contacts"
      >
        <Users className="h-4 w-4" />
      </Button>
      <div className="flex-1" />
      <Button variant="ghost" size="icon" className="h-9 w-9 text-gray-600 rounded-full">
        <Plus className="h-4 w-4" />
      </Button>
    </aside>
  )
}