/* eslint-disable */
/* Drawers, modals, autocomplete and compare/quick-view overlays.
   All read shop state from props (passed by App). */

const { useState: useState_d, useEffect: useEffect_d, useMemo: useMemo_d, useRef: useRef_d } = React;

// ============================================================
// Generic side drawer (right-docked locker)
// ============================================================
function SideDrawer({ open, onClose, title, side = "right", width = 460, eyebrow, accent = "var(--orange)", children, footer }) {
  useEffect_d(() => {
    if (!open) return;
    const onKey = (e) => e.key === "Escape" && onClose();
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  return (
    <>
      <div className={"drawer-scrim" + (open ? " open" : "")} onClick={onClose} />
      <aside className={"side-drawer side-" + side + (open ? " open" : "")} style={{ width }}>
        <div className="drawer-head" style={{ borderBottomColor: accent }}>
          <div>
            {eyebrow && <div className="drawer-eyebrow" style={{ color: accent }}>{eyebrow}</div>}
            <h3 className="drawer-title">{title}</h3>
          </div>
          <button className="drawer-close" onClick={onClose} aria-label="Close">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M4 4l10 10M14 4L4 14"/></svg>
          </button>
        </div>
        <div className="drawer-body">{children}</div>
        {footer && <div className="drawer-foot">{footer}</div>}
      </aside>
    </>
  );
}

// ============================================================
// Cart drawer
// ============================================================
function CartDrawer({ shop, open, onClose, navigate }) {
  const subtotal = shop.cartSubtotal;
  const delivery = subtotal >= 75 || subtotal === 0 ? 0 : 4.99;
  const total = subtotal + delivery;
  const isEmpty = shop.cartItems.length === 0;

  return (
    <SideDrawer
      open={open}
      onClose={onClose}
      eyebrow="Your toolbox"
      title="Workshop cart"
      footer={!isEmpty && (
        <>
          <div className="cart-totals">
            <div className="cart-line"><span>Subtotal</span><span>£{subtotal.toFixed(2)}</span></div>
            <div className="cart-line"><span>Delivery</span><span>{delivery === 0 ? "FREE" : `£${delivery.toFixed(2)}`}</span></div>
            <div className="cart-line total"><span>Total inc. VAT</span><span>£{total.toFixed(2)}</span></div>
          </div>
          {subtotal < 75 && (
            <div className="free-bar">
              <div className="free-track"><div className="free-fill" style={{ width: `${Math.min(100, (subtotal/75)*100)}%` }} /></div>
              <div className="free-text">Spend £{(75 - subtotal).toFixed(2)} more for <strong>free delivery</strong></div>
            </div>
          )}
          <button className="btn btn-orange btn-block btn-lg" onClick={() => { onClose(); alert("Checkout flow would start here."); }}>
            Checkout · £{total.toFixed(2)}
          </button>
          <button className="action-link" style={{ width: "100%", marginTop: 8 }} onClick={shop.clearCart}>Clear cart</button>
        </>
      )}
    >
      {isEmpty ? (
        <div className="drawer-empty">
          <div className="empty-glyph"><window.Icons.Cart style={{ width: 32, height: 32 }} /></div>
          <h4>Empty workbench</h4>
          <p>Nothing in your cart yet. Add a part from the catalogue.</p>
          <button className="btn btn-orange" onClick={() => { onClose(); navigate({ name: "catalog" }); }}>Browse catalogue</button>
        </div>
      ) : (
        <div className="cart-list">
          {shop.cartItems.map(({ id, qty, part }) => {
            const brand = window.PartBrands[id] || "OEM";
            return (
              <div className="cart-row" key={id}>
                <div className="cart-thumb" onClick={() => { onClose(); navigate({ name: "detail", id }); }}>
                  <window.ThumbViewer part={part} />
                </div>
                <div className="cart-info">
                  <div className="cart-cat">{part.category} · {brand}</div>
                  <div className="cart-name" onClick={() => { onClose(); navigate({ name: "detail", id }); }}>{part.name}</div>
                  <div className="cart-sku">{part.sku}</div>
                  <div className="cart-row-bottom">
                    <div className="qty qty-sm">
                      <button onClick={() => shop.setCartQty(id, qty - 1)}>−</button>
                      <input value={qty} readOnly />
                      <button onClick={() => shop.setCartQty(id, qty + 1)}>+</button>
                    </div>
                    <div className="cart-price">£{(part.price * qty).toFixed(2)}</div>
                  </div>
                </div>
                <button className="cart-x" onClick={() => shop.removeFromCart(id)} aria-label="Remove">
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M3 3l8 8M11 3L3 11"/></svg>
                </button>
              </div>
            );
          })}
        </div>
      )}
    </SideDrawer>
  );
}

// ============================================================
// Garage drawer — saved vehicles
// ============================================================
function GarageDrawer({ shop, open, onClose, navigate }) {
  const [tab, setTab] = useState_d("reg");
  const [reg, setReg] = useState_d("");
  const [make, setMake] = useState_d("");
  const [model, setModel] = useState_d("");
  const [year, setYear] = useState_d("");

  const makes = ["Audi", "BMW", "Ford", "Mercedes-Benz", "Skoda", "Toyota", "Vauxhall", "Volkswagen"];
  const years = Array.from({ length: 20 }, (_, i) => 2026 - i);

  const addThis = () => {
    if (tab === "reg" && reg.trim()) {
      shop.addVehicle({ kind: "reg", value: reg.toUpperCase(), display: reg.toUpperCase() });
      setReg("");
    } else if (make && model && year) {
      shop.addVehicle({ kind: "mmy", make, model, year, display: `${year} ${make} ${model}` });
      setMake(""); setModel(""); setYear("");
    }
  };

  return (
    <SideDrawer open={open} onClose={onClose} eyebrow="My garage" title="Saved vehicles" accent="var(--yellow)" width={460}>
      <div className="garage-add">
        <div className="vehicle-tabs" style={{ marginBottom: 12 }}>
          <button className={"vehicle-tab" + (tab === "reg" ? " on" : "")} onClick={() => setTab("reg")}>UK Reg</button>
          <button className={"vehicle-tab" + (tab === "mmy" ? " on" : "")} onClick={() => setTab("mmy")}>Make &amp; Model</button>
        </div>
        {tab === "reg" ? (
          <div className="field-row full">
            <div className="field">
              <label>Registration plate</label>
              <input type="text" placeholder="AB12 CDE" value={reg} onChange={e => setReg(e.target.value)} style={{ textTransform: "uppercase", fontFamily: "var(--mono)", fontWeight: 600, letterSpacing: "0.06em" }} />
            </div>
          </div>
        ) : (
          <>
            <div className="field-row">
              <div className="field">
                <label>Make</label>
                <select value={make} onChange={e => setMake(e.target.value)}>
                  <option value="">Select…</option>
                  {makes.map(m => <option key={m}>{m}</option>)}
                </select>
              </div>
              <div className="field">
                <label>Model</label>
                <input type="text" placeholder="e.g. 3 Series" value={model} onChange={e => setModel(e.target.value)} />
              </div>
            </div>
            <div className="field-row full">
              <div className="field">
                <label>Year</label>
                <select value={year} onChange={e => setYear(e.target.value)}>
                  <option value="">Select…</option>
                  {years.map(y => <option key={y}>{y}</option>)}
                </select>
              </div>
            </div>
          </>
        )}
        <button className="btn btn-orange btn-block" onClick={addThis} style={{ marginTop: 8 }}>
          <window.Icons.Plus /> Add to garage
        </button>
      </div>

      <div className="garage-divider">
        <span>{shop.garage.length === 0 ? "No vehicles saved" : `${shop.garage.length} in garage`}</span>
      </div>

      <div className="garage-list">
        {shop.garage.map(v => {
          const active = shop.activeVehicle && shop.activeVehicle.id === v.id;
          return (
            <div key={v.id} className={"garage-card" + (active ? " active" : "")}>
              <div className="garage-icon">
                <window.Icons.Wheels style={{ width: 22, height: 22 }} />
              </div>
              <div className="garage-info">
                <div className="garage-name">{v.display}</div>
                <div className="garage-meta">{v.kind === "reg" ? "UK Registration" : `${v.make} · ${v.model}`}</div>
              </div>
              <div className="garage-actions">
                {!active && <button className="g-btn primary" onClick={() => shop.setActiveVehicle(v.id)}>Select</button>}
                {active && <span className="g-badge">Active</span>}
                <button className="g-btn ghost" onClick={() => shop.removeVehicle(v.id)} title="Remove">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M3 3l6 6M9 3l-6 6"/></svg>
                </button>
              </div>
            </div>
          );
        })}
      </div>

      {shop.activeVehicle && (
        <div className="service-card">
          <div className="service-head">
            <span className="eyebrow eyebrow-steel">Service schedule</span>
            <strong>Due soon · {shop.activeVehicle.display}</strong>
          </div>
          <ul className="service-list">
            <li><span className="s-dot due" /> <span>Oil &amp; oil filter</span><span className="s-mileage">Due in ~1,200 mi</span></li>
            <li><span className="s-dot ok" /> <span>Brake pads (front)</span><span className="s-mileage">8,400 mi</span></li>
            <li><span className="s-dot warn" /> <span>Cabin filter</span><span className="s-mileage">Overdue · 600 mi</span></li>
            <li><span className="s-dot ok" /> <span>Spark plugs</span><span className="s-mileage">22,000 mi</span></li>
          </ul>
          <button className="btn btn-ghost btn-block btn-sm" onClick={() => { onClose(); navigate({ name: "catalog" }); }}>
            Shop for this vehicle
          </button>
        </div>
      )}
    </SideDrawer>
  );
}

// ============================================================
// Compare bar (bottom dock) + Compare modal
// ============================================================
function CompareBar({ shop, onOpen }) {
  useEffect_d(() => {
    if (shop.compareItems.length > 0) document.body.classList.add("has-compare");
    else document.body.classList.remove("has-compare");
    return () => document.body.classList.remove("has-compare");
  }, [shop.compareItems.length]);
  if (shop.compareItems.length === 0) return null;
  return (
    <div className="compare-bar">
      <div className="shell compare-bar-inner">
        <div className="cb-label">
          <window.Icons.Grid style={{ width: 16, height: 16 }} />
          <strong>Compare</strong>
          <span>({shop.compareItems.length}/3)</span>
        </div>
        <div className="cb-slots">
          {[0, 1, 2].map(i => {
            const p = shop.compareItems[i];
            return p ? (
              <div key={i} className="cb-slot filled">
                <div className="cb-mini"><window.ThumbViewer part={p} /></div>
                <div className="cb-name">{p.name}</div>
                <button className="cb-x" onClick={() => shop.toggleCompare(p.id)}>×</button>
              </div>
            ) : (
              <div key={i} className="cb-slot empty">
                <span>Slot {i + 1}</span>
              </div>
            );
          })}
        </div>
        <div className="cb-actions">
          <button className="action-link" onClick={shop.clearCompare}>Clear</button>
          <button className="btn btn-orange btn-sm" disabled={shop.compareItems.length < 2} onClick={onOpen}>
            Compare {shop.compareItems.length} parts
          </button>
        </div>
      </div>
    </div>
  );
}

function CompareModal({ shop, open, onClose, navigate }) {
  if (!open) return null;
  const items = shop.compareItems;
  // Build merged spec keys
  const keys = Array.from(new Set(items.flatMap(p => p.specs.map(([k]) => k))));

  return (
    <div className="modal-scrim open" onClick={onClose}>
      <div className="modal-shell compare-modal" onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <div className="drawer-eyebrow">Cross-reference</div>
            <h3 className="drawer-title">Side-by-side · {items.length} parts</h3>
          </div>
          <button className="drawer-close" onClick={onClose}>
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M4 4l10 10M14 4L4 14"/></svg>
          </button>
        </div>
        <div className="compare-grid" style={{ gridTemplateColumns: `200px repeat(${items.length}, 1fr)` }}>
          {/* Header row: blank + each part stage */}
          <div className="cmp-cell cmp-th"></div>
          {items.map(p => (
            <div key={p.id} className="cmp-cell cmp-card-cell">
              <div className="cmp-stage"><window.ThumbViewer part={p} /></div>
              <div className="cmp-name">{p.name}</div>
              <div className="cmp-sub">{p.subtitle}</div>
              <div className="cmp-price">£{p.price}</div>
              <div className="cmp-actions">
                <button className="btn btn-orange btn-sm" onClick={() => shop.addToCart(p.id, 1)}><window.Icons.Cart style={{width:14, height:14}} /> Add</button>
                <button className="action-link" onClick={() => { onClose(); navigate({ name: "detail", id: p.id }); }}>View →</button>
              </div>
            </div>
          ))}

          {/* Static rows */}
          <div className="cmp-cell cmp-th">Brand</div>
          {items.map(p => <div key={p.id} className="cmp-cell">{window.PartBrands[p.id] || "OEM"}</div>)}

          <div className="cmp-cell cmp-th">SKU</div>
          {items.map(p => <div key={p.id} className="cmp-cell mono">{p.sku}</div>)}

          <div className="cmp-cell cmp-th">Rating</div>
          {items.map(p => <div key={p.id} className="cmp-cell"><span style={{color:"var(--orange)"}}>★</span> {p.rating} <span style={{color:"var(--muted)", fontSize:12}}>({p.reviews})</span></div>)}

          <div className="cmp-cell cmp-th">Difficulty</div>
          {items.map(p => <div key={p.id} className="cmp-cell">{p.difficulty}</div>)}

          <div className="cmp-cell cmp-th">Install time</div>
          {items.map(p => <div key={p.id} className="cmp-cell">{p.minutes} min</div>)}

          {/* Dynamic spec keys */}
          {keys.map(k => (
            <React.Fragment key={k}>
              <div className="cmp-cell cmp-th">{k}</div>
              {items.map(p => {
                const row = p.specs.find(([kk]) => kk === k);
                return <div key={p.id} className="cmp-cell">{row ? row[1] : <span style={{color:"var(--muted)"}}>—</span>}</div>;
              })}
            </React.Fragment>
          ))}
        </div>
      </div>
    </div>
  );
}

// ============================================================
// Quick view modal
// ============================================================
function QuickView({ shop, partId, open, onClose, navigate }) {
  if (!open || !partId) return null;
  const part = (window.PARTS_DATA || []).find(p => p.id === partId);
  if (!part) return null;
  const brand = window.PartBrands[partId] || "OEM";
  const [qty, setQty] = useState_d(1);
  const inCart = shop.cart.some(c => c.id === partId);

  return (
    <div className="modal-scrim open" onClick={onClose}>
      <div className="modal-shell qv-modal" onClick={e => e.stopPropagation()}>
        <button className="qv-close" onClick={onClose}>
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M4 4l10 10M14 4L4 14"/></svg>
        </button>
        <div className="qv-grid">
          <div className="qv-stage">
            <window.ThumbViewer part={part} />
            <div className="viewer-tag"><span className="live-dot"/> 3D · LIVE</div>
          </div>
          <div className="qv-info">
            <div className="info-head">
              <span className="info-cat">{part.category}</span>
              <span className="info-sku">SKU · {part.sku}</span>
              <span className="badge badge-steel">{brand}</span>
            </div>
            <h2 className="qv-title">{part.name}</h2>
            <div className="info-subtitle">{part.subtitle}</div>
            <div className="info-rating">
              <span className="stars">★★★★★</span>
              <span>{part.rating} · {part.reviews.toLocaleString()} reviews</span>
            </div>
            <p style={{ fontSize: 14, color: "var(--ink-2)", margin: "14px 0" }}>{part.blurb}</p>
            <ul style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "6px 16px", paddingLeft: 0, listStyle: "none", fontSize: 13, marginBottom: 16 }}>
              {part.specs.slice(0, 6).map(([k, v], i) => (
                <li key={i} style={{ display: "flex", gap: 8 }}>
                  <window.Icons.Check style={{ color: "var(--orange)", flexShrink: 0, marginTop: 3 }} />
                  <span><strong style={{ fontFamily: "var(--display)", textTransform: "uppercase", letterSpacing: "0.04em", fontSize: 12 }}>{k}:</strong> {v}</span>
                </li>
              ))}
            </ul>
            <div className="qv-price-row">
              <div className="price-row" style={{ flex: 1 }}>
                <span className="cur" style={{ color: "var(--muted)" }}>£</span>
                <span className="num" style={{ fontSize: 44, color: "var(--carbon)" }}>{part.price}</span>
                <div className="vat" style={{ color: "var(--muted)", fontSize: 11 }}>
                  <strong style={{ color: "var(--green)", display: "block", fontFamily: "var(--display)", fontSize: 12, letterSpacing: "0.08em" }}>IN STOCK</strong>
                  inc. VAT · ships 24h
                </div>
              </div>
            </div>
            <div className="qty-row">
              <div className="qty">
                <button onClick={() => setQty(Math.max(1, qty - 1))}>−</button>
                <input value={qty} onChange={e => setQty(Math.max(1, parseInt(e.target.value) || 1))} />
                <button onClick={() => setQty(qty + 1)}>+</button>
              </div>
              <button className="btn btn-orange" style={{ flex: 1 }} onClick={() => { shop.addToCart(partId, qty); onClose(); }}>
                <window.Icons.Cart style={{ width: 16, height: 16 }} />
                {inCart ? "Add another" : "Add to cart"} · £{(part.price * qty).toFixed(0)}
              </button>
            </div>
            <button className="action-link" style={{ width: "100%", marginTop: 8 }} onClick={() => { onClose(); navigate({ name: "detail", id: partId }); }}>
              See full part page →
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// Search autocomplete (used inside topbar)
// ============================================================
function SearchAutocomplete({ query, onPick, onClose, navigate }) {
  const q = query.trim().toLowerCase();
  if (!q) return null;
  const parts = window.PARTS_DATA || [];
  const matches = parts.filter(p =>
    p.name.toLowerCase().includes(q) ||
    p.sku.toLowerCase().includes(q) ||
    p.category.toLowerCase().includes(q) ||
    (window.PartBrands[p.id] || "").toLowerCase().includes(q)
  ).slice(0, 6);

  // Build category & brand chips
  const cats = Array.from(new Set(parts.map(p => p.category))).filter(c => c.toLowerCase().includes(q)).slice(0, 4);
  const brands = Array.from(new Set(Object.values(window.PartBrands || {}))).filter(b => b.toLowerCase().includes(q)).slice(0, 4);

  if (matches.length === 0 && cats.length === 0 && brands.length === 0) {
    return (
      <div className="autocomplete">
        <div className="ac-empty">
          <strong>No matches for "{query}"</strong>
          <span>Try a part name, SKU or brand</span>
        </div>
      </div>
    );
  }

  return (
    <div className="autocomplete" onMouseDown={e => e.preventDefault()}>
      {(cats.length > 0 || brands.length > 0) && (
        <div className="ac-section">
          <div className="ac-label">Quick filters</div>
          <div className="ac-chips">
            {cats.map(c => (
              <button key={c} className="ac-chip" onClick={() => { navigate({ name: "catalog", filter: c }); onClose(); }}>
                In {c}
              </button>
            ))}
            {brands.map(b => (
              <button key={b} className="ac-chip steel" onClick={() => { navigate({ name: "catalog" }); onClose(); }}>
                {b}
              </button>
            ))}
          </div>
        </div>
      )}
      {matches.length > 0 && (
        <div className="ac-section">
          <div className="ac-label">Parts ({matches.length})</div>
          {matches.map(p => (
            <div key={p.id} className="ac-row" onClick={() => { navigate({ name: "detail", id: p.id }); onClose(); }}>
              <div className="ac-thumb"><window.ThumbViewer part={p} /></div>
              <div className="ac-info">
                <div className="ac-name">{p.name}</div>
                <div className="ac-meta">{p.category} · {window.PartBrands[p.id] || "OEM"} · {p.sku}</div>
              </div>
              <div className="ac-price">£{p.price}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

window.SideDrawer = SideDrawer;
window.CartDrawer = CartDrawer;
window.GarageDrawer = GarageDrawer;
window.CompareBar = CompareBar;
window.CompareModal = CompareModal;
window.QuickView = QuickView;
window.SearchAutocomplete = SearchAutocomplete;