import { useEffect } from "react";
import logo from "../assets/images/shas-Logo-White-Bg.png";
import IconShoppingBag from "../components/Icon/IconShoppingBag";
import { MOCK_INVOICES, formatINR } from "../data/invoiceData";

interface Props {
  orderId: string;
  onReady?: () => void;
}

const InvoiceContent = ({ orderId, onReady }: Props) => {
  const order = MOCK_INVOICES[orderId] ?? MOCK_INVOICES["WT-29224"];
  const subtotal = order.items.reduce((sum, item) => sum + item.price, 0);
  const total = subtotal;

  useEffect(() => {
    // Signal that images/fonts are ready
    const timer = setTimeout(() => onReady?.(), 300);
    return () => clearTimeout(timer);
  }, [onReady]);

  return (
    <div style={{ width: 794, background: "white", fontFamily: "sans-serif" }}>
      <div className="bg-white rounded-2xl shadow-xl overflow-hidden">

        <div className="px-8 pt-8 pb-4 flex items-start justify-between gap-4">
          {/* Left: Logo + From */}
          <div className="flex flex-col gap-5">
            <img src={logo} alt="Shas Jewelry" className="h-20 w-64 mb-10" />
            <div>
              <h1 className="text-[28px] font-black text-gray-900 tracking-wide mb-2">INVOICE</h1>
              <div className="text-[10px] font-bold text-gray-900 uppercase tracking-widest mb-1">From:</div>
              <div className="text-[12px] text-gray-700 space-y-0.5">
                <div className="font-semibold">{order.from.name}</div>
                <div className="leading-relaxed">{order.from.address}</div>
                <div>{order.from.landmark}</div>
                <div className="pt-1">Mob: {order.from.phones.join(" , ")}</div>
              </div>
            </div>
          </div>

          {/* Right: To + Invoice meta — both start at the same top */}
          <div className="flex flex-col gap-4 text-[12px] text-gray-700 min-w-[260px]">
            {/* To block */}
            <div className="space-y-0.5 mb-8">
              <div className="text-[10px] font-bold text-gray-900 uppercase tracking-widest mb-1">To:</div>
              <div className="font-semibold text-gray-700">{order.to.name}</div>
              <div>{order.to.address}</div>
              <div>{order.to.city}</div>
              <div>{order.to.state}</div>
              <div className="text-blue-600">{order.to.email}</div>
              {order.to.phones.map((p) => (
                <div key={p}>{p}</div>
              ))}
            </div>

            {/* Invoice meta block — directly below To, same left edge */}
            <div className="space-y-1">
              {[
                ["Invoice Number:", order.invoiceNumber],
                ["Invoice Date:", order.invoiceDate],
                ["Order Number:", order.orderNumber],
                ["Order Date:", order.orderDate],
                ["Payment Method:", order.paymentMethod],
              ].map(([label, value]) => (
                <div key={label} className="flex gap-4">
                  <span className="text-gray-900 whitespace-nowrap">{label}</span>
                  <span className="font-medium text-gray-900">{value}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
        <style>{`
              .shas-invoice-table thead tr,
              .shas-invoice-table tfoot tr {
                background-color: #000 !important;
              }
            `}</style>
        <div className="px-4 sm:px-6 md:px-8 pb-2 space-y-64">
          <div>
            <div className="hidden sm:block">
              <table className="shas-invoice-table w-full text-[12px] sm:text-[13px]">
                <thead>
                  <tr className="bg-gray-800 text-white">
                    <th className="text-left px-4 py-2.5 font-semibold">Product</th>
                    <th className="text-center px-4 py-2.5 font-semibold">Quantity</th>
                    <th className="text-right px-4 py-2.5 font-semibold">Price</th>
                  </tr>
                </thead>
                <tbody>
                  {order.items.map((item, i) => (
                    <tr key={i} className="border-b border-gray-100">
                      <td className="px-4 py-3 text-gray-800">{item.product}</td>
                      <td className="px-4 py-3 text-center text-gray-700">{item.qty}</td>
                      <td className="px-4 py-3 text-right text-gray-800 font-medium">
                        {formatINR(item.price)}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            {/* SUMMARY SECTION */}
            <div className="px-8 pb-2 border-b border-gray-100">
              <div className="ml-auto w-64 mt-2 text-[13px] space-y-1.5">
                <div className="flex justify-between text-gray-600  border-b border-gray-100">
                  <span>Subtotal</span>
                  <span className="font-medium text-gray-800">{formatINR(subtotal)}</span>
                </div>

                <div className="flex justify-between text-gray-600 border-b border-gray-100 pb-2">
                  <span>Shipping</span>
                  <span className="font-medium text-gray-800">{order.shipping}</span>
                </div>

                <div className="flex justify-between text-gray-800 font-semibold pt-0.5  border-b border-gray-100">
                  <span>Total</span>
                  <span>{formatINR(total)}</span>
                </div>

                <div className="flex justify-between text-gray-600 border-b border-gray-100 pb-2">
                  <span>Payment method</span>
                  <span className="text-right font-medium text-gray-800 max-w-[130px] leading-snug">
                    {order.paymentMethod}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <div className="px-8 py-5 border-t border-gray-100 bg-gray-50 text-center space-y-1">
            <p className="text-[12px] text-gray-600">
              Its now being processed…It will be delivered to your doorstep within 3-8 working days.
            </p>
            <p className="text-[12px] text-gray-600">Inside Tamilnadu – 3-5 days</p>
            <p className="text-[12px] text-gray-600">All over India – 4-8 days</p>
            <p className="text-[12px] text-gray-600">Full unboxing video is mandatory for any damage claims.</p>
            <p className="text-[13px] font-semibold text-gray-700 pt-1 flex items-center justify-center gap-2">Happy shopping <IconShoppingBag /></p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default InvoiceContent;