/* global React */
// Compact app widgets that render INSIDE the flower/fruit.
// Smaller and more playful than v1 — booking, order, product micro-apps.

function MiniBooking({ industry, onDone }) {
  const [slot, setSlot] = useState(null);
  const [done, setDone] = useState(false);
  const slots = ["Tue 6p", "Wed 10a", "Thu 5:30p", "Fri 9a"];
  const title = {
    "Yoga studio": "Beginner flow · 45m",
    "Law firm":    "Free consult · 15m",
    "Consultant":  "Intro call · 30m",
    "Restaurant":  "Table for 2",
    "Dentist":     "Cleaning · 45m"
  }[industry] || "Book a time";
  return (
    <div>
      {!done ? (
        <>
          <div style={{ fontSize: 11, color: "var(--fg-3)", letterSpacing: "0.04em",
            textTransform: "uppercase", marginBottom: 8 }}>{title}</div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, marginBottom: 10 }}>
            {slots.map(s => {
              const sel = slot === s;
              return (
                <button key={s} onPointerDown={() => { setSlot(s); SFX.tap(); }}
                  style={{ padding: "8px 10px", borderRadius: 10, cursor: "pointer",
                    border: "1px solid " + (sel ? "var(--fg-1)" : "var(--border)"),
                    background: sel ? "var(--stone-950)" : "var(--bg)",
                    color: sel ? "#fff" : "var(--fg-1)",
                    fontSize: 12, fontWeight: 500, textAlign: "left",
                    transition: "all .2s" }}>{s}</button>
              );
            })}
          </div>
          <button disabled={!slot} onPointerDown={() => { if (slot) { setDone(true); SFX.chime(); onDone && onDone(); } }}
            style={{ width: "100%", padding: "10px", borderRadius: 9999, border: "none",
              background: slot ? "var(--stone-950)" : "var(--stone-200)",
              color: slot ? "#fff" : "var(--fg-4)",
              fontSize: 12, fontWeight: 500, cursor: slot ? "pointer" : "default",
              boxShadow: slot ? "inset 0 -4px 8px -2px rgba(200,200,200,0.4)" : "none" }}>
            Confirm
          </button>
        </>
      ) : (
        <div style={{ textAlign: "center", padding: "4px 0", animation: "bloom .4s var(--ease-spring) both" }}>
          <div style={{ display: "inline-flex", alignItems: "center", justifyContent: "center",
            width: 32, height: 32, borderRadius: "50%", background: "#dcfce7", color: "#15803d", marginBottom: 6 }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 13l4 4L19 7"/></svg>
          </div>
          <div style={{ fontSize: 12, fontWeight: 500 }}>Booked · {slot}</div>
        </div>
      )}
    </div>
  );
}

