"use client";

import { useState, useEffect, useMemo } from "react";
import type { BeadsComment } from "@/hooks/useBeadsComments";
import { HeartIcon } from "@/components/HeartIcon";
import { formatRelativeTime } from "@/lib/utils";

/** Convert a simple glob pattern (with * wildcards) to a regex for matching */
function globToRegex(pattern: string): RegExp {
  const escaped = pattern.replace(/[.+^()|[\]\\]/g, '\\$&');
  const withWildcards = escaped.replace(/\*/g, '.*');
  return new RegExp('^' + withWildcards + '$', 'i');
}

interface AllCommentsPanelProps {
  isOpen: boolean;
  onClose: () => void;
  allComments: BeadsComment[];
  onNodeNavigate: (nodeId: string) => void;
  isAuthenticated?: boolean;
  currentDid?: string;
  onLikeComment?: (comment: BeadsComment) => Promise<void>;
  onDeleteComment?: (comment: BeadsComment) => Promise<void>;
  onReplyComment?: (parentComment: BeadsComment, text: string) => Promise<void>;
  onPostComment?: (nodeId: string, text: string) => Promise<void>;
  prefixes?: string[];
}

export default function AllCommentsPanel({
  isOpen,
  onClose,
  allComments,
  onNodeNavigate,
  isAuthenticated,
  currentDid,
  onLikeComment,
  onDeleteComment,
  onReplyComment,
  onPostComment,
  prefixes,
}: AllCommentsPanelProps) {
  // Reply state
  const [replyingToUri, setReplyingToUri] = useState<string | null>(null);
  const [replyText, setReplyText] = useState("");
  const [isSubmittingReply, setIsSubmittingReply] = useState(false);

  // Filter state
  const [filterInput, setFilterInput] = useState("");
  const [debouncedFilter, setDebouncedFilter] = useState("");

  // Helper to find a comment by URI (search recursively through replies)
  const findCommentByUri = (
    comments: BeadsComment[],
    uri: string
  ): BeadsComment | null => {
    for (const comment of comments) {
      if (comment.uri === uri) return comment;
      const found = findCommentByUri(comment.replies, uri);
      if (found) return found;
    }
    return null;
  };

  // Clear reply state if the comment being replied to is deleted
  useEffect(() => {
    if (replyingToUri) {
      const comment = findCommentByUri(allComments, replyingToUri);
      if (!comment) {
        setReplyingToUri(null);
        setReplyText('');
      }
    }
  }, [allComments, replyingToUri]);

  // Debounce filter input
  useEffect(() => {
    const timer = setTimeout(() => setDebouncedFilter(filterInput), 300);
    return () => clearTimeout(timer);
  }, [filterInput]);

  const handleSubmitReply = async () => {
    if (!replyText.trim() || !replyingToUri || !onReplyComment) return;
    const parentComment = findCommentByUri(allComments, replyingToUri);
    if (!parentComment) return;

    setIsSubmittingReply(true);
    try {
      await onReplyComment(parentComment, replyText.trim());
      setReplyingToUri(null);
      setReplyText("");
    } catch (err) {
      console.error("Failed to post reply:", err);
    } finally {
      setIsSubmittingReply(false);
    }
  };

  // Filter comments by glob pattern
  const filteredComments = useMemo(() => {
    if (!debouncedFilter.trim()) return allComments;
    const regex = globToRegex(debouncedFilter.trim());
    return allComments.filter(c => regex.test(c.nodeId));
  }, [allComments, debouncedFilter]);

  // Extract shared content to avoid duplication between desktop and mobile
  const filterBarContent = (
    <div className="shrink-0 px-5 py-2 border-b border-zinc-100 dark:border-zinc-800">
      <div className="relative">
        <input
          type="text"
          value={filterInput}
          onChange={(e) => setFilterInput(e.target.value)}
          placeholder="Filter by target (e.g. beads-map-*)"
          className="w-full pl-7 pr-7 py-1.5 text-xs border border-zinc-200 dark:border-zinc-700 rounded-md bg-zinc-50 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 placeholder-zinc-400 dark:placeholder-zinc-500 focus:outline-none focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500"
        />
        {/* Search icon */}
        <svg className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-zinc-400" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z" />
        </svg>
        {/* Clear button */}
        {filterInput && (
          <button
            onClick={() => setFilterInput("")}
            className="absolute right-2 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"
          >
            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        )}
      </div>
      {/* Quick filter chips */}
      {prefixes && prefixes.length > 1 && !filterInput && (
        <div className="flex flex-wrap gap-1 mt-1.5">
          {prefixes.map(p => (
            <button
              key={p}
              onClick={() => setFilterInput(p + '-*')}
              className="px-1.5 py-0.5 text-[10px] font-mono bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 rounded hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors"
            >
              {p}-*
            </button>
          ))}
        </div>
      )}
    </div>
  );

  const commentListContent = (
    <div className="space-y-0">
      {filteredComments.length === 0 && debouncedFilter ? (
        <div className="flex flex-col items-center justify-center py-12 text-center">
          <p className="text-xs text-zinc-400 dark:text-zinc-500">No comments matching &ldquo;{debouncedFilter}&rdquo;</p>
          <button onClick={() => setFilterInput("")} className="text-[10px] text-emerald-600 dark:text-emerald-400 hover:underline mt-1">
            Clear filter
          </button>
        </div>
      ) : filteredComments.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-12 text-center">
          <svg
            className="w-8 h-8 text-zinc-200 dark:text-zinc-700 mb-3"
            fill="none"
            viewBox="0 0 24 24"
            strokeWidth={1.5}
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 011.037-.443 48.282 48.282 0 005.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
            />
          </svg>
          <p className="text-xs text-zinc-400 dark:text-zinc-500">No comments yet</p>
          <p className="text-[10px] text-zinc-300 dark:text-zinc-600 mt-1">
            Right-click a node to leave a comment
          </p>
        </div>
      ) : (
        <>
          {/* Only show root comments (without replyTo) — replies are nested */}
          {filteredComments.filter(c => !c.replyTo).map((comment) => (
            <AllCommentCard
              key={comment.uri}
              comment={comment}
              currentDid={currentDid}
              isAuthenticated={isAuthenticated}
              onNodeNavigate={onNodeNavigate}
              onLike={onLikeComment}
              onDelete={onDeleteComment}
              onStartReply={(c) => setReplyingToUri(c.uri)}
              replyingToUri={replyingToUri}
              replyText={replyText}
              onReplyTextChange={setReplyText}
              onSubmitReply={handleSubmitReply}
              onCancelReply={() => {
                setReplyingToUri(null);
                setReplyText("");
              }}
              isSubmittingReply={isSubmittingReply}
              depth={0}
              prefixes={prefixes}
            />
          ))}
        </>
      )}
    </div>
  );

  const composeContent = (
    <div className="shrink-0 px-5 py-3 border-t border-zinc-100 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-800/50">
      {isAuthenticated ? (
        <GeneralCommentCompose
          prefixes={prefixes || []}
          onSubmit={onPostComment}
        />
      ) : (
        <div className="text-[10px] text-zinc-400 dark:text-zinc-500">
          Sign in to comment
        </div>
      )}
      <div className="text-[10px] text-zinc-400 dark:text-zinc-500 mt-2">
        {debouncedFilter ? (
          <>{filteredComments.length} of {allComments.length} comments matching &ldquo;{debouncedFilter}&rdquo;</>
        ) : (
          <>{allComments.length} comment{allComments.length !== 1 ? 's' : ''} across all issues</>
        )}
      </div>
    </div>
  );

  return (
    <>
      {/* Desktop: right sidebar */}
      <aside
        className={`hidden md:flex absolute top-0 right-0 h-full w-[360px] bg-white dark:bg-zinc-900 border-l border-zinc-200 dark:border-zinc-700 flex-col shadow-xl z-30 transform transition-transform duration-300 ease-out ${
          isOpen ? "translate-x-0" : "translate-x-full"
        }`}
      >
        {/* Header */}
        <div className="shrink-0 px-5 py-3 border-b border-zinc-100 dark:border-zinc-800 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <h2 className="text-xs font-semibold text-zinc-400 uppercase tracking-wider">
              All Comments
            </h2>
            {(debouncedFilter ? filteredComments.length : allComments.length) > 0 && (
              <span className="px-1.5 py-0.5 bg-emerald-50 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400 rounded-full text-[10px] font-medium">
                {debouncedFilter ? filteredComments.length : allComments.length}
              </span>
            )}
          </div>
          <button
            onClick={onClose}
            className="p-1 text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800"
          >
            <svg
              className="w-4 h-4"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              strokeWidth={1.5}
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>

        {/* Filter bar */}
        {filterBarContent}

        {/* Comment list */}
        <div className="flex-1 overflow-y-auto custom-scrollbar px-5 py-3">
          {commentListContent}
        </div>

        {/* Compose area */}
        {composeContent}
      </aside>

      {/* Mobile: bottom drawer */}
      <div
        className={`md:hidden fixed inset-x-0 bottom-0 transform transition-transform duration-300 ease-out z-20 ${
          isOpen ? "translate-y-0" : "translate-y-full"
        }`}
      >
        <div className="bg-white dark:bg-zinc-900 rounded-t-2xl shadow-2xl border-t border-zinc-200 dark:border-zinc-700 max-h-[70vh] flex flex-col">
          {/* Header with title + close button */}
          <div className="flex items-center justify-between px-5 py-3 border-b border-zinc-100 dark:border-zinc-800 shrink-0">
            <h2 className="text-xs font-semibold text-zinc-400 dark:text-zinc-400 uppercase tracking-wider">All Comments</h2>
            <button onClick={onClose} className="p-1 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>

          {/* Filter bar */}
          {filterBarContent}

          {/* Scrollable content: same comment list as desktop */}
          <div className="flex-1 overflow-y-auto custom-scrollbar px-5 py-3">
            {commentListContent}
          </div>

          {/* Compose area (same as desktop) */}
          {composeContent}
        </div>
      </div>
    </>
  );
}



