'use client'

import Skeleton from '@/components/Skeleton'

type Props = {
    variant?: 'desktop' | 'mobile'
    theater?: boolean
    isPopout?: boolean
}

export default function ChatCardSkeleton({ variant = 'desktop', theater = false, isPopout = false }: Props) {
    const baseCardClass =
        variant === 'desktop'
            ? `relative min-h-[520px] border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0c0d0e] overflow-hidden flex flex-col ${theater ? '[@media(min-width:965px)]:h-screen [@media(min-width:965px)]:rounded-none border-t-0' : isPopout ? 'h-full' : 'h-[calc(100vh-65px-2rem)] rounded-xl'
            }`
            : `relative border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0c0d0e] overflow-hidden flex flex-col flex-1 min-h-0 ${theater ? 'rounded-none p-0' : isPopout ? 'h-full' : 'rounded-xl'
            }`

    const headerPad = variant === 'mobile' ? (theater ? 'px-2 py-2' : 'px-4 py-3') : 'px-4 py-3'
    const bodyPad = variant === 'mobile' ? (theater ? 'px-3 py-2' : 'px-4 py-3') : 'px-4 py-3'
    const inputPad = variant === 'mobile' ? (theater ? 'px-0 py-2' : 'px-3 py-3') : 'px-3 py-3'

    return (
        <div className={baseCardClass}>
            <div className={`flex items-center justify-between border-b border-gray-200 dark:border-gray-800 ${headerPad}`}>
                <Skeleton variant="text" width={90} height={16} animation="shimmer" />
                <div className="flex items-center gap-2">
                    <Skeleton variant="circular" width={36} height={36} animation="shimmer" />
                    <Skeleton variant="circular" width={36} height={36} animation="shimmer" />
                    {variant === 'desktop' && <Skeleton variant="circular" width={36} height={36} animation="shimmer" />}
                </div>
            </div>

            <div className={`flex-1 min-h-0 overflow-y-auto space-y-3 ${bodyPad}`}>
                {Array.from({ length: 6 }).map((_, idx) => (
                    <div key={idx} className="space-y-2">
                        <div className="flex items-center gap-2">
                            <Skeleton variant="circular" width={24} height={24} animation="shimmer" />
                            <Skeleton variant="text" width="50%" height={12} animation="shimmer" />
                        </div>
                        <Skeleton variant="text" width="80%" height={14} animation="shimmer" />
                        <Skeleton variant="text" width="60%" height={14} animation="shimmer" />
                    </div>
                ))}
            </div>

            <div className={`border-t border-gray-200 dark:border-gray-800 ${inputPad}`}>
                <div className="flex items-center gap-2">
                    <Skeleton variant="circular" width={36} height={36} animation="shimmer" />
                    <Skeleton variant="rectangular" width="100%" height={40} className="rounded-full" animation="shimmer" />
                </div>
            </div>
        </div>
    )
}