// src/components/ui/Skeleton.tsx
'use client';

interface SkeletonProps {
  className?: string;
  variant?: 'text' | 'circular' | 'rectangular';
  width?: string | number;
  height?: string | number;
  animation?: 'pulse' | 'wave' | 'none';
}

export function Skeleton({ 
  className = '', 
  variant = 'text',
  width,
  height,
  animation = 'pulse'
}: SkeletonProps) {
  const baseStyles = {
    background: 'var(--color-surface-alt)',
    borderRadius: variant === 'circular' ? '50%' : '0.5rem',
  };
  
  const sizeStyles = {
    width: width || (variant === 'text' ? '100%' : 'auto'),
    height: height || (variant === 'text' ? '1rem' : variant === 'circular' ? '2.5rem' : 'auto'),
  };
  
  const animationStyles = {
    pulse: {
      animation: 'pulse 1.5s ease-in-out infinite',
    },
    wave: {
      background: 'linear-gradient(90deg, var(--color-surface-alt) 25%, var(--color-border) 50%, var(--color-surface-alt) 75%)',
      backgroundSize: '200% 100%',
      animation: 'wave 1.5s ease-in-out infinite',
    },
    none: {},
  };
  
  return (
    <div
      className={className}
      style={{
        ...baseStyles,
        ...sizeStyles,
        ...animationStyles[animation],
      }}
    />
  );
}

// Table Skeleton Component
export function TableSkeleton({ rows = 5, columns = 5 }: { rows?: number; columns?: number }) {
  return (
    <div className="space-y-3">
      {/* Header Skeleton */}
      <div className="flex gap-4 pb-3 border-b" style={{ borderColor: 'var(--color-border)' }}>
        {Array.from({ length: columns }).map((_, i) => (
          <Skeleton key={i} width={`${100 / columns}%`} height="2rem" />
        ))}
      </div>
      
      {/* Rows Skeleton */}
      {Array.from({ length: rows }).map((_, rowIndex) => (
        <div key={rowIndex} className="flex gap-4 py-3">
          {Array.from({ length: columns }).map((_, colIndex) => (
            <Skeleton key={colIndex} width={`${100 / columns}%`} height="1.5rem" />
          ))}
        </div>
      ))}
    </div>
  );
}

// Card Skeleton
export function CardSkeleton() {
  return (
    <div 
      className="p-6 rounded-xl space-y-4"
      style={{
        background: 'var(--color-surface)',
        border: '1px solid var(--color-border)',
        borderRadius: 'var(--radius-card)',
      }}
    >
      <Skeleton width="60%" height="1.5rem" />
      <Skeleton width="80%" height="1rem" />
      <Skeleton width="100%" height="3rem" />
      <div className="flex gap-3">
        <Skeleton width="100px" height="2.5rem" />
        <Skeleton width="100px" height="2.5rem" />
      </div>
    </div>
  );
}

// Permission Table Skeleton (Specific)
export function PermissionTableSkeleton() {
  return (
    <div className="space-y-4">
      {/* Toolbar Skeleton */}
      <div className="flex justify-between items-center">
        <div className="flex gap-3">
          <Skeleton width="120px" height="40px" />
          <Skeleton width="120px" height="40px" />
        </div>
      </div>
      
      {/* Filter Panel Skeleton (optional) */}
      <div className="p-4 rounded-lg" style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)' }}>
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <Skeleton width="100%" height="40px" />
          <Skeleton width="100%" height="40px" />
          <Skeleton width="100%" height="40px" />
          <div className="flex gap-2">
            <Skeleton width="80px" height="40px" />
            <Skeleton width="80px" height="40px" />
          </div>
        </div>
      </div>
      
      {/* Table Skeleton */}
      <div 
        className="rounded-xl overflow-hidden"
        style={{
          background: 'var(--color-surface)',
          border: '1px solid var(--color-border)',
          borderRadius: 'var(--radius-card)',
        }}
      >
        <div className="p-4">
          <TableSkeleton rows={10} columns={6} />
        </div>
      </div>
      
      {/* Pagination Skeleton */}
      <div className="flex justify-between items-center pt-4">
        <Skeleton width="200px" height="20px" />
        <div className="flex gap-2">
          <Skeleton width="80px" height="36px" />
          <Skeleton width="80px" height="36px" />
        </div>
      </div>
    </div>
  );
}

