// Apple-style primitives: Card, Stat, Pill, Button, Input, etc.

import { motion } from 'framer-motion'
import clsx from 'clsx'
import type { ReactNode } from 'react'

// ------------------------------------------------------------------
// Card — frosted surface with optional hover lift
// ------------------------------------------------------------------
export function Card({
  children, className, hover = false, padding = 'lg',
}: {
  children: ReactNode
  className?: string
  hover?: boolean
  padding?: 'none' | 'sm' | 'md' | 'lg'
}) {
  const p = padding === 'none' ? '' : padding === 'sm' ? 'p-4' : padding === 'md' ? 'p-6' : 'p-8'
  return (
    <div className={clsx('surface', p, hover && 'surface-hover cursor-pointer', className)}>
      {children}
    </div>
  )
}

// ------------------------------------------------------------------
// Stat — big number with optional delta
// ------------------------------------------------------------------
export function Stat({
  label, value, sub, accent = 'default', icon,
}: {
  label: string
  value: string | number
  sub?: string
  accent?: 'default' | 'success' | 'warning' | 'danger'
  icon?: ReactNode
}) {
  const colorCls = {
    default: 'text-ink-100',
    success: 'text-emerald-400',
    warning: 'text-amber-400',
    danger: 'text-rose-400',
  }[accent]
  return (
    <div className="flex flex-col gap-1">
      <div className="flex items-center gap-2 text-ink-500 text-caption uppercase tracking-wider">
        {icon}
        {label}
      </div>
      <div className={clsx('stat-number text-5xl md:text-6xl', colorCls)}>
        {value}
      </div>
      {sub && <div className="text-small text-ink-500">{sub}</div>}
    </div>
  )
}

// ------------------------------------------------------------------
// Pill — status indicator
// ------------------------------------------------------------------
export function Pill({
  children, tone = 'neutral', className,
}: {
  children: ReactNode
  tone?: 'neutral' | 'success' | 'warning' | 'danger' | 'info'
  className?: string
}) {
  const tones = {
    neutral: 'bg-white/5 text-ink-300',
    success: 'bg-emerald-500/15 text-emerald-300',
    warning: 'bg-amber-500/15 text-amber-300',
    danger:  'bg-rose-500/15 text-rose-300',
    info:    'bg-blue-500/15 text-blue-300',
  }
  return (
    <span className={clsx('pill', tones[tone], className)}>
      <span className="dot" style={{
        background: tone === 'success' ? '#30d158'
          : tone === 'warning' ? '#ff9f0a'
          : tone === 'danger' ? '#ff453a'
          : tone === 'info' ? '#0a84ff' : '#a1a1a6',
      }} />
      {children}
    </span>
  )
}

// ------------------------------------------------------------------
// Button — primary / secondary / ghost
// ------------------------------------------------------------------
export function Button({
  children, onClick, type = 'button', variant = 'primary',
  disabled, size = 'md', className,
}: {
  children: ReactNode
  onClick?: () => void
  type?: 'button' | 'submit'
  variant?: 'primary' | 'secondary' | 'ghost' | 'danger'
  disabled?: boolean
  size?: 'sm' | 'md' | 'lg'
  className?: string
}) {
  const sizes = {
    sm: 'px-3 py-1.5 text-small',
    md: 'px-5 py-2.5 text-body',
    lg: 'px-7 py-3.5 text-body-lg',
  }
  const variants = {
    primary:   'bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)]',
    secondary: 'bg-white/10 text-ink-100 hover:bg-white/15 border border-white/10',
    ghost:     'bg-transparent text-ink-300 hover:bg-white/5',
    danger:    'bg-rose-500 text-white hover:bg-rose-600',
  }
  return (
    <button
      type={type}
      onClick={onClick}
      disabled={disabled}
      className={clsx(
        'inline-flex items-center justify-center gap-2 rounded-full font-medium transition-all duration-200',
        'disabled:opacity-40 disabled:cursor-not-allowed',
        sizes[size],
        variants[variant],
        className,
      )}
    >
      {children}
    </button>
  )
}

// ------------------------------------------------------------------
// Input
// ------------------------------------------------------------------
export function Input({
  label, error, ...props
}: { label?: string; error?: string } & React.InputHTMLAttributes<HTMLInputElement>) {
  return (
    <label className="flex flex-col gap-1.5 w-full">
      {label && <span className="text-caption text-ink-500 uppercase tracking-wider">{label}</span>}
      <input
        {...props}
        className={clsx(
          'w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-body',
          'text-ink-100 placeholder-ink-500',
          'focus:border-[var(--accent)] focus:bg-white/[0.07] focus:outline-none',
          'transition-all',
          error && 'border-rose-500/50',
        )}
      />
      {error && <span className="text-caption text-rose-400">{error}</span>}
    </label>
  )
}

// ------------------------------------------------------------------
// Skeleton — loading placeholder
// ------------------------------------------------------------------
export function Skeleton({ className }: { className?: string }) {
  return <div className={clsx('shimmer rounded-lg', className)} />
}

// ------------------------------------------------------------------
// FadeIn — framer-motion wrapper for page sections
// ------------------------------------------------------------------
export function FadeIn({
  children, delay = 0, y = 20, className,
}: {
  children: ReactNode
  delay?: number
  y?: number
  className?: string
}) {
  return (
    <motion.div
      initial={{ opacity: 0, y }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, delay, ease: [0.16, 1, 0.3, 1] }}
      className={className}
    >
      {children}
    </motion.div>
  )
}
