/* Settings — full settings screen replacing Tweaks panel */

function SettingsScreen({ palette, tweaks, setTweak, isPro, onUpgrade, onLearn }) {
  const VIBES_LIST = [
    { value: 'deep', label: 'Deep', colors: ['#e8794a', '#5cc6ff'] },
    { value: 'paper', label: 'Paper', colors: ['#c2410c', '#1e3a5f'] },
    { value: 'neon', label: 'Neon', colors: ['#ff2bd6', '#21f0ff'] },
    { value: 'mono', label: 'Mono', colors: ['#fafafa', '#737373'] },
    { value: 'ascii', label: 'ASCII', colors: ['#22ff66', '#0a8a3a'] },
  ];

  function Toggle({ value, onChange }) {
    return (
      <div onClick={() => onChange(!value)} style={{
        width: 46, height: 28, borderRadius: 14, cursor: 'pointer',
        background: value ? palette.thick : `${palette.dim}33`,
        transition: 'background 0.2s ease',
        display: 'flex', alignItems: 'center',
        padding: '0 3px', flexShrink: 0,
        WebkitTapHighlightColor: 'transparent',
      }}>
        <div style={{
          width: 22, height: 22, borderRadius: 11,
          background: '#fff',
          transform: value ? 'translateX(18px)' : 'translateX(0)',
          transition: 'transform 0.2s ease',
          boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
        }} />
      </div>
    );
  }

  function SettingRow({ label, detail, children, isLast }) {
    return (
      <div style={{
        display: 'flex', alignItems: 'center', minHeight: 48,
        padding: '10px 16px', position: 'relative',
      }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, color: palette.ink }}>{label}</div>
          {detail && <div style={{ fontSize: 11, color: palette.dim, marginTop: 1 }}>{detail}</div>}
        </div>
        {children}
        {!isLast && (
          <div style={{
            position: 'absolute', bottom: 0, left: 16, right: 16,
            height: 1, background: `${palette.dim}15`,
          }} />
        )}
      </div>
    );
  }

  function Section({ title, children }) {
    return (
      <div style={{ marginBottom: 20 }}>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 9,
          letterSpacing: '0.22em', color: palette.dim,
          padding: '0 16px 6px', textTransform: 'uppercase',
        }}>{title}</div>
        <div style={{
          background: `${palette.dim}08`, borderRadius: 16,
          border: `1px solid ${palette.dim}12`,
          overflow: 'hidden',
        }}>
          {children}
        </div>
      </div>
    );
  }

  return (
    <div style={{
      flex: 1, overflowY: 'auto', padding: '60px 16px 20px',
      fontFamily: "'Manrope', system-ui, sans-serif",
      color: palette.ink,
    }}>
      {/* Header */}
      <div style={{ padding: '0 4px 20px' }}>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 9,
          letterSpacing: '0.22em', color: palette.dim,
        }}>TESSERA</div>
        <div style={{ fontSize: 28, fontWeight: 700, marginTop: 2 }}>Settings</div>
      </div>

      {/* Pro status */}
      {!isPro && (
        <div onClick={onUpgrade} style={{
          display: 'flex', alignItems: 'center', gap: 12,
          padding: '14px 16px', borderRadius: 16, marginBottom: 20,
          background: `linear-gradient(135deg, ${palette.thick}14, ${palette.thin}08)`,
          border: `1px solid ${palette.thick}33`, cursor: 'pointer',
          WebkitTapHighlightColor: 'transparent',
        }}>
          <span style={{ fontSize: 22 }}>✦</span>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 13, fontWeight: 700, color: palette.thick }}>
              Upgrade to Pro
            </div>
            <div style={{ fontSize: 12, color: palette.dim, marginTop: 1 }}>
              Unlock all themes, modes & features
            </div>
          </div>
          <svg width="7" height="12" viewBox="0 0 7 12">
            <path d="M1 1l5 5-5 5" fill="none" stroke={palette.thick} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
      )}

      {/* Appearance */}
      <Section title="Appearance">
        <div style={{ padding: '12px 16px' }}>
          <div style={{ fontSize: 14, color: palette.ink, marginBottom: 10 }}>Theme</div>
          <div style={{ display: 'flex', gap: 8 }}>
            {VIBES_LIST.map(({ value, label, colors }) => {
              const active = tweaks.vibe === value;
              const locked = value !== 'deep' && !isPro;
              return (
                <div key={value} onClick={() => locked ? onUpgrade() : setTweak('vibe', value)} style={{
                  flex: 1, borderRadius: 12, padding: '8px 0',
                  border: `1.5px solid ${active ? palette.thick : `${palette.dim}22`}`,
                  background: active ? `${palette.thick}12` : 'transparent',
                  cursor: 'pointer', textAlign: 'center',
                  WebkitTapHighlightColor: 'transparent',
                  opacity: locked ? 0.5 : 1,
                  position: 'relative',
                }}>
                  <div style={{ display: 'flex', gap: 3, justifyContent: 'center', marginBottom: 4 }}>
                    <div style={{ width: 14, height: 14, borderRadius: 7, background: colors[0] }} />
                    <div style={{ width: 14, height: 14, borderRadius: 7, background: colors[1] }} />
                  </div>
                  <div style={{
                    fontFamily: "'JetBrains Mono', monospace", fontSize: 9,
                    color: active ? palette.thick : palette.dim,
                    letterSpacing: '0.08em',
                  }}>{label}</div>
                  {locked && (
                    <div style={{
                      position: 'absolute', top: 2, right: 2,
                      fontSize: 8, color: palette.thick,
                    }}>🔒</div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
        <div style={{ height: 1, background: `${palette.dim}15`, margin: '0 16px' }} />
        <SettingRow label="Radial guides" detail="Concentric circles behind mosaic">
          <Toggle value={tweaks.showGuides} onChange={v => setTweak('showGuides', v)} />
        </SettingRow>
        <SettingRow label="Tappable glow" detail="Glow effect on available tiles" isLast>
          <Toggle value={tweaks.tappableGlow} onChange={v => setTweak('tappableGlow', v)} />
        </SettingRow>
      </Section>

      {/* Gameplay */}
      <Section title="Gameplay">
        <SettingRow label="Auto-camera" detail="Camera follows the growing mosaic">
          <Toggle value={tweaks.autoCamera} onChange={v => setTweak('autoCamera', v)} />
        </SettingRow>
        <SettingRow label="Haptics" detail="Vibration feedback on tap">
          <Toggle value={tweaks.haptics} onChange={v => setTweak('haptics', v)} />
        </SettingRow>
        <SettingRow label="Show hints" detail="Highlight suggested tiles">
          <Toggle value={tweaks.showHints} onChange={v => setTweak('showHints', v)} />
        </SettingRow>
        <SettingRow label="Sound" detail="Coming soon">
          <Toggle value={false} onChange={() => {}} />
        </SettingRow>
        <SettingRow label="Tile scale" isLast>
          <input type="range" min="20" max="70" step="1" value={tweaks.tileScale}
            onChange={e => setTweak('tileScale', parseInt(e.target.value))}
            style={{
              width: 100, accentColor: palette.thick, flexShrink: 0,
            }} />
          <span style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 12,
            color: palette.dim, width: 28, textAlign: 'right', flexShrink: 0,
          }}>{tweaks.tileScale}</span>
        </SettingRow>
      </Section>

      {/* Account */}
      <Section title="Account">
        <SettingRow label="Sign in with Apple" detail="Sync progress across devices">
          <div style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
            letterSpacing: '0.12em', color: palette.thick,
            padding: '5px 10px', borderRadius: 8,
            border: `1px solid ${palette.thick}44`, cursor: 'pointer',
            WebkitTapHighlightColor: 'transparent',
          }}>SIGN IN</div>
        </SettingRow>
        <SettingRow label="Sync progress" detail="Not signed in">
          <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: palette.dim }}>OFF</span>
        </SettingRow>
        <SettingRow label="Delete account data" detail="Remove all cloud data" isLast>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
            letterSpacing: '0.12em', color: palette.dim,
            padding: '5px 10px', borderRadius: 8,
            border: `1px solid ${palette.dim}33`, cursor: 'pointer',
            opacity: 0.5, WebkitTapHighlightColor: 'transparent',
          }}>DELETE</div>
        </SettingRow>
      </Section>

      {/* About */}
      <Section title="About">
        <SettingRow label="Version">
          <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: palette.dim }}>1.1.0</span>
        </SettingRow>
        <SettingRow label="Roger Penrose" detail="Learn about the mathematician">
          <div onClick={onLearn} style={{ cursor: 'pointer', WebkitTapHighlightColor: 'transparent' }}>
            <svg width="7" height="12" viewBox="0 0 7 12" style={{ flexShrink: 0 }}>
              <path d="M1 1l5 5-5 5" fill="none" stroke={palette.dim} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
        </SettingRow>
        <SettingRow label="Credits">
          <span style={{ fontSize: 12, color: palette.dim }}>Made with math</span>
        </SettingRow>
        <SettingRow label="Open source licenses" isLast>
          <span style={{ fontSize: 11, color: palette.dim }}>React · Babel · Manrope</span>
        </SettingRow>
      </Section>

      {/* Tessera Pro */}
      {!isPro && (
        <Section title="Tessera Pro">
          <SettingRow label="Upgrade" detail="Unlock all features" isLast>
            <div onClick={onUpgrade} style={{
              fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
              letterSpacing: '0.12em', color: palette.bg1, fontWeight: 700,
              padding: '6px 12px', borderRadius: 8,
              background: palette.thick, cursor: 'pointer',
              WebkitTapHighlightColor: 'transparent',
            }}>PRO</div>
          </SettingRow>
        </Section>
      )}

      {/* Data */}
      <Section title="Data">
        <SettingRow label="Version restore" detail="Snapshot & restore progress">
          <div onClick={() => window.open('versions.html', '_blank')} style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
            letterSpacing: '0.12em', color: palette.thick,
            padding: '5px 10px', borderRadius: 8,
            border: `1px solid ${palette.thick}44`, cursor: 'pointer',
            WebkitTapHighlightColor: 'transparent',
          }}>OPEN</div>
        </SettingRow>
        <SettingRow label="Reset progress" detail="Clear all scores and saved data" isLast>
          <div onClick={() => {
            if (confirm('Reset all progress? This cannot be undone.')) {
              localStorage.clear();
              window.location.reload();
            }
          }} style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
            letterSpacing: '0.12em', color: '#e53e3e',
            padding: '5px 10px', borderRadius: 8,
            border: '1px solid #e53e3e44', cursor: 'pointer',
            WebkitTapHighlightColor: 'transparent',
          }}>RESET</div>
        </SettingRow>
      </Section>

      <div style={{ height: 20 }} />
    </div>
  );
}

window.SettingsScreen = SettingsScreen;