"use client"

import { useGetWhatsAppSessions } from "@/lib/react-query/hooks/clients"
import { Card, CardContent } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Calendar, MessageCircle, Hash, ChevronDown, ChevronUp, User, Bot } from "lucide-react"
import { useState, Fragment } from "react"
import { cn } from "@/lib/utils"

interface ClientWhatsAppSessionsProps {
    clientId: string
}

const formatWhatsAppDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: 'numeric',
        minute: '2-digit',
        hour12: true
    })
}

export function ClientWhatsAppSessions({ clientId }: ClientWhatsAppSessionsProps) {
    const { data: sessions = [], isLoading } = useGetWhatsAppSessions(clientId)
    const [expandedSessions, setExpandedSessions] = useState<string[]>([])

    const toggleSession = (sessionId: string) => {
        setExpandedSessions(prev =>
            prev.includes(sessionId)
                ? prev.filter(id => id !== sessionId)
                : [...prev, sessionId]
        )
    }

    if (isLoading) {
        return (
            <div className="flex items-center justify-center py-12">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-blue"></div>
            </div>
        )
    }

    return (
        <Card className="shadow-sm border-gray-200">
            <CardContent className="p-0">
                <Table>
                    <TableHeader>
                        <TableRow className="bg-gray-50/50">
                            <TableHead className="w-10"></TableHead>
                            <TableHead className="font-semibold text-gray-900">Session ID</TableHead>
                            <TableHead className="font-semibold text-gray-900">Messages</TableHead>
                            <TableHead className="font-semibold text-gray-900">Started At</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {sessions.length === 0 ? (
                            <TableRow>
                                <TableCell colSpan={4} className="text-center py-12 text-gray-500">
                                    <div className="flex flex-col items-center gap-2">
                                        <MessageCircle className="w-8 h-8 text-gray-300" />
                                        <p>No WhatsApp sessions found for this client.</p>
                                    </div>
                                </TableCell>
                            </TableRow>
                        ) : (
                            sessions.map((session) => (
                                <Fragment key={session.sessionId}>
                                    <TableRow
                                        className="hover:bg-gray-50/50 transition-colors cursor-pointer"
                                        onClick={() => toggleSession(session.sessionId)}
                                    >
                                        <TableCell>
                                            {expandedSessions.includes(session.sessionId) ? (
                                                <ChevronUp className="w-4 h-4 text-gray-400" />
                                            ) : (
                                                <ChevronDown className="w-4 h-4 text-gray-400" />
                                            )}
                                        </TableCell>
                                        <TableCell>
                                            <div className="flex items-center gap-2 text-gray-700">
                                                <div className="p-2 bg-emerald-50 rounded-lg shrink-0">
                                                    <MessageCircle className="w-4 h-4 text-emerald-600" />
                                                </div>
                                                <span className="font-medium font-mono text-xs">{session.sessionId}</span>
                                            </div>
                                        </TableCell>
                                        <TableCell>
                                            <div className="flex items-center gap-1.5 text-gray-700 font-bold">
                                                <Hash className="w-4 h-4 text-gray-400" />
                                                {session.messageCount} messages
                                            </div>
                                        </TableCell>
                                        <TableCell>
                                            <div className="flex items-center gap-1.5 text-gray-600">
                                                <Calendar className="w-4 h-4 text-gray-400" />
                                                {formatWhatsAppDate(session.startedAt)}
                                            </div>
                                        </TableCell>
                                    </TableRow>
                                    {expandedSessions.includes(session.sessionId) && session.messages && (
                                        <TableRow>
                                            <TableCell colSpan={4} className="bg-gray-50/30 p-4">
                                                <div className="space-y-4 max-w-3xl mx-auto">
                                                    {session.messages.map((msg) => (
                                                        <div
                                                            key={msg._id}
                                                            className={cn(
                                                                "flex gap-3",
                                                                msg.role === "user" ? "flex-row-reverse" : "flex-row"
                                                            )}
                                                        >
                                                            <div className={cn(
                                                                "w-8 h-8 rounded-full flex items-center justify-center shrink-0",
                                                                msg.role === "user" ? "bg-blue-100 text-blue-600" : "bg-emerald-100 text-emerald-600"
                                                            )}>
                                                                {msg.role === "user" ? <User className="w-4 h-4" /> : <Bot className="w-4 h-4" />}
                                                            </div>
                                                            <div className={cn(
                                                                "p-3 rounded-2xl max-w-[80%] text-sm shadow-sm",
                                                                msg.role === "user"
                                                                    ? "bg-blue-600 text-white rounded-tr-none"
                                                                    : "bg-white border border-gray-200 text-gray-700 rounded-tl-none"
                                                            )}>
                                                                <p className="whitespace-pre-wrap">{msg.text}</p>
                                                            </div>
                                                        </div>
                                                    ))}
                                                </div>
                                            </TableCell>
                                        </TableRow>
                                    )}
                                </Fragment>
                            ))
                        )}
                    </TableBody>
                </Table>
            </CardContent>
        </Card>
    )
}