/* =========================================================================
   Çevik Yaşam — CRUD katmanı (ekle / düzenle / kaldır / arşivle)
   useCollection + RowMenu + EditSheet + ConfirmSheet  → window'a export
   ========================================================================= */

let _cid = 0;
function uid(p) { _cid++; return (p || "id") + "-" + Date.now().toString(36) + "-" + _cid; }

// localStorage destekli koleksiyon + CRUD
function useCollection(key, seed) {
  const [items, setItems] = useStore(key, seed);
  const add = (obj) => setItems((prev) => [{ id: uid(key), archived: false, ...obj }, ...prev]);
  const update = (id, patch) => setItems((prev) => prev.map((it) => (it.id === id ? { ...it, ...patch } : it)));
  const remove = (id) => setItems((prev) => prev.filter((it) => it.id !== id));
  const archive = (id) => update(id, { archived: true });
  const restore = (id) => update(id, { archived: false });
  const active = items.filter((it) => !it.archived);
  const archived = items.filter((it) => it.archived);
  return { items, setItems, add, update, remove, archive, restore, active, archived };
}

// üç-nokta satır menüsü
function RowMenu({ onEdit, onArchive, onRestore, onDelete, archived }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", h);
    return () => document.removeEventListener("mousedown", h);
  }, []);
  return (
    <div className="cy-menu-wrap" ref={ref}>
      <button className="cy-iconbtn-sm" onClick={(e) => { e.stopPropagation(); setOpen((o) => !o); }} aria-label="işlemler">
        <Icon name="more" className="ic" />
      </button>
      {open && (
        <div className="cy-menu" onClick={(e) => e.stopPropagation()}>
          {onEdit && !archived && <button className="cy-menu-item" onClick={() => { setOpen(false); onEdit(); }}><Icon name="pen" className="ic" />Düzenle</button>}
          {onArchive && !archived && <button className="cy-menu-item" onClick={() => { setOpen(false); onArchive(); }}><Icon name="archive" className="ic" />Arşivle</button>}
          {onRestore && archived && <button className="cy-menu-item" onClick={() => { setOpen(false); onRestore(); }}><Icon name="archiveRestore" className="ic" />Geri al</button>}
          {onDelete && <React.Fragment><div className="cy-menu-sep" /><button className="cy-menu-item danger" onClick={() => { setOpen(false); onDelete(); }}><Icon name="trash" className="ic" />Sil</button></React.Fragment>}
        </div>
      )}
    </div>
  );
}

