// Shared UI primitives for Tutto Trascritto

const Logo = ({ size = 40 }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
    <div style={{
      width: size, height: size,
      background: 'var(--ink)',
      border: '2px solid var(--ink)',
      boxShadow: 'var(--shadow-sm)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0,
    }}>
      {/* tiny waveform */}
      <svg width={size*0.55} height={size*0.55} viewBox="0 0 24 24" fill="none">
        <rect x="2"  y="9"  width="2.6" height="6"  fill="#FFE56B"/>
        <rect x="6"  y="6"  width="2.6" height="12" fill="#FFE56B"/>
        <rect x="10" y="2"  width="2.6" height="20" fill="#FF6B6B"/>
        <rect x="14" y="7"  width="2.6" height="10" fill="#FFE56B"/>
        <rect x="18" y="10" width="2.6" height="4"  fill="#FFE56B"/>
      </svg>
    </div>
    <span className="display" style={{ fontSize: size*0.55, lineHeight: 1 }}>Tutto Trascritto</span>
  </div>
);

const Btn = ({ children, variant = 'primary', size = 'md', onClick, type = 'button', disabled, style, full }) => {
  const palette = {
    primary: { bg: 'var(--coral)', fg: 'var(--ink)' },
    sun:     { bg: 'var(--sun)',   fg: 'var(--ink)' },
    ghost:   { bg: 'var(--cream)', fg: 'var(--ink)' },
    ink:     { bg: 'var(--ink)',   fg: '#FFFCEC'  },
  }[variant];
  const pad = size === 'sm' ? '8px 14px' : size === 'lg' ? '18px 28px' : '12px 22px';
  const fz  = size === 'sm' ? 12 : size === 'lg' ? 16 : 14;
  return (
    <button type={type} onClick={onClick} disabled={disabled}
      style={{
        background: palette.bg, color: palette.fg,
        border: '2px solid var(--ink)', boxShadow: 'var(--shadow-sm)',
        padding: pad, fontSize: fz, fontWeight: 700,
        letterSpacing: '0.06em', textTransform: 'uppercase',
        transition: 'transform 80ms, box-shadow 80ms',
        opacity: disabled ? 0.5 : 1,
        width: full ? '100%' : 'auto',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        ...style,
      }}
      onMouseDown={e => { if (!disabled) { e.currentTarget.style.transform = 'translate(2px,2px)'; e.currentTarget.style.boxShadow = '1px 1px 0 0 var(--ink)'; } }}
      onMouseUp={e =>   { if (!disabled) { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = 'var(--shadow-sm)'; } }}
      onMouseLeave={e => { if (!disabled) { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = 'var(--shadow-sm)'; } }}
    >{children}</button>
  );
};

const Field = ({ label, children, hint }) => (
  <label style={{ display: 'block' }}>
    <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 8 }}>
      {label}
    </div>
    {children}
    {hint ? <div style={{ fontSize: 12, color: '#5a554c', marginTop: 6 }}>{hint}</div> : null}
  </label>
);

const TextInput = React.forwardRef(({ style, ...props }, ref) => (
  <input ref={ref} {...props}
    style={{
      width: '100%', padding: '12px 14px', fontSize: 15,
      background: 'var(--paper)', color: 'var(--ink)',
      border: '2px solid var(--ink)', boxShadow: 'var(--shadow-sm)',
      outline: 'none',
      ...style,
    }}
  />
));

const Select = ({ children, style, ...props }) => (
  <div style={{ position: 'relative' }}>
    <select {...props}
      style={{
        width: '100%', padding: '12px 40px 12px 14px', fontSize: 15,
        background: 'var(--paper)', color: 'var(--ink)',
        border: '2px solid var(--ink)', boxShadow: 'var(--shadow-sm)',
        appearance: 'none', WebkitAppearance: 'none',
        outline: 'none', fontFamily: 'inherit', fontWeight: 500,
        ...style,
      }}
    >{children}</select>
    <svg width="14" height="14" viewBox="0 0 14 14"
      style={{ position: 'absolute', right: 14, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none' }}>
      <path d="M2 5 L7 10 L12 5" stroke="var(--ink)" strokeWidth="2" fill="none" strokeLinecap="square"/>
    </svg>
  </div>
);

// Decorative scattered shapes
const Sticker = ({ kind, style }) => {
  const base = { position: 'absolute', border: '2px solid var(--ink)', ...style };
  if (kind === 'polaroid')   return <div style={{ ...base, width: 56, height: 64, background: 'var(--lilac)', boxShadow: 'var(--shadow-sm)', transform: (style && style.transform) || 'rotate(-12deg)' }} />;
  if (kind === 'circle')     return <div style={{ ...base, width: 70, height: 70, borderRadius: '50%', background: 'var(--coral-soft)' }} />;
  if (kind === 'sun')        return <div style={{ ...base, width: 40, height: 40, background: 'var(--sun)', boxShadow: 'var(--shadow-sm)', transform: (style && style.transform) || 'rotate(8deg)' }} />;
  if (kind === 'mint')       return <div style={{ ...base, width: 48, height: 48, background: 'var(--mint)', borderRadius: '50%' }} />;
  if (kind === 'star') return (
    <svg viewBox="0 0 24 24" style={{ position: 'absolute', ...style }}>
      <path d="M12 1 L14 9 L22 11 L14 13 L12 22 L10 13 L2 11 L10 9 Z" fill="var(--ink)"/>
    </svg>
  );
  return null;
};

// CreditMeter — pill showing remaining credits
const CreditMeter = ({ credits, max = 15 }) => {
  const pct = Math.max(0, Math.min(1, credits/max));
  return (
    <div style={{
      border: '2px solid var(--ink)', background: 'var(--paper)',
      boxShadow: 'var(--shadow-sm)', padding: 12,
      width: '100%', maxWidth: '100%', minWidth: 0,
      overflow: 'hidden', boxSizing: 'border-box',
    }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', gap: 8, marginBottom: 8, minWidth: 0 }}>
        <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Crediti</span>
        <span className="mono" style={{ fontSize: 13, fontWeight: 600, flexShrink: 0 }}>{formatCreditValue(credits)}</span>
      </div>
      <div style={{ height: 14, border: '2px solid var(--ink)', background: 'var(--cream-deep)', position:'relative', width: '100%', overflow:'hidden' }}>
        <div style={{ position:'absolute', left:0, top:0, bottom:0, width: `${pct*100}%`, background:'var(--coral)', borderRight: pct>0 && pct<1 ? '2px solid var(--ink)' : 'none' }} />
      </div>
      <div style={{ fontSize: 11, color:'#5a554c', marginTop: 8 }}>Veloce 0,5 · Standard 1 · Qualità 3 crediti/min</div>
    </div>
  );
};

function formatCreditValue(value) {
  return Number(value || 0).toLocaleString('it-IT', { maximumFractionDigits: 2 });
}

Object.assign(window, { Logo, Btn, Field, TextInput, Select, Sticker, CreditMeter });