// editor.jsx — customizer workspace: tab rail + phone + large docked panel + checkout
// exposes: EditorView

function TabRail({ tabs, active, onSelect }) {
  return (
    <div className="col" style={{ gap: 12, flexShrink: 0, width: 104 }}>
      {tabs.map((t) => {
        const on = t.id === active;
        return (
          <button key={t.id} onClick={() => onSelect(t.id)} style={{
            display: "flex", flexDirection: "column", alignItems: "center", gap: 7, cursor: "pointer",
            padding: "16px 6px", borderRadius: 20, width: "100%",
            background: on ? "var(--glass-bg-strong)" : "rgba(255,255,255,0.03)",
            border: on ? "1px solid var(--glass-border-strong)" : "1px solid var(--glass-border)",
            transition: "background 0.25s ease, border-color 0.25s ease, transform 0.2s ease",
            transform: on ? "translateX(2px)" : "none",
            position: "relative",
          }}
            onMouseEnter={(e) => { if (!on) e.currentTarget.style.background = "rgba(255,255,255,0.07)"; }}
            onMouseLeave={(e) => { if (!on) e.currentTarget.style.background = "rgba(255,255,255,0.03)"; }}>
            <div style={{
              width: 46, height: 46, borderRadius: 14, display: "flex", alignItems: "center", justifyContent: "center",
              background: on ? "var(--grad-neon)" : "var(--glass-bg)", transition: "background 0.25s ease",
              boxShadow: on ? "0 8px 20px -6px rgba(255,61,240,0.5)" : "none",
            }}>
              <Icon name={t.icon} size={23} stroke="#fff" />
            </div>
            <span style={{ fontSize: 11.5, fontWeight: on ? 700 : 500, color: on ? "#fff" : "var(--ink-70)", textAlign: "center", lineHeight: 1.1 }}>{t.label}</span>
          </button>
        );
      })}
    </div>
  );
}

function EditorView({ model, design, setDesign, onBack, onAddToCart, onShare, livePrice }) {
  const [tab, setTab] = React.useState("design");
  const [selectedLayer, setSelectedLayer] = React.useState(null);

  const tabs = [
    { id: "design", icon: "palette", label: "Diseño" },
    { id: "image", icon: "image", label: "Imágenes" },
    { id: "text", icon: "text", label: "Texto" },
    { id: "sticker", icon: "spark", label: "Stickers" },
    { id: "accessory", icon: "accessory", label: "Accesorios" },
  ];

  const updateLayer = (layer, idx, patch) => setDesign((d) => {
    const arr = [...(d[layer] || [])];
    arr[idx] = { ...arr[idx], ...patch };
    return { ...d, [layer]: arr };
  });

  const layerCount = (design.texts?.length || 0) + (design.images?.length || 0) + (design.stickers?.length || 0);

  return (
    <div style={{ paddingTop: 120, paddingBottom: 56, minHeight: "100vh", position: "relative" }}>
      {/* top strip */}
      <div className="page row" style={{ justifyContent: "space-between", marginBottom: 14, gap: 16 }}>
        <button className="btn btn-ghost" onClick={onBack} style={{ padding: "11px 18px", fontSize: 14 }}>
          <Icon name="back" size={17} /> Cambiar modelo
        </button>
        <div className="col" style={{ alignItems: "center", textAlign: "center" }}>
          <span className="eyebrow" style={{ fontSize: 10, whiteSpace: "nowrap" }}>Personalizando</span>
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, whiteSpace: "nowrap" }}>{model.name}</span>
        </div>
        <div className="col" style={{ alignItems: "flex-end" }}>
          <span className="eyebrow" style={{ fontSize: 9, letterSpacing: "0.18em", whiteSpace: "nowrap" }}>Precio actual</span>
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 24 }} className="grad-text">{fmt(livePrice)}</span>
        </div>
      </div>

      {/* workspace */}
      <div className="page" style={{ display: "flex", alignItems: "stretch", gap: 22, marginTop: 8 }}>
        <TabRail tabs={tabs} active={tab} onSelect={setTab} />

        {/* phone stage */}
        <div className="col" style={{ flex: 1, alignItems: "center", justifyContent: "flex-start", minWidth: 240, paddingTop: 6 }}>
          <div style={{ position: "relative", animation: "floaty 6s ease-in-out infinite" }}>
            <div style={{ position: "absolute", inset: -50, background: "radial-gradient(circle, rgba(139,92,255,0.32), transparent 70%)", filter: "blur(22px)", zIndex: -1 }}/>
            <PhoneCase model={model} design={design} scale={0.82} editable={true} onUpdate={updateLayer} selectedLayer={selectedLayer} onSelectLayer={setSelectedLayer} />
          </div>
          <p style={{ textAlign: "center", color: layerCount ? "var(--ink-50)" : "transparent", fontSize: 13, marginTop: 18, maxWidth: 260, height: 18 }}>
            <Icon name="drag" size={14} style={{ verticalAlign: "-2px" }} /> Arrastra para reacomodar
          </p>
        </div>

        {/* docked panel */}
        <div style={{ width: 432, flexShrink: 0, height: 624 }}>
          {tab === "design" && <DesignPanel design={design} setDesign={setDesign} />}
          {tab === "image" && <ImagePanel design={design} setDesign={setDesign} selectedLayer={selectedLayer} />}
          {tab === "text" && <TextPanel design={design} setDesign={setDesign} selectedLayer={selectedLayer} />}
          {tab === "sticker" && <StickerPanel design={design} setDesign={setDesign} selectedLayer={selectedLayer} />}
          {tab === "accessory" && <AccessoryPanel design={design} setDesign={setDesign} />}
        </div>
      </div>

      {/* checkout bar */}
      <div className="page" style={{ marginTop: 28 }}>
        <div className="glass-strong" style={{ borderRadius: 22, padding: "16px 20px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
          <div className="row" style={{ gap: 16 }}>
            <div className="col">
              <span style={{ fontSize: 12, color: "var(--ink-50)" }}>Total carcasa</span>
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22 }}>{fmt(livePrice)}</span>
            </div>
            {(design.accessories?.length > 0) && (
              <span style={{ fontSize: 12.5, color: "var(--ink-70)", maxWidth: 200 }}>
                + {design.accessories.length} accesorio{design.accessories.length > 1 ? "s" : ""}
              </span>
            )}
          </div>
          <div className="row" style={{ gap: 12 }}>
            <button className="btn btn-ghost" onClick={onShare} style={{ padding: "13px 20px" }}>
              <Icon name="share" size={18} /> Compartir
            </button>
            <button className="btn btn-neon" onClick={onAddToCart} style={{ padding: "14px 26px", fontSize: 15.5 }}>
              <Icon name="cart" size={19} /> Agregar al carro
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { EditorView });