"use client";

import { Button } from "@/components/ui/button";
import { Dialog, DialogClose, DialogContent, DialogTitle } from "@/components/ui/dialog";
import { markTicketRead, useTicket } from "@/lib/api/dashboard/tickets-api";
import { X } from "lucide-react";
import { useTranslations } from "next-intl";
import { useEffect, useRef } from "react";
import type { TicketReplyChannel } from "./tickets-types";

interface TicketPreviewDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  ticketId: number | null;
  onReplyByChannel: (ticketId: number, channel: TicketReplyChannel) => void;
  onRead: () => void;
}

export function TicketPreviewDialog({
  open,
  onOpenChange,
  ticketId,
  onReplyByChannel,
  onRead,
}: TicketPreviewDialogProps) {
  const t = useTranslations("dashboard.tickets.preview");
  const { ticket } = useTicket(open ? ticketId : null);
  const readMarkedFor = useRef<number | null>(null);
  const onReadRef = useRef(onRead);
  useEffect(() => { onReadRef.current = onRead; });

  useEffect(() => {
    if (open && ticket && !ticket.is_read && readMarkedFor.current !== ticket.id) {
      readMarkedFor.current = ticket.id;
      markTicketRead(ticket.id).then(() => onReadRef.current()).catch(() => {});
    }
  }, [open, ticket]);

  if (!ticketId || !ticket) {
    return null;
  }

  const isReplied = Boolean(ticket.admin_reply) || ticket.status === "replied";

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        showCloseButton={false}
        className="max-w-[655px] gap-0 overflow-hidden rounded-2xl border border-border bg-card p-0"
      >
        <header className="flex h-[72px] items-center justify-between border-b border-border px-6">
          <DialogClose asChild>
            <Button
              type="button"
              variant="ghost"
              size="icon"
              className="h-8 w-8 rounded-[10px] border border-border text-muted-foreground"
              aria-label="close preview dialog"
            >
              <X className="h-4 w-4" />
            </Button>
          </DialogClose>
          <DialogTitle className="text-xl font-bold text-foreground">{t("title")}</DialogTitle>
        </header>

        <div className="space-y-6 px-6 py-6">
          <div className="space-y-2">
            <p className="text-sm font-bold text-foreground">{t("messageLabel")}</p>
            <div className="rounded-xl border border-border bg-background px-4 py-4">
              <p className="text-sm leading-7 text-foreground">{ticket.message}</p>
            </div>
          </div>

          {isReplied ? (
            <div className="space-y-2">
              <p className="text-sm font-bold text-foreground">{t("replyLabel")}</p>
              <div className="rounded-xl border border-border bg-background px-4 py-4">
                <p className="text-sm leading-7 text-foreground">{ticket.admin_reply}</p>
              </div>
            </div>
          ) : (
            <div className="space-y-2">
              <p className="text-sm font-bold text-foreground">{t("replyByLabel")}</p>
              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <Button
                  type="button"
                  variant="outline"
                  className="h-12 justify-center rounded-xl border-border text-foreground"
                  onClick={() => onReplyByChannel(ticket.id, "gmail")}
                >
                  {t("replyByEmail")}
                </Button>
                <Button
                  type="button"
                  variant="outline"
                  className="h-12 justify-center rounded-xl border-border text-foreground"
                  onClick={() => onReplyByChannel(ticket.id, "whatsapp")}
                >
                  {t("replyByWhatsapp")}
                </Button>
              </div>
            </div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}