/* global React */

function CookiesPage({ setPage }) {
  const STORAGE_KEY = 'shaste_cookie_consent';
  const [analyticsEnabled, setAnalyticsEnabled] = React.useState(false);
  const [hasSaved, setHasSaved] = React.useState(false);
  const [status, setStatus] = React.useState('Current setting: essential only.');

  const normalize = React.useCallback((raw) => (raw === 'all' ? 'all' : 'essential'), []);

  const renderState = React.useCallback((value) => {
    setStatus(value === 'all'
      ? 'Current setting: essential + analytics.'
      : 'Current setting: essential only.');
  }, []);

  React.useEffect(() => {
    const stored = localStorage.getItem(STORAGE_KEY);
    const normalized = normalize(stored);
    setAnalyticsEnabled(normalized === 'all');
    setHasSaved(Boolean(stored));
    renderState(normalized);
  }, [normalize, renderState]);

  const save = (value) => {
    const normalized = normalize(value);
    localStorage.setItem(STORAGE_KEY, normalized);
    setAnalyticsEnabled(normalized === 'all');
    setHasSaved(true);
    renderState(normalized);
  };

  return (
    <section className="section container fade-in">
      <div className="eyebrow">Privacy & Cookies</div>
      <h1 style={{ marginTop: 6 }}>Cookie settings</h1>
      <p className="section__lead" style={{ maxWidth: 760 }}>
        Essential storage is always on. Analytics is optional and disabled by default.
      </p>

      <div className="card" style={{ marginTop: 16, display: 'grid', gap: 14 }}>
        <div className="card card--quiet" style={{ padding: 14 }}>
          <strong>Essential (required)</strong>
          <p style={{ color: 'var(--subtle)', margin: '8px 0 0' }}>
            Authentication/session storage (JWT) required for account login and secure features.
          </p>
          <p style={{ marginTop: 8, marginBottom: 0 }}>Always active</p>
        </div>

        <div className="card card--quiet" style={{ padding: 14 }}>
          <strong>Analytics (optional)</strong>
          <p style={{ color: 'var(--subtle)', margin: '8px 0 0' }}>
            Usage measurement including action #29 events to improve product experience.
          </p>
          <label style={{ display: 'inline-flex', gap: 8, marginTop: 10, alignItems: 'center' }}>
            <input
              type="checkbox"
              checked={analyticsEnabled}
              onChange={(e) => setAnalyticsEnabled(e.target.checked)}
            />
            Enable analytics
          </label>
        </div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
          <button type="button" className="btn btn--ghost" onClick={() => save('essential')}>Use essential only</button>
          <button type="button" className="btn btn--primary" onClick={() => save(analyticsEnabled ? 'all' : 'essential')}>Save preferences</button>
          <button type="button" className="btn btn--ghost" onClick={() => save('all')}>Accept all</button>
        </div>

        <p style={{ margin: 0, color: hasSaved ? 'var(--text)' : 'var(--subtle)' }}>{status}</p>
      </div>

      <div style={{ marginTop: 14, display: 'flex', flexWrap: 'wrap', gap: 10 }}>
        <button type="button" className="btn btn--ghost" onClick={() => setPage('privacy')}>Back to privacy policy</button>
        <a className="btn btn--ghost" href="mailto:support@shastes.com">Contact support</a>
      </div>
    </section>
  );
}

Object.assign(window, { CookiesPage });