import {
  KPISkeleton,
  TableSkeleton,
  FormSkeleton,
  OrganizationSkeleton,
  LoginSkeleton,
  EventDetailSkeleton,
  EventCardsSkeleton
} from './skeleton';
import { Card, CardHeader, CardBody } from './ui/Card';

/**
 * Showcase component demonstrating all the new skeleton components
 * This replaces generic spinners with contextually appropriate loading states
 */
export function SkeletonShowcase() {
  return (
    <div className="space-y-8 p-6">
      <div className="text-center space-y-2">
        <h1 className="text-3xl font-bold text-text-primary">
          Regional Skeleton Components
        </h1>
        <p className="text-text-secondary max-w-2xl mx-auto">
          Context-aware loading states that provide better user experience than generic spinners.
          Each skeleton matches the structure of the content it represents.
        </p>
      </div>

      {/* KPI Skeleton */}
      <Card>
        <CardHeader>
          <h2 className="text-xl font-semibold">KPI Dashboard Skeleton</h2>
          <p className="text-sm text-text-secondary">
            For dashboard statistics and metric cards
          </p>
        </CardHeader>
        <CardBody>
          <KPISkeleton count={4} />
        </CardBody>
      </Card>

      {/* Event Cards Skeleton */}
      <Card>
        <CardHeader>
          <h2 className="text-xl font-semibold">Event Cards Skeleton</h2>
          <p className="text-sm text-text-secondary">
            For event listing grids and card layouts
          </p>
        </CardHeader>
        <CardBody>
          <EventCardsSkeleton count={6} />
        </CardBody>
      </Card>

      {/* Table Skeleton */}
      <Card>
        <CardHeader>
          <h2 className="text-xl font-semibold">Table Skeleton</h2>
          <p className="text-sm text-text-secondary">
            For data tables with customizable columns and features
          </p>
        </CardHeader>
        <CardBody>
          <TableSkeleton 
            rows={5} 
            columns={4} 
            hasAvatar={true} 
            hasActions={true}
          />
        </CardBody>
      </Card>

      {/* Form Skeleton */}
      <Card>
        <CardHeader>
          <h2 className="text-xl font-semibold">Form Skeleton</h2>
          <p className="text-sm text-text-secondary">
            For form layouts with various input types
          </p>
        </CardHeader>
        <CardBody>
          <FormSkeleton 
            fields={4}
            textAreas={1}
            selects={2}
            checkboxes={2}
            layout="two-column"
          />
        </CardBody>
      </Card>

      {/* Full Page Skeletons */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Organization Skeleton Preview */}
        <Card>
          <CardHeader>
            <h2 className="text-lg font-semibold">Organization Loading</h2>
            <p className="text-sm text-text-secondary">
              Full-screen loading for org initialization (scaled down)
            </p>
          </CardHeader>
          <CardBody>
            <div className="h-64 bg-org-canvas rounded-lg overflow-hidden">
              <div className="scale-50 origin-top-left w-[200%] h-[200%]">
                <OrganizationSkeleton />
              </div>
            </div>
          </CardBody>
        </Card>

        {/* Login Skeleton Preview */}
        <Card>
          <CardHeader>
            <h2 className="text-lg font-semibold">Login Loading</h2>
            <p className="text-sm text-text-secondary">
              Authentication state loading (scaled down)
            </p>
          </CardHeader>
          <CardBody>
            <div className="h-64 bg-solid-with-pattern rounded-lg overflow-hidden">
              <div className="scale-50 origin-top-left w-[200%] h-[200%]">
                <LoginSkeleton />
              </div>
            </div>
          </CardBody>
        </Card>
      </div>

      {/* Event Detail Skeleton */}
      <Card>
        <CardHeader>
          <h2 className="text-xl font-semibold">Event Detail Skeleton</h2>
          <p className="text-sm text-text-secondary">
            Complex page layout with hero, stats, and content areas
          </p>
        </CardHeader>
        <CardBody>
          <div className="max-h-96 overflow-hidden">
            <EventDetailSkeleton />
          </div>
        </CardBody>
      </Card>

      <Card>
        <CardBody>
          <div className="text-center space-y-3">
            <h3 className="text-lg font-medium text-text-primary">
              Implementation Complete ✅
            </h3>
            <div className="text-sm text-text-secondary space-y-1 max-w-md mx-auto">
              <p>✅ Replaced LoadingSpinner in App.tsx with OrganizationSkeleton</p>
              <p>✅ Replaced LoginPage loading with LoginSkeleton</p>
              <p>✅ Replaced EventDetailPage loading with EventDetailSkeleton</p>
              <p>✅ EventsIndexPage already uses EventCardsSkeleton</p>
              <p>✅ Button loading spinner kept (appropriate for size constraint)</p>
              <p>✅ All new skeletons follow glassmorphism design system</p>
              <p>✅ Components use design tokens and responsive patterns</p>
            </div>
          </div>
        </CardBody>
      </Card>
    </div>
  );
}