import React from "react";

export default function CourseRegistrationModal({ bill, onClose }) {
  if (!bill) return null;

  return (
    <div className="fixed inset-0 bg-zinc-950/60 backdrop-blur-sm flex justify-center items-center p-4 z-50 animate-fadeIn">
      <div className="bg-white rounded-2xl shadow-xl max-w-md w-full p-6 border-t-8 border-indigo-600">
        
        <div className="text-center mb-6">
          <h2 className="text-2xl font-black text-zinc-900 tracking-tight">Registration Statement</h2>
          <p className="text-xs font-bold text-zinc-500 uppercase tracking-wider mt-1">
            Office of the Registrar • Academic Ledger
          </p>
        </div>
        
        <div className="space-y-3 border-y border-zinc-100 py-4 text-zinc-700 text-sm font-medium">
          <div className="flex justify-between items-center">
            <span className="text-zinc-400">Student Reg No:</span> 
            <span className="font-mono text-zinc-950 bg-zinc-100 px-2 py-0.5 rounded text-xs font-bold">
              {bill.StudentRegNumber || bill.PlateNumber || "N/A"}
            </span>
          </div>
          <div className="flex justify-between items-center">
            <span className="text-zinc-400">Registered Course:</span> 
            <span className="text-zinc-950 font-semibold">{bill.CourseName || bill.ServiceName}</span>
          </div>
          <div className="flex justify-between items-center">
            <span className="text-zinc-400">Tuition Fee Due:</span> 
            <span className="font-bold text-zinc-950 font-mono">
              {Number(bill.TuitionFee || bill.ServicePrice || 0).toLocaleString()} Rwf
            </span>
          </div>
          <div className="flex justify-between items-center">
            <span className="text-zinc-400">Payment Received:</span> 
            <span className="font-bold text-emerald-600 font-mono">
              {Number(bill.AmountPaid || 0).toLocaleString()} Rwf
            </span>
          </div>
          <div className="flex justify-between items-center">
            <span className="text-zinc-400">Enrolment Date:</span> 
            <span className="font-mono text-zinc-950">
              {new Date(bill.EnrollmentDate || bill.PaymentDate).toLocaleDateString("en-GB")}
            </span>
          </div>
          <div className="flex justify-between items-center">
            <span className="text-zinc-400">Processed By:</span> 
            <span className="text-zinc-950 text-xs font-bold bg-zinc-50 border border-zinc-200/60 px-2 py-0.5 rounded-md">
              👤 {bill.Receiver || "Registrar Desk"}
            </span>
          </div>
        </div>

        <div className="mt-6 flex justify-end gap-3 print:hidden">
          <button 
            onClick={() => window.print()} 
            className="bg-zinc-900 text-white px-4 py-2.5 rounded-xl text-xs font-bold hover:bg-zinc-800 transition shadow-sm"
          >
            Print Receipt
          </button>
          <button 
            onClick={onClose} 
            className="bg-rose-500 text-white px-4 py-2.5 rounded-xl text-xs font-bold hover:bg-rose-600 transition shadow-sm"
          >
            Close
          </button>
        </div>

      </div>
    </div>
  );
}