'use client';

type ErrorStateProps = {
  label?: string;
  title?: string;
  body?: string;
  onRetry?: () => void;
  retryLabel?: string;
};

export default function ErrorState({
  label = 'CONNECTION LOST',
  title = "Can't reach the signal.",
  body = 'Check your connection and try again.',
  onRetry,
  retryLabel = 'Retry',
}: ErrorStateProps) {
  return (
    <div
      role="alert"
      style={{
        textAlign: 'center',
        padding: '40px 24px',
        display: 'grid',
        gap: 8,
        justifyItems: 'center',
      }}
    >
      <p className="lbl" style={{ color: 'var(--grade-c)' }}>{label}</p>
      <p style={{ fontSize: 18, fontWeight: 600, color: 'var(--text-0)' }}>{title}</p>
      <p style={{ color: 'var(--text-1)', fontSize: 14 }}>{body}</p>
      {onRetry ? (
        <button className="btn-primary" style={{ marginTop: 16 }} onClick={onRetry}>
          {retryLabel}
        </button>
      ) : null}
    </div>
  );
}

export function MaintenanceState({
  title = 'VYNDR is recalibrating the model.',
  body = 'The engine improves itself after every game night. This is that process. Back in a few minutes.',
}: {
  title?: string;
  body?: string;
}) {
  return (
    <div
      role="status"
      aria-live="polite"
      style={{
        textAlign: 'center',
        padding: '64px 24px',
        display: 'grid',
        gap: 12,
        justifyItems: 'center',
      }}
    >
      <p className="lbl" style={{ color: 'var(--grade-a)' }}>RECALIBRATING</p>
      <p style={{ fontSize: 18, fontWeight: 600, color: 'var(--text-0)', maxWidth: 460 }}>{title}</p>
      <p style={{ color: 'var(--text-1)', fontSize: 14, maxWidth: 460 }}>{body}</p>
      <div
        aria-hidden
        style={{
          width: 200,
          height: 2,
          marginTop: 16,
          background: 'linear-gradient(90deg, transparent, var(--grade-a), transparent)',
          boxShadow: '0 0 12px rgba(0, 212, 160, 0.6)',
          animation: 'phosphor-pulse 1.8s ease-in-out infinite',
          transformOrigin: 'center',
        }}
      />
    </div>
  );
}