function MiniOrder({ industry, onDone }) {
  const menu = ({
    "Coffee shop": [{n:"Oat latte",p:5.5},{n:"Cortado",p:4.5}],
    "Bakery":      [{n:"Sourdough",p:9.0},{n:"Kouign-amann",p:5.5}]
  })[industry] || [{n:"Item",p:5}];
  const [qty, setQty] = useState(Object.fromEntries(menu.map(m => [m.n, 0])));
  const [done, setDone] = useState(false);
  const total = menu.reduce((s, m) => s + (qty[m.n] || 0) * m.p, 0);
  const count = Object.values(qty).reduce((s, v) => s + v, 0);
  const bump = (n, d) => { SFX.tap(); setQty(q => ({ ...q, [n]: Math.max(0, (q[n] || 0) + d) })); };
  return !done ? (
    <div>
      {menu.map(m => (
        <div key={m.n} style={{ display: "flex", alignItems: "center", gap: 6, padding: "6px 8px",
          borderRadius: 10, border: "1px solid var(--border)", background: "var(--bg)", marginBottom: 6 }}>
          <div style={{ flex: 1, fontSize: 12, fontWeight: 500 }}>{m.n}</div>
          <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--fg-3)" }}>${m.p.toFixed(2)}</div>
          <button onPointerDown={() => bump(m.n, -1)} style={{ width: 22, height: 22, borderRadius: "50%",
            border: "1px solid var(--border)", background: "var(--bg)", cursor: "pointer", fontSize: 12 }}>−</button>
          <div style={{ minWidth: 14, textAlign: "center", fontSize: 12, fontWeight: 500,
            fontFamily: "var(--font-mono)" }}>{qty[m.n] || 0}</div>
          <button onPointerDown={() => bump(m.n, 1)} style={{ width: 22, height: 22, borderRadius: "50%",
            border: "1px solid var(--fg-1)", background: "var(--stone-950)", color: "#fff", cursor: "pointer", fontSize: 12 }}>+</button>
        </div>
      ))}
      <button disabled={!count} onPointerDown={() => { if (count) { setDone(true); SFX.chime(); onDone && onDone(); } }}
        style={{ width: "100%", padding: "10px", borderRadius: 9999, border: "none",
          background: count ? "var(--stone-950)" : "var(--stone-200)",
          color: count ? "#fff" : "var(--fg-4)",
          fontSize: 12, fontWeight: 500, cursor: count ? "pointer" : "default",
          display: "flex", justifyContent: "space-between",
          boxShadow: count ? "inset 0 -4px 8px -2px rgba(200,200,200,0.4)" : "none" }}>
        <span>{count ? `Order · ready 8m` : "Add item"}</span>
        <span style={{ fontFamily: "var(--font-mono)" }}>${total.toFixed(2)}</span>
      </button>
    </div>
  ) : (
    <div style={{ textAlign: "center", padding: "4px 0", animation: "bloom .4s var(--ease-spring) both" }}>
      <div style={{ display: "inline-flex", alignItems: "center", justifyContent: "center",
        width: 32, height: 32, borderRadius: "50%", background: "#dcfce7", color: "#15803d", marginBottom: 6 }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 13l4 4L19 7"/></svg>
      </div>
      <div style={{ fontSize: 12, fontWeight: 500 }}>On the way</div>
    </div>
  );
}

function MiniProduct({ industry, onDone }) {
  const items = ({
    "Online store": [{n:"Merino crew",p:"$88",t:"New"},{n:"Linen tee",p:"$46",t:"Summer"}],
    "Creator":      [{n:"Vol. 04 zine",p:"$18",t:"New"},{n:"Enamel pin",p:"$12",t:"Ltd"}],
    "Real estate":  [{n:"2br · Castro",p:"$685k",t:"New"},{n:"1br · Mission",p:"$620k",t:"Price ↓"}]
  })[industry] || [{n:"Item A",p:"$24",t:"New"}];
  const [saved, setSaved] = useState(new Set());
  const toggle = (n) => {
    SFX.tap();
    setSaved(s => { const ns = new Set(s); ns.has(n) ? ns.delete(n) : ns.add(n); return ns; });
    if (onDone) setTimeout(onDone, 300);
  };
  return (
    <div>
      {items.map((it, i) => (
        <div key={it.n} style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 8px",
          borderRadius: 10, border: "1px solid var(--border)", background: "var(--bg)", marginBottom: 6 }}>
          <div style={{ width: 26, height: 26, borderRadius: 8,
            background: `linear-gradient(135deg, hsl(${i*70+20}, 40%, 88%), hsl(${i*70+40}, 40%, 78%))`,
            flexShrink: 0 }}/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12, fontWeight: 500, whiteSpace: "nowrap",
              overflow: "hidden", textOverflow: "ellipsis" }}>{it.n}</div>
            <div style={{ fontSize: 10, color: "var(--fg-3)", letterSpacing: "0.04em",
              textTransform: "uppercase" }}>{it.t}</div>
          </div>
          <div style={{ fontSize: 11, fontWeight: 500, fontFamily: "var(--font-mono)" }}>{it.p}</div>
          <button onPointerDown={() => toggle(it.n)} style={{ width: 24, height: 24, borderRadius: "50%",
            border: "1px solid var(--border)",
            background: saved.has(it.n) ? "var(--stone-950)" : "var(--bg)",
            color: saved.has(it.n) ? "#fff" : "var(--fg-2)",
            cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <svg width="10" height="10" viewBox="0 0 24 24"
              fill={saved.has(it.n) ? "currentColor" : "none"}
              stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>
            </svg>
          </button>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { MiniBooking, MiniOrder, MiniProduct });