"use client";

import Drawer from "../common/Drawer";
import QuestionStatusBadge from "./QuestionStatusBadge";
import type { Enquiry } from "@/types/enquiry";
import { getImageUrl } from "@/lib/imageUrl";
import { formatListingNo } from "@/lib/listingNo";
import ProductImage from "../common/ProductImage";
import {
  getEnquiryBuyerName,
  getEnquiryBuyerEmail,
  getEnquiryBuyerPhone,
  getEnquiryProductTitle,
} from "@/types/enquiry";

function QuestionImagePlaceholder() {
  return (
    <div className="flex h-28 w-28 shrink-0 items-center justify-center rounded-lg bg-[#F2F4F7]">
      <svg width="42%" height="42%" viewBox="0 0 32 32" fill="none" aria-hidden="true">
        <rect x="3" y="10" width="20" height="14" rx="2.5" stroke="#98A2B3" strokeWidth="1.4" />
        <path d="M23 14.5 29 12v10l-6-2.5" stroke="#98A2B3" strokeWidth="1.4" strokeLinejoin="round" />
        <circle cx="13" cy="17" r="4.2" stroke="#98A2B3" strokeWidth="1.4" />
        <rect x="9" y="7" width="6" height="3.5" rx="1" stroke="#98A2B3" strokeWidth="1.4" />
      </svg>
    </div>
  );
}

export default function QuestionDetailsDrawer({
  question,
  open,
  loading = false,
  onClose,
  onDelete,
  onMarkResponded,
}: {
  question: Enquiry | null;
  open: boolean;
  loading?: boolean;
  onClose: () => void;
  onDelete: () => void;
  onMarkResponded: () => void;
}) {
  const isResponded = question?.status === "responded";
  const displayId = question ? formatListingNo(question.product?.listingNo ?? question.listingNo) : "";

  const productTitle = question ? getEnquiryProductTitle(question) : "";
  const buyerName = question ? getEnquiryBuyerName(question) : "";
  const buyerEmail = question ? getEnquiryBuyerEmail(question) : "";
  const buyerPhone = question ? getEnquiryBuyerPhone(question) : "";
  const firstImage = question?.product?.images?.[0];
  const manufacturer = question?.product?.manufacturer;
  const modelNumber = question?.product?.modelNumber;
  const productType = question?.product?.productType || "New Products";

  return (
    <Drawer
      open={open && question !== null}
      onClose={onClose}
      title="Question details"
      width="660px"
      footer={
        question ? (
          <div className="flex items-center justify-end gap-3">
            <button
              type="button"
              onClick={onDelete}
              disabled={loading}
              className="h-9 rounded-lg bg-[#F5F7F9] px-4 text-[13px] font-medium text-[var(--color-red)] transition-colors hover:bg-[#F2F4F7] disabled:opacity-50"
            >
              Delete Question
            </button>
            {!isResponded && (
              <button
                type="button"
                onClick={onMarkResponded}
                disabled={loading}
                className="h-9 rounded-lg bg-[#F5F7F9] px-4 text-[13px] font-medium text-[var(--color-green)] transition-colors hover:bg-[#F2F4F7] disabled:opacity-50"
              >
                Responded
              </button>
            )}
          </div>
        ) : null
      }
    >
      {question && (
        <>
          <div className="flex items-start justify-between">
            <h3 className="text-[15px] font-semibold text-[#101828]">Product Info</h3>
            <div className="flex flex-col items-end gap-1">
              <span className="text-[12px] text-[#98A2B3] capitalize">{productType}</span>
              <QuestionStatusBadge status={question.status} />
            </div>
          </div>

          <div className="mt-3 flex gap-4 rounded-xl bg-[#F5F7F9] p-4">
            <ProductImage
              src={firstImage}
              alt={productTitle}
              className="h-28 w-28 shrink-0 rounded-lg object-cover"
              fallback={<QuestionImagePlaceholder />}
            />
            <div className="min-w-0">
              <p className="text-[13px] font-medium text-[var(--color-blue)]">{displayId}</p>
              <p className="mt-1 text-[15px] font-semibold leading-6 text-[#101828]">{productTitle}</p>
              {(manufacturer || modelNumber) && (
                <p className="mt-2 flex items-center gap-2 text-[13px] text-[#98A2B3]">
                  {manufacturer && <span>{manufacturer}</span>}
                  {manufacturer && modelNumber && <span className="text-[#D0D5DD]">|</span>}
                  {modelNumber && <span>{modelNumber}</span>}
                </p>
              )}
            </div>
          </div>

          <h3 className="mt-6 text-[15px] font-semibold text-[#101828]">Buyer&apos;s Info</h3>
          <div className="mt-2">
            <p className="text-[13px] font-semibold text-[#101828]">{buyerName}</p>
            {buyerPhone && <p className="mt-1 text-[13px] text-[var(--color-blue)]">{buyerPhone}</p>}
            {buyerEmail && <p className="text-[13px] text-[var(--color-blue)]">{buyerEmail}</p>}
          </div>

          <div className="mt-4">
            <p className="text-[12px] font-medium text-[#667085]">Question</p>
            <p className="mt-1 text-[13px] leading-6 text-[#475467]">{question.question}</p>
          </div>
        </>
      )}
    </Drawer>
  );
}