// Component rendering printable security deposit receipts with transaction timestamps and conditions description.
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import api from "../api";
import logo from "../assets/logo.png"; 

const DepositReceipt = () => {
  const { id } = useParams();
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchBooking = async () => {
      try {
        const res = await api.get(`/bookings/${id}`);
        setData(res.data);
      } catch (err) { 
        console.error("Error fetching booking:", err); 
      }
    };
    fetchBooking();
  }, [id]);
useEffect(() => {
  if (data) {
    setTimeout(() => {
      window.print();
    }, 500); 
  }
}, [data]);
  if (!data) return <div className="no-print p-5 text-center">Loading Receipt Data...</div>;

  const formatAmount = (amt) => parseFloat(amt || 0).toFixed(2);
  
  const carBrand = data.car_brand || data.brand || "";
  const carModel = data.car_model || data.model || "";
  const carYear = data.car_year || data.year || "";
  const depositAmt = data.deposit || data.security_deposit || 0;

  return (
    <div className="receipt-container">
      <div className="receipt-header-main">
        <div className="header-column side-text left-align">
          <h2 className="brand-eng">AL NAMMUR RENT A CAR LLC</h2>
          <p className="contact-info">Tel: +971 4 458 0610</p>
          <p className="contact-info">Mob: +971 52 142 4234</p>
          <p className="contact-info">Mob: +971 58 197 6064</p>
          <p className="contact-info">Mob: +971 55 695 9765</p>
        </div>
        
        <div className="header-column center-logo-box">
          <img src={logo} alt="Al Nammur Logo" className="logo-large" />
        </div>

        <div className="header-column side-text right-align">
          <h2 className="brand-ara">النمر لتأجير السيارات ذ.م.م</h2>
          <p className="contact-info-ar">هاتف: ٠٤٤٥٨٠٦١٠ ٩٧١+</p>
          <p className="contact-info-ar">جوال: ٠٥٢١٤٢٤٢٣٤ ٩٧١+</p>
          <p className="contact-info-ar">جوال: ٠٥٨١٩٧٦٠٦٤ ٩٧١+</p>
          <p className="contact-info-ar">جوال: ٠٥٥٦٩٥٩٧٦٥ ٩٧١+</p>
        </div>
      </div>

      <div className="title-section">
        <span className="title-text">SECURITY DEPOSIT RECEIPT</span>
      </div>

      <div className="details-grid">
        <div className="detail-row">
          <label>Deposit No:</label>
          <div className="value-line">DEP-{data.id || data.booking_id}</div>
          <label className="label-spacing">Date:</label>
          <div className="value-line" style={{width: '130px'}}>
            {new Date().toLocaleDateString('en-GB')}
          </div>
        </div>

        <div className="detail-row">
          <label>Customer Name:</label>
          <div className="value-line uppercase">{data.full_name || "N/A"}</div>
        </div>

        <div className="detail-row">
          <label>Vehicle Details:</label>
          <div className="value-line">{carBrand} {carModel} {carYear ? `(${carYear})` : ""}</div>
          <label className="label-spacing">Agreement No:</label>
          <div className="value-line" style={{width: '130px'}}>#{data.id || data.booking_id}</div>
        </div>

        <div className="detail-row">
          <label>Payment Mode:</label>
          <div className="value-line">{data.payment_method || data.payment_type || 'Cash'}</div>
          <label className="label-spacing">Type:</label>
          <div className="value-line">Security Deposit</div>
        </div>

        <div className="description-area">
          <p><strong>Description:</strong> Security deposit for vehicle rental. Refundable after 21-30 days from the date of return, subject to traffic fines and Salik clearance.</p>
        </div>

        <div className="amount-highlight-box">
           <div className="detail-row">
            <label>Amount Received:</label>
            <div className="value-line"><strong>AED {formatAmount(depositAmt)}</strong></div>
          </div>
          <div className="detail-row" style={{marginTop: '10px'}}>
            <label>Amount in Words:</label>
            <div className="value-line italic">{depositAmt} UAE Dirhams Only</div>
          </div>
        </div>
      </div>

      <div className="signature-area">
        <div className="signature-box">
          <div className="border-top-black"></div>
          <p>Authorized Signatory</p>
        </div>
        <div className="signature-box">
          <div className="border-top-black"></div>
          <p>Customer Signature</p>
        </div>
      </div>

      <div className="no-print" style={{textAlign:'center', marginTop:'50px'}}>
      </div>

      <style>{`
        .receipt-container { width: 210mm; margin: 0 auto; padding: 15mm; background: #fff; color: #000; font-family: 'Arial', sans-serif; }
        
        .receipt-header-main { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 10px; }
        .header-column { flex: 1; }
        .side-text { width: 35%; }
        .center-logo-box { width: 30%; display: flex; justify-content: center; align-items: center; }
        .logo-large { width: 450px; height: auto; max-height: 120px; object-fit: contain; }
        .left-align { text-align: left; }
        .right-align { text-align: right; }

        .brand-eng { margin: 0; font-size: 15px; color: #b08d57; font-weight: bold; }
        .brand-ara { margin: 0; font-size: 20px; font-weight: bold; }
        .contact-info, .contact-info-ar { margin: 2px 0; font-size: 12px; font-weight: 600; }

        .title-section { border-top: 2px solid #000; border-bottom: 2px solid #000; text-align: center; padding: 10px 0; margin: 25px 0; }
        .title-text { font-weight: bold; font-size: 22px; letter-spacing: 1px; }
        
        .details-grid { margin-top: 30px; }
        .detail-row { display: flex; align-items: flex-end; margin-bottom: 25px; width: 100%; }
        .detail-row label { font-size: 14px; font-weight: bold; margin-right: 10px; white-space: nowrap; }
        .value-line { border-bottom: 1px solid #000; flex-grow: 1; padding: 0 5px; font-size: 15px; min-height: 22px; }
        .label-spacing { margin-left: 25px; }
        .uppercase { text-transform: uppercase; }
        .italic { font-style: italic; color: #444; }

        .description-area { background: #f9f9f9; padding: 15px; border: 1px dashed #ccc; margin: 20px 0; font-size: 13px; line-height: 1.5; }
        
        .signature-area { display: flex; justify-content: space-between; margin-top: 90px; }
        .signature-box { width: 220px; text-align: center; }
        .border-top-black { border-top: 1px solid #000; margin-bottom: 5px; }
        .signature-box p { font-size: 14px; font-weight: bold; }

        .action-btn { padding: 12px 50px; background: #000; color: #fff; border: none; cursor: pointer; border-radius: 4px; font-weight: bold; font-size: 16px; }

        @media print {
          .no-print { display: none; }
          .receipt-container { padding: 5mm; width: 100%; }
        }
      `}</style>
    </div>
  );
};

export default DepositReceipt;