// extras3.jsx — ColorPicker, TreeView, Dropzone, Notifications
const { useState: useStateZ, useRef: useRefZ } = React;

/* ---------- Color Picker ---------- */
function ColorPicker({ value, onChange, swatches }) {
  const palette = swatches || ["#00FFD4", "#31A592", "#D4FF00", "#ED145B", "#5F37FF", "#FF00FF", "#FF8C00", "#081A1F"];
  return (
    <div className="colorpicker">
      <div className="cp-preview" style={{ background: value }} />
      <div className="cp-swatches">
        {palette.map((c) => (
          <button key={c} className="cp-sw" data-active={value === c} style={{ background: c }} onClick={() => onChange(c)} title={c} />
        ))}
        <label className="cp-custom" style={{ background: value }}>
          <Icon name="plus" />
          <input type="color" value={value} onChange={(e) => onChange(e.target.value)} />
        </label>
      </div>
      <span className="cp-hex mono">{value.toUpperCase()}</span>
    </div>
  );
}

/* ---------- Tree View ---------- */
function TreeView({ data }) {
  return <div className="treeview">{data.map((n, i) => <TreeNode key={i} node={n} depth={0} />)}</div>;
}
function TreeNode({ node, depth }) {
  const [open, setOpen] = useStateZ(depth < 1);
  const hasChildren = node.children && node.children.length;
  return (
    <div className="tree-node">
      <div className="tree-row" style={{ paddingLeft: 8 + depth * 18 }} onClick={() => hasChildren && setOpen((o) => !o)}>
        {hasChildren ? <Icon name="chevron-right" className="tree-caret" style={{ transform: open ? "rotate(90deg)" : "none" }} />
          : <span className="tree-caret-spacer" />}
        <Icon name={hasChildren ? (open ? "node" : "node") : (node.icon || "contract")} className="tree-ic" />
        <span className="tree-label">{node.label}</span>
        {node.tag && <Badge variant="muted" className="tree-tag">{node.tag}</Badge>}
      </div>
      {hasChildren && open && <div>{node.children.map((c, i) => <TreeNode key={i} node={c} depth={depth + 1} />)}</div>}
    </div>
  );
}

/* ---------- Dropzone ---------- */
function Dropzone({ onFiles, hint = "Arraste arquivos ou clique para enviar" }) {
  const [over, setOver] = useStateZ(false);
  const [files, setFiles] = useStateZ([]);
  const inputRef = useRefZ(null);
  const add = (list) => {
    const arr = Array.from(list).map((f) => ({ name: f.name, size: (f.size / 1024).toFixed(0) + " KB" }));
    setFiles((cur) => [...cur, ...arr]); onFiles && onFiles(arr);
  };
  return (
    <div>
      <div className={"dropzone" + (over ? " over" : "")}
        onDragOver={(e) => { e.preventDefault(); setOver(true); }}
        onDragLeave={() => setOver(false)}
        onDrop={(e) => { e.preventDefault(); setOver(false); add(e.dataTransfer.files); }}
        onClick={() => inputRef.current && inputRef.current.click()}>
        <div className="dz-ic"><Icon name="download" /></div>
        <div className="dz-hint">{hint}</div>
        <div className="dz-sub">PDF, PNG, JSON — até 25 MB</div>
        <input ref={inputRef} type="file" multiple style={{ display: "none" }} onChange={(e) => add(e.target.files)} />
      </div>
      {files.length > 0 && (
        <div className="dz-list">
          {files.map((f, i) => (
            <div className="dz-file" key={i}>
              <Icon name="contract" /><span className="dz-name">{f.name}</span><span className="dz-size mono">{f.size}</span>
              <span className="dz-x" onClick={() => setFiles(files.filter((_, k) => k !== i))}><Icon name="x" /></span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

/* ---------- Notifications list ---------- */
function Notifications({ items, onClear }) {
  return (
    <div className="notif-list">
      {items.map((n, i) => (
        <div className={"notif" + (n.unread ? " unread" : "")} key={i}>
          <div className="notif-ic" style={{ background: "color-mix(in srgb, " + (n.color || "var(--brand)") + " 16%, transparent)", color: n.color || "var(--brand)" }}><Icon name={n.icon || "bell"} /></div>
          <div className="notif-body"><div className="notif-title">{n.title}</div><div className="notif-desc">{n.desc}</div><div className="notif-time">{n.time}</div></div>
          {n.unread && <span className="notif-dot" />}
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { ColorPicker, TreeView, Dropzone, Notifications });