import { Skeleton } from '@/components/ui/skeleton'

const ChatLoadMoreSkeleton = () => {
  return (
    <div className="mb-4 space-y-6">
      {/* 简化的历史消息骨架屏 - 占位高度约450px */}

      {/* AI消息骨架屏 */}
      <div className="flex justify-start">
        <div className="bg-surface-element-dark-hover relative max-w-[496px] rounded-lg px-4 pt-6 pb-4 backdrop-blur-[32px]">
          <div className="space-y-2">
            <Skeleton className="h-4 w-[320px]" />
            <Skeleton className="h-4 w-[280px]" />
          </div>

          {/* 播放按钮骨架屏 */}
          <div className="bg-surface-float-normal absolute -top-3 left-0 flex items-center gap-2 rounded-l-sm rounded-tr-sm px-3 py-1">
            <Skeleton className="h-4 w-4" />
            <Skeleton className="h-4 w-6" />
          </div>
        </div>
      </div>

      {/* 用户消息骨架屏 */}
      <div className="flex items-center justify-end">
        <div className="bg-primary-normal/20 max-w-[496px] rounded-lg p-4 backdrop-blur-[32px]">
          <div className="space-y-2">
            <Skeleton className="h-4 w-[200px]" />
          </div>
        </div>
      </div>

      {/* AI消息骨架屏 */}
      <div className="flex justify-start">
        <div className="bg-surface-element-dark-hover relative max-w-[496px] rounded-lg px-4 pt-6 pb-4 backdrop-blur-[32px]">
          <div className="space-y-2">
            <Skeleton className="h-4 w-[380px]" />
            <Skeleton className="h-4 w-[340px]" />
            <Skeleton className="h-4 w-[260px]" />
          </div>

          {/* 播放按钮骨架屏 */}
          <div className="bg-surface-float-normal absolute -top-3 left-0 flex items-center gap-2 rounded-l-sm rounded-tr-sm px-3 py-1">
            <Skeleton className="h-4 w-4" />
            <Skeleton className="h-4 w-6" />
          </div>
        </div>
      </div>

      {/* 用户消息骨架屏 */}
      <div className="flex items-center justify-end">
        <div className="bg-primary-normal/20 max-w-[496px] rounded-lg p-4 backdrop-blur-[32px]">
          <div className="space-y-2">
            <Skeleton className="h-4 w-[160px]" />
          </div>
        </div>
      </div>

      {/* AI消息骨架屏 */}
      <div className="flex justify-start">
        <div className="bg-surface-element-dark-hover relative max-w-[496px] rounded-lg px-4 pt-6 pb-4 backdrop-blur-[32px]">
          <div className="space-y-2">
            <Skeleton className="h-4 w-[350px]" />
            <Skeleton className="h-4 w-[300px]" />
          </div>

          {/* 播放按钮骨架屏 */}
          <div className="bg-surface-float-normal absolute -top-3 left-0 flex items-center gap-2 rounded-l-sm rounded-tr-sm px-3 py-1">
            <Skeleton className="h-4 w-4" />
            <Skeleton className="h-4 w-6" />
          </div>
        </div>
      </div>
    </div>
  )
}

export default ChatLoadMoreSkeleton
