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

import { Skeleton } from './CustomSkeleton';

interface FormSkeletonProps {
  fields?: number;
  hasDescription?: boolean;
  hasSelect?: boolean;
  hasTextarea?: boolean;
  submitButtonText?: string;
  cancelButtonText?: string;
  variant?: 'simple' | 'detailed' | 'full';
}

export function FormSkeleton({ 
  fields = 4,
  hasDescription = true,
  hasSelect = false,
  hasTextarea = false,
  variant = 'detailed'
}: FormSkeletonProps) {
  
  const getFieldWidth = (index: number) => {
    if (variant === 'simple') return '100%';
    if (variant === 'detailed') {
      // First field wider, others normal
      return index === 0 ? '80%' : '100%';
    }
    return '100%';
  };
  
  return (
    <div 
      className="p-6 md:p-8"
      style={{
        background: 'var(--color-surface)',
        border: '1px solid var(--color-border)',
        borderRadius: 'var(--radius-card)',
        boxShadow: 'var(--shadow-card-md)',
        width: '100%',
        maxWidth: '800px',
      }}
    >
      <div className="space-y-6">
        {/* Form Fields */}
        {Array.from({ length: fields }).map((_, index) => (
          <div key={index} className="space-y-2">
            {/* Label Skeleton */}
            <Skeleton width="120px" height="1rem" />
            
            {/* Input Skeleton */}
            <Skeleton 
              width={getFieldWidth(index)} 
              height="2.75rem" 
            />
            
            {/* Hint Text Skeleton (for first field usually) */}
            {hasDescription && index === 0 && (
              <Skeleton width="60%" height="0.75rem" />
            )}
          </div>
        ))}
        
        {/* Select Field Skeleton (if needed) */}
        {hasSelect && (
          <div className="space-y-2">
            <Skeleton width="100px" height="1rem" />
            <Skeleton width="100%" height="2.75rem" />
          </div>
        )}
        
        {/* Textarea Skeleton (if needed) */}
        {hasTextarea && (
          <div className="space-y-2">
            <Skeleton width="100px" height="1rem" />
            <Skeleton width="100%" height="6rem" />
          </div>
        )}
        
        {/* Action Buttons Skeleton */}
        <div className="flex gap-3 pt-4">
          <Skeleton width="120px" height="2.75rem" />
          <Skeleton width="100px" height="2.75rem" />
        </div>
      </div>
    </div>
  );
}

// Specific Permission Form Skeleton
export function PermissionFormSkeleton() {
  return (
    <div 
      className="p-6 md:p-8"
      style={{
        background: 'var(--color-surface)',
        border: '1px solid var(--color-border)',
        borderRadius: 'var(--radius-card)',
        boxShadow: 'var(--shadow-card-md)',
        width: '100%',
        maxWidth: '800px',
      }}
    >
      <div className="space-y-6">
        {/* Permission Name Field */}
        <div className="space-y-2">
          <Skeleton width="140px" height="1rem" />
          <Skeleton width="100%" height="2.75rem" />
          <Skeleton width="60%" height="0.75rem" />
        </div>
        
        {/* Module Field */}
        <div className="space-y-2">
          <Skeleton width="80px" height="1rem" />
          <Skeleton width="100%" height="2.75rem" />
        </div>
        
        {/* Action Select Field */}
        <div className="space-y-2">
          <Skeleton width="70px" height="1rem" />
          <Skeleton width="100%" height="2.75rem" />
        </div>
        
        {/* Description Textarea */}
        <div className="space-y-2">
          <Skeleton width="100px" height="1rem" />
          <Skeleton width="100%" height="6rem" />
        </div>
        
        {/* Buttons */}
        <div className="flex gap-3 pt-4">
          <Skeleton width="140px" height="2.75rem" />
          <Skeleton width="100px" height="2.75rem" />
        </div>
      </div>
    </div>
  );
}

