/* Cumulative usage timer — after 10 min total, require sign-in to continue. */
const USAGE_KEY = 'fp-usage';
const LIMIT_MS = ((window.FP_CONFIG && window.FP_CONFIG.usageGateMinutes) || 10) * 60 * 1000;
const TICK_MS = 1000;

function readUsage() {
  try {
    const raw = localStorage.getItem(USAGE_KEY);
    if (!raw) return { totalMs: 0, signedIn: false, visitorId: null, name: '' };
    const u = JSON.parse(raw);
    return {
      totalMs: Number(u.totalMs) || 0,
      signedIn: !!u.signedIn,
      visitorId: u.visitorId || null,
      name: u.name || '',
    };
  } catch (_) {
    return { totalMs: 0, signedIn: false, visitorId: null, name: '' };
  }
}

function writeUsage(u) {
  localStorage.setItem(USAGE_KEY, JSON.stringify(u));
}

function ensureVisitorId(u) {
  if (u.visitorId) return u;
  const id = (typeof crypto !== 'undefined' && crypto.randomUUID)
    ? crypto.randomUUID()
    : ('v-' + Date.now() + '-' + Math.random().toString(36).slice(2, 9));
  return { ...u, visitorId: id };
}

function isAdminPath() {
  const p = (window.location.pathname || '').replace(/\/$/, '');
  return p === '/admin';
}

const UsageGateCtx = React.createContext(null);
function useUsageGate() { return React.useContext(UsageGateCtx); }

function SignInGateModal({ usage, onSuccess }) {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState('');

  async function submit(e) {
    e.preventDefault();
    setErr('');
    if (!name.trim() || !email.trim() || !phone.trim()) {
      setErr('Please fill in name, email, and phone.');
      return;
    }
    setBusy(true);
    try {
      const res = await fetch('/api/auth/signin', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({
          name: name.trim(),
          email: email.trim(),
          phone: phone.trim(),
          visitorId: usage.visitorId,
        }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) throw new Error(data.error || 'Could not save sign-in');
      onSuccess(name.trim());
    } catch (ex) {
      setErr(ex.message || 'Something went wrong. Try again.');
    } finally {
      setBusy(false);
    }
  }

  const mins = Math.floor(usage.totalMs / 60000);

  return (
    <div className="gate-scrim" role="dialog" aria-modal="true" aria-labelledby="gate-title">
      <div className="gate-sheet">
        <div className="gate-icon" aria-hidden="true">
          <Icon name="markets" size={28} />
        </div>
        <h2 id="gate-title" className="h2" style={{ margin: '0 0 8px', textAlign: 'center' }}>Sign In to Continue</h2>
        <p className="muted" style={{ margin: '0 0 20px', textAlign: 'center', fontSize: 14, lineHeight: 1.55 }}>
          You&apos;ve explored {mins}+ minutes of live market data. Enter your details to keep browsing Company Stock Price.
        </p>
        <form onSubmit={submit} className="gate-form">
          <label className="label-up">Full name</label>
          <input className="key-input gate-input" value={name} onChange={(e) => setName(e.target.value)} placeholder="Your name" autoComplete="name" />
          <label className="label-up" style={{ marginTop: 12 }}>Email</label>
          <input className="key-input gate-input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com" autoComplete="email" />
          <label className="label-up" style={{ marginTop: 12 }}>Phone</label>
          <input className="key-input gate-input" type="tel" value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="+91 98765 43210" autoComplete="tel" />
          {err && <div className="gate-err">{err}</div>}
          <button type="submit" className="pill active gate-submit" disabled={busy}>
            {busy ? 'Saving…' : 'Continue'}
          </button>
        </form>
        <p className="muted" style={{ margin: '14px 0 0', fontSize: 11, textAlign: 'center' }}>
          Free access · no password · your time is saved across visits on this device
        </p>
      </div>
    </div>
  );
}

function UsageGateProvider({ children }) {
  const bypass = isAdminPath();
  const [usage, setUsage] = useState(() => ensureVisitorId(readUsage()));
  const [gateOpen, setGateOpen] = useState(() => {
    if (bypass) return false;
    const u = ensureVisitorId(readUsage());
    return !u.signedIn && u.totalMs >= LIMIT_MS;
  });

  useEffect(() => {
    if (bypass) return undefined;
    let u = ensureVisitorId(readUsage());
    writeUsage(u);

    const tick = () => {
      if (document.visibilityState !== 'visible') return;
      u = readUsage();
      if (u.signedIn) return;
      u.totalMs = (Number(u.totalMs) || 0) + TICK_MS;
      writeUsage(u);
      setUsage({ ...u });
      if (u.totalMs >= LIMIT_MS) setGateOpen(true);
    };

    const id = setInterval(tick, TICK_MS);
    const onVis = () => tick();
    document.addEventListener('visibilitychange', onVis);
    return () => {
      clearInterval(id);
      document.removeEventListener('visibilitychange', onVis);
    };
  }, [bypass]);

  function onSignedIn(name) {
    const u = { ...ensureVisitorId(readUsage()), signedIn: true, name: name || readUsage().name || '' };
    writeUsage(u);
    setUsage(u);
    setGateOpen(false);
  }

  const value = {
    totalMs: usage.totalMs,
    signedIn: usage.signedIn,
    userName: usage.name || '',
    gateOpen: gateOpen && !usage.signedIn,
    limitMs: LIMIT_MS,
  };

  return (
    <UsageGateCtx.Provider value={value}>
      <div className={gateOpen && !usage.signedIn && !bypass ? 'app-gated' : ''}>
        {children}
      </div>
      {gateOpen && !usage.signedIn && !bypass && (
        <SignInGateModal usage={usage} onSuccess={onSignedIn} />
      )}
    </UsageGateCtx.Provider>
  );
}

Object.assign(window, { UsageGateCtx, useUsageGate, UsageGateProvider, USAGE_LIMIT_MS: LIMIT_MS });