export function EmployeesTableSkeleton() {
  return (
    <div className="space-y-4">
      <div className="flex justify-between">
        <div className="h-10 w-32 rounded animate-pulse" style={{ background: 'var(--color-surface-alt)' }}></div>
        <div className="h-10 w-32 rounded animate-pulse" style={{ background: 'var(--color-surface-alt)' }}></div>
      </div>
      <div className="rounded-lg border" style={{ borderColor: 'var(--color-border)' }}>
        <div className="p-4 space-y-3">
          {[...Array(5)].map((_, i) => (
            <div key={i} className="h-20 rounded animate-pulse" style={{ background: 'var(--color-surface-alt)' }}></div>
          ))}
        </div>
      </div>
    </div>
  );
}

export function RolesTableSkeleton() {
  return (
    <div className="space-y-4">
      <div className="flex justify-between">
        <div className="h-10 w-32 rounded animate-pulse" style={{ background: 'var(--color-surface-alt)' }}></div>
        <div className="h-10 w-32 rounded animate-pulse" style={{ background: 'var(--color-surface-alt)' }}></div>
      </div>
      <div className="rounded-lg border" style={{ borderColor: 'var(--color-border)' }}>
        <div className="p-4 space-y-3">
          {[...Array(5)].map((_, i) => (
            <div key={i} className="h-16 rounded animate-pulse" style={{ background: 'var(--color-surface-alt)' }}></div>
          ))}
        </div>
      </div>
    </div>
  );
}

