/* ============================================================
   Төрмен — Order tracking (guest + link with token)
   Routes: #track · #order/{display_id}?t={token}
   ============================================================ */
const { useState:useStateOT, useEffect:useEffectOT, useMemo:useMemoOT } = React;

const TRACK_STEPS_DEFAULT = [
  { ic:'clipboard-check', ru:'Заказ создан', kz:'Тапсырыс құрылды', subRu:'Заказ подтверждён', subKz:'Тапсырыс расталды' },
  { ic:'package', ru:'В обработке', kz:'Өңделуде', subRu:'Готовим и упаковываем', subKz:'Дайындап, орап жатырмыз' },
  { ic:'bike', ru:'В доставке', kz:'Жеткізуде', subRu:'Курьер уже едет к вам', subKz:'Курьер сізге келе жатыр' },
  { ic:'home', ru:'Доставлен', kz:'Жеткізілді', subRu:'Заказ у вас', subKz:'Тапсырыс сізде' },
];
Object.assign(window, { TRACK_STEPS_DEFAULT });

function GuestOrderLookup({ initialNo='', onSubmit, busy, err, compact }){
  const { lang } = useLang();
  const L = (ru,kz)=> lang==='kz'?kz:ru;
  const [no, setNo] = useStateOT(initialNo);
  const [phone, setPhone] = useStateOT('');

  useEffectOT(()=>{ if(initialNo) setNo(initialNo); }, [initialNo]);

  const submit = (e)=>{
    e.preventDefault();
    onSubmit({ displayId: no.trim(), phone: phone.trim() });
  };

  return (
    <form onSubmit={submit} className={compact ? '' : 'max-w-md mx-auto'}>
      <div className="space-y-4">
        <div>
          <label className="text-xs font-semibold tracking-wide uppercase mb-2 block" style={{ color:'var(--ink-3)' }}>{L('Номер заказа','Тапсырыс нөмірі')}</label>
          <input className="w-full px-4 py-3 text-sm tnum" style={{ background:'var(--surface-1)', border:'1px solid var(--border)', borderRadius:'var(--radius)', color:'var(--ink)' }}
            inputMode="numeric" placeholder="4853" value={no} onChange={e=>setNo(e.target.value)} required />
        </div>
        <div>
          <label className="text-xs font-semibold tracking-wide uppercase mb-2 block" style={{ color:'var(--ink-3)' }}>{L('Телефон из заказа','Тапсырыстағы телефон')}</label>
          <input className="w-full px-4 py-3 text-sm" style={{ background:'var(--surface-1)', border:'1px solid var(--border)', borderRadius:'var(--radius)', color:'var(--ink)' }}
            type="tel" placeholder="+7 700 000 00 00" value={phone} onChange={e=>setPhone(e.target.value)} required />
        </div>
        {err && <p className="text-sm" style={{ color:'var(--ember)' }}>{err}</p>}
        <button type="submit" className="btn btn-primary w-full" disabled={busy}>
          <span className="shine"></span>
          {busy ? L('Ищем…','Іздеуде…') : (<><Icon name="search" size={17} />{L('Найти заказ','Тапсырысты табу')}</>)}
        </button>
      </div>
    </form>
  );
}

function TrackOrderScreen({ go }){
  const { lang } = useLang();
  const L = (ru,kz)=> lang==='kz'?kz:ru;
  return (
    <div className="max-w-xl mx-auto px-5 pt-24 md:pt-28 pb-36">
      <div className="eyebrow mb-3">{L('Отслеживание','Бақылау')}</div>
      <h1 className="display text-3xl md:text-4xl mb-3"><span className="grad-text">{L('Где мой заказ?','Тапсырысым қайда?')}</span></h1>
      <p className="mb-8" style={{ color:'var(--ink-2)' }}>{L('Введите номер заказа и телефон — или откройте ссылку из подтверждения после оформления.','Тапсырыс нөмірі мен телефонды жазыңыз — немесе рәсімдеуден кейінгі сілтемені ашыңыз.')}</p>
      <div className="glass p-6 md:p-8">
        <GuestOrderLookup onSubmit={({ displayId, phone })=>{
          window.__trackPhone = phone;
          const token = window.getSavedTrackToken?.({ displayId }) || '';
          go('order', { id: displayId }, token ? { t: token } : {});
        }} />
      </div>
      <p className="text-xs text-center mt-6" style={{ color:'var(--ink-3)' }}>{L('Без регистрации · ссылка сохраняется в SMS и Telegram','Тіркелусіз · сілтеме SMS пен Telegram-да сақталады')}</p>
    </div>
  );
}

