import { useState } from 'react'
import { Eye, EyeOff, Loader2 } from 'lucide-react'

/** Classe commune à tous les champs de saisie. */
export const inputClass =
  'w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm placeholder-gray-600 ' +
  'focus:outline-none focus:border-indigo-500 transition-colors disabled:opacity-50'

const VARIANTS = {
  primary:   'bg-indigo-600 hover:bg-indigo-500 text-white',
  secondary: 'bg-gray-800 hover:bg-gray-700 text-gray-200',
  outline:   'border border-gray-700 hover:bg-gray-800 text-gray-200',
  ghost:     'hover:bg-gray-800 text-gray-400 hover:text-gray-200',
  danger:    'bg-red-600 hover:bg-red-500 text-white',
  subtle:    'bg-red-950/50 hover:bg-red-900/60 text-red-400 border border-red-800/50',
}

const BUTTON_SIZES = {
  sm: 'px-2.5 py-1 text-xs gap-1.5',
  md: 'px-3 py-1.5 text-sm gap-1.5',
  lg: 'px-4 py-2 text-sm gap-2',
}

export function Button({
  variant = 'secondary',
  size    = 'md',
  icon: Icon,
  loading = false,
  disabled = false,
  className = '',
  children,
  ...props
}) {
  return (
    <button
      disabled={disabled || loading}
      className={`inline-flex items-center justify-center rounded-lg font-medium transition-colors
        disabled:opacity-50 disabled:cursor-not-allowed
        ${VARIANTS[variant] ?? VARIANTS.secondary} ${BUTTON_SIZES[size] ?? BUTTON_SIZES.md} ${className}`}
      {...props}
    >
      {loading
        ? <Loader2 size={14} className="animate-spin flex-shrink-0" />
        : Icon && <Icon size={14} className="flex-shrink-0" />}
      {children}
    </button>
  )
}

const ICON_TONES = {
  default: 'text-gray-500 hover:text-gray-200 hover:bg-gray-800',
  accent:  'text-gray-500 hover:text-indigo-400 hover:bg-gray-800',
  danger:  'text-gray-500 hover:text-red-400 hover:bg-red-500/20',
  success: 'text-emerald-400 hover:bg-gray-800',
}

/**
 * Bouton icône. `label` alimente à la fois `title` et `aria-label` : sans lui,
 * ces boutons sont muets pour un lecteur d'écran.
 */
export function IconButton({ icon: Icon, label, tone = 'default', size = 14, className = '', ...props }) {
  return (
    <button
      title={label}
      aria-label={label}
      className={`p-1.5 rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed
        ${ICON_TONES[tone] ?? ICON_TONES.default} ${className}`}
      {...props}
    >
      <Icon size={size} />
    </button>
  )
}

/** Champ mot de passe avec bascule d'affichage. */
export function PasswordInput({ className = '', ...props }) {
  const [visible, setVisible] = useState(false)
  return (
    <div className="relative">
      <input
        type={visible ? 'text' : 'password'}
        className={`${inputClass} pr-10 ${className}`}
        {...props}
      />
      <button
        type="button"
        onClick={() => setVisible(v => !v)}
        aria-label={visible ? 'Masquer le mot de passe' : 'Afficher le mot de passe'}
        title={visible ? 'Masquer' : 'Afficher'}
        className="absolute right-2.5 top-1/2 -translate-y-1/2 p-0.5 rounded text-gray-500 hover:text-gray-300 transition-colors"
      >
        {visible ? <EyeOff size={14} /> : <Eye size={14} />}
      </button>
    </div>
  )
}

/** Barre de progression (CPU, RAM…). */
export function ProgressBar({ value, barClass = 'bg-indigo-500', className = '' }) {
  const pct = Math.max(0, Math.min(100, value ?? 0))
  return (
    <div
      className={`h-1.5 rounded-full bg-gray-800 overflow-hidden ${className}`}
      role="progressbar"
      aria-valuenow={Math.round(pct)}
      aria-valuemin={0}
      aria-valuemax={100}
    >
      <div className={`h-full rounded-full transition-[width] duration-500 ${barClass}`} style={{ width: `${pct}%` }} />
    </div>
  )
}

export function Skeleton({ className = '' }) {
  return <div className={`skeleton rounded-lg ${className}`} />
}

/** Bloc vide illustré (aucun VPS, aucun résultat…). */
export function EmptyState({ icon: Icon, title, description, action }) {
  return (
    <div className="flex flex-col items-center justify-center text-center py-20 px-4">
      {Icon && (
        <div className="p-3 rounded-2xl bg-gray-900 border border-gray-800 mb-4">
          <Icon size={24} className="text-gray-600" />
        </div>
      )}
      <p className="text-base font-medium text-gray-300">{title}</p>
      {description && <p className="text-sm text-gray-500 mt-1 max-w-sm">{description}</p>}
      {action && <div className="mt-6">{action}</div>}
    </div>
  )
}
