import { useState, useEffect } from "react"; import { useAuth } from "../context/AuthContext"; import ReplyList from "./ReplyList"; import { Link } from "react-router-dom"; import RichText from "./RichText"; import { normalizeAnnotation, normalizeHighlight, likeAnnotation, unlikeAnnotation, getReplies, createReply, deleteReply, updateAnnotation, updateHighlight, getEditHistory, deleteAnnotation, } from "../api/client"; import { MessageSquare, Heart, Trash2, Folder, Edit2, Save, X, Clock, } from "lucide-react"; import { HighlightIcon, TrashIcon } from "./Icons"; import ShareMenu from "./ShareMenu"; import UserMeta from "./UserMeta"; function buildTextFragmentUrl(baseUrl, selector) { if (!selector || selector.type !== "TextQuoteSelector" || !selector.exact) { return baseUrl; } let fragment = ":~:text="; if (selector.prefix) { fragment += encodeURIComponent(selector.prefix) + "-,"; } fragment += encodeURIComponent(selector.exact); if (selector.suffix) { fragment += ",-" + encodeURIComponent(selector.suffix); } return baseUrl + "#" + fragment; } const truncateUrl = (url, maxLength = 50) => { if (!url) return ""; try { const parsed = new URL(url); const fullPath = parsed.host + parsed.pathname; if (fullPath.length > maxLength) return fullPath.substring(0, maxLength) + "..."; return fullPath; } catch { return url.length > maxLength ? url.substring(0, maxLength) + "..." : url; } }; function SembleBadge() { return (

via Semble

); } export default function AnnotationCard({ annotation, onDelete, onAddToCollection, }) { const { user, login } = useAuth(); const data = normalizeAnnotation(annotation); const [likeCount, setLikeCount] = useState(data.likeCount || 0); const [isLiked, setIsLiked] = useState(data.viewerHasLiked || false); const [deleting, setDeleting] = useState(false); const [isEditing, setIsEditing] = useState(false); const [editText, setEditText] = useState(data.text || ""); const [editTags, setEditTags] = useState(data.tags?.join(", ") || ""); const [saving, setSaving] = useState(false); const [showHistory, setShowHistory] = useState(false); const [editHistory, setEditHistory] = useState([]); const [loadingHistory, setLoadingHistory] = useState(false); const [replies, setReplies] = useState([]); const [replyCount, setReplyCount] = useState(data.replyCount || 0); const [showReplies, setShowReplies] = useState(false); const [replyingTo, setReplyingTo] = useState(null); const [replyText, setReplyText] = useState(""); const [posting, setPosting] = useState(false); const [hasEditHistory, setHasEditHistory] = useState(false); const isOwner = user?.did && data.author?.did === user.did; const isSemble = data.uri?.includes("network.cosmik"); const highlightedText = data.selector?.type === "TextQuoteSelector" ? data.selector.exact : null; const fragmentUrl = buildTextFragmentUrl(data.url, data.selector); useEffect(() => { if (data.uri && !data.color && !data.description) { getEditHistory(data.uri) .then((history) => { if (history?.length > 0) setHasEditHistory(true); }) .catch(() => {}); } }, [data.uri, data.color, data.description]); const fetchHistory = async () => { if (showHistory) { setShowHistory(false); return; } try { setLoadingHistory(true); setShowHistory(true); const history = await getEditHistory(data.uri); setEditHistory(history); } catch (err) { console.error("Failed to fetch history:", err); } finally { setLoadingHistory(false); } }; const handlePostReply = async (parentReply) => { if (!replyText.trim()) return; try { setPosting(true); const parentUri = parentReply ? parentReply.id || parentReply.uri : data.uri; const parentCid = parentReply ? parentReply.cid : annotation.cid || data.cid; await createReply({ parentUri, parentCid: parentCid || "", rootUri: data.uri, rootCid: annotation.cid || data.cid || "", text: replyText, }); setReplyText(""); setReplyingTo(null); const res = await getReplies(data.uri); if (res.items) { setReplies(res.items); setReplyCount(res.items.length); } } catch (err) { alert("Failed to post reply: " + err.message); } finally { setPosting(false); } }; const handleSaveEdit = async () => { try { setSaving(true); const tagList = editTags .split(",") .map((t) => t.trim()) .filter(Boolean); await updateAnnotation(data.uri, editText, tagList); setIsEditing(false); if (annotation.body) annotation.body.value = editText; else if (annotation.text) annotation.text = editText; if (annotation.tags) annotation.tags = tagList; data.tags = tagList; } catch (err) { alert("Failed to update: " + err.message); } finally { setSaving(false); } }; const handleLike = async () => { if (!user) { login(); return; } try { if (isLiked) { setIsLiked(false); setLikeCount((prev) => Math.max(0, prev - 1)); await unlikeAnnotation(data.uri); } else { setIsLiked(true); setLikeCount((prev) => prev + 1); const cid = annotation.cid || data.cid || ""; if (data.uri && cid) await likeAnnotation(data.uri, cid); } } catch { setIsLiked(!isLiked); setLikeCount((prev) => (isLiked ? prev + 1 : prev - 1)); } }; const handleDelete = async () => { if (!confirm("Delete this annotation? This cannot be undone.")) return; try { setDeleting(true); const parts = data.uri.split("/"); const rkey = parts[parts.length - 1]; await deleteAnnotation(rkey); if (onDelete) onDelete(data.uri); else window.location.reload(); } catch (err) { alert("Failed to delete: " + err.message); } finally { setDeleting(false); } }; const loadReplies = async () => { if (!showReplies && replies.length === 0) { try { const res = await getReplies(data.uri); if (res.items) setReplies(res.items); } catch (err) { console.error("Failed to load replies:", err); } } setShowReplies(!showReplies); }; const handleCollect = () => { if (!user) { login(); return; } if (onAddToCollection) onAddToCollection(); }; return (

{isSemble && } {hasEditHistory && !data.color && !data.description && ( )} {isOwner && !isSemble && ( <> {!data.color && !data.description && ( )} )}

{showHistory && (

Edit History

{loadingHistory ? (

Loading history...

) : editHistory.length === 0 ? (

No edit history found.

) : (

{new Date(edit.editedAt).toLocaleString()}

{edit.previousContent}

)}

{truncateUrl(data.url)} {data.title && ( · {data.title} )} {highlightedText && ( “{highlightedText}” )} {isEditing ? (

setEditText(e.target.value)}
              className="reply-input"
              rows={3}
              placeholder="Your annotation..."
            />
            <input
              type="text"
              className="reply-input"
              placeholder="Tags (comma separated)..."
              value={editTags}
              onChange={(e) => setEditTags(e.target.value)}
              style={{ marginTop: "8px" }}
            />
            <div className="action-buttons-end" style={{ marginTop: "8px" }}>
              <button
                onClick={() => setIsEditing(false)}
                className="btn btn-ghost"
              >
                Cancel
              </button>
              <button
                onClick={handleSaveEdit}
                disabled={saving}
                className="btn btn-primary"
              >
                {saving ? (
                  "Saving..."
                ) : (
                  <>
                    <Save size={14} /> Save
                  </>
                )}
              </button>
            </div>
          </div>
        ) : (
          <RichText text={data.text} facets={data.facets} />
        )}

{data.tags?.length > 0 && (
          <div className="annotation-tags">
            {data.tags.map((tag, i) => (
              <Link
                key={i}
                to={`/?tag=${encodeURIComponent(tag)}`}
                className="annotation-tag"
              >
                #{tag}
              </Link>
            ))}
          </div>
        )}
      </div>

<footer className="annotation-actions">
        <div className="annotation-actions-left">
          <button
            className={`annotation-action ${isLiked ? "liked" : ""}`}
            onClick={handleLike}
          >
            <Heart size={16} fill={isLiked ? "currentColor" : "none"} />
            {likeCount > 0 && <span>{likeCount}</span>}
          </button>

<button
            className={`annotation-action ${showReplies ? "active" : ""}`}
            onClick={loadReplies}
          >
            <MessageSquare size={16} />
            <span>{replyCount > 0 ? replyCount : "Reply"}</span>
          </button>

<button className="annotation-action" onClick={handleCollect}>
            <Folder size={16} />
            <span>Collect</span>
          </button>
        </div>
      </footer>

{showReplies && (
        <div className="inline-replies">
          <ReplyList
            replies={replies}
            rootUri={data.uri}
            user={user}
            onReply={(reply) => setReplyingTo(reply)}
            onDelete={async (reply) => {
              if (!confirm("Delete this reply?")) return;
              try {
                await deleteReply(reply.id || reply.uri);
                const res = await getReplies(data.uri);
                if (res.items) {
                  setReplies(res.items);
                  setReplyCount(res.items.length);
                }
              } catch (err) {
                alert("Failed to delete: " + err.message);
              }
            }}
            isInline={true}
          />

<div className="reply-form">
            {replyingTo && (
              <div className="replying-to-banner">
                <span>
                  Replying to @
                  {(replyingTo.creator || replyingTo.author)?.handle ||
                    "unknown"}
                </span>
                <button
                  onClick={() => setReplyingTo(null)}
                  className="cancel-reply"
                >
                  ×
                </button>
              </div>
            )}
            <textarea
              className="reply-input"
              placeholder={
                replyingTo
                  ? `Reply to @${(replyingTo.creator || replyingTo.author)?.handle}...`
                  : "Write a reply..."
              }
              value={replyText}
              onChange={(e) => setReplyText(e.target.value)}
              rows={2}
            />
            <div className="reply-form-actions">
              <button
                className="btn btn-primary"
                disabled={posting || !replyText.trim()}
                onClick={() => {
                  if (!user) {
                    login();
                    return;
                  }
                  handlePostReply(replyingTo);
                }}
              >
                {posting ? "Posting..." : "Reply"}
              </button>
            </div>
          </div>
        </div>
      )}
    </article>
  );
}

export function HighlightCard({
  highlight,
  onDelete,
  onAddToCollection,
  onUpdate,
}) {
  const { user, login } = useAuth();
  const data = normalizeHighlight(highlight);
  const highlightedText =
    data.selector?.type === "TextQuoteSelector" ? data.selector.exact : null;
  const fragmentUrl = buildTextFragmentUrl(data.url, data.selector);
  const isOwner = user?.did && data.author?.did === user.did;
  const isSemble = data.uri?.includes("network.cosmik");

const [isEditing, setIsEditing] = useState(false);
  const [editColor, setEditColor] = useState(data.color || "#f59e0b");
  const [editTags, setEditTags] = useState(data.tags?.join(", ") || "");

const handleCollect = () => {
    if (!user) {
      login();
      return;
    }
    if (onAddToCollection) onAddToCollection();
  };

return (
    <article className="card annotation-card">
      <header className="annotation-header">
        <div className="annotation-header-left">
          <UserMeta author={data.author} createdAt={data.createdAt} />
        </div>
        <div className="annotation-header-right">
          {isSemble && (
            <div className="semble-badge" title="Added using Semble">
              <span>via Semble</span>
              <img src="/semble-logo.svg" alt="Semble" />
            </div>
          )}
          {isOwner && (
            <>
              <button
                className="annotation-action action-icon-only"
                onClick={() => setIsEditing(!isEditing)}
                title="Edit Color"
              >
                <Edit2 size={16} />
              </button>
              <button
                className="annotation-action action-icon-only"
                onClick={(e) => {
                  e.preventDefault();
                  onDelete && onDelete(highlight.id || highlight.uri);
                }}
                title="Delete"
              >
                <TrashIcon size={16} />
              </button>
            </>
          )}
        </div>
      </header>

<div className="annotation-content">
        <a
          href={data.url}
          target="_blank"
          rel="noopener noreferrer"
          className="annotation-source"
        >
          {truncateUrl(data.url)}
        </a>

{highlightedText && (
          <a
            href={fragmentUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="annotation-highlight"
            style={{
              borderLeftColor: isEditing ? editColor : data.color || "#f59e0b",
            }}
          >
            <mark>“{highlightedText}”</mark>
          </a>
        )}

{isEditing && (
          <div className="color-edit-form">
            <div className="color-picker-wrapper">
              <div
                className="color-preview"
                style={{ backgroundColor: editColor }}
              />
              <input
                type="color"
                value={editColor}
                onChange={(e) => setEditColor(e.target.value)}
                className="color-input"
              />
            </div>
            <input
              type="text"
              className="reply-input"
              placeholder="Tags (comma separated)"
              value={editTags}
              onChange={(e) => setEditTags(e.target.value)}
              style={{ flex: 1, margin: 0 }}
            />
            <button
              onClick={handleSaveEdit}
              className="btn btn-primary"
              style={{ padding: "0 12px", height: "32px" }}
            >
              <Save size={16} />
            </button>
          </div>
        )}

<footer className="annotation-actions">
        <div className="annotation-actions-left">
          <span
            className="annotation-action"
            style={{ color: data.color || "#f59e0b", cursor: "default" }}
          >
            <HighlightIcon size={14} /> Highlight
          </span>

<button className="annotation-action" onClick={handleCollect}>
            <Folder size={16} />
            <span>Collect</span>
          </button>
        </div>
      </footer>
    </article>
  );
}
</article></body></html>