// screens-map.jsx — Full peta + Machine detail (browse-only)

// ─────────────────────────────────────────────────────────────
// MapFull — full-screen Leaflet with draggable bottom sheet
// ─────────────────────────────────────────────────────────────
const ScreenMapFull = ({ onBack, onOpenMachine, locOn, focusMachineId }) => {
  const mapRef = React.useRef(null);
  const [ready, setReady] = React.useState(false);
  const [selectedId, setSelectedId] = React.useState(focusMachineId || MOCK_MACHINES[0]?.id);

  // Lazy-load Leaflet
  React.useEffect(() => {
    if (window.L) { setReady(true); return; }
    if (!document.querySelector('link[data-leaflet]')) {
      const css = document.createElement('link');
      css.rel = 'stylesheet';
      css.dataset.leaflet = '1';
      css.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
      document.head.appendChild(css);
    }
    if (!window.__leafletLoading) {
      window.__leafletLoading = true;
      const js = document.createElement('script');
      js.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
      js.onload = () => setReady(true);
      document.head.appendChild(js);
    }
  }, []);

  // Init map
  React.useEffect(() => {
    if (!ready || !mapRef.current || mapRef.current._leaflet_id) return;
    const L = window.L;
    const userLoc = locOn ? MOCK_USER_LOCATION : null;
    const center = userLoc
      ? [userLoc.lat, userLoc.lng]
      : [MOCK_MACHINES[0].lat, MOCK_MACHINES[0].lng];

    const map = L.map(mapRef.current, {
      zoomControl: false, attributionControl: false,
    }).setView(center, 12);
    mapRef.current._lmap = map;

    L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png', {
      maxZoom: 19, subdomains: 'abcd',
    }).addTo(map);
    L.tileLayer('https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}{r}.png', {
      maxZoom: 19, subdomains: 'abcd',
    }).addTo(map);

    const pinFor = (m, active) => L.divIcon({
      className: 'eb-pin',
      html: `<div class="eb-pin-inner${active ? ' active' : ''}${m.status === 'offline' ? ' offline' : ''}">${m.name.charAt(0)}</div>`,
      iconSize: [34, 40], iconAnchor: [17, 40],
    });

    MOCK_MACHINES.forEach(m => {
      const marker = L.marker([m.lat, m.lng], { icon: pinFor(m, m.id === selectedId) }).addTo(map);
      marker.on('click', () => {
        setSelectedId(m.id);
        // Re-render icons
        MOCK_MACHINES.forEach((mm, i) => {
          // crude: rebuild all icons after click
        });
      });
      marker._machine = m;
    });

    if (userLoc) {
      L.marker([userLoc.lat, userLoc.lng], {
        icon: L.divIcon({
          className: 'eb-user',
          html: '<div class="eb-user-dot"></div><div class="eb-user-pulse"></div>',
          iconSize: [20, 20], iconAnchor: [10, 10],
        }),
      }).addTo(map);
    }

    // Fit to all machines
    const points = MOCK_MACHINES.map(m => [m.lat, m.lng]);
    if (userLoc) points.push([userLoc.lat, userLoc.lng]);
    map.fitBounds(points, { padding: [50, 50], maxZoom: 13 });
  }, [ready]);

  // Pan to selected when selectedId changes
  React.useEffect(() => {
    if (!ready || !mapRef.current?._lmap) return;
    const m = MOCK_MACHINES.find(x => x.id === selectedId);
    if (m) mapRef.current._lmap.panTo([m.lat, m.lng], { animate: true });
  }, [selectedId, ready]);

  const machine = MOCK_MACHINES.find(m => m.id === selectedId);

  return (
    <div className="app" style={{ background: '#e8edf2' }}>
      <div ref={mapRef} className="map-full" />

      {/* Top bar — floating */}
      <div className="map-top">
        <button className="icon-btn" onClick={onBack} style={{ background: '#fff' }}>
          <Icon name="back" size={20} />
        </button>
        <div className="map-title-pill">
          <Icon name="pin" size={14} color="var(--eb-amber-strong)" />
          {(window.MOCK_MACHINES || []).length} mesin {(window.BRAND && window.BRAND.name) || 'Elektrobee'}
        </div>
        <button className="icon-btn" style={{ background: '#fff' }} aria-label="Lokasi saya">
          <Icon name="pin" size={18} />
        </button>
      </div>

      {/* Horizontal cards — quick switcher */}
      <div className="map-quick">
        <div className="map-quick-scroll">
          {MOCK_MACHINES.map(m => (
            <button key={m.id}
              className="map-quick-card"
              data-active={m.id === selectedId}
              onClick={() => setSelectedId(m.id)}>
              <div className="map-quick-name">{m.name}</div>
              <div className="map-quick-area">{m.area}</div>
              <div className="map-quick-foot">
                <span style={{
                  width: 6, height: 6, borderRadius: 3,
                  background: m.status === 'online' ? 'var(--eb-success)' : 'var(--eb-danger)',
                }} />
                <span style={{ fontSize: 10, color: m.status === 'online' ? 'var(--eb-success)' : 'var(--eb-danger)', fontWeight: 600 }}>
                  {m.status === 'online' ? 'Online' : 'Offline'}
                </span>
                <span style={{ fontSize: 10, color: 'var(--eb-muted)', fontFamily: 'IBM Plex Mono' }}>
                  {locOn ? formatDistance(m.distance) : `${m.productIds.length} produk`}
                </span>
              </div>
            </button>
          ))}
        </div>
      </div>

      {/* Detail sheet (snap to peek / expanded) */}
      {machine && <MachineSheet machine={machine} locOn={locOn}
        onOpenMachine={() => onOpenMachine(machine)} />}
    </div>
  );
};

