"use client";

type Props = {
  enquiry: any;
  onClose: () => void;
};

export default function EnquiryModal({
  enquiry,
  onClose,
}: Props) {
  if (!enquiry) return null;

  const formatDate = (value?: string | Date | null) => {
    if (!value) return "-";

    const date = new Date(value);

    if (isNaN(date.getTime())) {
      return "-";
    }

    return date.toLocaleDateString("en-IN");
  };

  const renderField = (
    label: string,
    value: React.ReactNode
  ) => {
    return (
      <div>
        <p className="text-xs font-medium uppercase tracking-wide text-gray-500">
          {label}
        </p>

        <p className="mt-1 text-sm text-gray-900">
          {value || "-"}
        </p>
      </div>
    );
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
      <div className="max-h-[90vh] w-full max-w-3xl overflow-y-auto rounded-2xl bg-white shadow-xl">

        {/* Header */}
        <div className="flex items-center justify-between border-b p-6">
          <div>
            <h2 className="text-xl font-semibold">
              Enquiry Details
            </h2>

            <p className="mt-1 text-sm text-gray-500">
              {enquiry.category || "Enquiry"}
            </p>
          </div>

          <button
            onClick={onClose}
            className="rounded-lg border px-3 py-2 text-sm hover:bg-gray-100"
          >
            Close
          </button>
        </div>

        {/* Content */}
        <div className="space-y-8 p-6">

          {/* =================================================
              COMMON DETAILS
          ================================================= */}

          <section>
            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-700">
              Contact Details
            </h3>

            <div className="grid gap-5 md:grid-cols-2">

              {renderField(
                "Name",
                enquiry.name
              )}

              {renderField(
                "Mobile",
                enquiry.mobile
              )}

              {renderField(
                "Email",
                enquiry.email
              )}

              {renderField(
                "Category",
                enquiry.category
              )}

              {renderField(
                "Status",
                enquiry.status
              )}

              {renderField(
                "Submitted On",
                formatDate(enquiry.createdAt)
              )}

            </div>
          </section>

          {/* =================================================
              WEDDING
          ================================================= */}

          {enquiry.category === "Wedding" && (
            <section>
              <h3 className="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-700">
                Wedding Details
              </h3>

              <div className="grid gap-5 md:grid-cols-2">

                {renderField(
                  "Wedding Date",
                  formatDate(enquiry.date)
                )}

                {renderField(
                  "Guest Count",
                  enquiry.guestCount
                )}

                {renderField(
                  "Number of Days",
                  enquiry.numberOfDays
                )}

                {renderField(
                  "Rooms Required",
                  enquiry.roomsRequired
                )}

                {renderField(
                  "Functions",
                  Array.isArray(enquiry.functions)
                    ? enquiry.functions.join(", ")
                    : enquiry.functions
                )}

              </div>
            </section>
          )}

          {/* =================================================
              CORPORATE EVENT
          ================================================= */}

          {enquiry.category === "Corporate Event" && (
            <section>
              <h3 className="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-700">
                Corporate Event Details
              </h3>

              <div className="grid gap-5 md:grid-cols-2">

                {renderField(
                  "Company",
                  enquiry.company
                )}

                {renderField(
                  "Event Date",
                  formatDate(enquiry.date)
                )}

                {renderField(
                  "Delegates",
                  enquiry.delegates
                )}

                {renderField(
                  "Rooms",
                  enquiry.rooms
                )}

              </div>
            </section>
          )}

          {/* =================================================
              STAY
          ================================================= */}

          {enquiry.category === "Stay" && (
            <section>
              <h3 className="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-700">
                Stay Details
              </h3>

              <div className="grid gap-5 md:grid-cols-2">

                {renderField(
                  "Check In",
                  formatDate(enquiry.checkIn)
                )}

                {renderField(
                  "Check Out",
                  formatDate(enquiry.checkOut)
                )}

                {renderField(
                  "Adults",
                  enquiry.adults
                )}

                {renderField(
                  "Children",
                  enquiry.children
                )}

                {renderField(
                  "Rooms",
                  enquiry.rooms
                )}

              </div>
            </section>
          )}

          {/* =================================================
              SOCIAL EVENT
          ================================================= */}

          {enquiry.category === "Social Event" && (
            <section>
              <h3 className="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-700">
                Social Event Details
              </h3>

              <div className="grid gap-5 md:grid-cols-2">

                {renderField(
                  "Date",
                  formatDate(enquiry.date)
                )}

                {renderField(
                  "Event Type",
                  enquiry.eventType
                )}

                {renderField(
                  "Other Event Name",
                  enquiry.otherEventName
                )}

              </div>
            </section>
          )}

          {/* =================================================
              MESSAGE
          ================================================= */}

          <section>
            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-700">
              Message
            </h3>

            <div className="rounded-xl bg-gray-50 p-4">
              <p className="whitespace-pre-wrap text-sm text-gray-700">
                {enquiry.message || "No message provided."}
              </p>
            </div>
          </section>

        </div>
      </div>
    </div>
  );
}