"use client"

import type { Chat } from "@/lib/types"
import { MoreHorizontal, Pen, Trash, MessageSquare } from "lucide-react"
import { useState } from "react"
import { RenameDialog } from "./RenameDialog"
import { DeleteDialog } from "./DeleteDialog"

import { SidebarMenuAction, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

type Props = {
  chat: Chat
  isSelected: boolean
  onClick: (chatId: string) => void
  onDelete?: (chatId: string) => Promise<boolean>
  onRename?: (chatId: string, newTitle: string) => Promise<boolean>
}

const chat_button = ({ chat, onClick, isSelected, onDelete, onRename }: Props) => {
  const [isRenameOpen, setIsRenameOpen] = useState(false)
  const [isDeleteOpen, setIsDeleteOpen] = useState(false)

  return (
    <>
      <SidebarMenuItem>
        <SidebarMenuButton
          onClick={() => onClick(chat.id)}
          className={`group relative rounded-lg transition-all duration-200 hover:bg-accent/50 ${
            isSelected
              ? "bg-gradient-to-r from-primary/10 to-primary/5 border border-primary/20 text-primary"
              : "hover:bg-muted/50"
          }`}
        >
          <div className="flex items-center gap-2 min-w-0 flex-1">
            <MessageSquare
              className={`h-4 w-4 flex-shrink-0 ${isSelected ? "text-primary" : "text-muted-foreground"}`}
            />
            <span className="text-sm truncate font-medium">{chat.title}</span>
          </div>
        </SidebarMenuButton>

        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SidebarMenuAction
              showOnHover
              className="opacity-0 group-hover:opacity-100 transition-opacity duration-200 hover:bg-accent rounded-md"
            >
              <MoreHorizontal className="h-4 w-4" />
            </SidebarMenuAction>
          </DropdownMenuTrigger>
          <DropdownMenuContent side="right" align="start" className="w-48">
            <DropdownMenuItem onClick={() => setIsRenameOpen(true)} className="cursor-pointer">
              <Pen className="mr-2 h-4 w-4" />
              <span>Rename</span>
            </DropdownMenuItem>
            <DropdownMenuItem
              onClick={() => setIsDeleteOpen(true)}
              className="cursor-pointer text-destructive focus:text-destructive"
            >
              <Trash className="mr-2 h-4 w-4" />
              <span>Delete Conversation</span>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>

      <RenameDialog
        chatId={chat.id}
        initialTitle={chat.title}
        onRename={onRename}
        isOpen={isRenameOpen}
        onClose={() => setIsRenameOpen(false)}
      />

      <DeleteDialog chatId={chat.id} onDelete={onDelete} isOpen={isDeleteOpen} onClose={() => setIsDeleteOpen(false)} />
    </>
  )
}

export default chat_button