const formatDistance = (m) =>
  m == null ? '—'
  : m < 1000 ? `${m} m`
  : `${(m / 1000).toFixed(1).replace('.', ',')} km`;

// ─────────────────────────────────────────────────────────────
// MachineSheet — drag-to-snap bottom sheet at peek / expanded
// ─────────────────────────────────────────────────────────────
const MachineSheet = ({ machine, locOn, onOpenMachine }) => {
  const [snap, setSnap] = React.useState('peek'); // peek | full
  const sheetRef = React.useRef(null);
  const dragState = React.useRef(null);

  const PEEK_H = 220;
  const FULL_H = Math.min(560, window.innerHeight * 0.78);

  const products = PRODUCTS_FOR_MACHINE(machine.id);

  // Drag handlers — translate Y while dragging, snap on release
  const onPointerDown = (e) => {
    if (!sheetRef.current) return;
    dragState.current = {
      startY: e.clientY,
      startSnap: snap,
      currentTranslate: 0,
    };
    sheetRef.current.style.transition = 'none';
    e.currentTarget.setPointerCapture(e.pointerId);
  };

  const onPointerMove = (e) => {
    if (!dragState.current || !sheetRef.current) return;
    const dy = e.clientY - dragState.current.startY;
    dragState.current.currentTranslate = dy;
    sheetRef.current.style.transform = `translateY(${dy}px)`;
  };

  const onPointerUp = (e) => {
    if (!dragState.current || !sheetRef.current) return;
    const dy = dragState.current.currentTranslate;
    const fromSnap = dragState.current.startSnap;
    sheetRef.current.style.transition = '';
    sheetRef.current.style.transform = '';
    // Threshold: 60px
    if (fromSnap === 'peek' && dy < -60) setSnap('full');
    else if (fromSnap === 'full' && dy > 60) setSnap('peek');
    dragState.current = null;
  };

  const height = snap === 'full' ? FULL_H : PEEK_H;
  const openMaps = () => {
    const url = `https://www.google.com/maps/dir/?api=1&destination=${machine.lat},${machine.lng}`;
    window.open(url, '_blank');
  };

  return (
    <div ref={sheetRef} className="map-sheet" style={{ height }}>
      {/* Handle area — draggable */}
      <div className="map-sheet-handle-area"
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        onPointerUp={onPointerUp}
        onPointerCancel={onPointerUp}>
        <div className="map-sheet-handle" />
      </div>

      <div className="map-sheet-content">
        {/* Header */}
        <div style={{ padding: '0 16px 12px', display: 'flex', alignItems: 'flex-start', gap: 12 }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--eb-ink)', letterSpacing: '-0.01em' }}>
              {machine.name}
            </div>
            <div style={{ fontSize: 12, color: 'var(--eb-muted)', marginTop: 2 }}>
              {machine.location} · {machine.area}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8, flexWrap: 'wrap' }}>
              <span className="pill" style={{
                background: machine.status === 'online' ? 'var(--eb-success-soft)' : 'var(--eb-danger-soft)',
                color: machine.status === 'online' ? 'var(--eb-success)' : 'var(--eb-danger)',
              }}>
                <span style={{
                  width: 6, height: 6, borderRadius: 3,
                  background: 'currentColor', display: 'inline-block',
                }} />
                {machine.status === 'online' ? 'Online' : 'Offline'}
              </span>
              {locOn && (
                <span style={{ fontSize: 11, color: 'var(--eb-muted)', fontFamily: 'IBM Plex Mono', fontWeight: 600 }}>
                  {formatDistance(machine.distance)}
                </span>
              )}
              <span style={{ fontSize: 11, color: 'var(--eb-muted)' }}>· {machine.hours}</span>
            </div>
          </div>
        </div>

        {/* Quick actions */}
        <div style={{ padding: '0 16px 12px', display: 'flex', gap: 8 }}>
          <button className="btn btn-ghost" style={{ flex: 1 }} onClick={openMaps}>
            <Icon name="pin" size={16} />
            Petunjuk arah
          </button>
          <button className="btn btn-primary" style={{ flex: 1.4 }} onClick={onOpenMachine}>
            <Icon name="package" size={16} />
            Lihat isi
          </button>
        </div>

        {/* Product strip — visible at peek too */}
        <div style={{ padding: '0 0 14px' }}>
          <div style={{ padding: '0 16px 8px', fontSize: 11, fontWeight: 600, color: 'var(--eb-muted)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
            Isi mesin · {products.length} produk
          </div>
          <div className="hscroll">
            {products.map(p => (
              <div key={p.id} className="popular-card" style={{ pointerEvents: 'none' }}>
                <ProductThumb product={p} />
                <div className="popular-card-body">
                  <div className="popular-card-name">{p.name}</div>
                  <div className="popular-card-meta">{p.unit}</div>
                  <span className="price popular-card-price">{fmtRp(p.price)}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {snap === 'full' && (
          <div style={{ padding: '6px 16px 24px' }}>
            <div className="card" style={{ padding: 12 }}>
              <div className="ktp-info-row">
                <span className="ktp-info-k">Alamat</span>
                <span className="ktp-info-v" style={{ fontSize: 12, textAlign: 'right' }}>{machine.address}</span>
              </div>
              <div className="ktp-info-row">
                <span className="ktp-info-k">Jam buka</span>
                <span className="ktp-info-v">{machine.hours}</span>
              </div>
              <div className="ktp-info-row">
                <span className="ktp-info-k">Total produk</span>
                <span className="ktp-info-v mono">{products.length}</span>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// ScreenMachineDetail — browse-only (no buy buttons)
// ─────────────────────────────────────────────────────────────
const ScreenMachineDetail = ({ machine, onBack, onScan }) => {
  if (!machine) return null;
  const products = PRODUCTS_FOR_MACHINE(machine.id);
  const inStock = products.filter(p => p.stock > 0).length;

  const openMaps = () => {
    const url = `https://www.google.com/maps/dir/?api=1&destination=${machine.lat},${machine.lng}`;
    window.open(url, '_blank');
  };

  return (
    <div className="app">
      <Topbar title={machine.name} sub={machine.area} onBack={onBack} />
      <div className="app-scroll">
        {/* Hero photo */}
        <div style={{ padding: '0 16px 14px' }}>
          <div className="machine-hero">
            <image-slot
              id={machine.photoSlot}
              shape="rounded"
              radius="16"
              placeholder={`Foto mesin di ${machine.name}`}
              style={{ width: '100%', height: '100%', display: 'block' }}
            ></image-slot>
            <div className="machine-hero-status">
              <span style={{
                width: 8, height: 8, borderRadius: 4,
                background: machine.status === 'online' ? 'var(--eb-success)' : 'var(--eb-danger)',
                boxShadow: `0 0 6px ${machine.status === 'online' ? 'var(--eb-success)' : 'var(--eb-danger)'}`,
              }} />
              {machine.status === 'online' ? 'Online' : 'Offline'}
            </div>
          </div>
        </div>

        {/* Address + directions */}
        <div style={{ padding: '0 16px 14px' }}>
          <button onClick={openMaps} className="card" style={{
            width: '100%', padding: 14,
            display: 'flex', alignItems: 'center', gap: 12, textAlign: 'left',
          }}>
            <div style={{
              width: 44, height: 44, borderRadius: 12,
              background: 'var(--eb-navy)', color: 'var(--eb-amber)',
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>
              <Icon name="pin" size={20} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--eb-ink)' }}>{machine.location}</div>
              <div style={{ fontSize: 11, color: 'var(--eb-muted)', marginTop: 2, lineHeight: 1.4 }}>{machine.address}</div>
              <div style={{ fontSize: 11, color: 'var(--eb-info)', fontWeight: 600, marginTop: 4 }}>
                Buka di Google Maps →
              </div>
            </div>
          </button>
        </div>

        {/* Meta strip */}
        <div style={{ padding: '0 16px 14px' }}>
          <div className="card" style={{ padding: 12, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0 }}>
            <MetaCell k="Jam buka" v={machine.hours} />
            <MetaCell k="Produk" v={`${products.length} item`} />
            <MetaCell k="Tersedia" v={`${inStock} item`} />
          </div>
        </div>

        {/* Product grid — view only */}
        <div className="section">
          <span className="section-title">Isi mesin</span>
          <span className="section-action" style={{ color: 'var(--eb-muted)', fontWeight: 500 }}>
            Update beberapa menit lalu
          </span>
        </div>
        <div style={{ padding: '0 16px', fontSize: 11, color: 'var(--eb-muted)', marginBottom: 10 }}>
          Untuk membeli, pindai QR di mesin saat kamu di lokasi.
        </div>
        <div className="product-grid">
          {products.map(p => (
            <div key={p.id} className="product-card" data-out={p.stock === 0} style={{ pointerEvents: 'none' }}>
              <ProductThumb product={p} />
              <div style={{ display: 'flex', flexDirection: 'column', gap: 3, minWidth: 0 }}>
                <div className="product-name">{p.name}</div>
                <div className="product-meta">{p.brand} · {p.unit}</div>
              </div>
              <div className="product-price-row">
                <span className="price">{fmtRp(p.price)}</span>
                <StockBadge stock={p.stock} />
              </div>
            </div>
          ))}
        </div>

        <div style={{ height: 100 }} />
      </div>

      <div className="bottom-bar">
        <button className="btn btn-primary btn-block" onClick={onScan}>
          <Icon name="qr" size={18} />
          Pindai QR di mesin
        </button>
        <div style={{ fontSize: 10, color: 'var(--eb-faint)', textAlign: 'center', marginTop: 6 }}>
          Belanja hanya bisa saat kamu di depan mesin
        </div>
      </div>
    </div>
  );
};

const MetaCell = ({ k, v }) => (
  <div style={{ padding: '4px 6px', borderRight: '1px solid var(--eb-line-soft)' }}>
    <div style={{ fontSize: 10, color: 'var(--eb-muted)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>{k}</div>
    <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--eb-ink)', marginTop: 2 }}>{v}</div>
  </div>
);

Object.assign(window, { ScreenMapFull, ScreenMachineDetail, MachineSheet, formatDistance });