// SG Inspector — right sidebar for properties

function CollapsibleSection({ number, title, children, defaultOpen = true }) {
  const [open, setOpen] = React.useState(defaultOpen);
  return (
    <div style={{ borderBottom: '1px solid var(--line-soft)' }}>
      <button 
        onClick={() => setOpen(!open)}
        style={{
          width: '100%', padding: '14px 16px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          fontFamily: 'Geist Mono, monospace', fontSize: 11,
          letterSpacing: 1.5, textTransform: 'uppercase',
          color: open ? 'var(--fg-1)' : 'var(--fg-3)',
          transition: 'color 0.2s'
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          {number && <span style={{ color: 'var(--accent)' }}>{number}</span>}
          {title}
        </div>
        <span style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s', color: 'var(--fg-3)' }}>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="6 9 12 15 18 9"></polyline>
          </svg>
        </span>
      </button>
      {open && <div style={{ padding: '0 16px 16px', display: 'flex', flexDirection: 'column', gap: 16 }}>{children}</div>}
    </div>
  );
}

function FieldLabel({ children }) {
  return <div style={{ fontSize: 12, color: 'var(--fg-2)', marginBottom: 6, display: 'flex', justifyContent: 'space-between' }}>{children}</div>;
}

function SegmentControl({ options, value, onChange }) {
  return (
    <div style={{ display: 'flex', background: 'var(--bg-1)', padding: 3, borderRadius: 8, border: '1px solid var(--line-soft)' }}>
      {options.map(opt => {
        const isActive = value === opt.value;
        return (
          <button 
            key={opt.value} 
            onClick={() => onChange(opt.value)}
            style={{
              flex: 1, padding: '6px 0', fontSize: 12, fontWeight: isActive ? 500 : 400,
              background: isActive ? 'var(--bg-3)' : 'transparent',
              color: isActive ? 'var(--fg-0)' : 'var(--fg-2)',
              borderRadius: 5, transition: 'all 0.15s'
            }}
          >
            {opt.label}
          </button>
        );
      })}
    </div>
  );
}

function ColorGrid({ options, value, onChange, type = 'color' }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 6 }}>
      {options.map(opt => {
        const isActive = value === opt.id;
        return (
          <button
            key={opt.id}
            title={opt.name}
            onClick={() => onChange(opt.id)}
            style={{
              aspectRatio: '1', borderRadius: 6,
              background: type === 'gradient' ? opt.css : opt,
              border: isActive ? '2px solid var(--accent)' : '1px solid var(--line)',
              outline: isActive ? '2px solid var(--accent-soft)' : 'none',
              transition: 'all 0.15s'
            }}
          />
        );
      })}
    </div>
  );
}

function SliderField({ label, value, min, max, step = 1, unit = '', onChange }) {
  return (
    <div>
      <FieldLabel>
        <span>{label}</span>
        <span style={{ fontFamily: 'Geist Mono, monospace', color: 'var(--fg-1)' }}>{value}{unit}</span>
      </FieldLabel>
      <input 
        type="range" min={min} max={max} step={step} value={value} 
        onChange={e => onChange(Number(e.target.value))}
        style={{ width: '100%', margin: '6px 0' }}
      />
    </div>
  );
}

function TextInput({ value, onChange, placeholder }) {
  return (
    <input 
      type="text" value={value} onChange={e => onChange(e.target.value)}
      placeholder={placeholder}
      style={{
        width: '100%', padding: '8px 10px', fontSize: 13,
        background: 'var(--bg-1)', border: '1px solid var(--line-soft)',
        borderRadius: 6, color: 'var(--fg-1)', outline: 'none'
      }}
    />
  );
}

