import type { Lang } from "@/lib/i18n";
import { fmtMoney } from "@/lib/i18n";

export function Invoice({ sale, shop, lang = "bn" as Lang }: { sale: any; shop: any; lang?: Lang }) {
  const items = sale.items || sale.sale_items || [];
  const tt = (bn: string, en: string) => (lang === "bn" ? bn : en);
  return (
    <div className="print-area hidden print:block font-sans text-black bg-white">
      <div className="max-w-3xl mx-auto p-6 text-sm">
        <div className="text-center border-b-2 border-black pb-3 mb-3">
          <h1 className="text-2xl font-extrabold">{shop?.shop_name || "Helpgate Inventory"}</h1>
          {shop?.address && <div className="text-xs">{shop.address}</div>}
          {shop?.phone && <div className="text-xs">📞 {shop.phone}</div>}
        </div>
        <div className="flex justify-between mb-3 text-xs">
          <div><b>{tt("ইনভয়েস #", "Invoice #")}:</b> {sale.id?.slice(0, 8).toUpperCase()}</div>
          <div><b>{tt("তারিখ", "Date")}:</b> {new Date(sale.created_at || Date.now()).toLocaleString(lang === "bn" ? "bn-BD" : "en-IN")}</div>
        </div>
        {sale.customer_name && (
          <div className="mb-3 text-xs">
            <b>{tt("কাস্টমার", "Customer")}:</b> {sale.customer_name} {sale.customer_phone && `· ${sale.customer_phone}`}
          </div>
        )}
        <table className="w-full border-collapse text-xs">
          <thead><tr className="border-b border-black">
            <th className="text-left py-1">#</th>
            <th className="text-left py-1">{tt("পণ্য", "Item")}</th>
            <th className="text-right py-1">{tt("পরিমাণ", "Qty")}</th>
            <th className="text-right py-1">{tt("মূল্য", "Rate")}</th>
            <th className="text-right py-1">{tt("মোট", "Total")}</th>
          </tr></thead>
          <tbody>
            {items.map((it: any, i: number) => (
              <tr key={i} className="border-b border-dashed">
                <td className="py-1">{i + 1}</td>
                <td className="py-1">{it.product_name}</td>
                <td className="text-right py-1">{it.quantity}</td>
                <td className="text-right py-1">{Number(it.unit_price).toFixed(2)}</td>
                <td className="text-right py-1">{Number(it.subtotal).toFixed(2)}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="mt-3 ml-auto w-64 text-xs space-y-1">
          <Row label={tt("সাবটোটাল", "Subtotal")} value={fmtMoney(sale.subtotal, lang)} />
          {Number(sale.discount) > 0 && <Row label={tt("ডিসকাউন্ট", "Discount")} value={`- ${fmtMoney(sale.discount, lang)}`} />}
          {Number(sale.vat) > 0 && <Row label={tt("ভ্যাট", "VAT")} value={fmtMoney(sale.vat, lang)} />}
          <Row label={tt("মোট", "Total")} value={fmtMoney(sale.total, lang)} big />
          <Row label={tt("পরিশোধিত", "Paid")} value={fmtMoney(sale.paid, lang)} />
          {Number(sale.due) > 0 && <Row label={tt("বকেয়া", "Due")} value={fmtMoney(sale.due, lang)} />}
        </div>
        <div className="text-center mt-6 pt-3 border-t text-xs">
          <p>{tt("ধন্যবাদ! আবার আসবেন।", "Thank you! Please come again.")}</p>
          <p className="mt-1 text-[10px] text-gray-500">Powered by Helpgate Inventory · Developed by Md Waliduzzaman Sarder · 01722427373</p>
        </div>
      </div>
    </div>
  );
}

function Row({ label, value, big }: { label: string; value: string; big?: boolean }) {
  return <div className={`flex justify-between ${big ? "font-extrabold border-t border-black pt-1 text-base" : ""}`}><span>{label}</span><span>{value}</span></div>;
}