// Content-item detail components: suggestions (with upvote, comments, delete) and functionality notes.

const { useState: useStateD, useMemo: useMemoD } = React;

// ---------- icons ----------
function UpvoteIcon({ filled }) {
  return (
    <svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true">
      <path d="M6 1.5 L10.5 6 L8 6 L8 10.5 L4 10.5 L4 6 L1.5 6 Z"
        fill={filled ? "currentColor" : "none"}
        stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round" />
    </svg>
  );
}
function TrashIcon() {
  return (
    <svg width="11" height="11" viewBox="0 0 12 12" aria-hidden="true">
      <path d="M3 4 L3 10 Q3 10.5 3.5 10.5 L8.5 10.5 Q9 10.5 9 10 L9 4" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round" />
      <path d="M2 3.5 L10 3.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
      <path d="M4.5 3 L4.5 2.2 Q4.5 1.7 5 1.7 L7 1.7 Q7.5 1.7 7.5 2.2 L7.5 3" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round" />
      <path d="M5 5.5 L5 8.5 M7 5.5 L7 8.5" stroke="currentColor" strokeWidth="1.0" strokeLinecap="round" opacity="0.7" />
    </svg>
  );
}
function LinkIcon() {
  return (
    <svg width="11" height="11" viewBox="0 0 12 12" aria-hidden="true">
      <path d="M5 7 L7 5 M4.5 4 L3.5 5 Q2.5 6 3.5 7 Q4.5 8 5.5 7 L6 6.5 M6 8 L7 7 Q8 6 7 5 Q6 4 5 5 L4.5 5.5"
        stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}
function ActionIcon() {
  return (
    <svg width="11" height="11" viewBox="0 0 12 12" aria-hidden="true">
      <circle cx="6" cy="6" r="4.5" stroke="currentColor" strokeWidth="1.2" fill="none" />
      <path d="M5 4.5 L7.5 6 L5 7.5 Z" fill="currentColor" />
    </svg>
  );
}
function BehaviorIcon() {
  return (
    <svg width="11" height="11" viewBox="0 0 12 12" aria-hidden="true">
      <path d="M2 8 Q3.5 4.5 6 6 Q8.5 7.5 10 4" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round" />
      <circle cx="2" cy="8" r="1" fill="currentColor" />
      <circle cx="10" cy="4" r="1" fill="currentColor" />
    </svg>
  );
}

const KIND_META = {
  link: { label: "Link", Icon: LinkIcon },
  action: { label: "Action", Icon: ActionIcon },
  behavior: { label: "Behavior", Icon: BehaviorIcon },
};

// ---------- Two-step delete button ----------
function DeleteButton({ onConfirm, label = "Delete", title = "Delete" }) {
  const [armed, setArmed] = useStateD(false);
  if (armed) {
    return (
      <span className="del-confirm">
        <button className="del-confirm-yes" onClick={(e) => { e.stopPropagation(); onConfirm(); setArmed(false); }}>
          Confirm
        </button>
        <button className="del-confirm-no" onClick={(e) => { e.stopPropagation(); setArmed(false); }}>
          Cancel
        </button>
      </span>
    );
  }
  return (
    <button className="del-btn" title={title} aria-label={label} onClick={(e) => { e.stopPropagation(); setArmed(true); }}>
      <TrashIcon />
    </button>
  );
}

// ---------- Comment list (reusable inside cards) ----------
function MiniComments({ comments, onAdd, onDelete, placeholder }) {
  const [draft, setDraft] = useStateD("");
  const [open, setOpen] = useStateD(false);

  return (
    <div className="mini-comments">
      <button
        className="mini-comments-toggle"
        onClick={(e) => { e.stopPropagation(); setOpen((v) => !v); }}
      >
        <window.CommentGlyph />
        {comments.length} comment{comments.length !== 1 ? "s" : ""}
        <span className="mini-chev">{open ? "▾" : "▸"}</span>
      </button>
      {open && (
        <div className="mini-comments-body">
          {comments.map((c) => (
            <div key={c.id} className="mini-comment">
              <div className="mini-comment-head">
                <span><b>{c.author}</b> · <span className="mini-comment-role">{c.role}</span></span>
                <span className="mini-comment-meta">
                  <span className="mini-comment-date">{c.date}</span>
                  <DeleteButton onConfirm={() => onDelete(c.id)} title="Delete comment" />
                </span>
              </div>
              <div className="mini-comment-body">{c.body}</div>
            </div>
          ))}
          <div className="mini-comment-add">
            <textarea
              value={draft}
              placeholder={placeholder || "Add a comment…"}
              onChange={(e) => setDraft(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && draft.trim()) {
                  onAdd(draft.trim()); setDraft("");
                }
              }}
            />
            <button
              className="btn-primary tiny"
              disabled={!draft.trim()}
              onClick={() => { onAdd(draft.trim()); setDraft(""); }}
            >
              Post
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

// ---------- Suggestion card ----------
function SuggestionCard({ submission, voted, onUpvote, onDelete, onAddComment, onDeleteComment }) {
  return (
    <div className="suggestion-card">
      <div className="suggestion-head">
        <span className="suggestion-author"><b>{submission.author}</b> <span className="suggestion-role">{submission.role}</span></span>
        <span className="suggestion-date">{submission.date}</span>
      </div>
      <div className="suggestion-body">{submission.body}</div>
      <div className="suggestion-actions">
        <button
          className={`upvote ${voted ? "voted" : ""}`}
          onClick={(e) => { e.stopPropagation(); onUpvote(); }}
          title={voted ? "Remove your upvote" : "Upvote this version"}
        >
          <UpvoteIcon filled={voted} />
          <span className="upvote-count">{submission.upvotes}</span>
        </button>
        <span style={{ flex: 1 }}></span>
        <DeleteButton onConfirm={onDelete} title="Delete this submission" />
      </div>
      <MiniComments
        comments={submission.comments || []}
        onAdd={onAddComment}
        onDelete={onDeleteComment}
        placeholder="Comment on this version…"
      />
    </div>
  );
}

// ---------- Functionality note card ----------
function FunctionalityCard({ note, nodes, onDelete, onAddComment, onDeleteComment, onNavigate }) {
  const meta = KIND_META[note.kind] || KIND_META.behavior;
  const target = note.targetNodeId ? nodes[note.targetNodeId] : null;
  const Icon = meta.Icon;

  return (
    <div className="func-card">
      <div className="func-head">
        <span className={`func-kind kind-${note.kind}`}>
          <Icon />
          {meta.label}
        </span>
        <span className="func-author"><b>{note.author}</b> <span className="func-role">{note.role}</span></span>
        <span style={{ flex: 1 }}></span>
        <span className="func-date">{note.date}</span>
        <DeleteButton onConfirm={onDelete} title="Delete this note" />
      </div>
      <div className="func-body">{note.body}</div>
      {target && (
        <button
          className="func-target"
          onClick={(e) => { e.stopPropagation(); onNavigate(target.id); }}
          title={`Jump to ${target.title}`}
        >
          <span className="func-target-label">Target →</span>
          <span className="func-target-title">{target.title}</span>
          <span className="func-target-url">{target.url}</span>
        </button>
      )}
      <MiniComments
        comments={note.comments || []}
        onAdd={onAddComment}
        onDelete={onDeleteComment}
        placeholder="Comment on this functionality…"
      />
    </div>
  );
}

// ---------- Submit suggestion form ----------
function SubmitSuggestionForm({ onSubmit }) {
  const [body, setBody] = useStateD("");
  const [open, setOpen] = useStateD(false);
  if (!open) {
    return (
      <button className="add-row-btn" onClick={() => setOpen(true)}>
        <span className="add-glyph">+</span> Submit a new content draft
      </button>
    );
  }
  return (
    <div className="add-form">
      <textarea
        placeholder="Draft your suggested copy or content. Versions can iterate from each other — focus on one concrete option."
        value={body}
        onChange={(e) => setBody(e.target.value)}
        autoFocus
      />
      <div className="add-form-actions">
        <small>You will be credited as the author</small>
        <span style={{ flex: 1 }}></span>
        <button className="iconbtn tiny" onClick={() => { setOpen(false); setBody(""); }}>Cancel</button>
        <button
          className="btn-primary"
          disabled={!body.trim()}
          onClick={() => { onSubmit(body.trim()); setBody(""); setOpen(false); }}
        >
          Submit draft
        </button>
      </div>
    </div>
  );
}

// ---------- Add functionality form ----------
function AddFunctionalityForm({ onAdd, pages }) {
  const [open, setOpen] = useStateD(false);
  const [body, setBody] = useStateD("");
  const [kind, setKind] = useStateD("link");
  const [target, setTarget] = useStateD("");

  if (!open) {
    return (
      <button className="add-row-btn" onClick={() => setOpen(true)}>
        <span className="add-glyph">+</span> Add a functionality note
      </button>
    );
  }
  return (
    <div className="add-form">
      <div className="kind-picker">
        {Object.entries(KIND_META).map(([k, m]) => {
          const I = m.Icon;
          return (
            <button
              key={k}
              className={`kind-pick ${kind === k ? "on" : ""}`}
              onClick={() => setKind(k)}
              type="button"
            >
              <I />
              {m.label}
            </button>
          );
        })}
      </div>
      <textarea
        placeholder='Describe the intended behavior. e.g. "Clicking the card opens /faculty in the same tab."'
        value={body}
        onChange={(e) => setBody(e.target.value)}
      />
      {kind === "link" && (
        <select className="target-select" value={target} onChange={(e) => setTarget(e.target.value)}>
          <option value="">— Optional: link target —</option>
          {pages.map((p) => (
            <option key={p.id} value={p.id}>{p.title} · {p.url}</option>
          ))}
        </select>
      )}
      <div className="add-form-actions">
        <small>You will be credited as the author</small>
        <span style={{ flex: 1 }}></span>
        <button className="iconbtn tiny" onClick={() => { setOpen(false); setBody(""); setTarget(""); }}>Cancel</button>
        <button
          className="btn-primary"
          disabled={!body.trim()}
          onClick={() => {
            onAdd({ kind, body: body.trim(), targetNodeId: kind === "link" && target ? target : null });
            setBody(""); setTarget(""); setOpen(false);
          }}
        >
          Add note
        </button>
      </div>
    </div>
  );
}

// ---------- Suggested content section ----------
function SuggestedContentSection({ submissions, votes, onSubmit, onUpvote, onDelete, onAddComment, onDeleteComment }) {
  const sorted = useMemoD(() => {
    return (submissions || []).slice().sort((a, b) => b.upvotes - a.upvotes);
  }, [submissions]);

  return (
    <div className="sb-section">
      <div className="sb-section-label">
        Suggested content
        <span className="count">{sorted.length} version{sorted.length !== 1 ? "s" : ""} · sorted by upvotes</span>
      </div>
      {sorted.length === 0 && (
        <div className="comments-empty">No drafts yet. Submit the first version below.</div>
      )}
      <div className="suggestion-list">
        {sorted.map((s) => (
          <SuggestionCard
            key={s.id}
            submission={s}
            voted={!!votes[s.id]}
            onUpvote={() => onUpvote(s.id)}
            onDelete={() => onDelete(s.id)}
            onAddComment={(body) => onAddComment(s.id, body)}
            onDeleteComment={(cid) => onDeleteComment(s.id, cid)}
          />
        ))}
      </div>
      <SubmitSuggestionForm onSubmit={onSubmit} />
    </div>
  );
}

// ---------- Intended functionality section ----------
function IntendedFunctionalitySection({ notes, nodes, pages, onAdd, onDelete, onAddComment, onDeleteComment, onNavigate }) {
  return (
    <div className="sb-section">
      <div className="sb-section-label">
        Intended functionality
        <span className="count">{(notes || []).length} note{(notes || []).length !== 1 ? "s" : ""}</span>
      </div>
      {(notes || []).length === 0 && (
        <div className="comments-empty">No functionality logged yet. Note links, actions or behaviors below.</div>
      )}
      <div className="func-list">
        {(notes || []).map((n) => (
          <FunctionalityCard
            key={n.id}
            note={n}
            nodes={nodes}
            onDelete={() => onDelete(n.id)}
            onAddComment={(body) => onAddComment(n.id, body)}
            onDeleteComment={(cid) => onDeleteComment(n.id, cid)}
            onNavigate={onNavigate}
          />
        ))}
      </div>
      <AddFunctionalityForm onAdd={onAdd} pages={pages} />
    </div>
  );
}

Object.assign(window, {
  SuggestedContentSection, IntendedFunctionalitySection,
  DeleteButton,
});