// Delivery redirect modal (to UberEats)
const { useState: useStateDL, useEffect: useEffectDL } = React;

function DeliveryModal({ open, onClose }) {
  const { t } = useT();
  const store = useLnStore();
  const mode = store.serviceModes.delivery;
  if (mode !== 'online') {
    return <ServiceFallbackModal open={open} onClose={onClose} service="delivery" />;
  }
  const dt = t.delivery;
  const [countdown, setCountdown] = useStateDL(null);

  useEffectDL(() => { if (!open) setCountdown(null); }, [open]);

  useEffectDL(() => {
    if (countdown === null) return;
    if (countdown <= 0) {
      window.open(store.settings.uberEatsUrl, '_blank', 'noopener');
      onClose?.();
      return;
    }
    const tm = setTimeout(() => setCountdown(c => c - 1), 1000);
    return () => clearTimeout(tm);
  }, [countdown, onClose]);

  const startRedirect = () => setCountdown(3);

  return (
    <Modal open={open} onClose={onClose} width={520}>
      <div className="ln-modal-section-tight" style={{ textAlign: 'center' }}>
        <div style={{ width: 64, height: 64, borderRadius: 20, background: 'color-mix(in oklab, var(--accent) 14%, transparent)', color: 'var(--accent)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
          <Icon.moped size={30} />
        </div>
        <h2 className="serif" style={{ margin: '0 0 10px', fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em' }}>{dt.title}</h2>
        <p style={{ margin: '0 auto 22px', color: 'var(--ink-soft)', fontSize: 15, lineHeight: 1.6, maxWidth: 380 }}>{dt.body}</p>
        <div style={{ background: 'var(--paper-warm)', borderRadius: 12, padding: '14px 18px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 22, textAlign: 'left' }}>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <div style={{ width: 42, height: 42, borderRadius: 10, background: '#06C167', color: '#000', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 13, letterSpacing: '-0.02em' }}>
              Uber<br/>Eats
            </div>
            <div>
              <div style={{ fontWeight: 600, fontSize: 14 }}>Los Nobles Tacos</div>
              <div className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>ubereats.com · {dt.time}</div>
            </div>
          </div>
          <Tag tone="ok">{dt.external}</Tag>
        </div>
        {countdown === null ? (
          <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Button variant="ghost" onClick={onClose}>{dt.cancel}</Button>
            <Button variant="primary" size="lg" onClick={startRedirect}>
              {dt.go} <Icon.external />
            </Button>
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
            <div className="mono" style={{ fontSize: 14, color: 'var(--ink-soft)' }}>{dt.redirecting(countdown)}</div>
            <div style={{ width: '100%', height: 3, background: 'var(--line)', borderRadius: 999, overflow: 'hidden', maxWidth: 220 }}>
              <div style={{ height: '100%', background: 'var(--accent)', width: `${((3-countdown)/3)*100}%`, transition: 'width 1s linear' }}/>
            </div>
            <Button variant="ghost" size="sm" onClick={onClose}>{dt.cancel}</Button>
          </div>
        )}
      </div>
    </Modal>
  );
}

Object.assign(window, { DeliveryModal });