kanban/frontend/src/components/CardChatPanel.tsx

import {
  ActionIcon,
  Avatar,
  Box,
  Group,
  Loader,
  Paper,
  ScrollArea,
  Stack,
  Text,
  Textarea,
  Tooltip,
} from "@mantine/core";
import { IconSend, IconTrash } from "@tabler/icons-react";
import { notifications } from "@mantine/notifications";
import { KeyboardEvent, useCallback, useEffect, useRef, useState } from "react";
import * as api from "../api";
import type { CardMessage, User } from "../types";
import { tagColor } from "./colors";
import { formatDateTimeShort } from "./format";

interface Props {
  cardId: string;
  users: User[];
  currentUserId?: string;
  onMessagesChange?: (messages: CardMessage[]) => void;
}

export function CardChatPanel({ cardId, users, currentUserId, onMessagesChange }: Props) {
  const [messages, setMessages] = useState<CardMessage[]>([]);
  const [loading, setLoading] = useState(true);
  const [body, setBody] = useState("");
  const [sending, setSending] = useState(false);
  const viewportRef = useRef<HTMLDivElement | null>(null);

  const usersById = new Map(users.map((u) => [u.id, u]));

  const reload = useCallback(async () => {
    try {
      const ms = await api.listCardMessages(cardId);
      setMessages(ms);
      onMessagesChange?.(ms);
    } catch (e) {
      notifications.show({ color: "red", message: (e as Error).message });
    } finally {
      setLoading(false);
    }
  }, [cardId, onMessagesChange]);

  useEffect(() => {
    reload();
  }, [reload]);

  useEffect(() => {
    if (viewportRef.current) {
      viewportRef.current.scrollTo({ top: viewportRef.current.scrollHeight, behavior: "smooth" });
    }
  }, [messages.length]);

  const send = async () => {
    const text = body.trim();
    if (!text || sending) return;
    setSending(true);
    try {
      const m = await api.createCardMessage(cardId, text);
      const next = [...messages, m];
      setMessages(next);
      onMessagesChange?.(next);
      setBody("");
    } catch (e) {
      notifications.show({ color: "red", message: (e as Error).message });
    } finally {
      setSending(false);
    }
  };

  const remove = async (mid: string) => {
    try {
      await api.deleteCardMessage(cardId, mid);
      const next = messages.filter((m) => m.id !== mid);
      setMessages(next);
      onMessagesChange?.(next);
    } catch (e) {
      notifications.show({ color: "red", message: (e as Error).message });
    }
  };

  const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      send();
    }
  };

  return (
    <Stack gap="xs" style={{ height: "100%", minHeight: 0 }}>
      <ScrollArea
        viewportRef={viewportRef}
        style={{ flex: 1, minHeight: 200 }}
        type="auto"
        offsetScrollbars
      >
        {loading ? (
          <Group justify="center" p="md"><Loader size="sm" /></Group>
        ) : messages.length === 0 ? (
          <Text size="sm" c="dimmed" ta="center" p="md">
            Sin mensajes aun. Escribe el primero.
          </Text>
        ) : (
          <Stack gap={6} p={4}>
            {messages.map((m) => {
              const author = m.author_id ? usersById.get(m.author_id) : null;
              const isMe = m.author_id && m.author_id === currentUserId;
              const label = author ? author.display_name || author.username : "Anonimo";
              return (
                <Paper
                  key={m.id}
                  withBorder
                  p="xs"
                  radius="sm"
                  bg={isMe ? "var(--mantine-color-blue-light)" : undefined}
                >
                  <Group gap={6} wrap="nowrap" align="flex-start">
                    <Avatar size={22} radius="xl" color={author?.color || tagColor(label)}>
                      {label.slice(0, 2).toUpperCase()}
                    </Avatar>
                    <Box style={{ flex: 1, minWidth: 0 }}>
                      <Group gap={6} wrap="nowrap" justify="space-between">
                        <Group gap={6} wrap="nowrap">
                          <Text size="xs" fw={600}>{label}</Text>
                          <Text size="xs" c="dimmed">{formatDateTimeShort(m.created_at)}</Text>
                        </Group>
                        {isMe && (
                          <Tooltip label="Borrar" withArrow>
                            <ActionIcon size="xs" variant="subtle" color="red" onClick={() => remove(m.id)}>
                              <IconTrash size={12} />
                            </ActionIcon>
                          </Tooltip>
                        )}
                      </Group>
                      <Text size="sm" style={{ whiteSpace: "pre-wrap", wordBreak: "break-word" }}>
                        {m.body}
                      </Text>
                    </Box>
                  </Group>
                </Paper>
              );
            })}
          </Stack>
        )}
      </ScrollArea>
      <Group gap="xs" align="flex-end">
        <Textarea
          value={body}
          onChange={(e) => setBody(e.currentTarget.value)}
          onKeyDown={onKeyDown}
          placeholder="Escribe un mensaje (Enter = enviar, Shift+Enter = salto)"
          autosize
          minRows={1}
          maxRows={6}
          style={{ flex: 1 }}
          disabled={sending}
        />
        <Tooltip label="Enviar" withArrow>
          <ActionIcon
            size="lg"
            variant="filled"
            color="blue"
            onClick={send}
            disabled={!body.trim() || sending}
            aria-label="Enviar"
          >
            <IconSend size={16} />
          </ActionIcon>
        </Tooltip>
      </Group>
    </Stack>
  );
}