"use client";

import { QRCodeSVG } from "qrcode.react";
import { resolveImageUrl } from "@/lib/api";
import { amountInWords } from "@/lib/amountInWords";

export type InvoiceData = {
  type: "donation" | "event" | "custom" | "membership";
  receipt_no: string;
  donor_name: string;
  email?: string | null;
  phone?: string | null;
  address?: string | null;
  pan?: string | null;
  amount: number;
  purpose: string;
  status: string;
  date?: string | null;
  notes?: string | null;
  member_number?: string | null;
  membership_number?: string | null;
  payment_type?: string | null;
  registration_fee?: number | string | null;
  renewal_fee?: number | string | null;
  donation_amount?: number | string | null;
  discount_amount?: number | string | null;
  late_fee?: number | string | null;
  tax_amount?: number | string | null;
  payment_method?: string | null;
  transaction_number?: string | null;
  reference_number?: string | null;
  settings: {
    site_name?: string;
    short_name?: string;
    tagline?: string;
    logo_url?: string;
    signature_url?: string;
    primary_color?: string;
    secondary_color?: string;
    accent_color?: string;
    address?: string;
    phone?: string;
    email?: string;
  };
};

type LineItem = { label: string; note?: string; qty: number; rate: number; amount: number; kind: "normal" | "discount" | "tax" };