// Generic Loading Form (for any CRUD form)
export function LoadingForm({ type = 'create' }: { type?: 'create' | 'edit' }) {
  return (
    <div className="space-y-6">
      <div>
        <Skeleton width="200px" height="2rem" />
        <Skeleton width="300px" height="1rem" className="mt-2" />
      </div>
      
      <FormSkeleton 
        fields={4}
        hasDescription={true}
        hasSelect={true}
        hasTextarea={true}
        submitButtonText={type === 'create' ? 'Create' : 'Update'}
        cancelButtonText="Cancel"
      />
    </div>
  );
}

export function RoleFormSkeleton() {
  return (
    <div className="max-w-2xl space-y-6">
      <div className="h-10 rounded animate-pulse" style={{ background: 'var(--color-surface-alt)' }}></div>
      <div className="h-24 rounded animate-pulse" style={{ background: 'var(--color-surface-alt)' }}></div>
      <div className="h-64 rounded animate-pulse" style={{ background: 'var(--color-surface-alt)' }}></div>
      <div className="flex gap-3">
        <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>
  );
}

export function EmployeeFormSkeleton() {
  return (
    <div className="max-w-4xl space-y-6">
      <div className="flex gap-2 mb-6">
        {[1, 2, 3, 4, 5].map((i) => (
          <div key={i} className="h-10 w-24 rounded animate-pulse" style={{ background: 'var(--color-surface-alt)' }}></div>
        ))}
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        {[...Array(8)].map((_, i) => (
          <div key={i} className="space-y-2">
            <div className="h-4 w-24 rounded animate-pulse" style={{ background: 'var(--color-surface-alt)' }}></div>
            <div className="h-10 rounded animate-pulse" style={{ background: 'var(--color-surface-alt)' }}></div>
          </div>
        ))}
      </div>
      <div className="flex gap-3 pt-4">
        <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>
  );
}

export function LocationFormSkeleton() {
  return (
    <div className="max-w-2xl">
      <div className="space-y-6">
        {/* Two column grid for name and country */}
        <div className="grid grid-cols-1 md:grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <div className="h-4 w-32 skeleton rounded mb-2"></div>
            <div className="h-11 w-full skeleton rounded-lg"></div>
          </div>
          <div>
            <div className="h-4 w-24 skeleton rounded mb-2"></div>
            <div className="h-11 w-full skeleton rounded-lg"></div>
          </div>
        </div>
        
        {/* Address Line 1 */}
        <div>
          <div className="h-4 w-28 skeleton rounded mb-2"></div>
          <div className="h-11 w-full skeleton rounded-lg"></div>
        </div>
        
        {/* Address Line 2 */}
        <div>
          <div className="h-4 w-28 skeleton rounded mb-2"></div>
          <div className="h-11 w-full skeleton rounded-lg"></div>
        </div>
        
        {/* City, State, Postal Code - 3 columns */}
        <div className="grid grid-cols-1 md:grid-cols-1 sm:grid-cols-3 gap-6">
          <div>
            <div className="h-4 w-20 skeleton rounded mb-2"></div>
            <div className="h-11 w-full skeleton rounded-lg"></div>
          </div>
          <div>
            <div className="h-4 w-28 skeleton rounded mb-2"></div>
            <div className="h-11 w-full skeleton rounded-lg"></div>
          </div>
          <div>
            <div className="h-4 w-24 skeleton rounded mb-2"></div>
            <div className="h-11 w-full skeleton rounded-lg"></div>
          </div>
        </div>
        
        {/* Phone and Email - 2 columns */}
        <div className="grid grid-cols-1 md:grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <div className="h-4 w-24 skeleton rounded mb-2"></div>
            <div className="h-11 w-full skeleton rounded-lg"></div>
          </div>
          <div>
            <div className="h-4 w-24 skeleton rounded mb-2"></div>
            <div className="h-11 w-full skeleton rounded-lg"></div>
          </div>
        </div>
        
        {/* Status checkbox */}
        <div>
          <div className="h-5 w-32 skeleton rounded"></div>
        </div>
        
        {/* Buttons */}
        <div className="flex gap-3 pt-4">
          <div className="h-11 w-32 skeleton rounded-lg"></div>
          <div className="h-11 w-24 skeleton rounded-lg"></div>
        </div>
      </div>
    </div>
  );
}