// ============================================================================
// AllCommentCard — individual comment in the all-comments feed
// ============================================================================

function AllCommentCard({
  comment,
  currentDid,
  isAuthenticated,
  onNodeNavigate,
  onLike,
  onDelete,
  onStartReply,
  replyingToUri,
  replyText,
  onReplyTextChange,
  onSubmitReply,
  onCancelReply,
  isSubmittingReply,
  depth,
  prefixes,
}: {
  comment: BeadsComment;
  currentDid?: string;
  isAuthenticated?: boolean;
  onNodeNavigate: (nodeId: string) => void;
  onLike?: (comment: BeadsComment) => Promise<void>;
  onDelete?: (comment: BeadsComment) => Promise<void>;
  onStartReply: (comment: BeadsComment) => void;
  replyingToUri: string | null;
  replyText: string;
  onReplyTextChange: (text: string) => void;
  onSubmitReply: () => Promise<void>;
  onCancelReply: () => void;
  isSubmittingReply: boolean;
  depth: number;
  prefixes?: string[];
}) {
  const [liking, setLiking] = useState(false);
  const [deleting, setDeleting] = useState(false);
  const isOwn = currentDid && currentDid === comment.did;
  const hasLiked = currentDid
    ? comment.likes.some((l) => l.did === currentDid)
    : false;
  const isReplyingToThis = replyingToUri === comment.uri;

  const handleLike = async () => {
    if (!onLike || liking) return;
    setLiking(true);
    try {
      await onLike(comment);
    } catch (err) {
      console.error("Failed to toggle like:", err);
    } finally {
      setLiking(false);
    }
  };

  const handleDelete = async () => {
    if (!onDelete || deleting) return;
    setDeleting(true);
    try {
      await onDelete(comment);
    } catch (err) {
      console.error("Failed to delete comment:", err);
    } finally {
      setDeleting(false);
    }
  };

  return (
    <div className={`${depth > 0 ? "ml-4 pl-3 border-l border-zinc-100 dark:border-zinc-800" : ""}`}>
      <div className={`py-3 ${depth === 0 ? "border-b border-zinc-50 dark:border-zinc-800" : ""}`}>
        {/* Node target pill — only show for root comments */}
        {depth === 0 && (() => {
          const isPrefixComment = prefixes?.includes(comment.nodeId);
          return isPrefixComment ? (
            <span className="inline-flex items-center px-1.5 py-0.5 mb-1.5 rounded text-[10px] font-mono bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400">
              📢 {comment.nodeId}
            </span>
          ) : (
            <button
              onClick={() => onNodeNavigate(comment.nodeId)}
              className="inline-flex items-center px-1.5 py-0.5 mb-1.5 rounded text-[10px] font-mono bg-emerald-50 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400 hover:bg-emerald-100 dark:hover:bg-emerald-900 transition-colors"
            >
              {comment.nodeId}
            </button>
          );
        })()}

        {/* Author + time */}
        <div className="flex items-center gap-1.5 mb-1">
          <div className="shrink-0 w-4 h-4 rounded-full bg-zinc-100 dark:bg-zinc-800 overflow-hidden">
            {comment.avatar ? (
              <img
                src={comment.avatar}
                alt=""
                className="w-full h-full object-cover"
              />
            ) : (
              <div className="w-full h-full flex items-center justify-center text-[8px] font-medium text-zinc-400 dark:text-zinc-500">
                {(comment.handle || comment.did).charAt(0).toUpperCase()}
              </div>
            )}
          </div>
          <a
            href={`https://www.impactindexer.org/data?did=${comment.did}`}
            target="_blank"
            rel="noopener noreferrer"
            className="text-xs font-medium text-zinc-600 dark:text-zinc-400 truncate hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors"
          >
            {comment.displayName ||
              comment.handle ||
              comment.did.slice(0, 16) + "..."}
          </a>
          <span className="text-[10px] text-zinc-300 dark:text-zinc-600 shrink-0">
            {formatRelativeTime(comment.createdAt)}
          </span>
        </div>

        {/* Comment text */}
        <p className="text-xs text-zinc-500 dark:text-zinc-400 leading-relaxed whitespace-pre-wrap break-words">
          {comment.text}
        </p>

        {/* Actions */}
        <div className="flex items-center gap-2 mt-1 text-[10px]">
          {/* Like */}
          <button
            onClick={handleLike}
            disabled={!isAuthenticated || liking}
            className={`flex items-center gap-0.5 transition-colors ${
              hasLiked
                ? "text-rose-500"
                : "text-zinc-300 dark:text-zinc-600 hover:text-rose-500"
            } disabled:opacity-50`}
          >
            <HeartIcon className="w-3 h-3" filled={hasLiked} />
            {comment.likes.length > 0 && <span>{comment.likes.length}</span>}
          </button>

          {/* Reply button */}
          <button
            onClick={() => onStartReply(comment)}
            disabled={!isAuthenticated}
            className={`transition-colors disabled:opacity-50 ${
              isReplyingToThis
                ? "text-emerald-500 dark:text-emerald-400"
                : "text-zinc-300 dark:text-zinc-600 hover:text-zinc-500 dark:hover:text-zinc-400"
            }`}
          >
            reply
          </button>

          {/* Delete — own only */}
          {isOwn && onDelete && (
            <button
              onClick={handleDelete}
              disabled={deleting}
              className="ml-auto text-zinc-300 dark:text-zinc-600 hover:text-red-400 disabled:opacity-50 transition-colors"
            >
              {deleting ? "..." : "delete"}
            </button>
          )}
        </div>
      </div>

      {/* Inline reply form */}
      {isReplyingToThis && (
        <InlineReplyForm
          replyingTo={comment}
          replyText={replyText}
          onTextChange={onReplyTextChange}
          onSubmit={onSubmitReply}
          onCancel={onCancelReply}
          isSubmitting={isSubmittingReply}
        />
      )}

      {/* Nested replies */}
      {comment.replies.length > 0 && (
        <div>
          {comment.replies.map((reply) => (
            <AllCommentCard
              key={reply.uri}
              comment={reply}
              currentDid={currentDid}
              isAuthenticated={isAuthenticated}
              onNodeNavigate={onNodeNavigate}
              onLike={onLike}
              onDelete={onDelete}
              onStartReply={onStartReply}
              replyingToUri={replyingToUri}
              replyText={replyText}
              onReplyTextChange={onReplyTextChange}
              onSubmitReply={onSubmitReply}
              onCancelReply={onCancelReply}
              isSubmittingReply={isSubmittingReply}
              depth={depth + 1}
              prefixes={prefixes}
            />
          ))}
        </div>
      )}
    </div>
  );
}