function money(value?: number | string | null) {
  return `Rs. ${Number(value || 0).toLocaleString("en-IN", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
}

function prettyDate(value?: string | null) {
  if (!value) return "—";
  if (value === "Lifetime") return value;
  const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(value);
  if (m) {
    const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
    return d.toLocaleDateString("en-IN", { day: "2-digit", month: "short", year: "numeric" });
  }
  const d = new Date(value);
  if (isNaN(d.getTime())) return value;
  return d.toLocaleDateString("en-IN", { day: "2-digit", month: "short", year: "numeric" });
}

function human(value?: string | null) {
  if (!value) return "—";
  return value.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
}

function buildItems(data: InvoiceData): { items: LineItem[]; subtotal: number; discount: number; tax: number } {
  if (data.type === "membership") {
    const items: LineItem[] = [];
    const reg = Number(data.registration_fee || 0);
    const renew = Number(data.renewal_fee || 0);
    const don = Number(data.donation_amount || 0);
    const late = Number(data.late_fee || 0);
    const tax = Number(data.tax_amount || 0);
    const disc = Number(data.discount_amount || 0);
    if (reg > 0) items.push({ label: "Registration Fee", qty: 1, rate: reg, amount: reg, kind: "normal" });
    if (renew > 0) items.push({ label: "Renewal Fee", qty: 1, rate: renew, amount: renew, kind: "normal" });
    if (don > 0) items.push({ label: "Donation Amount", qty: 1, rate: don, amount: don, kind: "normal" });
    if (late > 0) items.push({ label: "Late Fee", qty: 1, rate: late, amount: late, kind: "normal" });
    if (tax > 0) items.push({ label: "Tax", note: human(data.payment_type), qty: 1, rate: tax, amount: tax, kind: "tax" });
    if (disc > 0) items.push({ label: "Discount", qty: 1, rate: -disc, amount: -disc, kind: "discount" });
    const subtotal = reg + renew + don + late;
    return { items, subtotal, discount: disc, tax };
  }

  const amount = Number(data.amount || 0);
  return {
    items: [{ label: data.purpose || (data.type === "event" ? "Event Registration" : "Donation"), note: data.type === "donation" ? "General Donation" : undefined, qty: 1, rate: amount, amount, kind: "normal" }],
    subtotal: amount,
    discount: 0,
    tax: 0,
  };
}

export function ReceiptDisplay({ data }: { data: InvoiceData }) {
  const primary = data.settings.primary_color || "#0f6b4f";
  const logoUrl = data.settings.logo_url ? resolveImageUrl(data.settings.logo_url) : "/logo2.png";
  const signatureUrl = data.settings.signature_url ? resolveImageUrl(data.settings.signature_url) : "";
  const { items, subtotal, discount, tax } = buildItems(data);
  const total = Number(data.amount || 0);
  const statusTone = String(data.status).toLowerCase();
  const statusOk = ["paid", "approved", "success", "completed", "free"].includes(statusTone);
  const verifyUrl = typeof window !== "undefined" ? window.location.origin : "";

  return (
    <>
      <div className="rcpt-print-area">
        <div className="rcpt-sheet">
          {/* ── Header band ─────────────────────────── */}
          <div className="rcpt-head" style={{ background: `linear-gradient(115deg, ${primary}, ${shade(primary, -20)})` }}>
            <div className="rcpt-head-l">
              {logoUrl ? (
                // eslint-disable-next-line @next/next/no-img-element
                <img src={logoUrl} alt="" className="rcpt-logo" />
              ) : null}
              <div>
                <p className="rcpt-org">{data.settings.site_name || "Shanti Kritnischay Seva Foundation"}</p>
                <p className="rcpt-tag">{data.settings.tagline || "Seva, Shiksha aur Swasthya"}</p>
              </div>
            </div>
            <div className="rcpt-head-r">
              <p className="rcpt-title">INVOICE</p>
              <span className={`rcpt-status ${statusOk ? "rcpt-status-ok" : "rcpt-status-warn"}`}>{human(data.status)}</span>
            </div>
          </div>

          <div className="rcpt-body">
            {/* ── Invoice meta ───────────────────────── */}
            <div className="rcpt-meta">
              <div>
                <span className="rcpt-lbl">Receipt / Invoice No</span>
                <p className="rcpt-no">{data.receipt_no}</p>
              </div>
              <div>
                <span className="rcpt-lbl">Issue Date</span>
                <p className="rcpt-val">{prettyDate(data.date)}</p>
              </div>
              <div>
                <span className="rcpt-lbl">Payment Mode</span>
                <p className="rcpt-val">{human(data.payment_method) || "—"}</p>
              </div>
            </div>

            {/* ── Parties ────────────────────────────── */}
            <div className="rcpt-parties">
              <div className="rcpt-box">
                <span className="rcpt-lbl">BILLED TO</span>
                <p className="rcpt-strong">{data.donor_name}</p>
                {data.address ? <p className="rcpt-soft">{data.address}</p> : null}
                {data.phone ? <p className="rcpt-soft">Phone: {data.phone}</p> : null}
                {data.email ? <p className="rcpt-soft">Email: {data.email}</p> : null}
                {data.pan ? <p className="rcpt-soft">PAN: {data.pan}</p> : null}
                {data.member_number ? <p className="rcpt-soft">Member No: {data.member_number}</p> : null}
              </div>
              <div className="rcpt-box rcpt-box-r">
                <span className="rcpt-lbl">PAYMENT FROM</span>
                <p className="rcpt-strong">{data.settings.site_name || "Shanti Kritnischay Seva Foundation"}</p>
                <p className="rcpt-soft">{data.settings.address || "Chatra, Jharkhand, India"}</p>
                {data.settings.phone ? <p className="rcpt-soft">Phone: {data.settings.phone}</p> : null}
                {data.settings.email ? <p className="rcpt-soft">Email: {data.settings.email}</p> : null}
              </div>
            </div>

            {/* ── Items table ────────────────────────── */}
            <table className="rcpt-items">
              <thead>
                <tr>
                  <th className="rcpt-th rcpt-th-desc">Description</th>
                  <th className="rcpt-th">Qty</th>
                  <th className="rcpt-th">Rate</th>
                  <th className="rcpt-th rcpt-th-amt">Amount</th>
                </tr>
              </thead>
              <tbody>
                {items.map((it, i) => (
                  <tr key={i}>
                    <td className="rcpt-td rcpt-td-desc">
                      <span className="rcpt-item-lbl">{it.label}</span>
                      {it.note ? <span className="rcpt-item-note">{it.note}</span> : null}
                    </td>
                    <td className="rcpt-td">{it.qty}</td>
                    <td className="rcpt-td">{money(it.rate)}</td>
                    <td className={`rcpt-td rcpt-td-amt ${it.kind === "discount" ? "rcpt-td-neg" : ""}`}>{money(it.amount)}</td>
                  </tr>
                ))}
              </tbody>
            </table>

            {/* ── Totals ─────────────────────────────── */}
            <div className="rcpt-totals">
              <div className="rcpt-totals-inner">
                <div className="rcpt-total-row">
                  <span>Subtotal</span>
                  <strong>{money(subtotal)}</strong>
                </div>
                {discount > 0 ? (
                  <div className="rcpt-total-row">
                    <span>Discount</span>
                    <strong className="rcpt-td-neg">− {money(discount)}</strong>
                  </div>
                ) : null}
                {tax > 0 ? (
                  <div className="rcpt-total-row">
                    <span>Tax</span>
                    <strong>{money(tax)}</strong>
                  </div>
                ) : null}
                <div className="rcpt-grand" style={{ background: `linear-gradient(115deg, ${primary}, ${shade(primary, -20)})` }}>
                  <span>Total Amount</span>
                  <strong>{money(total)}</strong>
                </div>
              </div>
            </div>

            <p className="rcpt-inwords">
              Amount in words: <strong>{amountInWords(total)}</strong>
            </p>

            {/* ── Payment details ────────────────────── */}
            <div className="rcpt-pay">
              <div className="rcpt-box">
                <span className="rcpt-lbl">PAYMENT DETAILS</span>
                <p className="rcpt-soft">Method: {human(data.payment_method) || "—"}</p>
                {data.transaction_number ? <p className="rcpt-soft">Transaction No: {data.transaction_number}</p> : null}
                {data.reference_number ? <p className="rcpt-soft">Reference No: {data.reference_number}</p> : null}
                {data.payment_type ? <p className="rcpt-soft">Type: {human(data.payment_type)}</p> : null}
              </div>
              <div className="rcpt-box rcpt-box-r">
                <span className="rcpt-lbl">NOTES</span>
                <p className="rcpt-soft">{data.notes || "Thank you for your valuable support. This is a system generated invoice and does not require a physical signature."}</p>
              </div>
            </div>

            {/* ── Signature + verification ───────────── */}
            <div className="rcpt-footer">
              <div className="rcpt-sig">
                {signatureUrl ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img src={signatureUrl} alt="" className="rcpt-sig-img" />
                ) : (
                  <div className="rcpt-sig-line" />
                )}
                <span className="rcpt-sig-lbl">For {data.settings.site_name || "SKSF"}</span>
                <span className="rcpt-sig-name">Authorised Signatory</span>
              </div>
              <div className="rcpt-verify">
                <div className="rcpt-qr">
                  <QRCodeSVG value={`${verifyUrl || ""}/receipt?receiptNo=${encodeURIComponent(data.receipt_no)}`} size={84} level="M" marginSize={0} fgColor="#0f172a" bgColor="#ffffff" />
                </div>
                <p className="rcpt-verify-txt">
                  Scan to verify authenticity
                  <br />
                  <span>{verifyUrl || "sksfoundation.org"}/receipt</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style dangerouslySetInnerHTML={{ __html: `
        .rcpt-sheet {
          width: 794px;
          min-height: 1123px;
          background: #ffffff;
          font-family: Arial, Helvetica, sans-serif;
          -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
        }
        .rcpt-print-area { display: flex; flex-direction: column; align-items: center; }

        .rcpt-head {
          display: flex; align-items: center; justify-content: space-between;
          gap: 20px; padding: 30px 34px; color: #fff;
        }
        .rcpt-head-l { display: flex; align-items: center; gap: 14px; min-width: 0; }
        .rcpt-logo { width: 52px; height: 52px; object-fit: contain; background: #fff; padding: 4px; }
        .rcpt-org { font-size: 16px; font-weight: 800; line-height: 1.15; }
        .rcpt-tag { font-size: 10.5px; opacity: 0.85; margin-top: 3px; letter-spacing: 0.02em; }
        .rcpt-head-r { text-align: right; }
        .rcpt-title { font-family: Georgia, 'Times New Roman', serif; font-size: 30px; font-weight: 700; letter-spacing: 3px; }
        .rcpt-status { display: inline-block; margin-top: 8px; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; }
        .rcpt-status-ok { background: rgba(255,255,255,0.22); color: #fff; }
        .rcpt-status-warn { background: #f2c14e; color: #0f172a; }

        .rcpt-body { padding: 28px 34px 34px; }

        .rcpt-lbl { font-size: 9px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #98a2b3; }
        .rcpt-strong { font-size: 13.5px; font-weight: 800; color: #0f172a; margin-top: 5px; }
        .rcpt-soft { font-size: 11px; color: #475569; margin-top: 3px; line-height: 1.5; word-break: break-word; }
        .rcpt-val { font-size: 12.5px; font-weight: 700; color: #0f172a; margin-top: 5px; }
        .rcpt-no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700; color: #0f172a; margin-top: 5px; word-break: break-all; }

        .rcpt-meta {
          display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 16px;
          padding: 18px 0 20px;
        }

        .rcpt-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
        .rcpt-box { min-width: 0; }
        .rcpt-box-r { text-align: right; }
        .rcpt-box-r .rcpt-soft { text-align: right; }

        .rcpt-items { width: 100%; border-collapse: collapse; margin-top: 24px; }
        .rcpt-th {
          text-align: left; font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
          color: ${primary}; padding: 8px 0;
        }
        .rcpt-th-desc { width: 52%; }
        .rcpt-th-amt, .rcpt-td-amt { text-align: right; }
        .rcpt-td { padding: 12px 0; font-size: 12px; color: #344054; font-weight: 600; }
        .rcpt-td-desc { color: #0f172a; }
        .rcpt-item-lbl { display: block; font-weight: 700; }
        .rcpt-item-note { display: block; font-size: 10.5px; color: #98a2b3; margin-top: 2px; }
        .rcpt-td-neg { color: #c2452d; }

        .rcpt-totals { display: flex; justify-content: flex-end; margin-top: 20px; }
        .rcpt-totals-inner { width: 300px; }
        .rcpt-total-row {
          display: flex; align-items: center; justify-content: space-between;
          padding: 9px 0; font-size: 12px; color: #475569; font-weight: 600;
        }
        .rcpt-grand {
          display: flex; align-items: center; justify-content: space-between;
          padding: 14px 16px; margin-top: 10px; color: #fff;
        }
        .rcpt-grand span { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
        .rcpt-grand strong { font-size: 17px; font-weight: 800; }

        .rcpt-inwords {
          margin-top: 12px; font-size: 11px; color: #667085; text-align: right;
        }
        .rcpt-inwords strong { color: #0f172a; }

        .rcpt-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }

        .rcpt-footer {
          display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
          margin-top: 38px; padding-top: 26px;
        }
        .rcpt-sig { max-width: 280px; }
        .rcpt-sig-line { width: 210px; border-bottom: 1.5px solid #0f172a; margin-bottom: 8px; }
        .rcpt-sig-img {
          display: block; width: 210px; height: 48px; object-fit: contain;
          object-position: left center; margin-bottom: 8px;
        }
        .rcpt-sig-lbl { display: block; font-size: 10px; font-weight: 800; color: #344054; }
        .rcpt-sig-name { display: block; font-size: 10px; color: #98a2b3; margin-top: 3px; letter-spacing: 0.08em; text-transform: uppercase; }
        .rcpt-verify { display: flex; align-items: center; gap: 12px; }
        .rcpt-qr { width: 92px; height: 92px; padding: 6px; background: #fff; }
        .rcpt-qr svg { width: 100%; height: 100%; display: block; }
        .rcpt-verify-txt { font-size: 9px; color: #667085; line-height: 1.5; }
        .rcpt-verify-txt span { font-family: ui-monospace, monospace; font-size: 8.5px; color: #98a2b3; }

        @media print {
          @page { size: A4 portrait; margin: 0; }
          html, body { background: #ffffff !important; margin: 0; padding: 0; }
          body * { visibility: hidden; }
          .rcpt-print-area, .rcpt-print-area * { visibility: visible; }
          .rcpt-print-area {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 0;
          }
          .rcpt-sheet { box-shadow: none; border-radius: 0; }
          .no-print { display: none !important; }
        }
      `}} />
    </>
  );
}

function shade(hex: string, percent: number) {
  const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex || "");
  if (!m) return "#0f6b4f";
  const mix = (c: string) => {
    const n = parseInt(c, 16);
    const v = Math.round(percent < 0 ? (n * (100 + percent)) / 100 : n + ((255 - n) * percent) / 100);
    return Math.max(0, Math.min(255, v)).toString(16).padStart(2, "0");
  };
  return "#" + mix(m[1]) + mix(m[2]) + mix(m[3]);
}