export function DepartmentFormSkeleton() {
  return (
    <div className="max-w-2xl">
      <div className="space-y-6">
        {/* Department Name */}
        <div>
          <div className="h-4 w-32 skeleton rounded mb-2"></div>
          <div className="h-11 w-full skeleton rounded-lg"></div>
        </div>
        
        {/* Location */}
        <div>
          <div className="h-4 w-24 skeleton rounded mb-2"></div>
          <div className="h-11 w-full skeleton rounded-lg"></div>
        </div>
        
        {/* Parent Department */}
        <div>
          <div className="h-4 w-36 skeleton rounded mb-2"></div>
          <div className="h-11 w-full skeleton rounded-lg"></div>
        </div>
        
        {/* Description */}
        <div>
          <div className="h-4 w-28 skeleton rounded mb-2"></div>
          <div className="h-28 w-full skeleton rounded-lg"></div>
        </div>
        
        {/* Status Checkbox */}
        <div>
          <div className="h-5 w-32 skeleton rounded"></div>
        </div>
        
        {/* Buttons */}
        <div className="flex gap-3 pt-4">
          <div className="h-11 w-32 skeleton rounded-lg"></div>
          <div className="h-11 w-24 skeleton rounded-lg"></div>
        </div>
      </div>
    </div>
  );
}

export function DesignationFormSkeleton() {
  return (
    <div className="max-w-2xl">
      <div className="space-y-6">
        {/* Title field */}
        <div>
          <div className="h-4 w-32 skeleton rounded mb-2"></div>
          <div className="h-11 w-full skeleton rounded-lg"></div>
        </div>
        
        {/* Description field */}
        <div>
          <div className="h-4 w-28 skeleton rounded mb-2"></div>
          <div className="h-28 w-full skeleton rounded-lg"></div>
        </div>
        
        {/* Status Checkbox */}
        <div>
          <div className="h-5 w-32 skeleton rounded"></div>
        </div>
        
        {/* Buttons */}
        <div className="flex gap-3 pt-4">
          <div className="h-11 w-32 skeleton rounded-lg"></div>
          <div className="h-11 w-24 skeleton rounded-lg"></div>
        </div>
      </div>
    </div>
  );
}

export function PropertyCategoryFormSkeleton() {
  return (
    <div className="max-w-2xl space-y-6">
      <div className="h-8 w-48 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
      <div className="space-y-4">
        <div className="h-12 bg-gray-100 dark:bg-gray-800 rounded animate-pulse"></div>
        <div className="h-12 bg-gray-100 dark:bg-gray-800 rounded animate-pulse"></div>
        <div className="h-12 bg-gray-100 dark:bg-gray-800 rounded animate-pulse"></div>
        <div className="flex gap-3">
          <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>
    </div>
  );
}

export function PropertyTypeFormSkeleton() {
  return (
    <div 
      className="p-6 md:p-8 space-y-6"
      style={{ 
        background: 'var(--color-surface)',
        border: '1px solid var(--color-border)',
        borderRadius: 'var(--radius-card)',
        maxWidth: '800px'
      }}
    >
      {[...Array(7)].map((_, i) => (
        <div key={i} className="space-y-2">
          <div className="h-4 w-32 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
          <div className="h-12 w-full bg-gray-100 dark:bg-gray-800 rounded-lg animate-pulse"></div>
        </div>
      ))}
      <div className="flex gap-3 pt-4">
        <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>
  );
}

export function CityFormSkeleton() {
  return (
    <div 
      className="p-6 md:p-8 space-y-6"
      style={{ 
        background: 'var(--color-surface)',
        border: '1px solid var(--color-border)',
        borderRadius: 'var(--radius-card)',
        maxWidth: '800px'
      }}
    >
      {[...Array(6)].map((_, i) => (
        <div key={i} className="space-y-2">
          <div className="h-4 w-32 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
          <div className="h-12 w-full bg-gray-100 dark:bg-gray-800 rounded-lg animate-pulse"></div>
        </div>
      ))}
      <div className="flex gap-3 pt-4">
        <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>
  );
}

