"use client";

import clsx from "clsx";
import { Badge } from "@/components/ui/kit";
import { formatDateTime } from "@/lib/format";

export interface Ticket {
  id: number;
  number: string;
  subject: string;
  category: string;
  priority: "low" | "normal" | "high" | "urgent";
  status: "open" | "pending" | "resolved" | "closed";
  organization?: { id: number; name: string };
  created_by_name: string | null;
  assigned_to: { id: number; name: string | null } | null;
  last_message_at: string;
  last_message_side: "customer" | "support";
  resolved_at: string | null;
  created_at: string;
}
export interface TicketMessage {
  id: number;
  side: "customer" | "support";
  internal: boolean;
  body: string;
  author_name: string | null;
  created_at: string;
}

export const CATEGORY_LABEL: Record<string, string> = { billing: "Billing", whatsapp: "WhatsApp numbers and templates", campaigns: "Campaigns", bots: "Bots and flows", api: "API and webhooks", account: "Account and team", other: "Something else" };

/** Status wording depends on who is reading: "pending" means waiting for the customer. */
export function TicketStatus({ status, side }: { status: Ticket["status"]; side: "customer" | "support" }) {
  const map = {
    open: { customer: "Waiting for support", support: "Needs reply", tone: "amber" as const },
    pending: { customer: "Waiting for you", support: "Waiting for customer", tone: "teal" as const },
    resolved: { customer: "Resolved", support: "Resolved", tone: "neutral" as const },
    closed: { customer: "Closed", support: "Closed", tone: "neutral" as const },
  }[status];
  return <Badge tone={map.tone}>{map[side]}</Badge>;
}

export function PriorityBadge({ priority }: { priority: Ticket["priority"] }) {
  if (priority === "normal" || priority === "low") return <span className="text-[13px] capitalize text-muted">{priority}</span>;
  return <Badge tone={priority === "urgent" ? "brick" : "amber"}>{priority === "urgent" ? "Urgent" : "High"}</Badge>;
}

export function Thread({ messages, viewer }: { messages: TicketMessage[]; viewer: "customer" | "support" }) {
  return (
    <ol className="space-y-3">
      {messages.map((m) => {
        const mine = m.side === viewer;
        return (
          <li key={m.id} className={clsx("flex", mine ? "justify-end" : "justify-start")}>
            <div className={clsx("max-w-[85%] rounded-xl border px-4 py-3 text-sm", m.internal ? "border-amber/40 bg-amber-soft" : mine ? "border-teal/20 bg-teal-soft" : "border-line bg-white")}>
              <p className="mb-1 text-[13px] text-muted">
                <span className="font-medium text-text">{m.author_name ?? (m.side === "support" ? "Devwebs support" : "Customer")}</span>
                {m.internal ? ", internal note" : ""}, {formatDateTime(m.created_at)}
              </p>
              <p className="whitespace-pre-wrap break-words">{m.body}</p>
            </div>
          </li>
        );
      })}
    </ol>
  );
}