// Settings screen — goal, units, account

function SettingsScreen({ state, dispatch, palette, tweaks, setTweak }) {
  const goal = tweaks.goal;

  const presets = [
    { g: 25, label: 'WHO recommendation', sub: 'Stricter · ~6 tsp' },
    { g: 36, label: 'AHA · Men',          sub: 'American Heart Assoc.' },
    { g: 25, label: 'AHA · Women',        sub: 'American Heart Assoc.' },
    { g: 50, label: 'FDA Daily Value',    sub: 'US nutrition label basis' },
  ];

  return (
    <div style={{ padding: '0 0 40px' }}>
      {/* Header */}
      <div style={{
        padding: '60px 8px 0', display: 'flex', alignItems: 'center',
        justifyContent: 'space-between',
      }}>
        <button onClick={() => dispatch({ type: 'nav', screen: 'today' })} style={{
          padding: 12, background: 'transparent', border: 'none', cursor: 'pointer',
          color: 'var(--accent)', display: 'flex', alignItems: 'center', gap: 4,
          fontFamily: 'inherit', fontSize: 15,
        }}>
          {Icon.back(palette.accent)} Today
        </button>
        <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-1)' }}>Settings</div>
        <div style={{ width: 80 }}/>
      </div>

      {/* Goal card */}
      <div style={{ padding: '12px 16px 0' }}>
        <div style={{
          fontSize: 11, fontWeight: 600, letterSpacing: 0.5,
          color: 'var(--text-2)', textTransform: 'uppercase',
          padding: '10px 4px 8px',
        }}>Daily added-sugar goal</div>

        <div style={{
          background: 'var(--surface-1)', borderRadius: 20,
          border: '1px solid var(--border)', padding: 20,
        }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
            <span style={{
              fontFamily: 'var(--font-mono)', fontSize: 56, fontWeight: 600,
              color: palette.accent, letterSpacing: -2, lineHeight: 1,
            }}>{goal}</span>
            <span style={{ fontSize: 22, color: 'var(--text-2)' }}>g/day</span>
          </div>
          <div style={{ fontSize: 12, color: 'var(--text-2)', marginTop: 6 }}>
            Roughly <b style={{ color: 'var(--text-1)' }}>{(goal / 4).toFixed(1)} teaspoons</b> of added sugar per day.
          </div>

          {/* Slider */}
          <div style={{ marginTop: 18 }}>
            <input type="range" min="15" max="75" step="1" value={goal}
              onChange={e => setTweak('goal', parseInt(e.target.value))}
              style={{ width: '100%', accentColor: palette.accent }}/>
            <div style={{
              display: 'flex', justifyContent: 'space-between',
              fontFamily: 'var(--font-mono)', fontSize: 10,
              color: 'var(--text-3)', marginTop: 4,
            }}>
              <span>15g</span><span>45g</span><span>75g</span>
            </div>
          </div>

          {/* Stepper */}
          <div style={{
            marginTop: 14, display: 'flex', gap: 8, alignItems: 'center',
          }}>
            <button onClick={() => setTweak('goal', Math.max(15, goal - 1))} style={stepBtn(palette)}>–1g</button>
            <button onClick={() => setTweak('goal', Math.max(15, goal - 5))} style={stepBtn(palette)}>–5g</button>
            <div style={{ flex: 1 }}/>
            <button onClick={() => setTweak('goal', Math.min(75, goal + 5))} style={stepBtn(palette)}>+5g</button>
            <button onClick={() => setTweak('goal', Math.min(75, goal + 1))} style={stepBtn(palette)}>+1g</button>
          </div>
        </div>
      </div>

      {/* Presets */}
      <div style={{ padding: '12px 16px 0' }}>
        <div style={{
          fontSize: 11, fontWeight: 600, letterSpacing: 0.5,
          color: 'var(--text-2)', textTransform: 'uppercase',
          padding: '10px 4px 8px',
        }}>Common guidelines</div>
        <div style={{
          background: 'var(--surface-1)', borderRadius: 16,
          border: '1px solid var(--border)', overflow: 'hidden',
        }}>
          {presets.map((p, i) => {
            const active = p.g === goal;
            return (
              <button key={i} onClick={() => setTweak('goal', p.g)} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                width: '100%', padding: '12px 16px', textAlign: 'left',
                background: 'transparent', border: 'none', cursor: 'pointer',
                fontFamily: 'inherit',
                borderTop: i === 0 ? 'none' : '1px solid var(--border)',
              }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 10,
                  background: active ? palette.accent + '15' : 'var(--surface-2)',
                  color: active ? palette.accent : 'var(--text-2)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600,
                }}>{p.g}g</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, color: 'var(--text-1)', fontWeight: 500 }}>{p.label}</div>
                  <div style={{ fontSize: 12, color: 'var(--text-2)', marginTop: 1 }}>{p.sub}</div>
                </div>
                {active && (
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={palette.accent} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M5 12l5 5L20 7"/>
                  </svg>
                )}
              </button>
            );
          })}
        </div>
      </div>

      {/* Account */}
      <div style={{ padding: '12px 16px 0' }}>
        <div style={{
          fontSize: 11, fontWeight: 600, letterSpacing: 0.5,
          color: 'var(--text-2)', textTransform: 'uppercase',
          padding: '10px 4px 8px',
        }}>Account</div>
        <div style={{
          background: 'var(--surface-1)', borderRadius: 16,
          border: '1px solid var(--border)', overflow: 'hidden',
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '12px 16px',
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: 999,
              background: palette.accent + '18', color: palette.accent,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: 600,
            }}>{(state.user?.email || 'U').slice(0, 1).toUpperCase()}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontSize: 15, fontWeight: 500, color: 'var(--text-1)',
                whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
              }}>
                {state.user?.email || 'Signed out'}
              </div>
              <div style={{ fontSize: 12, color: 'var(--text-2)', marginTop: 1 }}>
                {state.user ? 'Signed in' : ''}
              </div>
            </div>
          </div>
          <div style={{ borderTop: '1px solid var(--border)' }}>
            <button onClick={() => dispatch({ type: 'signOut' })} style={{
              width: '100%', padding: '13px 16px', textAlign: 'left',
              background: 'transparent', border: 'none', cursor: 'pointer',
              fontFamily: 'inherit', fontSize: 15, color: palette.red || '#C0392B',
            }}>Sign out</button>
          </div>
        </div>
      </div>

      <div style={{
        padding: '28px 16px 0', textAlign: 'center',
        fontFamily: 'var(--font-mono)', fontSize: 11,
        color: 'var(--text-3)', letterSpacing: 0.3,
      }}>
        Sugar Tracker · v1.0.0
      </div>
    </div>
  );
}

function stepBtn(palette) {
  return {
    padding: '8px 12px', borderRadius: 10,
    border: '1px solid var(--border)', background: 'var(--surface-2)',
    fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600,
    color: 'var(--text-1)', cursor: 'pointer',
  };
}

window.SettingsScreen = SettingsScreen;