// alan-config'e göre form (ekle/düzenle)
function EditSheet({ title, eyebrow, fields, initial, onClose, onSave, saveLabel }) {
  const defaults = {};
  fields.forEach((f) => { defaults[f.name] = f.type === "number" || f.type === "range" ? (f.default ?? f.min ?? 0) : (f.default ?? ""); });
  const [val, setVal] = useState({ ...defaults, ...(initial || {}) });
  const set = (n, v) => setVal((s) => ({ ...s, [n]: v }));
  const valid = fields.every((f) => f.optional || (val[f.name] !== "" && val[f.name] != null));

  return (
    <Sheet title={title} eyebrow={eyebrow} onClose={onClose} maxWidth={560}
      footer={<React.Fragment>
        <Btn variant="ghost" onClick={onClose}>İptal</Btn>
        <Btn variant="primary" icon="check" onClick={() => valid && onSave(val)} style={{ opacity: valid ? 1 : .45, pointerEvents: valid ? "auto" : "none" }}>{saveLabel || "Kaydet"}</Btn>
      </React.Fragment>}>
      {fields.map((f) => (
        <div className="cy-field" key={f.name}>
          <label className="cy-label">{f.label}{f.optional && <span className="cy-muted" style={{ fontWeight: 400 }}> · opsiyonel</span>}</label>
          {f.type === "textarea" && <textarea className="cy-textarea" rows={f.rows || 3} placeholder={f.placeholder} value={val[f.name]} onChange={(e) => set(f.name, e.target.value)} />}
          {(!f.type || f.type === "text") && <input className="cy-input" placeholder={f.placeholder} value={val[f.name]} onChange={(e) => set(f.name, e.target.value)} />}
          {f.type === "date" && <input className="cy-input" type="date" value={val[f.name] || ""} onChange={(e) => set(f.name, e.target.value)} />}
          {f.type === "dropdown" && (
            <select className="cy-input" value={val[f.name]} onChange={(e) => set(f.name, e.target.value)}>
              {f.optgroups
                ? f.optgroups.map((g) => <optgroup key={g.label} label={g.label}>{g.options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}</optgroup>)
                : f.options.map((o) => { const ov = typeof o === "string" ? o : o.value; const ol = typeof o === "string" ? o : o.label; return <option key={ov} value={ov}>{ol}</option>; })}
            </select>
          )}
          {f.type === "depdropdown" && (() => {
            const opts = f.optionsFn(val) || [];
            return (
              <select className="cy-input" value={val[f.name] || ""} onChange={(e) => set(f.name, e.target.value)} disabled={!opts.length}>
                <option value="">{opts.length ? (f.placeholder || "— seçili değil —") : "Bu projede alt proje yok"}</option>
                {opts.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
              </select>
            );
          })()}
          {f.type === "number" && <input className="cy-input" type="number" min={f.min} max={f.max} value={val[f.name]} onChange={(e) => set(f.name, Number(e.target.value))} />}
          {f.type === "select" && (
            <div className="cy-seg">
              {f.options.map((o) => {
                const ov = typeof o === "string" ? o : o.value;
                const ol = typeof o === "string" ? o : o.label;
                return <button key={ov} className={"cy-choice" + (val[f.name] === ov ? " on" : "")} onClick={() => set(f.name, ov)}>{ol}</button>;
              })}
            </div>
          )}
          {f.type === "range" && (
            <div>
              <input className="cy-range" type="range" min={f.min} max={f.max} step={f.step || 1} value={val[f.name]} onChange={(e) => set(f.name, Number(e.target.value))} style={{ width: "100%" }} />
              <div className="cy-muted cy-mono" style={{ fontSize: 12, marginTop: 4 }}>{val[f.name]}{f.suffix || ""}</div>
            </div>
          )}
        </div>
      ))}
    </Sheet>
  );
}

// silme onayı
function ConfirmSheet({ title, body, confirmLabel, onClose, onConfirm }) {
  return (
    <Sheet title={title || "Emin misin?"} eyebrow="Onay" onClose={onClose} maxWidth={440}
      footer={<React.Fragment>
        <Btn variant="ghost" onClick={onClose}>Vazgeç</Btn>
        <Btn variant="primary" icon="trash" onClick={onConfirm} style={{ background: "var(--ml-red)", borderColor: "var(--ml-red)" }}>{confirmLabel || "Sil"}</Btn>
      </React.Fragment>}>
      <p className="cy-prose" style={{ marginTop: 0 }}>{body || "Bu öğe kalıcı olarak silinecek. Geri alınamaz — bunun yerine arşivlemeyi düşün."}</p>
    </Sheet>
  );
}

// arşiv aç/kapa çubuğu
function ArchiveToggle({ count, show, onToggle }) {
  if (!count && !show) return null;
  return (
    <div className="cy-archivebar">
      <Btn variant="ghost" size="sm" icon={show ? "inbox" : "archive"} onClick={onToggle}>
        {show ? "Arşivi gizle" : "Arşivi göster"}
      </Btn>
      {!!count && <span className="cy-muted" style={{ fontSize: 12.5 }}>{count} arşivlenmiş öğe</span>}
    </div>
  );
}

Object.assign(window, { useCollection, RowMenu, EditSheet, ConfirmSheet, ArchiveToggle, uid });