// //

// {replyValue === 1 && ( //

setReplyText(e.target.value)}
//               placeholder="Tulis Pesan"
//               className="w-full resize-none rounded-md border border-gray-300 bg-white p-4 text-sm text-gray-700 focus:outline-none"
//               rows={5}
//             />
//             <div className="mt-4 flex justify-end gap-3">
//               <Button
//                 onClick={() => setReplyValue(0)}
//                 variant="outline"
//                 className="text-blue-600 border-blue-600"
//               >
//                 Batal
//               </Button>
//               <Button
//                 onClick={handleSendReplyData}
//                 className="bg-blue-600 text-white hover:bg-blue-700"
//               >
//                 Kirim
//               </Button>
//             </div>
//           </div>
//         )}
//       </div>

//       <div className="flex flex-col md:flex-row    lg:flex-row gap-5 mt-5">
//         <div className="flex flex-col w-[100%] lg:w-[70%]">
//           {replyVisible && (
//             <div className="">
//               <textarea
//                 id="replyMessage"
//                 className="w-full h-24 border rounded-md p-2"
//                 value={replyMessage}
//                 onChange={(e) => setReplyMessage(e.target.value)}
//                 placeholder="Tulis pesan di sini..."
//               />
//               <div className="flex justify-end gap-3 my-2">
//                 <Button
//                   onClick={() => setReplyVisible(false)}
//                   color="default"
//                   variant="outline"
//                 >
//                   Batal
//                 </Button>
//                 <Button onClick={handleSendReply} color="primary">
//                   Kirim
//                 </Button>
//               </div>
//             </div>
//           )}
//           <div className="border rounded-t-xl">
//             <p className="p-4 bg-slate-300 rounded-t-xl text-lg font-semibold">
//               Ticket #{detail?.referenceNumber}
//             </p>

//             {ticketReply?.map((list) => (
//               <div key={list.id} className="flex flex-col mb-4">
//                 {isMobile ? (
//                   <div className="flex gap-3 bg-sky-100 p-3 items-center">
//                     <Icon icon="qlementine-icons:user-16" width={36} />
//                     <div>
//                       <p className="text-sm">
//                         <span className="font-bold">
//                           {list?.user?.fullname}
//                         </span>{" "}
//                         mengirimkan balasan{" "}
//                         <span className="font-bold">
//                           {list?.messageTo?.fullname}
//                         </span>
//                       </p>
//                       <p className="text-xs">
//                         {new Date(list.createdAt).toLocaleString("id-ID", {
//                           day: "2-digit",
//                           month: "2-digit",
//                           year: "numeric",
//                           hour: "2-digit",
//                           minute: "2-digit",
//                         })}
//                       </p>
//                     </div>
//                   </div>
//                 ) : (
//                   <div className="flex gap-4 bg-sky-100 p-4 items-center">
//                     <div className="text-center">
//                       <Icon icon="qlementine-icons:user-16" width={50} />
//                     </div>
//                     <div>
//                       <p className="text-sm">
//                         <span className="font-bold">
//                           {list?.user?.fullname}
//                         </span>{" "}
//                         mengirimkan balasan{" "}
//                         <span className="font-bold">
//                           {list?.messageTo?.fullname}
//                         </span>
//                       </p>
//                       <p className="text-xs">
//                         {new Date(list.createdAt).toLocaleString("id-ID", {
//                           day: "2-digit",
//                           month: "2-digit",
//                           year: "numeric",
//                           hour: "2-digit",
//                           minute: "2-digit",
//                         })}
//                       </p>
//                     </div>
//                   </div>
//                 )}

//                 <div className="bg-white text-sm p-4">{list.comments}</div>
//               </div>
//             ))}
//             {ticketInternal && (
//               <div key={ticketInternal.id} className="flex flex-col">
//                 <div className="flex flex-row gap-3 bg-sky-100 p-4 items-center">
//                   <Icon icon="qlementine-icons:user-16" width={36} />
//                   <div>
//                     <p>
//                       <span className="font-bold text-sm">
//                         {ticketInternal?.commentFromUserName}
//                       </span>{" "}
//                       mengirimkan komentar untuk{" "}
//                       <span className="font-bold text-sm">
//                         {ticketInternal?.feedTitle}
//                       </span>
//                     </p>
//                     <p className="text-xs">
//                       {`${new Date(ticketInternal?.createdAt).getDate()}-${
//                         new Date(ticketInternal?.createdAt).getMonth() + 1
//                       }-${new Date(
//                         ticketInternal?.createdAt
//                       ).getFullYear()} ${new Date(
//                         ticketInternal?.createdAt
//                       ).getHours()}:${new Date(
//                         ticketInternal?.createdAt
//                       ).getMinutes()}`}
//                     </p>
//                   </div>
//                 </div>
//                 <div className="p-4 bg-white text-sm">
//                   <p>{htmlToString(ticketInternal.message)}</p>
//                   {detailTickets?.typeId === 6 &&
//                   detailTickets?.emergencyIssue ? (
//                     <div className="row mx-0 mb-3 emergency-attachments">
//                       <div className="mt-3 mr-4">
//                         <Button
//                           color="primary"
//                           size="md"
//                           onClick={openEmergencyIssueDetail}
//                         >
//                           Info Lainnya
//                         </Button>
//                       </div>
//                     </div>
//                   ) : null}

