import { ArrowLeft } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { getHandoffConversation } from "../api";

function HandoffMessageBody({ message }) {
  const [showQuoted, setShowQuoted] = useState(false);
  const displayText = message.new_reply_content || message.body_text || message.snippet;

  return (
    <>
      <div className="handoff-message-body">{displayText}</div>
      {message.has_quoted_text && message.raw_body && (
        <button
          type="button"
          className="handoff-show-quoted"
          onClick={() => setShowQuoted((current) => !current)}
        >
          {showQuoted ? "Hide quoted text" : "Show quoted text"}
        </button>
      )}
      {showQuoted && message.raw_body && (
        <pre className="handoff-quoted-body">{message.raw_body}</pre>
      )}
    </>
  );
}

function formatTime(dateValue) {
  if (!dateValue) return "";
  return new Date(dateValue).toLocaleString(undefined, {
    hour: "numeric",
    minute: "2-digit",
  });
}

export default function HandoffConversation({ handoffId, onBack }) {
  const token = sessionStorage.getItem("agmail_access_token");
  const [conversation, setConversation] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  const load = useCallback(async () => {
    setLoading(true);
    setError("");
    try {
      const data = await getHandoffConversation(handoffId, token);
      setConversation(data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }, [handoffId, token]);

  useEffect(() => {
    load();
  }, [load]);

  if (loading) {
    return <p className="people-table-empty">Loading conversation…</p>;
  }
  if (error) {
    return <p className="form-error" role="alert">{error}</p>;
  }
  if (!conversation) return null;

  return (
    <div className="handoff-conversation">
      <button type="button" className="handoff-back-btn" onClick={onBack}>
        <ArrowLeft size={16} strokeWidth={1.75} /> Back to Handoffs
      </button>

      <header className="handoff-conversation-head">
        <h2>{conversation.external_subject || "(No subject)"}</h2>
        <div className="handoff-linked-external">
          <span>Linked conversation:</span>
          <strong>{conversation.linked_external.sender}</strong>
          <em>&ldquo;{conversation.linked_external.subject}&rdquo;</em>
        </div>
      </header>

      <div className="handoff-message-list">
        {conversation.messages.map((message) => (
          <article key={message.id} className={`handoff-message handoff-message-${message.role}`}>
            <header>
              <strong>{message.role === "human" ? "HUMAN OWNER" : "AGENT"}</strong>
              <time>{formatTime(message.event_at)}</time>
            </header>
            <HandoffMessageBody message={message} />
          </article>
        ))}
      </div>
    </div>
  );
}