import { useEffect, useRef, useState } from "react";

import { Message } from "../api/games";
import { AwaitingRoll } from "../hooks/useGameSocket";
import MarkdownContent from "./MarkdownContent";

const DICE_FACES = ["⚀", "⚁", "⚂", "⚃", "⚄", "⚅"];

function senderLabel(message: Message): string {
  if (message.sender_type === "dm") return "Dungeon Master";
  if (message.sender_type === "system") return "System";
  if (message.character_name) return `${message.player_name} (${message.character_name})`;
  return message.player_name ?? "Spieler";
}

function DiceRollAnimation({ notation }: { notation: string }) {
  const [faceIndex, setFaceIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setFaceIndex((i) => (i + 1) % DICE_FACES.length);
    }, 120);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="text-slate-100">
      <span className="font-semibold text-amber-400">Dungeon Master würfelt</span>{" "}
      <span className="inline-block text-xl" aria-hidden="true">
        {DICE_FACES[faceIndex]}
      </span>{" "}
      <span className="text-sm text-slate-400">{notation && `(${notation})`}</span>
    </div>
  );
}

export default function TranscriptPane({
  messages,
  typing,
  rolling,
  awaitingRoll,
}: {
  messages: Message[];
  typing?: boolean;
  rolling?: string | null;
  awaitingRoll?: AwaitingRoll | null;
}) {
  const bottomRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ block: "end" });
  }, [messages, typing, rolling, awaitingRoll]);

  return (
    <div className="flex h-full flex-col gap-3 overflow-y-auto p-4">
      {messages.map((m) => (
        <div key={m.id} className={m.sender_type === "system" ? "text-red-400 italic" : m.sender_type === "dm" ? "text-slate-100" : "text-slate-300"}>
          <span
            className={
              m.sender_type === "dm"
                ? "font-semibold text-amber-400"
                : m.sender_type === "system"
                  ? "font-semibold text-red-400"
                  : "font-semibold text-sky-400"
            }
          >
            {senderLabel(m)}:
          </span>
          <MarkdownContent content={m.content} />
        </div>
      ))}
      {awaitingRoll ? (
        <div className="rounded-lg border border-amber-500/50 bg-amber-500/10 px-4 py-3">
          <span className="font-semibold text-amber-400">🎲 Du bist am Zug — würfle:</span>{" "}
          <span className="font-mono text-slate-100">{awaitingRoll.notation}</span>
          {awaitingRoll.reason && <span className="text-sm text-slate-400"> ({awaitingRoll.reason})</span>}
          <p className="mt-1 text-xs text-slate-500">
            Wirf deinen Würfel und schreib das Ergebnis als Nachricht.
          </p>
        </div>
      ) : rolling != null ? (
        <DiceRollAnimation notation={rolling} />
      ) : (
        typing && (
          <div className="text-slate-100">
            <span className="animate-pulse font-semibold text-amber-400">Dungeon Master schreibt …</span>
          </div>
        )
      )}
      <div ref={bottomRef} />
    </div>
  );
}