// ===== widgets.jsx =====
// Global floating widgets: LiveFeed (bottom-right), MobileStickyCTA (bottom bar).

const { useState: useSW, useEffect: useEW, useRef: useRW } = React;

function LiveFeed() {
  const feed = MOCK.LIVE_FEED;
  const [idx, setIdx] = useSW(0);
  const [closed, setClosed] = useSW(false);
  const [show, setShow] = useSW(false);

  // Surface after a small delay on first load
  useEW(() => {
    const t = setTimeout(() => setShow(true), 2500);
    return () => clearTimeout(t);
  }, []);

  // Rotate every 8s
  useEW(() => {
    if (closed) return;
    const id = setInterval(() => setIdx(i => (i + 1) % feed.length), 8000);
    return () => clearInterval(id);
  }, [closed, feed.length]);

  if (closed) return null;

  const item = feed[idx];
  const risk = item.aigc < 30 ? { label: '低风险',   tone: 'text-ok-600',   dot: 'bg-ok-500'   }
              : item.aigc < 55 ? { label: '中风险',   tone: 'text-warn-600', dot: 'bg-warn-500' }
                                : { label: '高风险',   tone: 'text-bad-600',  dot: 'bg-bad-500'  };

  return (
    <div className="hidden lg:block fixed bottom-6 left-6 z-30" style={{ pointerEvents: show ? 'auto' : 'none' }}>
      <div className="transition-all duration-500" style={{ opacity: show ? 1 : 0, transform: show ? 'translateY(0)' : 'translateY(10px)' }}>
        <div key={idx} className="fade-up bg-white rounded-xl shadow-soft ring-1 ring-ink-200 p-3.5 pr-8 w-[300px] relative">
          <button onClick={() => setClosed(true)} className="absolute top-2 right-2 w-6 h-6 rounded-md text-ink-400 hover:bg-ink-100 flex items-center justify-center">
            <I.X size={12} />
          </button>
          <div className="flex items-center gap-2 text-[11px] text-ink-500">
            <span className="inline-flex items-center gap-1.5 px-1.5 h-5 rounded bg-brand-50 text-brand-600 font-medium"><I.Sparkles size={10} /> 实时</span>
            <span>{item.ago}</span>
          </div>
          <div className="mt-1.5 text-[13px] text-navy-900">
            <span className="font-semibold">{item.name}</span> 完成了 <span className="num font-semibold">{item.words.toLocaleString()}</span> 字检测
          </div>
          <div className="mt-1.5 flex items-center gap-2 text-[11.5px]">
            <span className="num font-semibold text-navy-900">AIGC {item.aigc}%</span>
            <span className="text-ink-300">·</span>
            <span className={`inline-flex items-center gap-1 ${risk.tone} font-medium`}>
              <span className={`w-1.5 h-1.5 rounded-full ${risk.dot}`} />
              {risk.label}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}

function MobileStickyCTA({ navigate, route }) {
  // Don't show on the order page, the report page, the admin page or while uploading
  if (route === 'order' || route === 'admin' || route === 'report') return null;
  return (
    <div className="lg:hidden fixed left-0 right-0 bottom-0 z-40">
      <div className="px-3 pb-3 pt-2 bg-gradient-to-t from-white via-white/95 to-white/0">
        <button onClick={() => navigate('upload')}
                className="w-full h-14 rounded-xl bg-brand-600 text-white font-semibold shadow-soft flex items-center justify-center gap-2.5 text-[15px] active:bg-blue-700">
          <I.Upload size={16} />
          立即检测
          <span className="opacity-70 mx-1">·</span>
          <span className="num">¥4.9</span>
          <span className="opacity-70 text-[12.5px] font-normal">起 / 次</span>
          <I.ArrowRight size={16} className="ml-1 opacity-90" />
        </button>
      </div>
    </div>
  );
}

window.LiveFeed = LiveFeed;
window.MobileStickyCTA = MobileStickyCTA;