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

  const _FS = 13, _LH = 1.55, _PV = 11, _PH = 13;

  function Textarea({ value, onChange, placeholder, rows = 7, onKeyDown, lined = false }) {
    const [focused, setFocused] = useState(false);
    const overlayRef = useRef(null);

    const borderStyle = {
      border: `1px solid ${focused ? T.accent : T.border}`,
      borderRadius: 10,
      boxShadow: focused ? `0 0 0 3px ${T.accentSoft}` : 'none',
      transition: 'border-color .15s ease, box-shadow .15s ease',
    };

    const taProps = {
      value, placeholder, rows,
      spellCheck: false,
      onChange: (e) => onChange(e.target.value),
      onFocus:  () => setFocused(true),
      onBlur:   () => setFocused(false),
      onKeyDown,
    };

    if (!lined) {
      return (
        <textarea {...taProps} style={{
          width: '100%', resize: 'none', background: T.surface,
          ...borderStyle,
          padding: `${_PV}px ${_PH}px`, fontSize: _FS,
          fontFamily: 'inherit', lineHeight: _LH, color: T.ink, outline: 'none',
        }} />
      );
    }

    const lines = value.split('\n');

    return (
      <div style={{ position: 'relative', background: T.surface, overflow: 'hidden', ...borderStyle }}>
        {/* separator overlay */}
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden' }}>
          <div ref={overlayRef} style={{ paddingTop: _PV, fontSize: _FS, lineHeight: _LH }}>
            {lines.map((_, i) => (
              <div key={i} style={{
                height: `${_LH}em`,
                ...(i > 0 ? { borderTop: '1px solid rgba(0,0,0,0.07)', margin: `0 ${_PH + 4}px` } : {}),
              }} />
            ))}
          </div>
        </div>
        <textarea
          {...taProps}
          onScroll={(e) => { if (overlayRef.current) overlayRef.current.style.transform = `translateY(-${e.target.scrollTop}px)`; }}
          style={{
            width: '100%', resize: 'none', background: 'transparent',
            border: 'none', outline: 'none', display: 'block',
            position: 'relative', zIndex: 1,
            padding: `${_PV}px ${_PH}px`, fontSize: _FS,
            fontFamily: 'inherit', lineHeight: _LH, color: T.ink,
          }}
        />
      </div>
    );
  }

  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 });
})();