'use client';

import React from 'react';

export function SkeletonBlock({ className = '' }: { className?: string }) {
  return <div className={`animate-pulse rounded bg-surface-container-high/60 ${className}`} />;
}

export function OverviewSkeleton() {
  return (
    <div className="flex flex-col space-y-6" aria-label="Loading Founder Portal data" role="status">
      {/* Masthead Skeleton */}
      <div className="rounded-lg bg-surface-container-lowest border border-outline-variant p-6">
        <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6">
          <div className="flex items-center gap-5">
            <SkeletonBlock className="w-16 h-16 rounded" />
            <div className="space-y-2">
              <SkeletonBlock className="w-64 h-7" />
              <SkeletonBlock className="w-48 h-4" />
              <SkeletonBlock className="w-80 h-3 mt-1" />
            </div>
          </div>
          <div className="flex items-center gap-2">
            <SkeletonBlock className="w-28 h-8 rounded" />
            <SkeletonBlock className="w-24 h-8 rounded" />
          </div>
        </div>
      </div>

      {/* 4 Metric Cards Skeleton */}
      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
        {[1, 2, 3, 4].map((i) => (
          <div key={i} className="rounded-lg bg-surface-container-lowest border border-outline-variant p-4 h-32 flex flex-col justify-between">
            <div className="flex justify-between">
              <SkeletonBlock className="w-24 h-3" />
              <SkeletonBlock className="w-16 h-3" />
            </div>
            <SkeletonBlock className="w-20 h-8" />
            <div className="flex justify-between">
              <SkeletonBlock className="w-24 h-3" />
              <SkeletonBlock className="w-20 h-3" />
            </div>
          </div>
        ))}
      </div>

      {/* Attention Required Skeleton */}
      <div className="rounded-lg bg-surface-container-lowest border border-outline-variant p-5 space-y-4">
        <div className="flex justify-between">
          <SkeletonBlock className="w-40 h-4" />
          <SkeletonBlock className="w-28 h-4" />
        </div>
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
          {[1, 2, 3].map((i) => (
            <div key={i} className="rounded bg-surface-container border border-outline-variant p-4 h-48 flex flex-col justify-between">
              <SkeletonBlock className="w-32 h-4 mb-3" />
              <SkeletonBlock className="w-full h-20" />
              <SkeletonBlock className="w-24 h-4 self-end" />
            </div>
          ))}
        </div>
      </div>

      {/* Upcoming Rides Skeleton */}
      <div className="space-y-4">
        <div className="flex justify-between">
          <SkeletonBlock className="w-44 h-5" />
          <SkeletonBlock className="w-28 h-4" />
        </div>
        <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
          {[1, 2].map((i) => (
            <div key={i} className="rounded-lg bg-surface-container-lowest border border-outline-variant p-5 h-64 flex flex-col justify-between">
              <SkeletonBlock className="w-48 h-4" />
              <SkeletonBlock className="w-full h-12" />
              <SkeletonBlock className="w-full h-16" />
              <div className="flex justify-between pt-3 border-t border-outline-variant/60">
                <SkeletonBlock className="w-36 h-8" />
                <SkeletonBlock className="w-24 h-8" />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}