import React, { useId } from 'react';

export function AuthSkeleton() {
  const id = useId().replace(/:/g, '');
  const shimmerKeyframes = `
    @keyframes shimmer-${id} {
      0%   { background-position: -400px 0; }
      100% { background-position: 400px 0; }
    }
  `;

  const shimmer = {
    background:
      'linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%)',
    backgroundSize: '800px 100%',
    animation: `shimmer-${id} 1.6s ease-in-out infinite`,
    borderRadius: '4px',
  } as React.CSSProperties;

  return (
    <>
      <style>{shimmerKeyframes}</style>
      <div
        style={
          {
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            minHeight: '100dvh',
            padding: '16px',
            '--skeleton-base': 'color-mix(in srgb, currentColor 8%, transparent)',
            '--skeleton-shine': 'color-mix(in srgb, currentColor 15%, transparent)',
          } as React.CSSProperties
        }
      >
        {/* Card */}
        <div
          style={{
            width: '100%',
            maxWidth: '360px',
            display: 'flex',
            flexDirection: 'column',
            gap: '24px',
          }}
        >
          {/* Logo + app name */}
          <div
            style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '12px' }}
          >
            <div style={{ ...shimmer, width: '64px', height: '64px', borderRadius: '50%' }} />
            <div style={{ ...shimmer, width: '100px', height: '20px' }} />
          </div>

          {/* Server picker */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
            <div style={{ ...shimmer, width: '80px', height: '12px' }} />
            <div style={{ ...shimmer, width: '100%', height: '40px', borderRadius: '8px' }} />
          </div>

          {/* Form fields */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
            <div style={{ ...shimmer, width: '100%', height: '40px', borderRadius: '8px' }} />
            <div style={{ ...shimmer, width: '100%', height: '40px', borderRadius: '8px' }} />
            <div style={{ ...shimmer, width: '100%', height: '40px', borderRadius: '8px' }} />
          </div>
        </div>
      </div>
    </>
  );
}