"use client"

import { useState } from "react"
import { AdminSidebar } from "@/components/admin-sidebar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Textarea } from "@/components/ui/textarea"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Search, Send, Paperclip } from "lucide-react"

const mockConversations = [
  {
    id: "1",
    name: "Ana Silva",
    avatar: "/professional-woman-diverse.png",
    lastMessage: "Obrigada pela resposta sobre a vaga!",
    timestamp: "10:30",
    unread: 2,
  },
  {
    id: "2",
    name: "Carlos Santos",
    avatar: "/professional-man.jpg",
    lastMessage: "Quando posso esperar um retorno?",
    timestamp: "Ontem",
    unread: 0,
  },
  {
    id: "3",
    name: "Maria Oliveira",
    avatar: "/professional-woman-smiling.png",
    lastMessage: "Gostaria de mais informações sobre os benefícios",
    timestamp: "2 dias",
    unread: 1,
  },
]

const mockMessages = [
  {
    id: "1",
    sender: "Ana Silva",
    content: "Olá! Gostaria de saber mais sobre a vaga de Desenvolvedor Full Stack.",
    timestamp: "10:15",
    isAdmin: false,
  },
  {
    id: "2",
    sender: "Você",
    content: "Olá Ana! Claro, ficarei feliz em ajudar. A vaga é para trabalho remoto e oferece benefícios completos.",
    timestamp: "10:20",
    isAdmin: true,
  },
  {
    id: "3",
    sender: "Ana Silva",
    content: "Obrigada pela resposta sobre a vaga!",
    timestamp: "10:30",
    isAdmin: false,
  },
]

export default function AdminMessagesPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedConversation, setSelectedConversation] = useState(mockConversations[0])
  const [messageText, setMessageText] = useState("")

  const filteredConversations = mockConversations.filter((conv) =>
    conv.name.toLowerCase().includes(searchTerm.toLowerCase()),
  )

  const handleSendMessage = () => {
    if (messageText.trim()) {
      console.log("[v0] Sending message:", messageText)
      setMessageText("")
    }
  }

  return (
    <div className="space-y-8">
      {/* Header */}
      <div>
        <h1 className="text-3xl font-bold text-foreground">Mensagens</h1>
        <p className="text-muted-foreground mt-1">Comunique-se com candidatos e empresas</p>
      </div>

      {/* Stats */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardHeader className="pb-3">
            <CardDescription>Total de Conversas</CardDescription>
            <CardTitle className="text-3xl">{mockConversations.length}</CardTitle>
          </CardHeader>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardDescription>Não Lidas</CardDescription>
            <CardTitle className="text-3xl">
              {mockConversations.reduce((acc, conv) => acc + conv.unread, 0)}
            </CardTitle>
          </CardHeader>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardDescription>Respondidas Hoje</CardDescription>
            <CardTitle className="text-3xl">12</CardTitle>
          </CardHeader>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardDescription>Tempo Médio de Resposta</CardDescription>
            <CardTitle className="text-3xl">2h</CardTitle>
          </CardHeader>
        </Card>
      </div>

      {/* Messages Interface */}
      <Card className="h-[600px]">
        <div className="grid grid-cols-[350px_1fr] h-full">
          {/* Conversations List */}
          <div className="border-r border-border">
            <CardHeader className="border-b border-border">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="Buscar conversas..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
            </CardHeader>
            <ScrollArea className="h-[calc(600px-80px)]">
              <div className="p-2">
                {filteredConversations.map((conversation) => (
                  <button
                    key={conversation.id}
                    onClick={() => setSelectedConversation(conversation)}
                    className={`w-full flex items-start gap-3 p-3 rounded-lg hover:bg-muted transition-colors ${selectedConversation.id === conversation.id ? "bg-muted" : ""
                      }`}
                  >

                    <div className="flex-1 text-left min-w-0">
                      <div className="flex items-center justify-between mb-1">
                        <span className="font-medium text-sm truncate">{conversation.name}</span>
                        <span className="text-xs text-muted-foreground">{conversation.timestamp}</span>
                      </div>
                      <div className="flex items-center justify-between">
                        <p className="text-sm text-muted-foreground truncate">{conversation.lastMessage}</p>
                        {conversation.unread > 0 && (
                          <Badge
                            variant="default"
                            className="ml-2 h-5 w-5 p-0 flex items-center justify-center rounded-full"
                          >
                            {conversation.unread}
                          </Badge>
                        )}
                      </div>
                    </div>
                  </button>
                ))}
              </div>
            </ScrollArea>
          </div>

          {/* Chat Area */}
          <div className="flex flex-col">
            {/* Chat Header */}
            <CardHeader className="border-b border-border">
              <div className="flex items-center gap-3">

                <div>
                  <CardTitle className="text-base">{selectedConversation.name}</CardTitle>
                  <CardDescription className="text-xs">Online</CardDescription>
                </div>
              </div>
            </CardHeader>

            {/* Messages */}
            <ScrollArea className="flex-1 p-4">
              <div className="space-y-4">
                {mockMessages.map((message) => (
                  <div key={message.id} className={`flex ${message.isAdmin ? "justify-end" : "justify-start"}`}>
                    <div
                      className={`max-w-[70%] rounded-lg p-3 ${message.isAdmin ? "bg-primary text-primary-foreground" : "bg-muted"
                        }`}
                    >
                      <p className="text-sm">{message.content}</p>
                      <span className="text-xs opacity-70 mt-1 block">{message.timestamp}</span>
                    </div>
                  </div>
                ))}
              </div>
            </ScrollArea>

            {/* Message Input */}
            <div className="border-t border-border p-4">
              <div className="flex items-end gap-2">
                <Button variant="outline" size="icon">
                  <Paperclip className="h-4 w-4" />
                </Button>
                <Textarea
                  placeholder="Digite sua mensagem..."
                  value={messageText}
                  onChange={(e) => setMessageText(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === "Enter" && !e.shiftKey) {
                      e.preventDefault()
                      handleSendMessage()
                    }
                  }}
                  className="min-h-[60px] resize-none"
                />
                <Button onClick={handleSendMessage} size="icon">
                  <Send className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </div>
        </div>
      </Card>
    </div>
  )
}
