"use client";

import { useMemo } from "react";
import { FiMail, FiPhone, FiMessageSquare, FiCalendar } from "react-icons/fi";
import useContactRequestDetail from "../../../hooks/features/admin/contact/useContactRequestDetail";
import { useModal } from "../../../lib/modal-system/ModalContext";

interface ContactRequestInfoModalProps {
  uuid?: string;
}

function DetailSkeleton() {
  return (
    <div className="space-y-6">
      <div className="space-y-3">
        <div className="h-4 w-24 animate-pulse rounded bg-slate-200" />
        <div className="h-8 w-48 animate-pulse rounded bg-slate-200" />
      </div>
      <div className="grid gap-4 md:grid-cols-2">
        {Array.from({ length: 4 }).map((_, index) => (
          <div key={index} className="rounded-2xl border border-slate-200 p-4">
            <div className="mb-3 h-4 w-20 animate-pulse rounded bg-slate-200" />
            <div className="h-6 w-32 animate-pulse rounded bg-slate-200" />
          </div>
        ))}
      </div>
      <div className="rounded-2xl border border-slate-200 p-5">
        <div className="mb-3 h-4 w-24 animate-pulse rounded bg-slate-200" />
        <div className="space-y-2">
          <div className="h-4 w-full animate-pulse rounded bg-slate-200" />
          <div className="h-4 w-full animate-pulse rounded bg-slate-200" />
          <div className="h-4 w-3/4 animate-pulse rounded bg-slate-200" />
        </div>
      </div>
    </div>
  );
}

export default function ContactRequestInfoModal({ uuid }: ContactRequestInfoModalProps) {
  const { closeModal } = useModal();
  const { contact, loading, error, isError } = useContactRequestDetail(uuid);

  const fullName = useMemo(() => {
    if (!contact) return "Contact Request";
    return `${contact.firstName} ${contact.lastName}`.trim();
  }, [contact]);

  const phone = useMemo(() => {
    if (!contact) return "—";
    return `${contact.dialCode} ${contact.phoneNumber}`.trim();
  }, [contact]);

  return (
    <div className="space-y-6">
      <div className="text-center">
        <p className="text-sm font-semibold uppercase tracking-[0.24em] text-link-1">
          Contact Request
        </p>
        <h2 className="mt-2 text-2xl font-semibold leading-8 text-heading">
          {loading ? "Loading request" : fullName}
        </h2>
        <p className="mt-2 text-sm text-slate-500">
          {loading
            ? "Fetching the latest details for this message"
            : "Review the message details below"}
        </p>
      </div>

      {loading ? (
        <DetailSkeleton />
      ) : isError ? (
        <div className="rounded-2xl border border-rose-200 bg-rose-50 p-5 text-sm text-rose-600">
          {error?.message || "Unable to load this contact request right now."}
        </div>
      ) : contact ? (
        <>
          <div className="grid gap-4 md:grid-cols-2">
            <div className="rounded-2xl border border-slate-200 bg-slate-50 p-4">
              <div className="mb-2 flex items-center gap-2 text-sm font-medium text-slate-500">
                <FiMail size={16} />
                Email
              </div>
              <p className="break-all text-base font-semibold text-heading">
                {contact.email}
              </p>
            </div>

            <div className="rounded-2xl border border-slate-200 bg-slate-50 p-4">
              <div className="mb-2 flex items-center gap-2 text-sm font-medium text-slate-500">
                <FiPhone size={16} />
                Phone
              </div>
              <p className="text-base font-semibold text-heading">{phone}</p>
            </div>

            <div className="rounded-2xl border border-slate-200 bg-slate-50 p-4 md:col-span-2">
              <div className="mb-2 flex items-center gap-2 text-sm font-medium text-slate-500">
                <FiCalendar size={16} />
                Submitted
              </div>
              <p className="text-base font-semibold text-heading">
                {new Date(contact.createdAt).toLocaleString()}
              </p>
            </div>
          </div>

          <div className="rounded-2xl border border-slate-200 p-5">
            <div className="mb-3 flex items-center gap-2 text-sm font-medium text-slate-500">
              <FiMessageSquare size={16} />
              Message
            </div>
            <p className="whitespace-pre-wrap text-sm leading-7 text-slate-700">
              {contact.query}
            </p>
          </div>
        </>
      ) : null}

      <div className="flex justify-end">
        <button
          type="button"
          onClick={closeModal}
          className="rounded-full bg-link-1 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-link-1/90"
        >
          Close
        </button>
      </div>
    </div>
  );
}