//                   {detailTickets?.emergencyIssue && (
//                     <InfoLainnyaModal
//                       open={openEmergencyModal}
//                       onClose={() => setOpenEmergencyModal(false)}
//                       data={detailTickets.emergencyIssue}
//                     />
//                   )}
//                 </div>
//               </div>
//             )}
//           </div>
//         </div>
//         {detail !== undefined && (
//           <div className="gap-5 mb-5 w-[100%] lg:w-[30%] border bg-white rounded-md">
//             <p className="mx-3 mt-3">Properties</p>
//             <div className="space-y-2 px-3">
//               <Label>Judul</Label>
//               <Controller
//                 control={control}
//                 name="title"
//                 render={({ field }) => (
//                   <Input
//                     size="md"
//                     type="text"
//                     value={detail?.title}
//                     onChange={field.onChange}
//                     placeholder="Enter Title"
//                   />
//                 )}
//               />
//               {/* {errors.title?.message && (
//                   <p className="text-red-400 text-sm">
//                     {errors.title.message}
//                   </p>
//                 )} */}
//             </div>
//             <div className="mt-5 px-3">
//               <Label>Prioritas</Label>
//               <Select
//                 onValueChange={setSelectedPriority}
//                 value={detail?.priority?.name}
//               >
//                 <SelectTrigger size="md">
//                   <SelectValue placeholder="Pilih" />
//                 </SelectTrigger>
//                 <SelectContent>
//                   <SelectItem value="Low">Low</SelectItem>
//                   <SelectItem value="Medium">Medium</SelectItem>
//                   <SelectItem value="High">High</SelectItem>
//                 </SelectContent>
//               </Select>
//             </div>
//             <div className="mt-5 px-3 mb-3">
//               <Label>Status</Label>
//               <Select
//                 onValueChange={setSelectedStatus}
//                 value={detail?.status?.name}
//               >
//                 <SelectTrigger size="md">
//                   <SelectValue placeholder="Pilih" />
//                 </SelectTrigger>
//                 <SelectContent>
//                   <SelectItem value="Open">Open</SelectItem>
//                   <SelectItem value="Close">Close</SelectItem>
//                 </SelectContent>
//               </Select>
//             </div>
//             <div className="mt-5 px-3 mb-3">
//               <Label>Operator</Label>

//               {/* Tag yang ditampilkan secara kolom */}
//               {selectedOperator.length > 0 && (
//                 <div className="flex flex-col gap-2 mb-2">
//                   {selectedOperator.map((id) => {
//                     const label = operatorOpt.find(
//                       (op: any) => op.value === id
//                     )?.label;
//                     return (
//                       <div
//                         key={id}
//                         className="flex items-center justify-between bg-gray-200 px-3 py-1 rounded"
//                       >
//                         <span>{label}</span>
//                         <button
//                           type="button"
//                           onClick={() =>
//                             setSelectedOperator((prev) =>
//                               prev.filter((val) => val !== id)
//                             )
//                           }
//                           className="ml-2 text-gray-500 hover:text-red-600"
//                         >
//                           ×
//                         </button>
//                       </div>
//                     );
//                   })}
//                 </div>
//               )}

//               {/* Popover Checkbox Dropdown */}
//               <Popover>
//                 <PopoverTrigger asChild>
//                   <Button variant="outline" className="w-full justify-between">
//                     Pilih Operator
//                     <ChevronDownIcon className="ml-2 h-4 w-4" />
//                   </Button>
//                 </PopoverTrigger>
//                 <PopoverContent className="w-full max-h-60 overflow-auto">
//                   <div className="flex flex-col gap-1">
//                     {operatorOpt.map((op: any) => (
//                       <label
//                         key={op.id}
//                         className="flex items-center space-x-2 cursor-pointer px-2 py-1 hover:bg-gray-100 rounded"
//                       >
//                         <input
//                           type="checkbox"
//                           checked={selectedOperator.includes(op.value)}
//                           disabled
//                           onChange={(e) => {
//                             if (e.target.checked) {
//                               setSelectedOperator((prev) => [
//                                 ...prev,
//                                 op.value,
//                               ]);
//                             } else {
//                               setSelectedOperator((prev) =>
//                                 prev.filter((val) => val !== op.value)
//                               );
//                             }
//                           }}
//                         />
//                         <span>{op.label}</span>
//                       </label>
//                     ))}
//                   </div>
//                 </PopoverContent>
//               </Popover>
//             </div>
//             <div className="space-y-2 px-3 py-3">
//               <Label>Description</Label>
//               <Controller
//                 control={control}
//                 name="title"
//                 render={({ field }) => (
//                   <Textarea
//                     value={detail?.description}
//                     onChange={field.onChange}
//                     placeholder="Enter Title"
//                   />
//                 )}
//               />
//               {/* {errors.title?.message && (
//                   <p className="text-red-400 text-sm">
//                     {errors.title.message}
//                   </p>
//                 )} */}
//             </div>
//           </div>
//         )}
//       </div>
//     </div>
//   );
// }
"use client";

