'use client';

export function SkeletonLine({ className = '' }: { className?: string }) {
  return <div className={`skeleton rounded ${className}`} />;
}

export function SkeletonAvatar({ size = 'md' }: { size?: 'sm' | 'md' | 'lg' }) {
  const sizeClass = size === 'sm' ? 'w-8 h-8' : size === 'lg' ? 'w-12 h-12' : 'w-10 h-10';
  return <div className={`skeleton rounded-full shrink-0 ${sizeClass}`} />;
}

export function SkeletonCard({ className = '', children }: { className?: string; children?: React.ReactNode }) {
  return (
    <div className={`card p-5 ${className}`}>
      {children || (
        <>
          <SkeletonLine className="h-5 w-40 mb-4" />
          <div className="space-y-3">
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
              <SkeletonLine className="h-9 rounded-lg" />
              <SkeletonLine className="h-9 rounded-lg" />
            </div>
            <SkeletonLine className="h-9 rounded-lg" />
            <SkeletonLine className="h-20 rounded-lg" />
          </div>
        </>
      )}
    </div>
  );
}

export function SkeletonTable({ columns = 5, rows = 6 }: { columns?: number; rows?: number }) {
  return (
    <div className="card overflow-hidden">
      <div className="flex items-center gap-6 px-4 py-3" style={{ borderBottom: '1px solid hsl(var(--border))' }}>
        {Array.from({ length: columns }).map((_, i) => (
          <SkeletonLine key={i} className="h-3 w-16" />
        ))}
      </div>
      {Array.from({ length: rows }).map((_, i) => (
        <div key={i} className="flex items-center gap-4 px-4 py-3" style={{ borderBottom: '1px solid hsl(var(--border))' }}>
          <SkeletonAvatar size="sm" />
          <div className="flex-1 flex items-center gap-6">
            {Array.from({ length: columns - 1 }).map((_, j) => (
              <SkeletonLine key={j} className={`h-3 ${j === 0 ? 'w-32' : 'w-20'}`} />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

function KPICardSkeleton() {
  return (
    <div className="metric-card">
      <div className="flex items-center justify-between mb-3">
        <SkeletonLine className="w-9 h-9 rounded-lg" />
        <SkeletonLine className="h-5 w-14 rounded-full" />
      </div>
      <SkeletonLine className="h-7 w-24 mb-1.5" />
      <SkeletonLine className="h-3 w-20" />
    </div>
  );
}

function TableRowSkeleton({ columns = 5 }: { columns?: number }) {
  return (
    <div className="flex items-center gap-4 px-4 py-3" style={{ borderBottom: '1px solid hsl(var(--border))' }}>
      <SkeletonAvatar size="sm" />
      <div className="flex-1 flex items-center gap-6">
        {Array.from({ length: columns - 1 }).map((_, i) => (
          <SkeletonLine key={i} className={`h-3 ${i === 0 ? 'w-32' : 'w-20'}`} />
        ))}
      </div>
    </div>
  );
}

function ListItemSkeleton() {
  return (
    <div className="flex items-center gap-4 px-5 py-4" style={{ borderBottom: '1px solid hsl(var(--border))' }}>
      <SkeletonAvatar />
      <div className="flex-1 min-w-0">
        <div className="flex items-center justify-between mb-1.5">
          <SkeletonLine className="h-3.5 w-28" />
          <SkeletonLine className="h-3 w-12" />
        </div>
        <SkeletonLine className="h-3 w-48 mb-1.5" />
        <div className="flex gap-2">
          <SkeletonLine className="h-4 w-20 rounded-full" />
          <SkeletonLine className="h-4 w-16 rounded-full" />
        </div>
      </div>
    </div>
  );
}

function SearchBarSkeleton() {
  return (
    <div className="flex flex-col sm:flex-row gap-3 mb-4">
      <SkeletonLine className="h-9 w-64 rounded-lg" />
      <div className="flex gap-2">
        <SkeletonLine className="h-9 w-24 rounded-lg" />
        <SkeletonLine className="h-9 w-24 rounded-lg" />
      </div>
    </div>
  );
}

function FilterTabsSkeleton({ count = 3 }: { count?: number }) {
  return (
    <div className="flex gap-1 p-1 rounded-xl" style={{ backgroundColor: 'hsl(var(--muted))' }}>
      {Array.from({ length: count }).map((_, i) => (
        <SkeletonLine key={i} className="h-8 w-24 rounded-lg" />
      ))}
    </div>
  );
}

const GRID_COLS_MAP: Record<number, string> = {
  2: 'grid grid-cols-2 gap-3 mb-6',
  3: 'grid grid-cols-2 sm:grid-cols-3 gap-3 mb-6',
  4: 'grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6',
  5: 'grid grid-cols-2 sm:grid-cols-5 gap-3 mb-6',
};

function StatStripSkeleton({ count = 4 }: { count?: number }) {
  return (
    <div className={GRID_COLS_MAP[count] || GRID_COLS_MAP[4]}>
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} className="card p-4 flex items-center gap-3">
          <SkeletonLine className="w-9 h-9 rounded-xl shrink-0" />
          <div>
            <SkeletonLine className="h-5 w-12 mb-1" />
            <SkeletonLine className="h-3 w-16" />
          </div>
        </div>
      ))}
    </div>
  );
}

export function InlineTableSkeleton({ columns = 6, rows = 8 }: { columns?: number; rows?: number }) {
  return (
    <div className="overflow-x-auto">
      <table className="w-full">
        <thead>
          <tr style={{ borderBottom: '1px solid hsl(var(--border))' }}>
            <th className="px-4 py-3 w-10"><SkeletonLine className="w-4 h-4 rounded" /></th>
            {Array.from({ length: columns }).map((_, i) => (
              <th key={i} className="px-4 py-3"><SkeletonLine className="h-3 w-16" /></th>
            ))}
          </tr>
        </thead>
        <tbody>
          {Array.from({ length: rows }).map((_, i) => (
            <tr key={i} style={{ borderBottom: '1px solid hsl(var(--border))' }}>
              <td className="px-4 py-3"><SkeletonLine className="w-4 h-4 rounded" /></td>
              {Array.from({ length: columns }).map((_, j) => (
                <td key={j} className="px-4 py-3">
                  {j === 0 ? (
                    <div className="flex items-center gap-3">
                      <SkeletonAvatar size="sm" />
                      <div>
                        <SkeletonLine className="h-3.5 w-24 mb-1" />
                        <SkeletonLine className="h-2.5 w-16" />
                      </div>
                    </div>
                  ) : (
                    <SkeletonLine className={`h-3 ${j === 1 ? 'w-20' : 'w-16'}`} />
                  )}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export function InlineFormSkeleton({ sections = 3 }: { sections?: number }) {
  return (
    <>
      {Array.from({ length: sections }).map((_, i) => (
        <div key={i} className="card p-5 mb-5">
          <SkeletonLine className="h-5 w-40 mb-4" />
          <div className="space-y-3">
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
              <SkeletonLine className="h-9 rounded-lg" />
              <SkeletonLine className="h-9 rounded-lg" />
            </div>
            <SkeletonLine className="h-9 rounded-lg" />
            <SkeletonLine className="h-20 rounded-lg" />
          </div>
        </div>
      ))}
    </>
  );
}

export function DashboardLoadingSkeleton() {
  return (
    <>
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        {Array.from({ length: 4 }).map((_, i) => <KPICardSkeleton key={i} />)}
      </div>
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-5 mb-5">
        <div className="card p-5 lg:col-span-2">
          <div className="flex items-center justify-between mb-4">
            <SkeletonLine className="h-4 w-32" />
            <SkeletonLine className="h-3 w-20" />
          </div>
          <SkeletonLine className="w-full h-[220px] rounded-xl" />
        </div>
        <div className="card p-5">
          <SkeletonLine className="h-4 w-24 mb-4" />
          <SkeletonLine className="w-full h-[160px] rounded-xl" />
          <div className="space-y-2 mt-4">
            {Array.from({ length: 3 }).map((_, i) => <SkeletonLine key={i} className="h-4" />)}
          </div>
        </div>
      </div>
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
        <div className="card p-5">
          <SkeletonLine className="h-4 w-32 mb-4" />
          <SkeletonLine className="w-full h-[200px] rounded-xl" />
        </div>
        <div className="card p-5">
          <SkeletonLine className="h-4 w-40 mb-4" />
          <SkeletonLine className="w-full h-[200px] rounded-xl" />
        </div>
      </div>
    </>
  );
}

export function TablePageLoadingSkeleton({ columns = 6, rows = 8 }: { columns?: number; rows?: number }) {
  return (
    <>
      <SearchBarSkeleton />
      <SkeletonTable columns={columns} rows={rows} />
    </>
  );
}

export function ListPageLoadingSkeleton({ rows = 6, showStats = false }: { rows?: number; showStats?: boolean }) {
  return (
    <>
      {showStats && <StatStripSkeleton />}
      <SearchBarSkeleton />
      <div className="card overflow-hidden">
        {Array.from({ length: rows }).map((_, i) => <ListItemSkeleton key={i} />)}
      </div>
    </>
  );
}

export function FormPageLoadingSkeleton({ sections = 3 }: { sections?: number }) {
  return <InlineFormSkeleton sections={sections} />;
}

export function TabsTableLoadingSkeleton({ columns = 5, tabCount = 3 }: { columns?: number; tabCount?: number }) {
  return (
    <>
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6">
        <FilterTabsSkeleton count={tabCount} />
        <SkeletonLine className="h-9 w-28 rounded-lg" />
      </div>
      <SearchBarSkeleton />
      <SkeletonTable columns={columns} rows={6} />
    </>
  );
}

export function GridCardLoadingSkeleton({ cards = 6 }: { cards?: number }) {
  return (
    <>
      <SearchBarSkeleton />
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {Array.from({ length: cards }).map((_, i) => (
          <div key={i} className="card p-5">
            <div className="flex items-center gap-3 mb-3">
              <SkeletonLine className="w-10 h-10 rounded-lg shrink-0" />
              <div className="flex-1">
                <SkeletonLine className="h-4 w-28 mb-1" />
                <SkeletonLine className="h-3 w-20" />
              </div>
            </div>
            <SkeletonLine className="h-3 w-full mb-2" />
            <SkeletonLine className="h-3 w-3/4" />
          </div>
        ))}
      </div>
    </>
  );
}

export function OrdersLoadingSkeleton() {
  return (
    <>
      <StatStripSkeleton count={4} />
      <div className="flex flex-col sm:flex-row gap-3 mb-4">
        <SkeletonLine className="h-9 w-64 rounded-lg" />
        <div className="flex gap-1 p-1 rounded-xl" style={{ backgroundColor: 'hsl(var(--muted))' }}>
          {Array.from({ length: 5 }).map((_, i) => (
            <SkeletonLine key={i} className="h-8 w-20 rounded-lg" />
          ))}
        </div>
      </div>
      <div className="card overflow-hidden">
        {Array.from({ length: 8 }).map((_, i) => <TableRowSkeleton key={i} columns={6} />)}
      </div>
    </>
  );
}

export function BookingsLoadingSkeleton() {
  return (
    <>
      <StatStripSkeleton count={4} />
      <div className="flex flex-col sm:flex-row gap-3 mb-4">
        <SkeletonLine className="h-9 w-64 rounded-lg" />
        <div className="flex gap-1 p-1 rounded-xl" style={{ backgroundColor: 'hsl(var(--muted))' }}>
          {Array.from({ length: 4 }).map((_, i) => (
            <SkeletonLine key={i} className="h-8 w-20 rounded-lg" />
          ))}
        </div>
      </div>
      <div className="card overflow-hidden">
        {Array.from({ length: 8 }).map((_, i) => (
          <div key={i} className="flex items-center gap-4 px-4 py-3" style={{ borderBottom: '1px solid hsl(var(--border))' }}>
            <SkeletonLine className="w-4 h-4 rounded" />
            <SkeletonAvatar size="sm" />
            <div className="flex-1 flex items-center gap-6">
              <SkeletonLine className="h-3 w-28" />
              <SkeletonLine className="h-3 w-16" />
              <SkeletonLine className="h-5 w-14 rounded-full" />
              <SkeletonLine className="h-3 w-20" />
              <SkeletonLine className="h-3 w-12" />
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

export function BillingLoadingSkeleton() {
  return (
    <>
      <div className="card p-6 mb-6">
        <div className="flex items-center justify-between">
          <div>
            <SkeletonLine className="h-5 w-32 mb-2" />
            <SkeletonLine className="h-3 w-48" />
          </div>
          <SkeletonLine className="h-9 w-28 rounded-lg" />
        </div>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
        {Array.from({ length: 3 }).map((_, i) => (
          <div key={i} className="card p-5">
            <SkeletonLine className="h-5 w-20 mb-2" />
            <SkeletonLine className="h-8 w-16 mb-4" />
            <div className="space-y-2">
              {Array.from({ length: 5 }).map((_, j) => (
                <SkeletonLine key={j} className="h-3 w-full" />
              ))}
            </div>
            <SkeletonLine className="h-9 w-full rounded-lg mt-4" />
          </div>
        ))}
      </div>
    </>
  );
}