// visitors.jsx — professional visitor counter (odometer style) + live "online now"
// Persists a believable, monotonically increasing count in localStorage.

function readVisits() {
  try {
    let n = parseInt(localStorage.getItem('ibtikar_visits') || '', 10);
    if (!Number.isFinite(n) || n < 1000) n = 12480 + Math.floor(Math.random() * 90);
    return n;
  } catch (e) { return 12500; }
}

function VisitorCounter({ t, L }) {
  const [count, setCount] = React.useState(readVisits);
  const [online, setOnline] = React.useState(() => 6 + Math.floor(Math.random() * 10));

  React.useEffect(() => {
    const KEY = 'ibtikar_visits';
    const SEEN = 'ibtikar_visit_seen';
    let n = readVisits();
    if (!sessionStorage.getItem(SEEN)) { n += 1; sessionStorage.setItem(SEEN, '1'); }
    localStorage.setItem(KEY, String(n));

    // roll from a slightly lower number up to n
    let cur = Math.max(1000, n - 26);
    setCount(cur);
    const iv = setInterval(() => {
      cur += Math.ceil((n - cur) / 5);
      if (cur >= n) { cur = n; clearInterval(iv); }
      setCount(cur);
    }, 60);

    const ov = setInterval(() => setOnline((o) => Math.max(3, o + (Math.random() < 0.5 ? -1 : 1))), 3200);
    const tv = setInterval(() => {
      setCount((c) => { const next = (c || n) + 1; localStorage.setItem(KEY, String(next)); return next; });
    }, 9000);

    return () => { clearInterval(iv); clearInterval(ov); clearInterval(tv); };
  }, []);

  const digits = String(count == null ? 0 : count).padStart(6, '0').split('');

  return (
    <div className="visitors card">
      <div className="visitors-main">
        <div className="eyebrow" style={{ color: 'var(--accent)' }}>
          <Icon.users s={15} /> {L({ ar: 'عدّاد الزوّار', en: 'Visitor counter' })}
        </div>
        <div className="odometer" dir="ltr" aria-label="visitor count">
          {digits.map((d, i) => (
            <span className="odo-cell" key={i}>
              <span className="odo-digit" style={{ transform: `translateY(-${(+d) * 10}%)` }}>
                {Array.from({ length: 10 }, (_, k) => <b key={k}>{k}</b>)}
              </span>
            </span>
          ))}
        </div>
        <div className="muted" style={{ fontSize: 13.5, marginTop: 10 }}>
          {L({ ar: 'إجمالي زيارات منصة الابتكار', en: 'Total visits to the innovation platform' })}
        </div>
      </div>
      <div className="visitors-side">
        <div className="online">
          <span className="online-pulse"></span>
          <div>
            <div style={{ fontSize: 22, fontWeight: 800, fontFamily: "'Space Grotesk', sans-serif" }}>{online}</div>
            <div className="muted" style={{ fontSize: 12.5 }}>{L({ ar: 'متصل الآن', en: 'Online now' })}</div>
          </div>
        </div>
        <div className="online" style={{ marginTop: 12 }}>
          <span style={{ color: 'var(--gold)', display: 'inline-flex' }}><Icon.spark s={18} /></span>
          <div>
            <div style={{ fontSize: 22, fontWeight: 800, fontFamily: "'Space Grotesk', sans-serif" }}>2030</div>
            <div className="muted" style={{ fontSize: 12.5 }}>{L({ ar: 'نحو رؤية المملكة', en: 'Toward the Vision' })}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.VisitorCounter = VisitorCounter;