// layer-editor.jsx — overlay layer system for 日本麻雀連合
//
// Layer shape:
// {
//   id: "l_xxx",
//   type: "text" | "rect",
//   text: "Hello",
//   x, y, w, h,
//   fontSize, color, bg, align,
//   borderColor, borderWidth, borderStyle, radius
// }

function uid() { return "l_" + Math.random().toString(36).slice(2, 8); }

function LayerToolbar({ layer, onChange, onDelete, onClose }) {
  const set = (k, v) => onChange({ ...layer, [k]: v });
  const Btn = ({ active, onClick, children, title }) => (
    <button onClick={onClick} title={title} style={{
      width: 30, height: 28, border: 0, borderRadius: 4, cursor: "pointer",
      background: active ? "#1a1a1a" : "transparent", color: active ? "#fff" : "#1a1a1a",
      fontSize: 12, display: "inline-grid", placeItems: "center"
    }}>{children}</button>
  );
  return (
    <div style={{
      position: "absolute", left: layer.x, top: layer.y - 42, zIndex: 10001,
      background: "rgba(255,255,255,.96)", backdropFilter: "blur(10px)",
      border: "1px solid rgba(0,0,0,.1)", borderRadius: 8,
      boxShadow: "0 8px 24px rgba(0,0,0,.12)",
      padding: 4, display: "flex", alignItems: "center", gap: 2,
      fontFamily: "system-ui,sans-serif", whiteSpace: "nowrap"
    }} onMouseDown={e => e.stopPropagation()}>
      {layer.type === "text" && (
        <>
          <Btn active={layer.align === "left"} onClick={() => set("align", "left")} title="左寄せ">⇤</Btn>
          <Btn active={layer.align === "center"} onClick={() => set("align", "center")} title="中央寄せ">⇔</Btn>
          <Btn active={layer.align === "right"} onClick={() => set("align", "right")} title="右寄せ">⇥</Btn>
          <span style={{ width: 1, height: 18, background: "#e0e0e0", margin: "0 2px" }} />
          <label style={{ display: "inline-flex", alignItems: "center", gap: 4, padding: "0 4px", fontSize: 11, color: "#666" }}>
            <span>A</span>
            <input type="number" min="8" max="120" value={layer.fontSize} onChange={e => set("fontSize", +e.target.value)}
              style={{ width: 44, padding: 2, border: "1px solid #ddd", borderRadius: 3, fontSize: 11 }} />
          </label>
          <label style={{ display: "inline-flex", alignItems: "center", gap: 2 }} title="文字色">
            <span style={{ fontSize: 11, color: "#666" }}>色</span>
            <input type="color" value={layer.color} onChange={e => set("color", e.target.value)}
              style={{ width: 22, height: 22, padding: 0, border: 0, background: "transparent", cursor: "pointer" }} />
          </label>
        </>
      )}
      <label style={{ display: "inline-flex", alignItems: "center", gap: 2 }} title="背景">
        <span style={{ fontSize: 11, color: "#666" }}>背</span>
        <input type="color" value={layer.bg === "transparent" ? "#ffffff" : layer.bg}
          onChange={e => set("bg", e.target.value)}
          style={{ width: 22, height: 22, padding: 0, border: 0, background: "transparent", cursor: "pointer" }} />
        <button onClick={() => set("bg", "transparent")} title="透明" style={{
          width: 18, height: 18, border: "1px solid #ddd", borderRadius: 3, background: "#fff",
          fontSize: 9, cursor: "pointer", padding: 0
        }}>×</button>
      </label>
      <span style={{ width: 1, height: 18, background: "#e0e0e0", margin: "0 2px" }} />
      <label style={{ display: "inline-flex", alignItems: "center", gap: 2 }} title="枠線色">
        <span style={{ fontSize: 11, color: "#666" }}>枠</span>
        <input type="color" value={layer.borderColor} onChange={e => set("borderColor", e.target.value)}
          style={{ width: 22, height: 22, padding: 0, border: 0, background: "transparent", cursor: "pointer" }} />
        <input type="number" min="0" max="20" value={layer.borderWidth} onChange={e => set("borderWidth", +e.target.value)}
          style={{ width: 36, padding: 2, border: "1px solid #ddd", borderRadius: 3, fontSize: 11 }} title="太さ" />
        <select value={layer.borderStyle} onChange={e => set("borderStyle", e.target.value)}
          style={{ padding: "2px 4px", border: "1px solid #ddd", borderRadius: 3, fontSize: 11 }} title="形">
          <option value="solid">実線</option>
          <option value="dashed">破線</option>
          <option value="dotted">点線</option>
          <option value="double">二重</option>
        </select>
      </label>
      <span style={{ width: 1, height: 18, background: "#e0e0e0", margin: "0 2px" }} />
      <Btn onClick={onDelete} title="削除">🗑</Btn>
    </div>
  );
}