// ============================================================================
// InlineReplyForm — same pattern as NodeDetail
// ============================================================================

function InlineReplyForm({
  replyingTo,
  replyText,
  onTextChange,
  onSubmit,
  onCancel,
  isSubmitting,
}: {
  replyingTo: BeadsComment;
  replyText: string;
  onTextChange: (text: string) => void;
  onSubmit: () => void;
  onCancel: () => void;
  isSubmitting: boolean;
}) {
  return (
    <div className="mt-2 ml-4 pl-3 border-l border-emerald-200 space-y-1.5">
      <div className="flex items-center gap-1.5 text-[10px] text-zinc-400 dark:text-zinc-500">
        <span>Replying to</span>
        <a
          href={`https://www.impactindexer.org/data?did=${replyingTo.did}`}
          target="_blank"
          rel="noopener noreferrer"
          className="font-medium text-zinc-600 dark:text-zinc-400 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors"
        >
          {replyingTo.displayName || replyingTo.handle}
        </a>
      </div>
      <div className="flex gap-2">
        <input
          type="text"
          value={replyText}
          onChange={(e) => onTextChange(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter" && !e.shiftKey) onSubmit();
          }}
          placeholder="Write a reply..."
          disabled={isSubmitting}
          autoFocus
          className="flex-1 px-2 py-1 text-xs bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 rounded placeholder-zinc-400 dark:placeholder-zinc-500 focus:outline-none focus:border-emerald-400 disabled:opacity-50"
        />
        <button
          onClick={onSubmit}
          disabled={!replyText.trim() || isSubmitting}
          className="px-2 py-1 text-[10px] font-medium text-emerald-600 dark:text-emerald-400 hover:text-emerald-700 dark:hover:text-emerald-300 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          {isSubmitting ? "..." : "Reply"}
        </button>
        <button
          onClick={onCancel}
          disabled={isSubmitting}
          className="px-2 py-1 text-[10px] text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300 disabled:opacity-50 transition-colors"
        >
          Cancel
        </button>
      </div>
    </div>
  );
}

