"use client";

import Drawer from "../common/Drawer";
import type { Quote } from "@/types/quote";
import QuoteStatusBadge from "./QuoteStatusBadge";
import { getImageUrl } from "@/lib/imageUrl";
import { formatListingNo } from "@/lib/listingNo";
import ProductImage from "../common/ProductImage";

function QuoteImagePlaceholder() {
  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 QuoteDetailsDrawer({
  quote,
  open,
  loading = false,
  onClose,
  onDelete,
  onMarkSent,
  onMarkSold,
}: {
  quote: Quote | null;
  open: boolean;
  loading?: boolean;
  onClose: () => void;
  onDelete: () => void;
  onMarkSent: () => void;
  onMarkSold: () => void;
}) {
  const displayId = formatListingNo(quote?.product?.listingNo);
  const buyerName = quote?.buyer
    ? `${quote.buyer.firstName || ""} ${quote.buyer.lastName || ""}`.trim() || "Unknown"
    : "Unknown";
  const buyerEmail = quote?.buyer?.email || "—";
  const buyerPhone = quote?.buyer?.phone || "—";
  const firstImage = quote?.product?.images?.[0];

  return (
    <Drawer
      open={open && quote !== null}
      onClose={onClose}
      title="Quote Details"
      width="660px"
      footer={
        quote ? (
          <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] cursor-pointer disabled:opacity-50"
            >
              Delete Quote
            </button>
            {quote.status !== "sold" && (
              <button
                type="button"
                onClick={onMarkSold}
                disabled={loading}
                className="h-9 rounded-lg bg-[#F5F7F9] px-4 text-[13px] font-medium text-[var(--color-green)] transition-colors hover:bg-[#F2F4F7] cursor-pointer disabled:opacity-50"
              >
                Mark as Sold
              </button>
            )}
            {quote.status === "pending" && (
              <button
                type="button"
                onClick={onMarkSent}
                disabled={loading}
                className="h-9 rounded-lg bg-[#F5F7F9] px-4 text-[13px] font-medium text-[var(--color-blue)] transition-colors hover:bg-[#F2F4F7] cursor-pointer disabled:opacity-50"
              >
                Mark as Sent
              </button>
            )}
          </div>
        ) : null
      }
    >
      {quote && (
        <>
          <div className="flex items-center justify-between">
            <h3 className="text-[15px] font-semibold text-[#101828]">Product Info</h3>
            <QuoteStatusBadge status={quote.status} />
          </div>

          <div className="mt-3 flex gap-4 rounded-xl bg-[#F5F7F9] p-4">
            <ProductImage
              src={firstImage}
              alt={quote.product?.title || ""}
              className="h-28 w-28 shrink-0 rounded-lg border border-[#E4E7EC] object-cover"
              fallback={<QuoteImagePlaceholder />}
            />
            <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]">
                {quote.product?.title || "Unknown Product"}
              </p>
              {(quote.product?.manufacturer || quote.product?.modelNumber) && (
                <p className="mt-2 flex items-center gap-2 text-[13px] text-[#98A2B3]">
                  {quote.product.manufacturer && <span>{quote.product.manufacturer}</span>}
                  {quote.product.manufacturer && quote.product.modelNumber && <span className="text-[#D0D5DD]">|</span>}
                  {quote.product.modelNumber && <span>{quote.product.modelNumber}</span>}
                </p>
              )}
              {quote.product?.price != null && (
                <p className="mt-2 text-[14px] font-semibold text-[#101828]">
                  ${Number(quote.product.price).toLocaleString()} {quote.product.currency || "AUD"}
                </p>
              )}
            </div>
          </div>

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

          <div className="mt-4">
            <p className="text-[12px] font-medium text-[#667085]">Comment</p>
            <p className="mt-1 text-[13px] leading-6 text-[#475467]">
              {quote.comments || "No comments provided."}
            </p>
          </div>
        </>
      )}
    </Drawer>
  );
}