function ToggleField({ label, checked, onChange }) {
  return (
    <label style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', cursor: 'pointer' }}>
      <input type="checkbox" checked={checked} onChange={e => onChange(e.target.checked)} style={{ display: 'none' }} />
      <span style={{ fontSize: 12, color: 'var(--fg-2)' }}>{label}</span>
      <div style={{
        width: 32, height: 18, borderRadius: 999,
        background: checked ? 'var(--accent)' : 'var(--bg-3)',
        position: 'relative', transition: 'all 0.2s'
      }}>
        <div style={{
          position: 'absolute', top: 2, left: checked ? 16 : 2,
          width: 14, height: 14, borderRadius: '50%', background: 'var(--bg-0)',
          transition: 'all 0.2s', boxShadow: '0 1px 2px rgba(0,0,0,0.2)'
        }} />
      </div>
    </label>
  );
}

function SGInspector({ s, onUpdate }) {
  const update = (key, val) => onUpdate({ ...s, [key]: val });
  const updateBg = (key, val) => onUpdate({ ...s, bg: { ...s.bg, [key]: val } });

  return (
    <aside style={{
      width: 280, borderLeft: '1px solid var(--line-soft)',
      background: 'var(--bg-0)', flexShrink: 0, overflowY: 'auto',
      display: 'flex', flexDirection: 'column'
    }}>
      <CollapsibleSection number="01" title="Фон">
        <SegmentControl 
          options={[
            { label: 'Градиент', value: 'gradient' },
            { label: 'Цвет', value: 'solid' },
            { label: 'Паттерн', value: 'pattern' }
          ]} 
          value={s.bg.type} 
          onChange={v => updateBg('type', v)} 
        />
        {s.bg.type === 'gradient' && (
          <ColorGrid 
            options={window.PRESET_GRADIENTS || []} 
            value={s.bg.value} 
            onChange={v => updateBg('value', v)} 
            type="gradient" 
          />
        )}
        {s.bg.type === 'solid' && (
          <ColorGrid 
            options={(window.SOLID_COLORS || []).map(c => ({ id: c, name: c }))} 
            value={s.bg.value} 
            onChange={v => updateBg('value', v)} 
          />
        )}
      </CollapsibleSection>

      <CollapsibleSection number="02" title="Рамка">
        <SegmentControl 
          options={[
            { label: 'Браузер', value: 'browser' },
            { label: 'Окно', value: 'window' },
            { label: 'Смартфон', value: 'device' },
            { label: 'Нет', value: 'none' }
          ]} 
          value={s.frame} 
          onChange={v => update('frame', v)} 
        />
        {s.frame !== 'none' && (
          <>
            <SegmentControl 
              options={[
                { label: 'Тёмная', value: 'dark' },
                { label: 'Светлая', value: 'light' }
              ]} 
              value={s.frameTheme} 
              onChange={v => update('frameTheme', v)} 
            />
            {s.frame === 'browser' && (
              <div>
                <FieldLabel>URL адрес</FieldLabel>
                <TextInput value={s.url} onChange={v => update('url', v)} placeholder="example.com" />
              </div>
            )}
          </>
        )}
      </CollapsibleSection>

      <CollapsibleSection number="03" title="Геометрия">
        <FieldLabel>Пропорции</FieldLabel>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4, marginBottom: 16 }}>
          {(window.ASPECTS || []).map(a => (
            <button 
              key={a.id} onClick={() => update('aspect', a.id)}
              style={{
                padding: '6px 0', fontSize: 11, fontFamily: 'Geist Mono, monospace',
                background: s.aspect === a.id ? 'var(--bg-3)' : 'var(--bg-1)',
                color: s.aspect === a.id ? 'var(--fg-0)' : 'var(--fg-2)',
                border: '1px solid var(--line-soft)', borderRadius: 5,
              }}
            >
              {a.label}
            </button>
          ))}
        </div>
        
        <SliderField label="Отступ" value={s.padding} min={0} max={160} unit="px" onChange={v => update('padding', v)} />
        <SliderField label="Скругление" value={s.radius} min={0} max={40} unit="px" onChange={v => update('radius', v)} />
        <SliderField label="Наклон" value={s.tilt} min={-45} max={45} unit="°" onChange={v => update('tilt', v)} />
      </CollapsibleSection>

      <CollapsibleSection number="04" title="Тень">
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 6 }}>
          {[
            { id: 'none', label: 'Нет', css: 'none' },
            { id: 'soft', label: 'Мягкая', css: '0 4px 10px rgba(0,0,0,0.1)' },
            { id: 'medium', label: 'Средняя', css: '0 8px 20px rgba(0,0,0,0.15)' },
            { id: 'hard', label: 'Жёсткая', css: '0 12px 30px rgba(0,0,0,0.25)' },
            { id: 'glow', label: 'Свечение', css: '0 0 20px rgba(245,158,11,0.4)' },
          ].map(sh => (
            <button key={sh.id} onClick={() => update('shadow', sh.id)} style={{
              flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, padding: '4px 0'
            }}>
              <div style={{
                width: 28, height: 28, background: '#fff', borderRadius: 4,
                boxShadow: sh.css, border: s.shadow === sh.id ? '2px solid var(--accent)' : '1px solid var(--line-soft)'
              }} />
              <span style={{ fontSize: 9, color: s.shadow === sh.id ? 'var(--fg-1)' : 'var(--fg-3)' }}>{sh.label}</span>
            </button>
          ))}
        </div>
        <div style={{ marginTop: 8 }}>
          <ToggleField label="Внутренняя обводка" checked={s.border} onChange={v => update('border', v)} />
        </div>
      </CollapsibleSection>

      <CollapsibleSection number="05" title="Текст и аннотации" defaultOpen={false}>
        <div>
          <FieldLabel>Подпись под скриншотом</FieldLabel>
          <TextInput value={s.caption} onChange={v => update('caption', v)} placeholder="Добавьте текст..." />
        </div>
        <div style={{ display: 'flex', gap: 6, marginTop: 4 }}>
          {[{l: 'Текст', i: 'text'}, {l: 'Стрелка', i: 'arrow'}, {l: 'Блюр', i: 'blur'}].map(t => (
            <button key={t.i} onClick={() => window.dispatchEvent(new CustomEvent('sg-tool', { detail: t.i }))} style={{
              flex: 1, padding: '6px 0', background: 'var(--bg-1)', borderRadius: 6, cursor: 'pointer',
              fontSize: 11, border: '1px solid var(--line-soft)', color: 'var(--fg-2)'
            }}>{t.l}</button>
          ))}
        </div>
      </CollapsibleSection>

      <CollapsibleSection number="06" title="Метаданные" defaultOpen={false}>
        <ToggleField label="Водяной знак" checked={s.watermark} onChange={v => update('watermark', v)} />
        {s.watermark && (
          <div style={{ marginTop: 8 }}>
            <TextInput value={s.watermarkText} onChange={v => update('watermarkText', v)} placeholder="@username" />
          </div>
        )}
      </CollapsibleSection>
      
      {/* Bottom actions */}
      <div style={{ padding: '24px 16px', borderTop: '1px solid var(--line-soft)', marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <button onClick={() => window.dispatchEvent(new CustomEvent('sg-export'))} style={{
          padding: '12px', borderRadius: 8, fontSize: 13, fontWeight: 600,
          background: 'var(--accent)', color: 'var(--bg-0)', textAlign: 'center',
          boxShadow: '0 1px 0 rgba(255,255,255,0.18) inset, 0 6px 16px -8px var(--accent)'
        }}>
          Экспорт PNG <span style={{ opacity: 0.7, fontSize: 10, marginLeft: 6 }}>⌘+E</span>
        </button>
        <div style={{ display: 'flex', gap: 8 }}>
          <button onClick={() => window.dispatchEvent(new CustomEvent('sg-copy'))} style={{ flex: 1, padding: '8px', borderRadius: 6, background: 'var(--bg-1)', border: '1px solid var(--line-soft)', fontSize: 11, color: 'var(--fg-2)', fontWeight: 500 }}>Копировать</button>
          <button style={{ flex: 1, padding: '8px', borderRadius: 6, background: 'var(--bg-1)', border: '1px solid var(--line-soft)', fontSize: 11, color: 'var(--fg-2)', fontWeight: 500 }}>Поделиться</button>
        </div>
      </div>
    </aside>
  );
}

Object.assign(window, { SGInspector });