"use client";

import Link from "next/link";
import { useLocale } from "@/components/providers/locale-provider";
import { EmailMessageBody } from "@/components/inbox/email-message-body";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

export type ConversationMessage = {
  _id: string;
  fromEmail: string;
  toEmail?: string;
  subject?: string;
  receivedAt: string;
  status: string;
  bodyText?: string;
  bodyHtml?: string;
  direction?: "inbound" | "outbound";
};

export function InboxConversationTimeline({
  messages,
  activeId,
}: {
  messages: ConversationMessage[];
  activeId: string;
}) {
  const { locale } = useLocale();
  const isAr = locale === "ar";

  if (!messages.length) return null;

  return (
    <section className="space-y-4">
      <h2 className="text-base font-semibold">
        {isAr ? "سجل المحادثة" : "Conversation timeline"}
      </h2>
      <div className="space-y-4 border-s-2 border-border ps-4">
        {messages.map((msg) => {
          const isActive = msg._id === activeId;
          const isOutbound = msg.direction === "outbound";
          return (
            <div
              key={msg._id}
              className={cn(
                "relative rounded-xl border p-3",
                isActive ? "border-primary/40 bg-primary/5" : "border-border bg-muted/20"
              )}
            >
              <div className="mb-2 flex flex-wrap items-center gap-2 text-xs">
                <Badge variant={isOutbound ? "secondary" : "secondary"}>
                  {isOutbound
                    ? isAr
                      ? "صادر"
                      : "Sent"
                    : isAr
                      ? "وارد"
                      : "Received"}
                </Badge>
                <Badge variant="secondary">{msg.status}</Badge>
                <span className="text-muted-foreground" dir="ltr">
                  {msg.fromEmail}
                </span>
                <span className="text-muted-foreground">
                  {new Date(msg.receivedAt).toLocaleString(
                    isAr ? "ar-SA" : "en-US"
                  )}
                </span>
                {!isActive ? (
                  <Link href={`/inbox/${msg._id}`} className="text-primary hover:underline">
                    {isAr ? "فتح" : "Open"}
                  </Link>
                ) : (
                  <span className="font-medium text-primary">
                    {isAr ? "الرسالة الحالية" : "Current"}
                  </span>
                )}
              </div>
              {msg.subject ? (
                <p className="mb-2 text-sm font-medium">{msg.subject}</p>
              ) : null}
              {isActive ? (
                <EmailMessageBody bodyHtml={msg.bodyHtml} bodyText={msg.bodyText} />
              ) : (
                <p className="line-clamp-3 text-sm text-muted-foreground">
                  {msg.bodyText?.slice(0, 200) ?? "—"}
                </p>
              )}
            </div>
          );
        })}
      </div>
    </section>
  );
}