/* global React */
(function () {
  const { useState } = React;
  const T = window.SC_T;

  function Textarea({ value, onChange, placeholder, rows = 7, onKeyDown }) {
    const [focused, setFocused] = useState(false);
    return (
      <textarea
        value={value}
        onChange={(e) => onChange(e.target.value)}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        onKeyDown={onKeyDown}
        placeholder={placeholder}
        rows={rows}
        spellCheck={false}
        style={{
          width: '100%', resize: 'none', background: T.surface,
          border: `1px solid ${focused ? T.accent : T.border}`,
          borderRadius: 10, padding: '11px 13px', fontSize: 13,
          fontFamily: 'inherit', lineHeight: 1.55, color: T.ink, outline: 'none',
          boxShadow: focused ? `0 0 0 3px ${T.accentSoft}` : 'none',
          transition: 'border-color .15s ease, box-shadow .15s ease',
        }}
      />
    );
  }

  function TextInput({ value, onChange, placeholder, type = 'text', rightSlot, style }) {
    const [focused, setFocused] = useState(false);
    return (
      <div style={{ position: 'relative' }}>
        <input
          type={type}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          onFocus={() => setFocused(true)}
          onBlur={() => setFocused(false)}
          placeholder={placeholder}
          style={{
            width: '100%', padding: rightSlot ? '10px 42px 10px 14px' : '10px 14px',
            border: `1px solid ${focused ? T.accent : T.border}`,
            borderRadius: 10, fontSize: 14, fontFamily: 'inherit',
            color: T.ink, outline: 'none', background: T.surface,
            boxShadow: focused ? `0 0 0 3px ${T.accentSoft}` : 'none',
            transition: 'border-color .15s ease, box-shadow .15s ease', ...style,
          }}
        />
        {rightSlot && (
          <div style={{
            position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)',
            display: 'flex', alignItems: 'center',
          }}>
            {rightSlot}
          </div>
        )}
      </div>
    );
  }

  function Toggle({ on, onChange }) {
    return (
      <button
        onClick={(e) => { e.stopPropagation(); onChange(!on); }}
        style={{
          width: 36, height: 20, padding: 0, border: 'none', borderRadius: 999,
          cursor: 'pointer', background: on ? T.accent : '#D1D5DB',
          position: 'relative', transition: 'background .2s ease', flexShrink: 0,
        }}
        aria-pressed={on}
      >
        <span style={{
          position: 'absolute', top: 2, left: on ? 18 : 2,
          width: 16, height: 16, borderRadius: 999, background: '#fff',
          boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
          transition: 'left .22s cubic-bezier(0.34, 1.56, 0.64, 1)',
        }} />
      </button>
    );
  }

  function ToggleCard({ title, subtitle, on, onChange }) {
    return (
      <div
        onClick={() => onChange(!on)}
        role="button" tabIndex={0}
        style={{
          display: 'flex', alignItems: 'center', gap: 12,
          padding: '12px 14px', borderRadius: 10,
          border: `1px solid ${on ? T.accent : T.border}`,
          background: on ? T.accentSoft : T.surface,
          cursor: 'pointer', textAlign: 'left',
          transition: 'all .18s ease', width: '100%', userSelect: 'none',
        }}
      >
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: T.ink }}>{title}</div>
          <div style={{ fontSize: 11, color: T.inkMuted, marginTop: 2 }}>{subtitle}</div>
        </div>
        <Toggle on={on} onChange={onChange} />
      </div>
    );
  }

  Object.assign(window, { Textarea, TextInput, Toggle, ToggleCard });
})();