'use client'

import { Skeleton } from "@/components/ui/skeleton"
import { useLanguage } from '@/lib/i18n'

export function LabSkeleton() {
  const { t } = useLanguage()
  return (
    <div className="flex-1 w-full h-full bg-slate-50 dark:bg-[#1a1c22] relative overflow-hidden">
      {/* Mesh grid background simulation */}
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
      
      {/* Top Menu Skeleton */}
      <div className="absolute top-4 left-4 flex gap-2">
        <Skeleton className="h-10 w-32 rounded-lg" />
        <Skeleton className="h-10 w-10 rounded-lg" />
      </div>

      {/* Style Menu Skeleton (Top Right) */}
      <div className="absolute top-4 right-4 flex flex-col gap-2">
        <Skeleton className="h-64 w-48 rounded-2xl" />
      </div>

      {/* Toolbar Skeleton (Bottom Center) */}
      <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-2 bg-white/50 dark:bg-black/20 backdrop-blur-md p-2 rounded-2xl border">
        {Array.from({ length: 9 }).map((_, i) => (
          <Skeleton key={i} className="h-10 w-10 rounded-xl" />
        ))}
      </div>

      {/* Loading Indicator */}
      <div className="absolute inset-0 flex items-center justify-center">
        <div className="flex flex-col items-center gap-4 bg-white/80 dark:bg-[#252830]/80 p-8 rounded-3xl border shadow-2xl backdrop-blur-xl animate-in fade-in zoom-in duration-500">
          <div className="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin" />
          <div className="flex flex-col items-center gap-1">
            <h3 className="font-bold text-lg">{t('lab.initializing')}</h3>
            <p className="text-sm text-muted-foreground animate-pulse">{t('lab.loadingIdeas')}</p>
          </div>
        </div>
      </div>
    </div>
  )
}