'use client';

/* EngagementProfileSkeleton — phase 08 (D-23).
 * Purpose: Full-page loading skeleton matching the final layout —
 *          header skeleton + 4 metric-card skeletons (2×2) + breakdown card skeleton +
 *          2 list-section skeletons. Period chips render OUTSIDE this skeleton (they
 *          drive the fetch). */

import { Card, CardContent } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';

export function EngagementProfileSkeleton() {
  return (
    <div className="space-y-4">
      {/* Identity header skeleton */}
      <Card className="py-0 shadow-none">
        <CardContent className="px-4 py-4 flex items-center gap-3">
          <Skeleton className="h-14 w-14 rounded-full shrink-0" />
          <div className="flex-1 space-y-2 min-w-0">
            <Skeleton className="h-5 w-40" />
            <Skeleton className="h-3 w-32" />
            <Skeleton className="h-3 w-48" />
          </div>
        </CardContent>
      </Card>

      {/* 2×2 metric grid skeleton */}
      <div className="grid grid-cols-2 gap-3">
        {[0, 1, 2, 3].map((i) => (
          <Card key={i} className="py-0 shadow-none">
            <CardContent className="px-4 py-4">
              <Skeleton className="h-7 w-16" />
              <Skeleton className="h-3 w-24 mt-2" />
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Breakdown card skeleton */}
      <Card className="py-0 shadow-none">
        <CardContent className="px-4 py-4 space-y-4">
          <div className="space-y-2">
            <Skeleton className="h-3 w-24" />
            <Skeleton className="h-4 w-full" />
            <Skeleton className="h-4 w-full" />
            <Skeleton className="h-4 w-full" />
          </div>
          <div className="space-y-2 border-t border-border pt-3">
            <Skeleton className="h-3 w-32" />
            <Skeleton className="h-4 w-full" />
            <Skeleton className="h-4 w-full" />
          </div>
          <div className="space-y-2 border-t border-border pt-3">
            <Skeleton className="h-3 w-28" />
            <Skeleton className="h-4 w-full" />
            <Skeleton className="h-4 w-full" />
          </div>
        </CardContent>
      </Card>

      {/* Two list skeletons */}
      {[0, 1].map((i) => (
        <Card key={i} className="py-0 shadow-none">
          <CardContent className="px-4 py-4 space-y-3">
            <Skeleton className="h-4 w-32" />
            {[0, 1, 2].map((j) => (
              <div key={j} className="flex items-center justify-between">
                <Skeleton className="h-3 w-40" />
                <Skeleton className="h-3 w-12" />
              </div>
            ))}
          </CardContent>
        </Card>
      ))}
    </div>
  );
}