"use client";

import { ArrowLeft, MessageSquare, MessagesSquare } from "lucide-react";
import { Card } from "@/components/ui/card";
import { getMessageChannelLabel, renderMessageContent } from "@/lib/format";
import type { AttachmentRecord, MessageRecord } from "@/lib/types";
import { cn } from "@/lib/utils";
import { AiAnalysisPanel } from "./ai-analysis-panel";
import { AttachmentsGrid } from "./attachments-grid";

interface MessageDetailProps {
  message: MessageRecord;
  attachments?: AttachmentRecord[];
  onBack?: () => void;
}

export function MessageDetail({
  message,
  attachments,
  onBack,
}: MessageDetailProps) {
  return (
    <Card
      className={cn("h-full", "[--card-spacing:0px]", "rounded-2xl", "p-5")}
    >
      {onBack && (
        <button
          type="button"
          onClick={onBack}
          className="flex items-center gap-1 text-xs text-text-secondary/60 hover:text-text-primary mb-3 transition-colors"
        >
          <ArrowLeft className="size-3" /> Back
        </button>
      )}

      {/* Message header */}
      <div className="flex items-center gap-2 mb-3">
        <MessageSquare className="size-4 text-primary" />
        <span className="font-semibold text-sm text-text-primary">
          {message.username}
        </span>
        <span className="text-[10px] text-text-secondary/40 font-mono inline-flex items-center gap-1">
          {message.thread_id && <MessagesSquare className="size-3" />}
          {getMessageChannelLabel(message)}
        </span>
      </div>

      {/* Content */}
      <div className="text-sm text-text-primary/90 leading-relaxed mb-4 whitespace-pre-wrap">
        {renderMessageContent(
          message.edited_content ?? message.content,
          message.metadata,
        ) || "(no text content)"}
      </div>

      {/* Attachments */}
      {attachments && attachments.length > 0 && (
        <div className="mb-4">
          <AttachmentsGrid attachments={attachments} />
        </div>
      )}

      {/* AI Analysis */}
      <AiAnalysisPanel
        status={message.ai_status}
        severity={message.ai_severity}
        confidence={message.ai_confidence}
        flags={message.ai_moderation_flags}
        categories={message.ai_categories}
        action={message.ai_recommended_action}
        score={message.ai_moderation_score}
        analysis={message.ai_analysis}
      />
    </Card>
  );
}