Chat

"use client";
import { useId, useRef, useState } from "react";
import { Send } from "lucide-react";
import { Button } from "@dashboardpack/core/components/ui/button";
import { Label } from "@dashboardpack/core/components/ui/label";
import { cn } from "@dashboardpack/core/lib/utils";
export interface ChatMessage {
  id: string;
  author: string;
  text: string;
  time: string;
  outgoing?: boolean;
  status?: "sent" | "delivered" | "failed";
}
export interface ChatProps {
  label: string;
  messages: ChatMessage[];
  onSend?: (text: string) => void | Promise<void>;
  typing?: string;
  disabled?: boolean;
  maxLength?: number;
  className?: string;
}
export function Chat({
  label,
  messages,
  onSend,
  typing,
  disabled,
  maxLength = 2000,
  className,
}: ChatProps) {
  const id = useId();
  const [draft, setDraft] = useState("");
  const [busy, setBusy] = useState(false);
  const inFlight = useRef(false);
  const [error, setError] = useState("");
  const [announcement, setAnnouncement] = useState("");
  const send = async () => {
    const text = draft.trim();
    if (!text || disabled || !onSend || inFlight.current) return;
    inFlight.current = true;
    setBusy(true);
    setError("");
    try {
      await onSend(text);
      setDraft((previous) => (previous === draft ? "" : previous));
      setAnnouncement("Message sent.");
    } catch {
      setError(
        "Message could not be sent. Your draft has been kept. Try again.",
      );
    } finally {
      inFlight.current = false;
      setBusy(false);
    }
  };
  return (
    <section
      aria-label={label}
      className={cn(
        "min-w-0 overflow-hidden rounded-xl border bg-card",
        className,
      )}
    >
      <div className="border-b p-4">
        <h3 className="text-sm font-semibold">{label}</h3>
        <p className="mt-1 text-xs text-muted-foreground">
          {messages.length} messages
        </p>
      </div>
      <div
        role="log"
        aria-live="polite"
        aria-relevant="additions text"
        aria-label={`${label} conversation`}
        tabIndex={0}
        className="max-h-80 space-y-4 overflow-auto p-4 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
      >
        {!messages.length && (
          <p className="py-8 text-center text-sm text-muted-foreground">
            Start the conversation.
          </p>
        )}
        <ol className="space-y-4">
          {messages.map((message) => (
            <li
              key={message.id}
              className={cn(
                "flex",
                message.outgoing ? "justify-end" : "justify-start",
              )}
            >
              <div className="max-w-[85%] space-y-1">
                <div className="flex flex-wrap items-center gap-2 text-[11px] text-muted-foreground">
                  <bdi className="font-medium">{message.author}</bdi>
                  <span>{message.time}</span>
                </div>
                <p
                  dir="auto"
                  className={cn(
                    "whitespace-pre-wrap break-words rounded-xl px-3 py-2 text-sm leading-6",
                    message.outgoing
                      ? "bg-primary text-primary-foreground"
                      : "bg-muted",
                  )}
                >
                  {message.text}
                </p>
                {message.outgoing && message.status && (
                  <p className="text-end text-[11px] text-muted-foreground">
                    {message.status === "failed"
                      ? "Not delivered"
                      : message.status === "delivered"
                        ? "Delivered"
                        : "Sent"}
                  </p>
                )}
              </div>
            </li>
          ))}
        </ol>
      </div>
      {typing && (
        <p role="status" className="px-4 pb-3 text-xs text-muted-foreground">
          {typing} is typing…
        </p>
      )}
      {onSend && (
        <form
          className="space-y-2 border-t p-4"
          onSubmit={(event) => {
            event.preventDefault();
            void send();
          }}
        >
          <Label htmlFor={id}>Message</Label>
          <div className="flex items-end gap-2">
            <textarea
              id={id}
              dir="auto"
              value={draft}
              maxLength={maxLength}
              disabled={disabled || busy}
              rows={2}
              placeholder="Write a thoughtful reply…"
              onChange={(event) => setDraft(event.target.value)}
              className="min-w-0 flex-1 resize-y rounded-lg border border-input bg-background p-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
            />
            <Button
              type="submit"
              size="icon"
              aria-label="Send message"
              disabled={disabled || busy || !draft.trim()}
            >
              <Send className="size-4" />
            </Button>
          </div>
          <p className="text-xs text-muted-foreground">
            {draft.length} / {maxLength}. Use Send to keep line breaks.
          </p>
          {error && (
            <p role="alert" className="text-xs text-destructive">
              {error}
            </p>
          )}
          <p role="status" className="text-xs text-muted-foreground">
            {announcement}
          </p>
        </form>
      )}
    </section>
  );
}