"use client";

import { SchoolSettingsDTO, PaymentDTO } from "@/lib/types";
import { formatMoney, formatDate } from "@/lib/client-utils";

/** قالب وصل الدفع المطبوع - يظهر فقط عند الطباعة (حفظ PDF) */
export function ReceiptPrintTemplate({
  payment, settings, paidAt, remaining, totalFee, paidTotal, discountPercent,
}: {
  payment: PaymentDTO;
  settings: SchoolSettingsDTO | null;
  paidAt: string;
  remaining: number;
  totalFee: number;
  paidTotal: number;
  discountPercent?: number;
}) {
  const currency = settings?.currency || "د.ع";
  const discount = discountPercent ?? payment.student?.discountPercent ?? 0;
  const hasDiscount = discount > 0;
  return (
    <div className="receipt-print p-6" dir="rtl" style={{ fontFamily: "Cairo, Tahoma, sans-serif", color: "#111" }}>
      {/* رأس الوصل */}
      <div className="flex items-start justify-between border-b-2 border-gray-800 pb-3 mb-4">
        <div className="flex items-center gap-3">
          {settings?.logoData && (
            <img src={settings.logoData} alt="شعار المدرسة" style={{ width: 64, height: 64, objectFit: "contain" }} />
          )}
          <div>
            <h1 style={{ fontSize: 20, fontWeight: 800, margin: 0 }}>{settings?.nameAr || "المدرسة الأهلية"}</h1>
            <p style={{ fontSize: 12, margin: "2px 0 0", color: "#444" }}>{settings?.nameEn || "Private School"}</p>
            {settings?.address && <p style={{ fontSize: 11, margin: "2px 0 0", color: "#555" }}>{settings.address}</p>}
            {settings?.phone && <p style={{ fontSize: 11, margin: "2px 0 0", color: "#555" }}>هاتف: {settings.phone}</p>}
          </div>
        </div>
        <div className="text-left">
          <div style={{ border: "2px solid #333", borderRadius: 8, padding: "8px 16px" }}>
            <p style={{ fontSize: 11, margin: 0, color: "#555" }}>رقم الوصل</p>
            <p style={{ fontSize: 18, fontWeight: 800, margin: 0 }} dir="ltr">{payment.receiptNumber}</p>
          </div>
          <p style={{ fontSize: 11, margin: "8px 0 0", color: "#444" }}>التاريخ: {formatDate(paidAt)}</p>
        </div>
      </div>

      <h2 style={{ fontSize: 15, fontWeight: 700, textAlign: "center", margin: "0 0 12px", letterSpacing: 1 }}>
        وصل استلام قسط دراسي — Tuition Payment Receipt
      </h2>

      {/* بيانات الطالب */}
      <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12 }} dir="rtl">
        <tbody>
          <tr>
            <td style={cellLabel}>اسم الطالب / Student Name</td>
            <td style={cellValue}>{payment.student?.nameAr}</td>
            <td style={cellLabel}>بالإنجليزية / English</td>
            <td style={cellValue} dir="ltr">{payment.student?.nameEn}</td>
          </tr>
          <tr>
            <td style={cellLabel}>كود الطالب / Student ID</td>
            <td style={cellValue} dir="ltr">{payment.student?.studentCode}</td>
            <td style={cellLabel}>المرحلة والصف</td>
            <td style={cellValue}>{payment.student?.grade} — {payment.student?.classroom}</td>
          </tr>
          <tr>
            <td style={cellLabel}>نوع القسط</td>
            <td style={cellValue}>{payment.installmentType}</td>
            <td style={cellLabel}>طريقة الدفع</td>
            <td style={cellValue}>
              {payment.method === "CASH" ? "نقدي (وصل ورقي)" : `دفع إلكتروني${payment.transactionRef ? ` - مرجع: ${payment.transactionRef}` : ""}`}
            </td>
          </tr>
        </tbody>
      </table>

      {/* المبالغ */}
      <div style={{ border: "2px solid #333", borderRadius: 10, marginTop: 14, overflow: "hidden" }}>
        <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 16px", background: "#f3f4f6" }}>
          <span style={{ fontSize: 12 }}>المبلغ المستلم</span>
          <span style={{ fontSize: 16, fontWeight: 800 }}>{formatMoney(payment.amount, currency)}</span>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", padding: "8px 16px", borderTop: "1px dashed #999", fontSize: 12 }}>
          <span>{hasDiscount ? "القسط الصافي بعد الخصم / Net Fee" : "إجمالي القسط الكلي / Total Fee"}</span>
          <span style={{ fontWeight: 700 }}>{formatMoney(totalFee, currency)}</span>
        </div>
        {hasDiscount && (
          <div style={{ display: "flex", justifyContent: "space-between", padding: "8px 16px", borderTop: "1px dashed #999", fontSize: 12, color: "#15803d" }}>
            <span>نسبة الخصم الممنوحة / Discount</span>
            <span style={{ fontWeight: 700 }}>{discount}%</span>
          </div>
        )}
        <div style={{ display: "flex", justifyContent: "space-between", padding: "8px 16px", borderTop: "1px dashed #999", fontSize: 12 }}>
          <span>إجمالي المسدد سابقاً + الحالي / Paid</span>
          <span style={{ fontWeight: 700 }}>{formatMoney(paidTotal, currency)}</span>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", padding: "8px 16px", borderTop: "1px dashed #999", fontSize: 12 }}>
          <span>المتبقي المستحق / Remaining</span>
          <span style={{ fontWeight: 800, color: remaining > 0 ? "#b91c1c" : "#15803d" }}>{formatMoney(remaining, currency)}</span>
        </div>
      </div>

      {payment.notes && (
        <p style={{ fontSize: 11, color: "#555", marginTop: 8 }}>ملاحظات: {payment.notes}</p>
      )}

      {/* التذييل والتواقيع */}
      <div className="flex justify-between mt-10 pt-4 border-t">
        <div style={{ textAlign: "center", fontSize: 11 }}>
          <p style={{ margin: "0 0 24px" }}>المستلم / Received by</p>
          <p style={{ margin: 0, borderTop: "1px solid #999", paddingTop: 4, minWidth: 140 }}>{payment.creator?.fullName ?? ""}</p>
        </div>
        <div style={{ textAlign: "center", fontSize: 11 }}>
          <p style={{ margin: "0 0 24px" }}>ختم المدرسة / School Stamp</p>
          <p style={{ margin: 0, borderTop: "1px solid #999", paddingTop: 4, minWidth: 140 }}> </p>
        </div>
      </div>

      <p style={{ fontSize: 10, color: "#666", textAlign: "center", marginTop: 14, borderTop: "1px solid #ccc", paddingTop: 8 }}>
        {settings?.footerText || "هذه الوصل إثبات دفع"}
      </p>
    </div>
  );
}

const cellLabel: React.CSSProperties = {
  border: "1px solid #ccc",
  padding: "6px 10px",
  background: "#f9fafb",
  fontWeight: 700,
  fontSize: 11,
  width: "22%",
};

const cellValue: React.CSSProperties = {
  border: "1px solid #ccc",
  padding: "6px 10px",
  fontSize: 12,
  width: "28%",
};