// ============================================================================
// GeneralCommentCompose — compose form at bottom of panel
// ============================================================================

function GeneralCommentCompose({
  prefixes,
  onSubmit,
}: {
  prefixes: string[];
  onSubmit?: (subjectId: string, text: string) => Promise<void>;
}) {
  const [text, setText] = useState("");
  const [selectedPrefix, setSelectedPrefix] = useState(prefixes[0] || "");
  const [sending, setSending] = useState(false);

  // Auto-select if only one prefix
  useEffect(() => {
    if (prefixes.length === 1) setSelectedPrefix(prefixes[0]);
  }, [prefixes]);

  const handleSubmit = async () => {
    if (!text.trim() || !selectedPrefix || !onSubmit) return;
    
    setSending(true);
    try {
      await onSubmit(`${selectedPrefix}-general`, text.trim());
      setText("");
    } catch (err) {
      console.error("Failed to post comment:", err);
    } finally {
      setSending(false);
    }
  };

  return (
    <div>
      {/* Prefix selector — hidden if only 1 prefix */}
      {prefixes.length > 1 && (
        <select
          value={selectedPrefix}
          onChange={(e) => setSelectedPrefix(e.target.value)}
          className="w-full mb-2 px-2 py-1.5 text-xs border border-zinc-200 dark:border-zinc-700 rounded-md bg-white dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300"
        >
          {prefixes.map(p => (
            <option key={p} value={p}>{p}</option>
          ))}
        </select>
      )}
      <textarea
        value={text}
        onChange={(e) => setText(e.target.value)}
        onKeyDown={(e) => {
          if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
            e.preventDefault();
            handleSubmit();
          }
        }}
        placeholder="Write a comment..."
        rows={2}
        className="w-full px-2.5 py-2 text-xs border border-zinc-200 dark:border-zinc-700 rounded-md bg-white dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 placeholder-zinc-400 dark:placeholder-zinc-500 resize-none focus:outline-none focus:ring-1 focus:ring-emerald-500"
      />
      <div className="flex items-center justify-between mt-1.5">
        <span className="text-[10px] text-zinc-300 dark:text-zinc-600">
          {typeof navigator !== "undefined" && navigator.platform?.includes("Mac") ? "⌘" : "Ctrl"}+Enter to send
          {prefixes.length <= 1 && selectedPrefix && (
            <> · posting to <span className="font-medium text-zinc-400">{selectedPrefix}</span></>
          )}
        </span>
        <button
          onClick={handleSubmit}
          disabled={!text.trim() || !selectedPrefix || sending}
          className="px-3 py-1 text-[11px] font-medium text-white bg-emerald-500 rounded-md hover:bg-emerald-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          {sending ? "Sending..." : "Send"}
        </button>
      </div>
    </div>
  );
}