import React, { useEffect, useRef, useState } from "react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { getTicketingDetail, getTicketingReply, saveTicketReply } from "@/service/service/communication/communication";

export type replyDetail = {
  id: number;
  comments: string;
  createdAt: string;
  user: { id: number; fullname: string };
  messageTo: { id: number; fullname: string };
};

type Props = { id: string };

export default function FormDetailTicketing({ id }: Props) {
  const MySwal = withReactContent(Swal);
  const [detail, setDetail] = useState<any>(null);
  const [ticketReply, setTicketReply] = useState<replyDetail[]>([]);
  const [replyText, setReplyText] = useState("");
  const chatEndRef = useRef<HTMLDivElement>(null);

useEffect(() => {
    async function init() {
      const resDetail = await getTicketingDetail(id);
      setDetail(resDetail?.data?.data);
      await fetchReplies();
    }
    init();
  }, [id]);

useEffect(() => {
    chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [ticketReply]);

async function fetchReplies() {
    const res = await getTicketingReply(id);
    if (res?.data !== null) {
      const sortedReplies = res?.data.data.sort(
        (a: replyDetail, b: replyDetail) =>
          new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
      );
      setTicketReply(sortedReplies);
    }
  }

const handleTranslate = () => {
    MySwal.fire("Info", "Fitur translate belum dihubungkan", "info");
  };

return (
    <section className="flex flex-col h-full bg-white">
      {/* Header */}
      <div className="border-b px-4 py-3 shrink-0">
        <div className="flex items-center gap-3">
          <div className="text-sm font-medium">
            {(detail?.title ?? "").split(" ").slice(0, 25).join(" ") +
              ((detail?.title ?? "").split(" ").length > 25 ? "..." : "")}
          </div>
          <div className="text-xs text-muted-foreground">
            • {detail?.source ?? "Ticket"}
          </div>
        </div>
      </div>

{/* Chat Messages (scrollable only this part) */}
      <div className="flex-1 overflow-y-auto p-4 space-y-3 bg-gray-50">
        {!detail ? (
          <div className="h-full flex items-center justify-center text-muted-foreground">
            <div className="text-center">
              <div className="mb-4">
                {/* Icon kosong */}
                <svg
                  width="72"
                  height="72"
                  viewBox="0 0 24 24"
                  className="mx-auto opacity-60"
                >
                  <path
                    fill="currentColor"
                    d="M12 3C7 3 3 6.6 3 11c0 1.9.8 3.6 2.2 5v3.1L8 17.9c1 .3 2 .5 4 .5 5 0 9-3.6 9-8.1S17 3 12 3z"
                  />
                </svg>
              </div>
              <div className="text-sm">Pilih issue untuk melihat detail</div>
            </div>
          </div>
        ) : (
          ticketReply.map((m) => {
            const isUser = m.user.fullname !== "Agent";
            return (
              <div
                key={m.id}
                className={cn(
                  "flex items-end",
                  isUser ? "justify-end" : "justify-start"
                )}
              >
                <div
                  className={cn(
                    "px-4 py-2 rounded-2xl max-w-[70%] break-words",
                    isUser
                      ? "bg-green-500 text-white"
                      : "bg-white text-gray-800",
                    isUser ? "rounded-br-none" : "rounded-bl-none",
                    "shadow-sm"
                  )}
                >
                  <div className="whitespace-pre-wrap text-sm">
                    {m.comments}
                  </div>
                  <div className="text-[10px] text-gray-300 mt-1 text-right">
                    {new Date(m.createdAt).toLocaleTimeString("id-ID", {
                      hour: "2-digit",
                      minute: "2-digit",
                    })}
                  </div>
                </div>
              </div>
            );
          })
        )}
        <div ref={chatEndRef} />
      </div>

{/* Input Box */}
      <div className="border-t px-4 py-3 bg-white shrink-0">
        <div className="flex flex-col gap-2 max-w-full mx-auto">
          <textarea
            placeholder='Enter your reply or type "/" to insert a quick reply'
            value={replyText}
            onChange={(e) => setReplyText(e.target.value)}
            className="w-full border rounded-xl p-3 min-h-[64px] resize-none focus:outline-none focus:ring"
          />
          <div className="flex items-center justify-between gap-3">
            <Button variant="outline" size="sm" onClick={handleTranslate}>
              Translate
            </Button>
            <div className="flex items-center gap-2">
              <Button
                variant="outline"
                size="sm"
                onClick={() => sendReply(true)}
                disabled={!replyText.trim()}
              >
                Kirim & Resolve
              </Button>
              <Button
                size="sm"
                onClick={() => sendReply(false)}
                disabled={!replyText.trim()}
              >
                Kirim
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}