function Layer({ layer, selected, onSelect, onChange, onDelete }) {
  const [editing, setEditing] = React.useState(false);
  const ref = React.useRef(null);
  const drag = React.useRef(null);

  const startDrag = (e, mode) => {
    if (editing) return;
    e.stopPropagation();
    e.preventDefault();
    drag.current = {
      mode,
      sx: e.clientX, sy: e.clientY,
      ox: layer.x, oy: layer.y,
      ow: layer.w, oh: layer.h,
    };
    onSelect(layer.id);
    const move = (ev) => {
      const d = drag.current; if (!d) return;
      const dx = ev.clientX - d.sx, dy = ev.clientY - d.sy;
      if (d.mode === "move") onChange({ ...layer, x: d.ox + dx, y: d.oy + dy });
      else {
        let nx = d.ox, ny = d.oy, nw = d.ow, nh = d.oh;
        if (d.mode.includes("e")) nw = Math.max(40, d.ow + dx);
        if (d.mode.includes("s")) nh = Math.max(24, d.oh + dy);
        if (d.mode.includes("w")) { nw = Math.max(40, d.ow - dx); nx = d.ox + (d.ow - nw); }
        if (d.mode.includes("n")) { nh = Math.max(24, d.oh - dy); ny = d.oy + (d.oh - nh); }
        onChange({ ...layer, x: nx, y: ny, w: nw, h: nh });
      }
    };
    const up = () => {
      drag.current = null;
      window.removeEventListener("mousemove", move);
      window.removeEventListener("mouseup", up);
    };
    window.addEventListener("mousemove", move);
    window.addEventListener("mouseup", up);
  };

  const border = layer.borderWidth > 0
    ? `${layer.borderWidth}px ${layer.borderStyle} ${layer.borderColor}`
    : "none";

  const handles = ["nw","n","ne","e","se","s","sw","w"];
  const handlePos = {
    nw:[0,0], n:[.5,0], ne:[1,0], e:[1,.5], se:[1,1], s:[.5,1], sw:[0,1], w:[0,.5]
  };
  const handleCursor = { nw:"nwse-resize", n:"ns-resize", ne:"nesw-resize", e:"ew-resize",
    se:"nwse-resize", s:"ns-resize", sw:"nesw-resize", w:"ew-resize" };

  return (
    <div
      ref={ref}
      onMouseDown={(e) => startDrag(e, "move")}
      onClick={(e) => { e.stopPropagation(); onSelect(layer.id); }}
      onDoubleClick={(e) => { if (layer.type === "text") { e.stopPropagation(); setEditing(true); } }}
      style={{
        position: "absolute", left: layer.x, top: layer.y, width: layer.w, height: layer.h,
        background: layer.bg, border, borderRadius: layer.radius || 0,
        cursor: editing ? "text" : "move",
        outline: selected ? "2px solid #EB5505" : "none",
        outlineOffset: 2,
        zIndex: selected ? 1000 : 10,
        boxSizing: "border-box",
        display: "flex", alignItems: "center",
        padding: layer.type === "text" ? "6px 10px" : 0,
      }}
    >
      {layer.type === "text" && (
        <div
          contentEditable={editing}
          suppressContentEditableWarning
          onBlur={(e) => { setEditing(false); onChange({ ...layer, text: e.currentTarget.innerText }); }}
          onMouseDown={(e) => { if (editing) e.stopPropagation(); }}
          style={{
            width: "100%", outline: "none",
            textAlign: layer.align, color: layer.color, fontSize: layer.fontSize,
            fontWeight: 600, lineHeight: 1.35, fontFamily: "inherit",
            cursor: editing ? "text" : "inherit",
            userSelect: editing ? "text" : "none",
          }}
        >{layer.text}</div>
      )}
      {selected && handles.map(h => {
        const [hx, hy] = handlePos[h];
        return (
          <div key={h}
            onMouseDown={(e) => startDrag(e, h)}
            style={{
              position: "absolute", width: 10, height: 10, background: "#fff",
              border: "1.5px solid #EB5505", borderRadius: 2, zIndex: 2,
              left: `calc(${hx * 100}% - 5px)`, top: `calc(${hy * 100}% - 5px)`,
              cursor: handleCursor[h],
            }}
          />
        );
      })}
    </div>
  );
}