export function CitiesPagesFormSkeleton() {
  return (
    <div 
      className="p-6 md:p-8 space-y-6"
      style={{ 
        background: 'var(--color-surface)',
        border: '1px solid var(--color-border)',
        borderRadius: 'var(--radius-card)',
        maxWidth: '1200px'
      }}
    >
      {[...Array(8)].map((_, i) => (
        <div key={i} className="space-y-2">
          <div className="h-4 w-32 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
          <div className="h-12 w-full bg-gray-100 dark:bg-gray-800 rounded-lg animate-pulse"></div>
        </div>
      ))}
      <div className="flex gap-3 pt-4">
        <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>
  );
}

export function AmenityCategoryFormSkeleton() {
  return (
    <div 
      className="p-6 md:p-8 space-y-6"
      style={{ 
        background: 'var(--color-surface)',
        border: '1px solid var(--color-border)',
        borderRadius: 'var(--radius-card)',
        maxWidth: '800px'
      }}
    >
      {[...Array(5)].map((_, i) => (
        <div key={i} className="space-y-2">
          <div className="h-4 w-32 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
          <div className="h-12 w-full bg-gray-100 dark:bg-gray-800 rounded-lg animate-pulse"></div>
        </div>
      ))}
      <div className="flex gap-3 pt-4">
        <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>
  );
}

export function AmenityFormSkeleton() {
  return (
    <div 
      className="p-6 md:p-8 space-y-6"
      style={{ 
        background: 'var(--color-surface)',
        border: '1px solid var(--color-border)',
        borderRadius: 'var(--radius-card)',
        maxWidth: '900px'
      }}
    >
      {[...Array(6)].map((_, i) => (
        <div key={i} className="space-y-2">
          <div className="h-4 w-32 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
          <div className="h-12 w-full bg-gray-100 dark:bg-gray-800 rounded-lg animate-pulse"></div>
        </div>
      ))}
      <div className="flex gap-3 pt-4">
        <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>
  );
}

export function ListingFormSkeleton() {
  return (
    <div className="p-6 md:p-8 space-y-6 max-w-4xl" style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-card)' }}>
      {[...Array(8)].map((_, i) => (
        <div key={i} className="space-y-2">
          <div className="h-4 w-32 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
          <div className="h-12 w-full bg-gray-100 dark:bg-gray-800 rounded-lg animate-pulse"></div>
        </div>
      ))}
      <div className="flex gap-3 pt-4">
        <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>
  );
}

export function PackageFormSkeleton() {
  return (
    <div 
      className="p-6 md:p-8 space-y-6"
      style={{ 
        background: 'var(--color-surface)',
        border: '1px solid var(--color-border)',
        borderRadius: 'var(--radius-card)',
        maxWidth: '800px'
      }}
    >
      {[...Array(7)].map((_, i) => (
        <div key={i} className="space-y-2">
          <div className="h-4 w-32 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
          <div className="h-12 w-full bg-gray-100 dark:bg-gray-800 rounded-lg animate-pulse"></div>
        </div>
      ))}
      <div className="flex gap-3 pt-4">
        <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>
  );
}
export function UserFormSkeleton() {
  return (
    <div 
      className="p-6 md:p-8 space-y-6"
      style={{ 
        background: 'var(--color-surface)',
        border: '1px solid var(--color-border)',
        borderRadius: 'var(--radius-card)',
        maxWidth: '900px'
      }}
    >
      {[...Array(8)].map((_, i) => (
        <div key={i} className="space-y-2">
          <div className="h-4 w-32 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
          <div className="h-12 w-full bg-gray-100 dark:bg-gray-800 rounded-lg animate-pulse"></div>
        </div>
      ))}
      <div className="flex gap-3 pt-4">
        <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>
  );
}
export function AgentFormSkeleton() {
  return (
    <div 
      className="p-6 md:p-8 space-y-6"
      style={{ 
        background: 'var(--color-surface)',
        border: '1px solid var(--color-border)',
        borderRadius: 'var(--radius-card)',
        maxWidth: '1000px'
      }}
    >
      {[...Array(12)].map((_, i) => (
        <div key={i} className="space-y-2">
          <div className="h-4 w-32 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
          <div className="h-12 w-full bg-gray-100 dark:bg-gray-800 rounded-lg animate-pulse"></div>
        </div>
      ))}
      <div className="flex gap-3 pt-4">
        <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>
  );
}