"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,
}: {
  entityId: string;
  messages: OrderChatMessage[];
  viewerId: string;
  sendAction: (entityId: string, text: string) => void | Promise<void>;
  labels: { title: string; placeholder: string; send: string; empty: string };
}) {
  const [pending, startTransition] = useTransition();
  const [text, setText] = useState("");

  return (
    <div className="flex flex-col h-full">
      <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] mb-3">{labels.title}</p>

      <div className="flex-1 flex flex-col gap-3 overflow-y-auto min-h-[10rem] max-h-[26rem] pr-1">
        {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>

      <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>
  );
}