"use client";

import { useEffect, useRef, useState, type FormEvent } from "react";
import type { TicketMessage } from "@/features/tickets/types";
import { ticketsDict } from "@/features/tickets/dict";
import { formatTicketDate } from "@/features/tickets/utils/ticket-helpers";

type TicketThreadProps = {
  messages: TicketMessage[];
  canReply: boolean;
  isSubmitting: boolean;
  showInternal?: boolean;
  internalNote?: boolean;
  onInternalNoteChange?: (value: boolean) => void;
  onSubmit: (body: string, isInternal?: boolean) => void;
};

export function TicketThread({
  messages,
  canReply,
  isSubmitting,
  showInternal = false,
  internalNote = false,
  onInternalNoteChange,
  onSubmit,
}: TicketThreadProps) {
  const [draft, setDraft] = useState("");
  const bottomRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages, isSubmitting]);

  const visibleMessages = showInternal
    ? messages
    : messages.filter((message) => !message.isInternal);

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const body = draft.trim();
    if (!body || isSubmitting) return;
    setDraft("");
    onSubmit(body, internalNote);
  };

  return (
    <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-3xl bg-card shadow-soft-sm">
      <div className="flex min-h-[360px] flex-1 flex-col gap-3 overflow-y-auto p-4 sm:p-5">
        {visibleMessages.length === 0 ? (
          <p className="py-8 text-center text-sm text-muted-foreground">{ticketsDict.empty}</p>
        ) : null}

        {visibleMessages.map((message) => {
          const isUser = message.authorType === "USER";

          return (
            <div
              key={message.id}
              className={`flex ${isUser ? "justify-start" : "justify-end"}`}
            >
              <div
                className={`max-w-[85%] rounded-3xl px-4 py-3 text-sm leading-7 shadow-soft-sm ${
                  message.isInternal
                    ? "border border-dashed border-amber-500/40 bg-amber-500/10 text-foreground"
                    : isUser
                      ? "bg-primary text-primary-foreground"
                      : "bg-muted text-foreground"
                }`}
              >
                <p className="whitespace-pre-wrap">{message.body}</p>
                <p className={`mt-2 text-[11px] ${isUser && !message.isInternal ? "text-primary-foreground/80" : "text-muted-foreground"}`}>
                  {formatTicketDate(message.createdAt)}
                </p>
              </div>
            </div>
          );
        })}
        <div ref={bottomRef} />
      </div>

      {canReply ? (
        <form onSubmit={handleSubmit} className="border-t border-border p-4 sm:p-5">
          {showInternal && onInternalNoteChange ? (
            <label className="mb-3 flex items-center gap-2 text-sm text-muted-foreground">
              <input
                type="checkbox"
                checked={internalNote}
                onChange={(e) => onInternalNoteChange(e.target.checked)}
              />
              {ticketsDict.internalNote}
            </label>
          ) : null}

          <div className="flex gap-2">
            <textarea
              value={draft}
              onChange={(e) => setDraft(e.target.value)}
              rows={2}
              maxLength={5000}
              placeholder={ticketsDict.bodyPlaceholder}
              className="min-h-12 flex-1 resize-none rounded-2xl bg-input px-4 py-3 text-sm ring-1 ring-border outline-none focus:ring-2 focus:ring-primary"
            />
            <button
              type="submit"
              disabled={isSubmitting || !draft.trim()}
              className="inline-flex shrink-0 items-center justify-center rounded-2xl bg-primary px-4 text-sm font-semibold text-primary-foreground disabled:opacity-60"
            >
              {isSubmitting ? ticketsDict.replying : ticketsDict.reply}
            </button>
          </div>
        </form>
      ) : (
        <div className="border-t border-border p-4 text-sm text-muted-foreground sm:p-5">
          {ticketsDict.closedHint}
        </div>
      )}
    </div>
  );
}