"use client";

import { Bot, Check, Copy, ThumbsDown, ThumbsUp, UserRound } from "lucide-react";
import type { ChatMessage } from "@/lib/h5MockQa";

export default function ChatBubble({
  message,
  onCopy,
  onFeedback
}: {
  message: ChatMessage;
  onCopy?: (message: ChatMessage) => void;
  onFeedback?: (messageId: string, feedback: "liked" | "disliked") => void;
}) {
  const isUser = message.role === "user";

  return (
    <div className={`flex gap-2 ${isUser ? "justify-end" : "justify-start"}`}>
      {!isUser ? (
        <div className="mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-jade text-white">
          <Bot className="h-4 w-4" aria-hidden />
        </div>
      ) : null}
      <div className={`max-w-[82%] ${isUser ? "items-end" : "items-start"}`}>
        <div
          className={`rounded-[14px] px-4 py-3 text-[15px] leading-7 shadow-sm ${
            isUser ? "rounded-tr-md bg-jade text-white" : "rounded-tl-md border border-line bg-white text-ink"
          }`}
        >
          <div className="whitespace-pre-wrap">{message.content}</div>
          {message.source ? (
            <div className={`mt-3 border-t pt-2 text-xs ${isUser ? "border-white/25 text-teal-50" : "border-line text-slate-500"}`}>
              来源：{message.source}
            </div>
          ) : null}
          {message.boundary ? (
            <div className="mt-3 rounded-md bg-amber-50 px-3 py-2 text-xs leading-5 text-amber-800">{message.boundary}</div>
          ) : null}
        </div>
        <div className={`mt-1 flex items-center gap-2 text-xs text-slate-400 ${isUser ? "justify-end" : "justify-start"}`}>
          <span>{message.createdAt}</span>
          {!isUser ? (
            <span className="flex items-center gap-1">
              <button
                onClick={() => onCopy?.(message)}
                className="flex h-7 w-7 items-center justify-center rounded-md hover:bg-slate-100 hover:text-jade"
                aria-label="复制回答"
              >
                <Copy className="h-3.5 w-3.5" aria-hidden />
              </button>
              <button
                onClick={() => onFeedback?.(message.id, "liked")}
                className={`flex h-7 w-7 items-center justify-center rounded-md hover:bg-teal-50 hover:text-jade ${
                  message.feedback === "liked" ? "bg-teal-50 text-jade" : ""
                }`}
                aria-label="回答有帮助"
              >
                {message.feedback === "liked" ? <Check className="h-3.5 w-3.5" aria-hidden /> : <ThumbsUp className="h-3.5 w-3.5" aria-hidden />}
              </button>
              <button
                onClick={() => onFeedback?.(message.id, "disliked")}
                className={`flex h-7 w-7 items-center justify-center rounded-md hover:bg-rose-50 hover:text-rose-600 ${
                  message.feedback === "disliked" ? "bg-rose-50 text-rose-600" : ""
                }`}
                aria-label="回答没解决"
              >
                <ThumbsDown className="h-3.5 w-3.5" aria-hidden />
              </button>
            </span>
          ) : null}
        </div>
      </div>
      {isUser ? (
        <div className="mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-slate-200 text-slate-600">
          <UserRound className="h-4 w-4" aria-hidden />
        </div>
      ) : null}
    </div>
  );
}