"use client";

import { Button } from "@/components/ui/button";
import { Download, X } from "lucide-react";
import jsPDF from "jspdf";
import { useLanguage } from "@/src/hooks/LanguageContext";
import { getTranslation } from "@/src/hooks/useTranslation";

export default function ReceiptModal({
  order,
  onClose,
}: {
  order: any;
  onClose: () => void;
}) {
  const { language } = useLanguage();
  const t = getTranslation(language).receiptModal;

  const downloadPDF = () => {
    const pdf = new jsPDF("p", "mm", "a4");
    const pageWidth = pdf.internal.pageSize.getWidth();
    let y = 20;

    // ===== HEADER =====
    pdf.setFont("helvetica", "bold");
    pdf.setFontSize(22);
    pdf.text(t.pdfTitle, pageWidth / 2, y, { align: "center" });

    y += 8;
    pdf.setFontSize(12);
    pdf.setFont("helvetica", "normal");
    pdf.text(t.pdfSubtitle, pageWidth / 2, y, { align: "center" });

    y += 6;
    pdf.setDrawColor(250, 166, 49);
    pdf.setLineWidth(1);
    pdf.line(20, y, pageWidth - 20, y);

    // ===== RECEIPT CARD =====
    y += 10;
    pdf.setDrawColor(220);
    pdf.roundedRect(20, y, pageWidth - 40, 92, 4, 4);

    y += 12;

    const labelX = 28;
    const valueX = 95;

    const row = (label: string, value: string) => {
      pdf.setFont("helvetica", "bold");
      pdf.text(label, labelX, y);
      pdf.setFont("helvetica", "normal");
      pdf.text(value, valueX, y);
      y += 9;
    };

    row(t.pdfReceiptNo, `#${order.id}`);
    row(t.pdfTransactionId, order.transaction_id || "N/A");
    row(t.pdfAmountPaid, `Rs. ${order.amount}`);
    row(t.pdfCurrency, order.currency);
    row(t.pdfPaymentStatus, order.status === "1" ? t.success : t.failed);
    row(
      t.pdfDateTime,
      new Date(order.created_at).toLocaleString(
        language === "hindi" ? "hi-IN" : "en-IN",
      ),
    );

    // ===== THANK YOU =====
    y += 10;
    pdf.setDrawColor(230);
    pdf.line(20, y, pageWidth - 20, y);

    y += 10;
    pdf.setFontSize(11);
    pdf.text(t.pdfThankYou, pageWidth / 2, y, {
      align: "center",
      maxWidth: pageWidth - 40,
    });

    y += 10;
    pdf.setFontSize(9);
    pdf.setTextColor(120);
    pdf.text(t.pdfDisclaimer, pageWidth / 2, y, { align: "center" });

    // ===== SAVE =====
    pdf.save(`GiveGita_Receipt_${order.id}.pdf`);
  };

  return (
    <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center px-4">
      <div className="bg-white rounded-2xl w-full max-w-md p-6 relative shadow-2xl">
        <button
          onClick={onClose}
          className="absolute top-4 right-4 text-gray-400 hover:text-black"
        >
          <X />
        </button>

        <h2 className="text-xl font-bold mb-1 text-center">{t.title}</h2>
        <p className="text-sm text-gray-500 text-center mb-6">{t.thankYou}</p>

        <div className="space-y-3 text-sm text-gray-700 bg-orange-50 rounded-xl p-4">
          <div className="flex justify-between">
            <span className="font-medium">{t.amount}</span>
            <span className="font-semibold">Rs. {order.amount}</span>
          </div>

          <div className="flex justify-between">
            <span className="font-medium">{t.transactionId}</span>
            <span className="text-xs text-right break-all">
              {order.transaction_id || "N/A"}
            </span>
          </div>

          <div className="flex justify-between">
            <span className="font-medium">{t.status}</span>
            <span
              className={`font-semibold ${
                order.status === "1" ? "text-green-600" : "text-red-600"
              }`}
            >
              {order.status === "1" ? t.success : t.failed}
            </span>
          </div>

          <div className="flex justify-between">
            <span className="font-medium">{t.date}</span>
            <span>
              {new Date(order.created_at).toLocaleDateString(
                language === "hindi" ? "hi-IN" : "en-IN",
              )}
            </span>
          </div>
        </div>

        <Button
          onClick={downloadPDF}
          className="w-full mt-6 bg-[#FAA631] hover:bg-orange-500"
        >
          <Download className="mr-2" />
          {t.downloadReceipt}
        </Button>
      </div>
    </div>
  );
}