import fetchData from "@/api/fetch-data";
import AlertWarning from "@/app/ui/shared/AlertWarning";
import AddTicketCommentForm from "@/app/ui/User/Tickets/AddTicketCommentForm";
import { getLocale, getTranslations } from "next-intl/server";

export default async function Page({ params: { id } }) {
  const locale = await getLocale();
  const e = await getTranslations();
  const t = await getTranslations("user");

  // Fetch ticket data
  const res = await fetchData({ endPoint: `/tickets/show/${id}`, locale });
  if (res.error)
    return <AlertWarning text={res.message || e("error-message")} />;
  const { data } = res;

  // Destructure ticket details
  const {
    subject,
    content,
    status,
    ticket_user: { name, lastname, email, phone },
    ticket_priority: { color: priorityColor },
    ticket_date,
    ticket_comments,
  } = data;

  return (
    <div className="max-w-4xl mx-auto p-6 bg-white shadow-md rounded-lg">
      <h1 className="text-2xl font-bold" style={{ color: priorityColor }}>
        {subject}
      </h1>
      <p className="mt-4 text-gray-700">{content}</p>
      <div className="mt-6 border-t pt-4 space-y-4">
        <p>
          <strong className="text-gray-600">{t("status")}:</strong>{" "}
          <span className="capitalize">{status}</span>
        </p>
        <p>
          <strong className="text-gray-600">{t("date")}:</strong>{" "}
          {new Date(ticket_date).toLocaleString(locale, {
            weekday: "long",
            year: "numeric",
            month: "long",
            day: "numeric",
          })}
        </p>
        <p>
          <strong className="text-gray-600">{t("name")}:</strong> {name}{" "}
          {lastname}
        </p>
        <p>
          <strong className="text-gray-600">{t("email")}:</strong> {email}
        </p>
        <p>
          <strong className="text-gray-600">{t("phone")}:</strong> {phone}
        </p>
      </div>

      <div className="mt-8">
        <h2 className="text-xl font-semibold text-gray-800">{t("comments")}</h2>

        {/* Add Comment Form */}
        <AddTicketCommentForm id={id} locale={locale} />
        {/* Display Comments */}
        {ticket_comments.length > 0 ? (
          <ul className="mt-4 space-y-4">
            {ticket_comments?.reverse()?.map((comment) => (
              <li
                key={comment.id}
                className="p-4 border rounded-lg bg-gray-50 shadow-sm"
              >
                <div className="flex items-center space-x-4">
                  <div>
                    <p className="font-semibold text-gray-800">
                      {comment.user.name} {comment.user.lastname}
                    </p>
                    <p className="text-gray-500 text-sm">
                      {new Date(comment.created_at).toLocaleString(locale, {
                        weekday: "short",
                        year: "numeric",
                        month: "short",
                        day: "numeric",
                        hour: "2-digit",
                        minute: "2-digit",
                      })}
                    </p>
                  </div>
                </div>
                <p className="mt-2 text-gray-700">{comment.content}</p>
              </li>
            ))}
          </ul>
        ) : (
          <p className="mt-4 text-gray-600">{t("no-comments")}</p>
        )}
      </div>
    </div>
  );
}