export function LocationTableSkeleton() {
  return (
    <div className="space-y-4">
      <div className="flex justify-between">
        <div className="h-10 w-32 skeleton rounded-lg"></div>
        <div className="h-10 w-32 skeleton rounded-lg"></div>
      </div>
      <div className="rounded-lg border" style={{ borderColor: 'var(--color-border)' }}>
        <div className="p-4 space-y-3">
          {[...Array(5)].map((_, i) => (
            <div key={i} className="flex items-center gap-4">
              <div className="h-5 w-5 skeleton rounded"></div>
              <div className="h-12 flex-1 skeleton rounded"></div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export function DepartmentTableSkeleton() {
  return (
    <div className="space-y-4">
      <div className="flex justify-between">
        <div className="h-10 w-32 skeleton rounded-lg"></div>
        <div className="h-10 w-32 skeleton rounded-lg"></div>
      </div>
      <div className="rounded-lg border" style={{ borderColor: 'var(--color-border)' }}>
        <div className="p-4 space-y-3">
          {[...Array(5)].map((_, i) => (
            <div key={i} className="flex items-center gap-4">
              <div className="h-5 w-5 skeleton rounded"></div>
              <div className="h-12 flex-1 skeleton rounded"></div>
              <div className="h-8 w-20 skeleton rounded"></div>
              <div className="h-8 w-20 skeleton rounded"></div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export function DesignationTableSkeleton() {
  return (
    <div className="space-y-4">
      <div className="flex justify-between">
        <div className="h-10 w-32 skeleton rounded-lg"></div>
        <div className="h-10 w-32 skeleton rounded-lg"></div>
      </div>
      <div className="rounded-lg border" style={{ borderColor: 'var(--color-border)' }}>
        <div className="p-4 space-y-3">
          {[...Array(5)].map((_, i) => (
            <div key={i} className="flex items-center gap-4">
              <div className="h-5 w-5 skeleton rounded"></div>
              <div className="h-12 flex-1 skeleton rounded"></div>
              <div className="h-8 w-20 skeleton rounded"></div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}


export function PropertyCategoryTableSkeleton() {
  return (
    <div className="space-y-4">
      <div className="flex justify-between">
        <div className="h-10 w-32 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
        <div className="h-10 w-32 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
      </div>
      <div className="space-y-2">
        {[...Array(10)].map((_, i) => (
          <div key={i} className="h-16 bg-gray-100 dark:bg-gray-800 rounded animate-pulse"></div>
        ))}
      </div>
      <div className="flex justify-between mt-4">
        <div className="h-10 w-24 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
        <div className="h-10 w-48 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
      </div>
    </div>
  );
}

export function PropertyTypeTableSkeleton() {
  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <div className="h-10 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
        <div className="h-10 w-40 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
      </div>
      <div className="border rounded-lg" style={{ borderColor: 'var(--color-border)' }}>
        <div className="space-y-2 p-4">
          {[...Array(8)].map((_, i) => (
            <div key={i} className="flex items-center gap-4">
              <div className="h-5 w-5 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
              <div className="h-14 flex-1 bg-gray-100 dark:bg-gray-800 rounded animate-pulse"></div>
            </div>
          ))}
        </div>
      </div>
      <div className="flex justify-between items-center mt-4">
        <div className="h-10 w-48 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
        <div className="h-10 w-64 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
      </div>
    </div>
  );
}

export function CitiesTableSkeleton() {
  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <div className="h-10 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
        <div className="h-10 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
      </div>
      <div className="border rounded-lg" style={{ borderColor: 'var(--color-border)' }}>
        <div className="space-y-2 p-4">
          {[...Array(8)].map((_, i) => (
            <div key={i} className="flex items-center gap-4">
              <div className="h-5 w-5 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
              <div className="h-14 flex-1 bg-gray-100 dark:bg-gray-800 rounded animate-pulse"></div>
            </div>
          ))}
        </div>
      </div>
      <div className="flex justify-between items-center mt-4">
        <div className="h-10 w-48 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
        <div className="h-10 w-64 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
      </div>
    </div>
  );
}

export function CitiesPagesTableSkeleton() {
  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <div className="h-10 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
        <div className="h-10 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
      </div>
      <div className="border rounded-lg" style={{ borderColor: 'var(--color-border)' }}>
        <div className="space-y-2 p-4">
          {[...Array(8)].map((_, i) => (
            <div key={i} className="flex items-center gap-4">
              <div className="h-5 w-5 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
              <div className="h-14 flex-1 bg-gray-100 dark:bg-gray-800 rounded animate-pulse"></div>
            </div>
          ))}
        </div>
      </div>
      <div className="flex justify-between items-center mt-4">
        <div className="h-10 w-48 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
        <div className="h-10 w-64 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
      </div>
    </div>
  );
}

export function AmenityCategoriesTableSkeleton() {
  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <div className="h-10 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
        <div className="h-10 w-40 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
      </div>
      <div className="border rounded-lg" style={{ borderColor: 'var(--color-border)' }}>
        <div className="space-y-2 p-4">
          {[...Array(8)].map((_, i) => (
            <div key={i} className="flex items-center gap-4">
              <div className="h-5 w-5 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
              <div className="h-14 flex-1 bg-gray-100 dark:bg-gray-800 rounded animate-pulse"></div>
            </div>
          ))}
        </div>
      </div>
      <div className="flex justify-between items-center mt-4">
        <div className="h-10 w-48 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
        <div className="h-10 w-64 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
      </div>
    </div>
  );
}

export function AmenitiesTableSkeleton() {
  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <div className="h-10 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
        <div className="h-10 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
      </div>
      <div className="border rounded-lg" style={{ borderColor: 'var(--color-border)' }}>
        <div className="space-y-2 p-4">
          {[...Array(8)].map((_, i) => (
            <div key={i} className="flex items-center gap-4">
              <div className="h-5 w-5 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
              <div className="h-14 flex-1 bg-gray-100 dark:bg-gray-800 rounded animate-pulse"></div>
            </div>
          ))}
        </div>
      </div>
      <div className="flex justify-between items-center mt-4">
        <div className="h-10 w-48 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
        <div className="h-10 w-64 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
      </div>
    </div>
  );
}

export function ListingsTableSkeleton() {
  return (
    <div className="space-y-4">
      <div className="flex gap-2 border-b pb-2">
        {[...Array(7)].map((_, i) => (
          <div key={i} className="h-10 w-24 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
        ))}
      </div>
      <div className="flex justify-between items-center">
        <div className="h-10 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
        <div className="h-10 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
      </div>
      <div className="border rounded-lg" style={{ borderColor: 'var(--color-border)' }}>
        <div className="space-y-2 p-4">
          {[...Array(8)].map((_, i) => (
            <div key={i} className="flex items-center gap-4">
              <div className="h-5 w-5 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
              <div className="h-16 flex-1 bg-gray-100 dark:bg-gray-800 rounded animate-pulse"></div>
            </div>
          ))}
        </div>
      </div>
      <div className="flex justify-between items-center mt-4">
        <div className="h-10 w-48 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
        <div className="h-10 w-64 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
      </div>
    </div>
  );
}

export function PackagesTableSkeleton() {
  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <div className="h-10 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
        <div className="h-10 w-40 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
      </div>
      <div className="border rounded-lg" style={{ borderColor: 'var(--color-border)' }}>
        <div className="space-y-2 p-4">
          {[...Array(8)].map((_, i) => (
            <div key={i} className="flex items-center gap-4">
              <div className="h-5 w-5 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
              <div className="h-14 flex-1 bg-gray-100 dark:bg-gray-800 rounded animate-pulse"></div>
            </div>
          ))}
        </div>
      </div>
      <div className="flex justify-between items-center mt-4">
        <div className="h-10 w-48 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
        <div className="h-10 w-64 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
      </div>
    </div>
  );
}

export function PackagePurchasesTableSkeleton() {
  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <div className="h-10 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
        <div className="h-10 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
      </div>
      <div className="border rounded-lg" style={{ borderColor: 'var(--color-border)' }}>
        <div className="space-y-2 p-4">
          {[...Array(8)].map((_, i) => (
            <div key={i} className="flex items-center gap-4">
              <div className="h-5 w-5 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
              <div className="h-14 flex-1 bg-gray-100 dark:bg-gray-800 rounded animate-pulse"></div>
            </div>
          ))}
        </div>
      </div>
      <div className="flex justify-between items-center mt-4">
        <div className="h-10 w-48 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
        <div className="h-10 w-64 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
      </div>
    </div>
  );
}

export function UsersTableSkeleton() {
  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <div className="h-10 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
        <div className="h-10 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
      </div>
      <div className="border rounded-lg" style={{ borderColor: 'var(--color-border)' }}>
        <div className="space-y-2 p-4">
          {[...Array(8)].map((_, i) => (
            <div key={i} className="flex items-center gap-4">
              <div className="h-5 w-5 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
              <div className="h-14 flex-1 bg-gray-100 dark:bg-gray-800 rounded animate-pulse"></div>
            </div>
          ))}
        </div>
      </div>
      <div className="flex justify-between items-center mt-4">
        <div className="h-10 w-48 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
        <div className="h-10 w-64 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
      </div>
    </div>
  );
}
export function AgentsTableSkeleton() {
  return (
    <div className="space-y-4">
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {[...Array(4)].map((_, i) => (
          <div key={i} className="h-24 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
        ))}
      </div>
      <div className="flex justify-between items-center">
        <div className="h-10 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
      </div>
      <div className="border rounded-lg" style={{ borderColor: 'var(--color-border)' }}>
        <div className="space-y-2 p-4">
          {[...Array(8)].map((_, i) => (
            <div key={i} className="flex items-center gap-4">
              <div className="h-5 w-5 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
              <div className="h-16 flex-1 bg-gray-100 dark:bg-gray-800 rounded animate-pulse"></div>
            </div>
          ))}
        </div>
      </div>
      <div className="flex justify-between items-center mt-4">
        <div className="h-10 w-48 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
        <div className="h-10 w-64 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
      </div>
    </div>
  );
}

export function LeadsTableSkeleton() {
  return (
    <div className="space-y-4">
      <div className="flex flex-wrap gap-3">
        <div className="h-10 w-40 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
        <div className="h-10 w-40 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
      </div>
      <div className="flex justify-between items-center">
        <div className="h-10 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
      </div>
      <div className="border rounded-lg" style={{ borderColor: 'var(--color-border)' }}>
        <div className="space-y-2 p-4">
          {[...Array(8)].map((_, i) => (
            <div key={i} className="flex items-center gap-4">
              <div className="h-5 w-5 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
              <div className="h-16 flex-1 bg-gray-100 dark:bg-gray-800 rounded animate-pulse"></div>
            </div>
          ))}
        </div>
      </div>
      <div className="flex justify-between items-center mt-4">
        <div className="h-10 w-48 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
        <div className="h-10 w-64 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
      </div>
    </div>
  );
}

// Add animations to global styles
export function SkeletonStyles() {
  return (
    <style jsx global>{`
      @keyframes pulse {
        0%, 100% {
          opacity: 1;
        }
        50% {
          opacity: 0.5;
        }
      }
      
      @keyframes wave {
        0% {
          background-position: 200% 0;
        }
        100% {
          background-position: -200% 0;
        }
      }
    `}</style>
  );
}