"use client";

import * as React from "react";
import { useRouter } from "next/navigation";
import { useActionState } from "react";
import { AlertCircle, Lock, SendHorizontal } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Spinner } from "@/components/ui/spinner";
import { Textarea } from "@/components/ui/textarea";
import { replyTicketAction } from "@/lib/actions/tickets";
import { ticketsTexts as tx } from "@/lib/i18n/tickets";
import type { TicketActionState } from "@/lib/validation/tickets";
import { AttachmentPicker } from "./attachment-picker";
import { ReopenTicketButton } from "./ticket-actions";
import type { TicketAttachmentDTO } from "./types";

export function ReplyBox({ ticketId, closed }: { ticketId: string; closed: boolean }) {
  const router = useRouter();
  const [state, formAction, pending] = useActionState<TicketActionState, FormData>(
    replyTicketAction,
    null,
  );

  const [message, setMessage] = React.useState("");
  const [attachments, setAttachments] = React.useState<TicketAttachmentDTO[]>([]);
  const handled = React.useRef<TicketActionState>(null);

  React.useEffect(() => {
    if (!state || state === handled.current) return;
    handled.current = state;
    if (state.ok) {
      toast.success(tx.replySent);
      setMessage("");
      setAttachments([]);
      router.refresh();
    } else {
      toast.error(state.error);
    }
  }, [state, router]);

  if (closed) {
    return (
      <div className="flex flex-col items-start gap-3 rounded-2xl border border-dashed bg-muted/30 p-5 sm:flex-row sm:items-center sm:justify-between">
        <p className="flex items-center gap-2 text-sm text-muted-foreground">
          <Lock className="size-4 shrink-0" />
          {tx.closedBanner}
        </p>
        <ReopenTicketButton
          ticketId={ticketId}
          className="h-10 shrink-0 gap-2 rounded-lg px-4 font-semibold"
        />
      </div>
    );
  }

  const failure = state && state.ok === false ? state : null;
  const fieldErrors = failure?.fieldErrors ?? {};

  return (
    <form action={formAction} className="space-y-3 rounded-2xl border bg-card p-5 shadow-sm">
      <input type="hidden" name="ticketId" value={ticketId} />

      <div className="space-y-1.5">
        <Label htmlFor="ticket-reply">{tx.replyLabel}</Label>
        <Textarea
          id="ticket-reply"
          name="message"
          rows={4}
          placeholder={tx.replyPlaceholder}
          className="min-h-28 resize-y"
          value={message}
          disabled={pending}
          aria-invalid={fieldErrors.message ? true : undefined}
          onChange={(event) => setMessage(event.target.value)}
        />
        {fieldErrors.message ? (
          <p className="flex items-center gap-1.5 text-xs text-destructive">
            <AlertCircle className="size-3.5 shrink-0" />
            {fieldErrors.message}
          </p>
        ) : null}
      </div>

      <AttachmentPicker
        value={attachments}
        onChange={setAttachments}
        disabled={pending}
        compact
      />
      {fieldErrors.attachments ? (
        <p className="flex items-center gap-1.5 text-xs text-destructive">
          <AlertCircle className="size-3.5 shrink-0" />
          {fieldErrors.attachments}
        </p>
      ) : null}

      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        {failure && !fieldErrors.message && !fieldErrors.attachments ? (
          <p className="flex items-center gap-1.5 text-sm text-destructive">
            <AlertCircle className="size-4 shrink-0" />
            {failure.error}
          </p>
        ) : (
          <span />
        )}
        <Button
          type="submit"
          disabled={pending}
          aria-busy={pending}
          className="h-10 gap-2 rounded-lg px-5 font-semibold"
        >
          {pending ? (
            <Spinner className="size-4" />
          ) : (
            <SendHorizontal className="size-4" />
          )}
          {pending ? tx.sendReplyPending : tx.sendReply}
        </Button>
      </div>
    </form>
  );
}

export default ReplyBox;