const Ideas = ({ ideas, setIdeas }) => {
  const [newTitle, setNewTitle] = useState("");
  const [editId, setEditId] = useState(null);
  const inputRef = useRef(null);

  const add = () => {
    if (!newTitle.trim()) return;
    setIdeas(is => [{ id: "i-" + Date.now(), title: newTitle.trim(), niche: "", format: "" }, ...is]);
    setNewTitle("");
    inputRef.current?.focus();
  };

  const update = (id, patch) => setIdeas(is => is.map(i => i.id === id ? { ...i, ...patch } : i));
  const remove = (id) => { setIdeas(is => is.filter(i => i.id !== id)); setEditId(null); };

  return (
    <div>
      <div className="pagehead">
        <div>
          <div className="eyebrow">Ideas</div>
          <h1>Braindump</h1>
          <p className="sub">Capture ideas before they disappear. No pressure.</p>
        </div>
      </div>

      <div className="ideas-add-row">
        <input ref={inputRef} className="input" placeholder="What's the idea? Hit Enter to save."
          value={newTitle} onChange={e => setNewTitle(e.target.value)}
          onKeyDown={e => e.key === "Enter" && add()} />
        <button className="btn btn-primary" onClick={add}>
          <Icon name="plus" size={14} /> Add
        </button>
      </div>

      {ideas.length === 0 && (
        <div className="dash-empty" style={{ textAlign: "center", padding: "40px 0" }}>
          <p>Nothing here yet — start typing above.</p>
        </div>
      )}

      <div className="ideas-grid">
        {ideas.map(idea => (
          editId === idea.id ? (
            <IdeaForm key={idea.id} idea={idea}
              onSave={patch => { update(idea.id, patch); setEditId(null); }}
              onDelete={() => remove(idea.id)}
              onCancel={() => setEditId(null)}
            />
          ) : (
            <div key={idea.id} className="idea-card card" onClick={() => setEditId(idea.id)}>
              <button className="card-del" onClick={e => { e.stopPropagation(); remove(idea.id); }}>
                <Icon name="x" size={12} />
              </button>
              {idea.niche && <NicheTag niche={idea.niche} size="sm" />}
              <div className="idea-title serif">{idea.title}</div>
              {idea.format && <FormatBadge format={idea.format} />}
            </div>
          )
        ))}
      </div>
    </div>
  );
};

const IdeaForm = ({ idea, onSave, onDelete, onCancel }) => {
  const [form, setForm] = useState(idea);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  return (
    <div className="idea-card card card-pad" style={{ border: "1.5px solid var(--accent)" }}>
      <textarea className="textarea" autoFocus value={form.title}
        onChange={e => set("title", e.target.value)}
        style={{ border: "none", background: "transparent", padding: 0, fontFamily: "var(--serif)", fontSize: 15, resize: "none", minHeight: 60, marginBottom: 10 }} />
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginBottom: 12 }}>
        <select className="input" style={{ fontSize: 12, padding: "7px 10px" }} value={form.format || ""}
          onChange={e => set("format", e.target.value)}>
          <option value="">Format</option>
          {FORMATS.map(f => <option key={f}>{f}</option>)}
        </select>
        <NicheSelect value={form.niche} onChange={v => set("niche", v)} />
      </div>
      <div style={{ display: "flex", gap: 8 }}>
        <button className="btn btn-primary btn-sm" style={{ flex: 1 }} onClick={() => onSave(form)}>Save</button>
        <button className="btn btn-ghost btn-sm" style={{ color: "var(--accent)" }} onClick={onDelete}>Delete</button>
        <button className="btn btn-ghost btn-sm" onClick={onCancel}>Cancel</button>
      </div>
    </div>
  );
};

window.Ideas = Ideas;