/* AddressPicker — full-screen mobile address picker.
 *
 * Opens when a user taps the address-shell input on mobile (≤768px).
 * Takes over the screen, autofocuses an input at the top, lets Google
 * Places attach its dropdown directly under the input (where there's
 * actual room above the keyboard).
 *
 * The input has the .address-shell parent class so places.js auto-binds
 * it via its existing MutationObserver. No special wiring needed.
 */
const { useEffect: useEffectAP, useRef: useRefAP } = React;

function AddressPicker({ address, setAddress, onSubmit, onClose }) {
  const inputRef = useRefAP(null);

  // Lock body scroll while open
  useEffectAP(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = prev; };
  }, []);

  // Autofocus the input shortly after mount (delay so keyboard opens correctly on iOS)
  useEffectAP(() => {
    const t = setTimeout(() => {
      if (inputRef.current) inputRef.current.focus();
    }, 60);
    return () => clearTimeout(t);
  }, []);

  // Esc closes
  useEffectAP(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);

  const submit = (e) => {
    e && e.preventDefault();
    if (!address.trim()) return;
    onSubmit(address);
  };

  return (
    <div className="addr-picker" role="dialog" aria-modal="true" aria-label="Enter your property address">
      <div className="addr-picker-bar">
        <button className="addr-picker-cancel" onClick={onClose} type="button" aria-label="Cancel">Cancel</button>
        <span className="addr-picker-title">Property address</span>
        <span className="addr-picker-spacer" aria-hidden="true" />
      </div>

      <form className="address-shell addr-picker-form" onSubmit={submit} data-elevate-attribution>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" style={{ flexShrink: 0, color: '#888' }} aria-hidden="true">
          <path d="M10 1.5C6 1.5 3 4.5 3 8.2c0 5 7 10.3 7 10.3s7-5.3 7-10.3c0-3.7-3-6.7-7-6.7z" stroke="currentColor" strokeWidth="1.4" />
          <circle cx="10" cy="8" r="2.4" stroke="currentColor" strokeWidth="1.4" />
        </svg>
        <input
          ref={inputRef}
          type="text"
          placeholder="Start typing your address…"
          value={address}
          onChange={(e) => setAddress(e.target.value)}
          aria-label="Property address"
          autoComplete="street-address"
        />
        {address && (
          <button
            type="button"
            className="addr-picker-clear"
            onClick={() => { setAddress(''); inputRef.current && inputRef.current.focus(); }}
            aria-label="Clear address"
          >
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M1 1L13 13M13 1L1 13" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
            </svg>
          </button>
        )}
      </form>

      <p className="addr-picker-hint">Pick a suggestion as it appears. We'll send your offer within 24 hours.</p>

      <div className="addr-picker-body">
        <div className="addr-picker-trust-grid">
          <div className="addr-picker-trust">
            <span className="addr-picker-trust-num">14</span>
            <span className="addr-picker-trust-lbl">Days to close</span>
          </div>
          <div className="addr-picker-trust">
            <span className="addr-picker-trust-num">$0</span>
            <span className="addr-picker-trust-lbl">Fees or repairs</span>
          </div>
          <div className="addr-picker-trust">
            <span className="addr-picker-trust-num">24h</span>
            <span className="addr-picker-trust-lbl">To get your offer</span>
          </div>
        </div>

        <div className="addr-picker-areas">
          <p className="addr-picker-areas-label">We buy in</p>
          <div className="addr-picker-areas-pills">
            <span>Tampa</span>
            <span>St. Petersburg</span>
            <span>Clearwater</span>
            <span>Brandon</span>
            <span>Riverview</span>
            <span>Lakeland</span>
          </div>
        </div>
      </div>

      <div className="addr-picker-cta-row">
        <button
          type="button"
          className="address-cta addr-picker-submit"
          disabled={!address.trim()}
          onClick={submit}
        >
          Continue
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
            <path d="M2 7H12M12 7L7.5 2.5M12 7L7.5 11.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button>
        <a className="addr-picker-call" href="tel:+18132133578">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          Or call (813) 213-3578
        </a>
      </div>
    </div>
  );
}

window.AddressPicker = AddressPicker;