const StoreDrawer = ({ store, onClose }) => {
  const isMobile = useIsMobile();
  // Close on Escape key
  React.useEffect(() => {
    if (!store) return;
    const onKey = (e) => { if (e.key === "Escape") onClose?.(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [store, onClose]);
  if (!store) return null;
  // Mobile: bottom sheet (full width, slides up). Desktop: right-side rail (420px, slides in).
  const asideStyle = isMobile ? {
    position: "fixed", left: 0, right: 0, bottom: 0,
    maxHeight: "85vh", width: "100%",
    background: "#fff", borderTop: "1px solid var(--border-1)",
    borderTopLeftRadius: 16, borderTopRightRadius: 16,
    boxShadow: "0 -16px 32px rgba(0,0,0,0.18)", zIndex: 1001,
    display: "flex", flexDirection: "column",
    animation: "sdrawer-up 240ms var(--ease-out)",
    overflow: "auto",
  } : {
    position: "fixed", top: 0, right: 0, bottom: 0, width: 420,
    background: "#fff", borderLeft: "1px solid var(--border-1)",
    boxShadow: "var(--shadow-pop)", zIndex: 1001,
    display: "flex", flexDirection: "column",
    animation: "slideIn 240ms var(--ease-out)",
    overflow: "auto",
  };
  return (
    <>
      <div onClick={onClose} style={{
        position: "fixed", inset: 0, background: "rgba(28,25,23,0.32)", zIndex: 1000,
        animation: "fadeIn 200ms var(--ease-out)",
      }}/>
      <aside style={asideStyle}>
        {isMobile && (
          /* drag handle for visual affordance */
          <div style={{ display: "flex", justifyContent: "center", padding: "8px 0 4px" }}>
            <div style={{ width: 40, height: 4, borderRadius: 999, background: "var(--ink-200)" }}/>
          </div>
        )}
        <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--border-1)", display: "flex", alignItems: "flex-start", gap: 12 }}>
          <img src="../../assets/pin-pokemon.svg" width="32" alt=""/>
          <div style={{ flex: 1 }}>
            <div style={{ font: "600 16px var(--font-body)", color: "var(--fg-1)", letterSpacing: "-0.005em" }}>{store.name_zh}</div>
            <div className="jp-sub" style={{ fontSize: 12, marginTop: 2 }}>{store.name_ja}</div>
          </div>
          <button type="button" onClick={onClose} aria-label="關閉"
            style={{ width: 36, height: 36, border: "1px solid var(--border-1)", borderRadius: 8, background: "#fff", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}
            onMouseEnter={e => { e.currentTarget.style.background = "var(--ink-50)"; e.currentTarget.style.borderColor = "var(--ink-300)"; }}
            onMouseLeave={e => { e.currentTarget.style.background = "#fff"; e.currentTarget.style.borderColor = "var(--border-1)"; }}>
            <Icon name="x" size={16} color="var(--fg-1)" />
          </button>
        </div>

        <div style={{ padding: "14px 20px", borderBottom: "1px solid var(--border-1)", display: "flex", flexDirection: "column", gap: 10 }}>
          <Row label="地址" jp="Address" value={store.address_zh} sub={store.address_ja} />
          <Row label="最近車站" jp="Nearest" value={store.nearest_station} />
          <Row label="營業時間" jp="Hours" value={store.opening_hours} />
        </div>

        <div style={{ padding: "14px 20px", borderBottom: "1px solid var(--border-1)" }}>
          <div style={{ fontSize: 12, color: "var(--fg-2)", lineHeight: 1.6 }}>{store.profile_zh}</div>
        </div>

        <div style={{ padding: "14px 20px", flex: 1, overflow: "auto" }}>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 10 }}>
            <span style={{ fontSize: 11, fontWeight: 600, color: "var(--fg-1)", textTransform: "uppercase", letterSpacing: "0.05em" }}>此店進行中抽選</span>
            <span className="jp-sub" style={{ fontSize: 10.5 }}>Ongoing at this store</span>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {(store.ongoing || []).map((o, i) => (
              <div key={i} style={{ padding: "10px 12px", border: "1px solid var(--border-1)", borderRadius: 8, display: "flex", flexDirection: "column", gap: 4 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                  <span style={{ font: "600 13px var(--font-body)", color: "var(--fg-1)" }}>{o.zh}</span>
                  <Chip tone={o.type === "lottery" ? "blue" : o.type === "preorder" ? "green" : "amber"}>{o.typeLabel}</Chip>
                </div>
                <span className="jp-sub" style={{ fontSize: 11 }}>{o.jp}</span>
                <div style={{ display: "flex", gap: 8, marginTop: 4, font: "var(--ts-mono)", fontSize: 11, color: "var(--fg-3)" }}>
                  <span>{o.window}</span>
                  <span style={{ marginLeft: "auto", color: "var(--red-600)", fontWeight: 600 }}>{o.countdown}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ padding: "12px 20px", borderTop: "1px solid var(--border-1)", display: "flex", gap: 8 }}>
          <Button variant="primary" icon="external" style={{ flex: 1, justifyContent: "center" }}>前往官方頁面</Button>
          <Button variant="secondary" icon="map-pin">地圖導航</Button>
        </div>
      </aside>
      <style>{`
        @keyframes fadeIn { from{opacity:0} to{opacity:1} }
        @keyframes slideIn { from{transform:translateX(40px);opacity:0} to{transform:translateX(0);opacity:1} }
        @keyframes sdrawer-up { from{transform:translateY(100%)} to{transform:none} }
      `}</style>
    </>
  );
};

const Row = ({ label, jp, value, sub }) => (
  <div style={{ display: "grid", gridTemplateColumns: "84px 1fr", gap: 10, alignItems: "baseline" }}>
    <div style={{ display: "flex", flexDirection: "column" }}>
      <span style={{ fontSize: 11.5, color: "var(--fg-3)", fontWeight: 500 }}>{label}</span>
      <span className="jp-sub" style={{ fontSize: 10 }}>{jp}</span>
    </div>
    <div>
      <div style={{ fontSize: 13, color: "var(--fg-1)" }}>{value}</div>
      {sub && <div className="jp-sub" style={{ fontSize: 11, marginTop: 2 }}>{sub}</div>}
    </div>
  </div>
);

window.StoreDrawer = StoreDrawer;