"use client"

import { useGetClientCalls } 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 { Phone, Clock, Calendar, MessageSquareText } from "lucide-react"

interface ClientCallLogsProps {
    clientId: string
}

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

const formatDuration = (minutes: number) => {
    if (minutes === 0) return "0s"
    const mins = Math.floor(minutes)
    const secs = Math.round((minutes - mins) * 60)

    const parts = []
    if (mins > 0) parts.push(`${mins}m`)
    if (secs > 0) parts.push(`${secs}s`)

    return parts.join(" ") || "< 1s"
}

export function ClientCallLogs({ clientId }: ClientCallLogsProps) {
    const { data: calls = [], isLoading } = useGetClientCalls(clientId)

    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="font-semibold text-gray-900">Summary</TableHead>
                            <TableHead className="font-semibold text-gray-900">Duration</TableHead>
                            <TableHead className="font-semibold text-gray-900">Date & Time</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {calls.length === 0 ? (
                            <TableRow>
                                <TableCell colSpan={3} className="text-center py-12 text-gray-500">
                                    <div className="flex flex-col items-center gap-2">
                                        <Phone className="w-8 h-8 text-gray-300" />
                                        <p>No call logs found for this client.</p>
                                    </div>
                                </TableCell>
                            </TableRow>
                        ) : (
                            calls.map((call) => (
                                <TableRow key={call._id} className="hover:bg-gray-50/50 transition-colors">
                                    <TableCell>
                                        <div className="flex items-center gap-2 text-gray-700">
                                            <div className="p-2 bg-blue-50 rounded-lg shrink-0">
                                                <MessageSquareText className="w-4 h-4 text-primary-blue" />
                                            </div>
                                            <span className="italic">{call.summary || "No summary available"}</span>
                                        </div>
                                    </TableCell>
                                    <TableCell>
                                        <div className="flex items-center gap-1.5 text-gray-700 font-medium">
                                            <Clock className="w-4 h-4 text-gray-400" />
                                            {formatDuration(call.duration)}
                                        </div>
                                    </TableCell>
                                    <TableCell>
                                        <div className="flex items-center gap-1.5 text-gray-600">
                                            <Calendar className="w-4 h-4 text-gray-400" />
                                            {formatCallDate(call.created_at)}
                                        </div>
                                    </TableCell>
                                </TableRow>
                            ))
                        )}
                    </TableBody>
                </Table>
            </CardContent>
        </Card>
    )
}