function OrderTrackScreen({ go, params={}, query={} }){
  const { lang, t, tx } = useLang();
  const { user } = useAuth();
  const L = (ru,kz)=> lang==='kz'?kz:ru;
  const [order, setOrder] = useStateOT(null);
  const [loading, setLoading] = useStateOT(true);
  const [lookup, setLookup] = useStateOT(false);
  const [busy, setBusy] = useStateOT(false);
  const [err, setErr] = useStateOT('');
  const [helped, setHelped] = useStateOT(false);

  const displayId = params.id || '';
  const urlToken = query.t || '';
  const savedOrderId = window.getTrackOrderId?.() || '';

  const loadOrder = async (creds)=>{
    setErr('');
    setLoading(true);
    try{
      if(!window.isMedusaConfigured?.()) throw new Error('no_medusa');
      let raw = null;
      if(user && creds.orderId){
        try{
          const data = await window.ordersFetch?.(`/store/orders/${creds.orderId}`, { auth:true });
          raw = data?.order;
        }catch(_){}
      }
      if(!raw){
        raw = await window.fetchGuestOrder?.({
          displayId: creds.displayId || undefined,
          orderId: creds.orderId || undefined,
          phone: creds.token ? undefined : creds.phone,
          token: creds.token || undefined,
        });
      }
      if(!raw) throw new Error('not_found');
      setOrder(raw);
      setLookup(false);
      window.saveTrackCredentials?.({
        orderId: raw.id,
        displayId: raw.display_id,
        token: creds.token || window.getSavedTrackToken?.({ orderId: raw.id, displayId: raw.display_id }),
      });
      delete window.__trackPhone;
    }catch(e){
      setOrder(null);
      const msg = (e?.message || '').toLowerCase();
      if(msg.includes('not_found') || e?.status === 404) setErr(L('Заказ не найден. Проверьте номер и телефон.','Тапсырыс табылмады. Нөмір мен телефонды тексеріңіз.'));
      else if(msg.includes('no_medusa')) setErr(L('Сервис заказов временно недоступен.','Тапсырыс сервисі уақытша қолжетімсіз.'));
      else setErr(L('Не удалось загрузить заказ. Попробуйте ещё раз.','Тапсырысты жүктеу сәтсіз. Қайта көріңіз.'));
      setLookup(true);
    }finally{
      setLoading(false);
    }
  };

  useEffectOT(()=>{
    const token = urlToken
      || window.getSavedTrackToken?.({ orderId: savedOrderId, displayId })
      || '';
    const phone = window.__trackPhone || '';
    const creds = { displayId, orderId: !displayId ? savedOrderId : '', token, phone };
    if(creds.token || (creds.phone && (creds.displayId || creds.orderId))){
      loadOrder(creds);
      return;
    }
    if(creds.displayId || creds.orderId){
      setLookup(true);
      setLoading(false);
      return;
    }
    setLookup(true);
    setLoading(false);
  }, [displayId, urlToken, savedOrderId]);

  const stepIdx = order ? (window.orderTrackStepIndex?.(order) ?? 0) : 0;
  const trackSteps = order ? (window.orderTrackSteps?.(order) || TRACK_STEPS_DEFAULT) : TRACK_STEPS_DEFAULT;
  const badge = order ? (window.orderStatusBadge?.(order, lang) || {}) : null;
  const trackingNo = order?.metadata?.tracking_number || '';
  const trackingUrl = order?.metadata?.tracking_url || '';
  const items = useMemoOT(()=>{
    if(!order?.items) return [];
    return order.items.map((item, idx)=>{
      const handle = item.product_handle;
      const set = (window.SETS || []).find(s=> s.id === handle);
      const price = Math.round(item.unit_price || item.total || 0);
      const qty = item.quantity || 1;
      return {
        key: item.id || idx,
        setId: handle,
        ph: set?.ph || 'cut',
        name: set?.name || { ru: item.product_title || item.title, kz: item.product_title || item.title },
        meta: item.variant_title || '',
        qty,
        price,
      };
    });
  }, [order]);

  const subtotal = order ? Math.round(order.total || 0) : 0;
  const addr = order?.shipping_address?.address_1 || '';
  const mode = order?.metadata?.delivery_mode || 'delivery';
  const pay = order?.metadata?.payment_method || '';

  const requestHelp = ()=>{
    setHelped(true);
    if(window.openTelegram) window.openTelegram();
    else if(window.tormenToast) window.tormenToast({ icon:'life-buoy', title:L('Поддержка','Қолдау'), sub:L('Ответим в Telegram','Telegram-да жауап береміз'), accent:true });
  };

  if(loading){
    return (
      <div className="max-w-xl mx-auto px-5 pt-32 pb-32 text-center">
        <Icon name="loader" size={28} className="spin mx-auto mb-3" style={{ color:'var(--ember)' }} />
        <p className="text-sm" style={{ color:'var(--ink-3)' }}>{L('Загружаем заказ…','Тапсырысты жүктейміз…')}</p>
      </div>
    );
  }

  if(lookup || !order){
    return (
      <div className="max-w-xl mx-auto px-5 pt-24 md:pt-28 pb-36">
        <button onClick={()=>go('track')} className="inline-flex items-center gap-2 text-sm mb-6" style={{ color:'var(--ink-2)' }}>
          <Icon name="arrow-left" size={16} />{L('Отслеживание','Бақылау')}
        </button>
        <div className="eyebrow mb-3">{L('Заказ','Тапсырыс')}</div>
        <h1 className="display text-3xl md:text-4xl mb-3"><span className="grad-text">{L('Войти в заказ','Тапсырысқа кіру')}</span></h1>
        <p className="mb-8" style={{ color:'var(--ink-2)' }}>{L('Укажите номер из подтверждения и телефон, который вводили при оформлении.','Растаудағы нөмір мен рәсімдеу кезіндегі телефонды көрсетіңіз.')}</p>
        <div className="glass p-6 md:p-8">
          <GuestOrderLookup initialNo={displayId} busy={busy} err={err}
            onSubmit={async ({ displayId: no, phone })=>{
              setBusy(true);
              window.__trackPhone = phone;
              await loadOrder({ displayId: no, phone, token: urlToken || window.getSavedTrackToken?.({ displayId: no }) });
              setBusy(false);
              if(no) go('order', { id: no }, urlToken ? { t: urlToken } : {});
            }} />
        </div>
      </div>
    );
  }

  const orderNo = String(order.display_id ?? '');
  const cancelled = stepIdx < 0;

  return (
    <div className="max-w-7xl mx-auto px-5 pt-24 md:pt-28 pb-36">
      <button onClick={()=>go(user ? 'profile' : 'track')} className="inline-flex items-center gap-2 text-sm mb-6" style={{ color:'var(--ink-2)' }}>
        <Icon name="arrow-left" size={16} />{user ? L('Мои заказы','Тапсырыстарым') : L('Отслеживание','Бақылау')}
      </button>

      <Reveal>
        <div className="eyebrow mb-3">{L('Заказ','Тапсырыс')}</div>
        <div className="flex flex-wrap items-center gap-4 mb-3">
          <h1 className="display text-4xl md:text-5xl"><span className="grad-text">№ {orderNo}</span></h1>
          {badge && <span className="badge badge-ember" style={{ fontSize:12, padding:'6px 12px' }}><Icon name={badge.icon} size={13} stroke={2} />{badge.label}</span>}
        </div>
        <p className="max-w-xl mb-8" style={{ color:'var(--ink-2)' }}>
          {cancelled
            ? L('Заказ отменён. Напишите нам, если это ошибка.','Тапсырыс бас тартылды. Қате болса, бізге жазыңыз.')
            : L('Статус обновляется здесь и дублируется в Telegram, если вы подписаны на бота.','Күй осы жерде жаңартылады және ботқа жазылған болсаңыз Telegram-да да келеді.')}
        </p>
      </Reveal>

      <div className="grid lg:grid-cols-[1fr_360px] gap-6 items-start">
        <div className="space-y-6">
          <Reveal>
            <div className="glass p-6">
              <div>
                {trackSteps.map((s,i)=>{
                  const last = i === trackSteps.length-1;
                  const done = !cancelled && i < stepIdx, active = !cancelled && i === stepIdx, future = cancelled || i > stepIdx;
                  const dot = done ? { background:'var(--emerald)', color:'var(--on-accent)' }
                    : active ? { background:'var(--ember)', color:'var(--on-accent)', boxShadow:'0 0 0 4px color-mix(in srgb,var(--ember) 22%,transparent)' }
                    : { background:'var(--surface-3)', color:'var(--ink-3)' };
                  return (
                    <div key={i} className="flex gap-4">
                      <div className="flex flex-col items-center">
                        <span className="grid place-items-center rounded-full shrink-0" style={{ width:38, height:38, ...dot }}>
                          <Icon name={done ? 'check' : s.ic} size={18} stroke={done||active ? 2.2 : 1.7} />
                        </span>
                        {!last && <span className="w-px flex-1" style={{ minHeight:24, margin:'6px 0', background: done ? 'var(--emerald)' : 'var(--border)' }} />}
                      </div>
                      <div className={last ? '' : 'pb-6'} style={{ opacity: future ? 0.5 : 1 }}>
                        <div className="flex items-center gap-2 flex-wrap">
                          <span className="font-semibold" style={{ fontSize:15 }}>{L(s.ru,s.kz)}</span>
                          {active && <span className="badge badge-ember">{L('Сейчас','Қазір')}</span>}
                        </div>
                        <div className="text-sm mt-0.5" style={{ color:'var(--ink-2)' }}>{L(s.subRu,s.subKz)}</div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </Reveal>
        </div>

        <div className="space-y-6">
          <Reveal>
            <div className="glass p-6">
              <div className="font-semibold text-lg mb-4">{L('Состав заказа','Тапсырыс құрамы')}</div>
              <div className="space-y-3 mb-4">
                {items.map(i=>(
                  <div key={i.key} className="flex items-center gap-3">
                    <Ph type={i.ph} imgKey={i.setId || i.key} className="w-14 h-14 shrink-0" rounded="12px" />
                    <div className="flex-1 min-w-0">
                      <div className="text-sm font-medium truncate">{tx(i.name)}</div>
                      <div className="text-xs tnum" style={{ color:'var(--ink-3)' }}>{i.meta} · {i.qty} × {fmtPrice(i.price)}</div>
                    </div>
                    <div className="text-sm tnum font-semibold whitespace-nowrap">{fmtPrice(i.price*i.qty)}</div>
                  </div>
                ))}
              </div>
              <hr className="hairline my-3" />
              <Row label={t('total')} value={fmtPrice(subtotal)} big />
            </div>
          </Reveal>

          {trackingNo && stepIdx >= 2 && !cancelled && (
            <Reveal delay={50}>
              <div className="glass p-6">
                <div className="eyebrow mb-3">{L('Трек-номер','Трек-нөмір')}</div>
                <div className="flex items-center justify-between gap-3">
                  <span className="serif text-lg font-semibold tnum" style={{ color:'var(--ink)' }}>{trackingNo}</span>
                  {trackingUrl
                    ? <a href={trackingUrl} target="_blank" rel="noopener noreferrer" className="btn btn-ghost text-sm" style={{ padding:'8px 14px' }}><Icon name="external-link" size={15} />{L('Отследить','Бақылау')}</a>
                    : <button type="button" className="btn btn-ghost text-sm" style={{ padding:'8px 14px' }} onClick={()=>{ navigator.clipboard?.writeText(trackingNo); window.tormenToast?.({ icon:'copy', title:L('Скопировано','Көшірілді') }); }}><Icon name="copy" size={15} />{L('Копировать','Көшіру')}</button>}
                </div>
              </div>
            </Reveal>
          )}

          <Reveal delay={70}>
            <div className="glass p-6">
              <div className="eyebrow mb-4">{mode === 'pickup' ? L('Самовывоз','Өзі алу') : L('Доставка','Жеткізу')}</div>
              <div className="space-y-3 text-sm">
                <div className="flex gap-3">
                  <Icon name="map-pin" size={17} className="shrink-0 mt-0.5" style={{ color:'var(--gold)' }} />
                  <div className="min-w-0"><div className="font-medium">{addr || window.TORMEN_ENV?.app?.address}</div></div>
                </div>
                {pay && <>
                  <hr className="hairline" />
                  <div className="flex gap-3">
                    <Icon name="smartphone" size={17} className="shrink-0 mt-0.5" style={{ color:'var(--gold)' }} />
                    <div className="min-w-0"><div className="font-medium">{pay}</div></div>
                  </div>
                </>}
              </div>
            </div>
          </Reveal>

          <Reveal delay={140}>
            <div className="glass glass-halo p-6">
              <div className="font-semibold mb-2">{L('Нужна помощь?','Көмек керек пе?')}</div>
              <button className="btn btn-ghost w-full mt-2" onClick={requestHelp}>
                <Icon name={helped ? 'check' : 'send'} size={16} />{helped ? L('Открыли Telegram','Telegram ашылды') : L('Написать в поддержку','Қолдауға жазу')}
              </button>
            </div>
          </Reveal>
        </div>
      </div>

      <div className="flex flex-col sm:flex-row gap-3 mt-10">
        <button className="btn btn-primary flex-1" onClick={()=>go('home')}><span className="shine"></span><Icon name="home" size={16} />{L('На главную','Басты бет')}</button>
        <button className="btn btn-ghost flex-1" onClick={()=>go('track')}>{L('Другой заказ','Басқа тапсырыс')}<Icon name="search" size={16} /></button>
      </div>
    </div>
  );
}

Object.assign(window, { OrderTrackScreen, TrackOrderScreen, GuestOrderLookup });