/* ============== Minassa Cars — Auction Detail ============== */
function AuctionScreen({ mobile, nav }) {
  const base = AUCTIONS[0];
  const [bid, setBid] = useState(base.currentBid);
  const [feed, setFeed] = useState(base.feed);
  const [endsAt, setEndsAt] = useState(base.endsAt);
  const [youLead, setYouLead] = useState(false);
  const [outbid, setOutbid] = useState(false);
  const [snipe, setSnipe] = useState(false);
  const [input, setInput] = useState(base.currentBid + base.increment);
  const [flash, setFlash] = useState(false);
  const cd = useCountdown(endsAt);

  const minNext = bid + base.increment;

  // keep input >= minNext
  useEffect(() => { setInput(v => (v < minNext ? minNext : v)); }, [minNext]);

  // simulated competing bid a few seconds after you take the lead
  const outbidTimer = useRef(null);
  useEffect(() => () => clearTimeout(outbidTimer.current), []);

  const pushBid = (entry) => {
    setFeed(f => [{ ...entry, fresh: true }, ...f].slice(0, 8));
    setBid(entry.amount);
    setFlash(true);
    setTimeout(() => setFlash(false), 700);
  };

  const placeBid = () => {
    if (cd.ended || input < minNext) return;
    pushBid({ who: 'أنت', amount: input, ago: 'الآن', you: true, lead: true });
    setYouLead(true);
    setOutbid(false);

    // anti-snipe: bidding inside the final 2 minutes extends the clock
    if (endsAt - Date.now() < 2 * 60 * 1000) {
      setEndsAt(e => e + 2 * 60 * 1000);
      setSnipe(true);
      setTimeout(() => setSnipe(false), 6000);
    }

    // a rival outbids you ~5s later (once)
    clearTimeout(outbidTimer.current);
    outbidTimer.current = setTimeout(() => {
      const rival = input + base.increment;
      pushBid({ who: 'مزايد #A47', amount: rival, ago: 'الآن', you: false, lead: true });
      setYouLead(false);
      setOutbid(true);
    }, 5200);
  };

  const car = base;
  const galleryImgs = [car.photo, PHOTOS.patrol, PHOTOS.hilux, PHOTOS.prado];
  const [activeImg, setActiveImg] = useState(0);

  return (
    <div className="screen">
      <div className="wrap" style={{ paddingTop: 18, paddingBottom: 64 }}>
        <div className="crumb">الرئيسية <Icon name="chevron" size={13} /> المزادات <Icon name="chevron" size={13} /> {car.brand} {car.model}</div>

        <div className={`auction-detail ${mobile ? 'mob-stack' : ''}`}>
          {/* LEFT: gallery + info */}
          <div className="auction-main">
            <div className="gallery">
              <div className="gallery-hero">
                <CarPhoto src={galleryImgs[activeImg]} alt={car.model} />
                <span className="pill pill-red gallery-live"><span className="live-dot sm" /> مباشر · {car.bidders} مزايد</span>
                <span className="gallery-count"><Icon name="eye" size={14} /> 1 248 مشاهدة</span>
              </div>
              <div className="gallery-thumbs">
                {galleryImgs.map((g, i) => (
                  <button key={i} className={`thumb ${i === activeImg ? 'on' : ''}`} onClick={() => setActiveImg(i)}>
                    <CarPhoto src={g} alt="" />
                  </button>
                ))}
              </div>
            </div>

            <div className="auction-title-row">
              <div>
                <h1 className="detail-h1">{car.brand} {car.model}</h1>
                <div className="detail-sub">{car.year} · {fmt(car.km)} km · {car.city}</div>
              </div>
              <button className="heart on-light"><Icon name="heart" size={20} /></button>
            </div>

            <div className="spec-table card">
              {[['السنة', car.year], ['المسافة', `${fmt(car.km)} km`], ['الوقود', car.fuel],
                ['ناقل الحركة', car.gearbox], ['نوع الهيكل', car.body], ['المدينة', car.city],
                ['سعر البدء', MRU(car.startBid)], ['أدنى زيادة', MRU(car.increment)]].map(([k, v], i) => (
                <div className="spec-cell" key={i}><span className="spec-k">{k}</span><span className="spec-v">{v}</span></div>
              ))}
            </div>

            <div className="seller-card card">
              <div className="seller-left">
                <div className="seller-ava"><Icon name="shield" size={22} /></div>
                <div>
                  <div className="seller-name">{car.vendor.name} <Icon name="verified" size={15} style={{ color: 'var(--blue)' }} /></div>
                  <div className="seller-meta"><Rating value={car.vendor.rating} /> · {car.vendor.sales} مبيعة · {car.vendor.city}</div>
                </div>
              </div>
              <VendorBadge tier={car.vendor.tier} />
            </div>
          </div>

          {/* RIGHT: bidding panel */}
          <aside className="auction-side">
            <div className="bid-panel card">
              {outbid && <div className="banner banner-red fade-up"><Icon name="flame" size={18} /> تم تجاوز عرضك! زايد من جديد لتتصدر.</div>}
              {youLead && !outbid && <div className="banner banner-green fade-up"><Icon name="check" size={18} /> أنت أعلى مزايد.</div>}
              {snipe && <div className="banner banner-amber fade-up"><Icon name="clock" size={18} /> مكافحة الخطف: تم إضافة دقيقتين.</div>}

              <div className="bid-current">
                <div className="micro-label">المزايدة الحالية</div>
                <div className={`bid-big tnum ${flash ? 'flash' : ''}`}>{MRU(bid)}</div>
                <div className="bid-lead-row">
                  {youLead && !outbid
                    ? <span className="pill pill-green"><Icon name="check" size={13} /> في المقدمة: أنت</span>
                    : <span className="pill pill-ink">في المقدمة: {feed[0]?.who || 'مزايد #A47'}</span>}
                </div>
              </div>

              <div className="bid-countdown">
                <div className="micro-label" style={{ marginBottom: 8 }}>{cd.ended ? 'انتهى المزاد' : 'ينتهي خلال'}</div>
                <Countdown endsAt={endsAt} />
              </div>

              {!cd.ended && (
                <div className="bid-form">
                  <div className="bid-stepper">
                    <button onClick={() => setInput(v => Math.max(minNext, v - base.increment))}><Icon name="minus" size={16} /></button>
                    <div className="bid-input">
                      <span className="bid-input-cur">MRU</span>
                      <input className="tnum" type="text" value={fmt(input)}
                        onChange={e => { const n = +e.target.value.replace(/\D/g, ''); setInput(isNaN(n) ? minNext : n); }} />
                    </div>
                    <button onClick={() => setInput(v => v + base.increment)}><Icon name="plus" size={16} /></button>
                  </div>
                  <div className="bid-hint">أدنى مزايدة: <b>{MRU(minNext)}</b> (زيادة {MRU(base.increment)})</div>
                  <div className="bid-quick">
                    {[1, 2, 4].map(mult => (
                      <button key={mult} className="chip btn-sm" onClick={() => setInput(minNext + (mult - 1) * base.increment)}>+{MRU((mult) * base.increment).replace(' MRU', '')}</button>
                    ))}
                  </div>
                  <button className="btn btn-primary btn-block btn-lg" disabled={input < minNext} onClick={placeBid}>
                    <Icon name="gavel" size={18} /> زايد بـ {MRU(input)}
                  </button>
                  <div className="bid-terms"><Icon name="shield" size={14} /> يُشترط وديعة ضمان. المزايدة ملزمة.</div>
                </div>
              )}
              {cd.ended && <button className="btn btn-ghost btn-block btn-lg" disabled>المزاد مغلق</button>}
            </div>

            {/* live bid feed */}
            <div className="feed-panel card">
              <div className="feed-head"><span className="live-dot sm" /> النشاط المباشر</div>
              <div className="feed-list">
                {feed.map((b, i) => (
                  <div key={b.amount + '-' + i} className={`bidrow ${b.you ? 'you' : ''} ${i === 0 ? 'lead' : ''} ${b.fresh ? 'bid-new' : ''}`}>
                    <div className="avatar"><Icon name={b.you ? 'user' : 'gavel'} size={16} /></div>
                    <div>
                      <div className="bid-who">{b.who} {i === 0 && <span className="pill pill-green" style={{ padding: '2px 7px', fontSize: 10.5 }}>الأعلى</span>}</div>
                      <div className="bid-ago">{b.ago}</div>
                    </div>
                    <div className="bid-amt tnum">{MRU(b.amount)}</div>
                  </div>
                ))}
              </div>
            </div>
          </aside>
        </div>
      </div>
      <Footer />
    </div>
  );
}

Object.assign(window, { AuctionScreen });