/* Inspector panel — edits selected node's title, value, notes, checklist */

const { useState: useStateI, useRef: useRefI } = React;

function Inspector({ node, allNodes, onUpdate, onDelete, onClose, onJumpTo }) {
  const checkRef = useRefI(null);

  if (!node) return null;

  const update = (patch) => onUpdate(node.id, patch);

  const addCheck = () => {
    const item = { id: TVStore.uid("c"), text: "", done: false };
    update({ checks: [...node.checks, item] });
    setTimeout(() => {
      const inputs = checkRef.current?.querySelectorAll("input[type=text]");
      inputs?.[inputs.length - 1]?.focus();
    }, 20);
  };
  const updateCheck = (id, patch) => {
    update({ checks: node.checks.map(c => c.id === id ? { ...c, ...patch } : c) });
  };
  const removeCheck = (id) => update({ checks: node.checks.filter(c => c.id !== id) });

  return (
    <div className="inspector" onPointerDown={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}>
      <div className="inspector-header">
        <div className="inspector-title">Node</div>
        <div style={{ display: 'flex', gap: 4 }}>
          <button className="btn icon danger" title="Delete node" onClick={() => onDelete(node.id)}>
            <Icon name="trash" size={14} />
          </button>
          <button className="btn icon" title="Close" onClick={onClose}>
            <Icon name="x" size={14} />
          </button>
        </div>
      </div>
      <div className="inspector-body">
        <div className="field">
          <div className="field-label">Title</div>
          <input className="input" value={node.title}
            onChange={(e) => update({ title: e.target.value })}
            placeholder="Untitled" />
        </div>

        <div className="field">
          <div className="field-label">Shape</div>
          <div className="shape-row">
            {[
              { id: "circle", icon: "circle", label: "Pill" },
              { id: "rect", icon: "rect", label: "Box" },
              { id: "card", icon: "card", label: "Card" },
            ].map(opt => (
              <button key={opt.id}
                className={`shape-opt ${node.shape === opt.id ? 'selected' : ''}`}
                title={opt.label}
                onClick={() => update({ shape: opt.id })}>
                <Icon name={opt.icon} size={16} />
              </button>
            ))}
          </div>
        </div>

        <div className="field">
          <div className="field-label">Value</div>
          <div style={{ display: 'flex', gap: 6 }}>
            <input className="input" style={{ width: 48, textAlign: 'center', flex: '0 0 48px' }}
              value={node.valueCurrency ?? "$"}
              onChange={(e) => update({ valueCurrency: e.target.value })}
              placeholder="$" />
            <input className="input" style={{ flex: 1 }}
              type="number"
              value={node.value ?? ""}
              onChange={(e) => update({ value: e.target.value === "" ? null : Number(e.target.value) })}
              placeholder="0" />
            <input className="input" style={{ width: 72, flex: '0 0 72px' }}
              value={node.valueSuffix ?? ""}
              onChange={(e) => update({ valueSuffix: e.target.value })}
              placeholder="/mo" />
          </div>
        </div>

        <div className="field">
          <div className="field-label">Notes</div>
          <textarea className="textarea" value={node.notes}
            placeholder="Longer description, context, links..."
            onChange={(e) => update({ notes: e.target.value })} />
        </div>

        <div className="field">
          <div className="field-label">Checklist</div>
          <div className="checklist" ref={checkRef}>
            {node.checks.map(c => (
              <div className="check-row" key={c.id}>
                <button className={`check-box ${c.done ? 'done' : ''}`}
                  onClick={() => updateCheck(c.id, { done: !c.done })}>
                  {c.done && <Icon name="check" size={11} />}
                </button>
                <input type="text" value={c.text}
                  className={c.done ? 'done' : ''}
                  placeholder="Item"
                  onChange={(e) => updateCheck(c.id, { text: e.target.value })}
                  onKeyDown={(e) => {
                    if (e.key === "Enter") { e.preventDefault(); addCheck(); }
                    if (e.key === "Backspace" && !c.text) { e.preventDefault(); removeCheck(c.id); }
                  }} />
                <button className="x" onClick={() => removeCheck(c.id)}>
                  <Icon name="x" size={12} />
                </button>
              </div>
            ))}
            <button className="btn" style={{ alignSelf: 'flex-start', marginTop: 4 }} onClick={addCheck}>
              <Icon name="plus" size={12} /> Add item
            </button>
          </div>
        </div>

      </div>
    </div>
  );
}

window.Inspector = Inspector;