function LayerEditor({ layers, setLayers, enabled }) {
  const [selectedId, setSelectedId] = React.useState(null);

  React.useEffect(() => {
    if (!enabled) setSelectedId(null);
  }, [enabled]);

  if (!enabled) return null;

  const selected = layers.find(l => l.id === selectedId);

  const addLayer = (type) => {
    const cx = window.scrollX + window.innerWidth / 2 - 120;
    const cy = window.scrollY + 200;
    const base = type === "text"
      ? { type: "text", text: "ダブルクリックで編集", w: 240, h: 56, fontSize: 18,
          color: "#1a1a1a", bg: "rgba(255,255,255,.92)", align: "left",
          borderColor: "#EB5505", borderWidth: 1, borderStyle: "solid", radius: 4 }
      : { type: "rect", w: 200, h: 120, color: "#1a1a1a", bg: "#EB5505", align: "left",
          borderColor: "#1a1a1a", borderWidth: 0, borderStyle: "solid", radius: 8 };
    const newLayer = { id: uid(), x: cx, y: cy, ...base };
    setLayers([...layers, newLayer]);
    setSelectedId(newLayer.id);
  };

  const updateLayer = (id, next) => {
    setLayers(layers.map(l => l.id === id ? next : l));
  };
  const deleteLayer = (id) => {
    setLayers(layers.filter(l => l.id !== id));
    setSelectedId(null);
  };

  return (
    <>
      {/* Click-anywhere-to-deselect overlay (only catches when no layer clicked) */}
      <div onClick={() => setSelectedId(null)} style={{
        position: "fixed", inset: 0, pointerEvents: "none", zIndex: 9
      }} />

      {/* Layers — positioned absolutely on document */}
      <div style={{ position: "absolute", inset: 0, top: 0, left: 0, pointerEvents: "none", zIndex: 9999 }}>
        <div style={{ position: "relative", pointerEvents: "none" }}>
          {layers.map(l => (
            <div key={l.id} style={{ pointerEvents: "auto" }}>
              <Layer
                layer={l}
                selected={l.id === selectedId}
                onSelect={setSelectedId}
                onChange={(next) => updateLayer(l.id, next)}
                onDelete={() => deleteLayer(l.id)}
              />
            </div>
          ))}
        </div>
      </div>

      {/* Floating toolbar for selected layer */}
      {selected && (
        <div style={{ position: "absolute", zIndex: 10001 }}>
          <LayerToolbar
            layer={selected}
            onChange={(next) => updateLayer(selected.id, next)}
            onDelete={() => deleteLayer(selected.id)}
            onClose={() => setSelectedId(null)}
          />
        </div>
      )}

      {/* Add-layer FAB */}
      <div style={{
        position: "fixed", left: 16, bottom: 16, zIndex: 10000,
        display: "flex", flexDirection: "column", gap: 8,
        fontFamily: "system-ui,sans-serif"
      }}>
        <button onClick={() => addLayer("text")} style={{
          padding: "10px 16px", borderRadius: 999, border: 0, cursor: "pointer",
          background: "#1a1a1a", color: "#fff", fontSize: 13, fontWeight: 600,
          boxShadow: "0 6px 20px rgba(0,0,0,.2)", display: "inline-flex", alignItems: "center", gap: 8
        }}>＋ テキストレイヤー</button>
        <button onClick={() => addLayer("rect")} style={{
          padding: "10px 16px", borderRadius: 999, border: 0, cursor: "pointer",
          background: "#EB5505", color: "#fff", fontSize: 13, fontWeight: 600,
          boxShadow: "0 6px 20px rgba(235,85,5,.3)", display: "inline-flex", alignItems: "center", gap: 8
        }}>＋ パネルレイヤー</button>
        <div style={{
          fontSize: 11, color: "#fff", background: "rgba(0,0,0,.7)",
          padding: "6px 10px", borderRadius: 6, lineHeight: 1.5, maxWidth: 200
        }}>
          ドラッグで移動・コーナーで拡縮<br/>
          ダブルクリックで文字編集
        </div>
      </div>
    </>
  );
}

Object.assign(window, { LayerEditor });