"use client";

import { useState, useTransition } from "react";
import { formatDateTimeDE } from "@/lib/orderConstants";

export type OrderChatMessage = {
  id: string;
  senderId: string;
  text: string;
  createdAt: string;
  senderName: string;
  senderAvatarPath: string;
  senderTitle: string;
};

function Avatar({ name, avatarPath, senderId }: { name: string; avatarPath: string; senderId: string }) {
  if (avatarPath) {
    return (
      // eslint-disable-next-line @next/next/no-img-element
      <img
        src={`/api/avatars/${senderId}/${avatarPath}`}
        alt=""
        className="w-8 h-8 rounded-full object-cover border border-white/15 shrink-0"
      />
    );
  }
  return (
    <div className="w-8 h-8 rounded-full border border-white/15 bg-white/5 flex items-center justify-center text-xs text-[var(--rk-ink-muted)] shrink-0">
      {name?.[0]?.toUpperCase() ?? "?"}
    </div>
  );
}

// Generisch trotz des Namens "OrderChat" (historisch, zuerst für Aufträge
// gebaut) — entityId ist z. B. eine Order- oder eine WaitlistEntry-ID, ganz
// wie sendAction es erwartet, siehe Wiederverwendung für die Warteliste.
export function OrderChat({
  entityId,
  messages,
  viewerId,
  sendAction,
  labels,
  maxHeightRem,
  readOnly,
}: {
  entityId: string;
  messages: OrderChatMessage[];
  viewerId: string;
  sendAction?: (entityId: string, text: string) => void | Promise<void>;
  // live: kleiner blinkender Punkt neben dem Titel (Nutzer-Wunsch, 26.09.2026,
  // nur für den Auftrags-Chat) — optional statt fest eingebaut, damit die
  // Warteliste-Wiederverwendung dieser Komponente unverändert bleibt.
  labels: { title: string; placeholder: string; send: string; empty: string; live?: boolean };
  // Optional etwas höhere Nachrichtenliste (Nutzer-Wunsch, 26.09.2026: "etwas
  // höher, aber nicht zu lang") — Standard (26rem) bleibt für die
  // Warteliste-Wiederverwendung unverändert.
  maxHeightRem?: number;
  // Nur Verlauf anzeigen, kein Eingabefeld — der Auftrags-Chat wurde zum
  // reinen Archiv (Nutzer-Wunsch, 01.10.2026: Kommunikation läuft jetzt über
  // E-Mail, siehe EmailOrderButton). Warteliste bleibt interaktiv (Default
  // false).
  readOnly?: boolean;
}) {
  const [pending, startTransition] = useTransition();
  const [text, setText] = useState("");

  return (
    <div className="flex flex-col h-full">
      <p className="flex items-center gap-1.5 text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] mb-3">
        {labels.title}
        {labels.live && <span className="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse" aria-hidden="true" />}
      </p>

      <div
        className="flex-1 flex flex-col gap-3 overflow-y-auto min-h-[10rem] pr-1"
        style={{ maxHeight: `${maxHeightRem ?? 26}rem` }}
      >
        {messages.length === 0 ? (
          <p className="text-xs text-[var(--rk-ink-muted)]">{labels.empty}</p>
        ) : (
          messages.map((m) => {
            const isOwn = m.senderId === viewerId;
            return (
              <div key={m.id} className={`flex gap-2 ${isOwn ? "flex-row-reverse text-right" : ""}`}>
                <Avatar name={m.senderName} avatarPath={m.senderAvatarPath} senderId={m.senderId} />
                <div className={`flex flex-col max-w-[80%] ${isOwn ? "items-end" : "items-start"}`}>
                  <div className="flex items-center gap-1 text-[0.65rem] text-[var(--rk-ink-muted)] mb-0.5">
                    <span>{m.senderName}</span>
                    {m.senderTitle && <span className="opacity-70">· {m.senderTitle}</span>}
                  </div>
                  <div
                    className={`rounded-2xl px-3 py-2 text-sm ${
                      isOwn ? "bg-white text-black rounded-tr-sm" : "bg-white/10 text-[var(--rk-ink)] rounded-tl-sm"
                    }`}
                  >
                    {m.text}
                  </div>
                  <span className="text-[0.6rem] text-[var(--rk-ink-muted)] opacity-60 mt-0.5">
                    {formatDateTimeDE(new Date(m.createdAt))}
                  </span>
                </div>
              </div>
            );
          })
        )}
      </div>

      {!readOnly && sendAction && (
        <form
          onSubmit={(e) => {
            e.preventDefault();
            if (!text.trim()) return;
            startTransition(() => {
              sendAction(entityId, text);
              setText("");
            });
          }}
          className="flex gap-2 mt-3 pt-3 border-t border-white/10"
        >
          <input
            type="text"
            value={text}
            onChange={(e) => setText(e.target.value)}
            placeholder={labels.placeholder}
            className="flex-1 bg-transparent border border-white/15 rounded-lg px-3 py-2 text-xs focus:outline-none focus:border-white/50"
          />
          <button
            type="submit"
            disabled={pending}
            className="text-xs border border-white/30 rounded-lg px-3 py-2 hover:border-white disabled:opacity-50"
          >
            {labels.send}
          </button>
        </form>
      )}
    </div>
  );
}