import React, { useState, useEffect, useRef } from 'react';

// Predefined equipment list based on user requirements
const DEFAULT_EQUIPMENT = [
  { id: '1', selected: true, rating: '580KW', name: 'Waari Solar Panel', quantity: 8, unit: 'Nos', make: 'Waari', warranty: '25 Years' },
  { id: '2', selected: true, rating: '5KW', name: 'On-Grid Solar Inverter', quantity: 2, unit: 'Nos', make: 'Fujiyama (UTL)', warranty: '10 Years' },
  { id: '3', selected: true, rating: '1 Phase', name: 'Net Meter', quantity: 1, unit: 'Nos', make: 'Secure Meters Limited', warranty: '' },
  { id: '4', selected: true, rating: '', name: 'Alternating Current Distribution Box', quantity: 1, unit: 'Nos', make: '', warranty: '' },
  { id: '5', selected: true, rating: '', name: 'Direct Current Distribution Box', quantity: 1, unit: 'Nos', make: '', warranty: '' },
  { id: '6', selected: true, rating: '', name: 'G.I Structure', quantity: 1, unit: 'Lot', make: '', warranty: '' },
  { id: '7', selected: true, rating: '', name: 'DC Wire', quantity: 1, unit: 'Lot', make: 'Polycab', warranty: '' },
  { id: '8', selected: true, rating: '', name: 'Earthing', quantity: 3, unit: 'Nos', make: '', warranty: '' },
  { id: '9', selected: true, rating: '', name: 'Pipe, Fitting & Other Accessories Etc.', quantity: 1, unit: 'Lot', make: '', warranty: '' }
];

export default function App() {
  const [formData, setFormData] = useState({
    customerName: '',
    customerAddress: '',
    date: new Date().toISOString().split('T')[0],
    kwhLoad: '4', // Default to 4 as per original template
    cost: '255000' // Default to 255000 as per original template
  });

  const [equipmentList, setEquipmentList] = useState(DEFAULT_EQUIPMENT);
  const [errors, setErrors] = useState({});

  // Handle standard input changes
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
    validateField(name, value);
  };

  // Validation Logic
  const validateField = (name, value) => {
    let newErrors = { ...errors };

    if (name === 'kwhLoad' || name === 'cost') {
      if (value === '') {
        delete newErrors[name]; // Allow empty while typing, but won't render in preview
      } else if (isNaN(parseFloat(value)) || !isFinite(value) || parseFloat(value) < 0) {
        newErrors[name] = 'Must be a valid positive number';
      } else {
        delete newErrors[name];
      }
    }
    setErrors(newErrors);
  };

  // Handle Equipment Toggles
  const handleEquipmentToggle = (id) => {
    setEquipmentList(prev => prev.map(item => 
      item.id === id ? { ...item, selected: !item.selected } : item
    ));
  };

  // Handle Individual Equipment Field Changes
  const handleEquipmentChange = (id, field, value) => {
    setEquipmentList(prev => prev.map(item => 
      item.id === id ? { ...item, [field]: value } : item
    ));
  };

  const handleAddEquipment = () => {
    const newId = Date.now().toString();
    setEquipmentList(prev => [...prev, {
      id: newId,
      selected: true,
      rating: '',
      name: '',
      quantity: 1,
      unit: 'Nos',
      make: '',
      warranty: ''
    }]);
  };

  const handleRemoveEquipment = (id) => {
    setEquipmentList(prev => prev.filter(item => item.id !== id));
  };

  // Format currency for Indian Rupees
  const formatCurrency = (amount) => {
    const num = parseFloat(amount);
    if (isNaN(num)) return '';
    return new Intl.NumberFormat('en-IN').format(num);
  };

  // Format Date for letter
  const formatDate = (dateString) => {
    if (!dateString) return '';
    const date = new Date(dateString);
    return date.toLocaleDateString('en-GB', { day: '2-digit', month: 'long', year: 'numeric' });
  };

  // Trigger browser print, relying on @media print CSS to isolate the document
  const handleDownloadPdf = () => {
    window.print();
  };

  const isFormValid = Object.keys(errors).length === 0;

  return (
    <div className="min-h-screen bg-gray-100 p-4 md:p-8 font-sans text-slate-800">
      
      {/* Print Styles */}
      <style>{`
        @media print {
          body * {
            visibility: hidden;
          }
          #printable-document, #printable-document * {
            visibility: visible;
          }
          #printable-document {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            margin: 0;
            padding: 0;
            box-shadow: none;
            background: white;
          }
          .no-print {
            display: none !important;
          }
        }
      `}</style>

      <div className="max-w-7xl mx-auto flex flex-col lg:flex-row gap-8">
        
        {/* LEFT COLUMN: Input Form (Hidden on Print) */}
        <div className="w-full lg:w-1/3 bg-white p-6 rounded-xl shadow-sm border border-gray-200 no-print">
          <h2 className="text-2xl font-bold mb-6 text-indigo-700 flex items-center gap-2">
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
            Proposal Generator
          </h2>

          <div className="space-y-4">
            {/* Customer Details */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Customer Name</label>
              <input type="text" name="customerName" value={formData.customerName} onChange={handleInputChange} placeholder="e.g., Harit" className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 outline-none" />
            </div>
            
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Customer Address</label>
              <input type="text" name="customerAddress" value={formData.customerAddress} onChange={handleInputChange} placeholder="e.g., City Station" className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 outline-none" />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Proposal Date</label>
              <input type="date" name="date" value={formData.date} onChange={handleInputChange} className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 outline-none" />
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Required Load (kW)</label>
                <input type="number" step="0.1" name="kwhLoad" value={formData.kwhLoad} onChange={handleInputChange} placeholder="e.g., 4" className={`w-full p-2 border rounded-md outline-none ${errors.kwhLoad ? 'border-red-500 focus:ring-red-500' : 'border-gray-300 focus:ring-indigo-500'}`} />
                {errors.kwhLoad && <p className="text-red-500 text-xs mt-1">{errors.kwhLoad}</p>}
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Total Cost (₹)</label>
                <input type="number" step="1000" name="cost" value={formData.cost} onChange={handleInputChange} placeholder="e.g., 255000" className={`w-full p-2 border rounded-md outline-none ${errors.cost ? 'border-red-500 focus:ring-red-500' : 'border-gray-300 focus:ring-indigo-500'}`} />
                {errors.cost && <p className="text-red-500 text-xs mt-1">{errors.cost}</p>}
              </div>
            </div>

            <hr className="my-6 border-gray-200" />

            {/* Equipment Selection */}
            <div>
              <div className="flex justify-between items-center mb-3">
                <label className="block text-sm font-bold text-gray-800">Bill of Material</label>
                <button onClick={handleAddEquipment} className="text-xs bg-indigo-100 text-indigo-700 px-2 py-1 rounded hover:bg-indigo-200 flex items-center gap-1 transition-colors">
                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v16m8-8H4"></path></svg>
                  Add Item
                </button>
              </div>
              <div className="space-y-2 max-h-96 overflow-y-auto pr-2">
                {equipmentList.map((item) => (
                  <div key={item.id} className={`p-3 rounded border transition-colors ${item.selected ? 'bg-white border-gray-200 shadow-sm' : 'bg-transparent border-transparent hover:border-gray-200'}`}>
                    <div className="flex items-start gap-2">
                      <input type="checkbox" checked={item.selected} onChange={() => handleEquipmentToggle(item.id)} className="mt-2 h-4 w-4 text-indigo-600 rounded cursor-pointer shrink-0" />
                      <input 
                        type="text" 
                        value={item.name} 
                        onChange={(e) => handleEquipmentChange(item.id, 'name', e.target.value)} 
                        placeholder="Equipment Name"
                        disabled={!item.selected}
                        className={`flex-1 p-1.5 text-sm font-medium border-b focus:outline-none bg-transparent ${item.selected ? 'border-gray-300 focus:border-indigo-500 text-gray-900' : 'border-transparent text-gray-400 line-through'}`}
                      />
                      <button onClick={() => handleRemoveEquipment(item.id)} className="text-gray-400 hover:text-red-500 p-1.5 shrink-0 transition-colors" title="Remove Item">
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                      </button>
                    </div>
                    
                    {item.selected && (
                      <div className="ml-7 mt-3 grid grid-cols-2 lg:grid-cols-5 gap-2">
                        <div>
                          <label className="block text-xs text-gray-500 mb-1">Qty</label>
                          <input type="number" value={item.quantity} onChange={(e) => handleEquipmentChange(item.id, 'quantity', e.target.value)} className="w-full p-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-indigo-500 outline-none" min="0" />
                        </div>
                        <div>
                          <label className="block text-xs text-gray-500 mb-1">Unit</label>
                          <input type="text" value={item.unit} onChange={(e) => handleEquipmentChange(item.id, 'unit', e.target.value)} placeholder="Nos/Lot" className="w-full p-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-indigo-500 outline-none" />
                        </div>
                        <div>
                          <label className="block text-xs text-gray-500 mb-1">Rating</label>
                          <input type="text" value={item.rating || ''} onChange={(e) => handleEquipmentChange(item.id, 'rating', e.target.value)} placeholder="e.g. 5KW" className="w-full p-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-indigo-500 outline-none" />
                        </div>
                        <div>
                          <label className="block text-xs text-gray-500 mb-1">Make</label>
                          <input type="text" value={item.make} onChange={(e) => handleEquipmentChange(item.id, 'make', e.target.value)} placeholder="e.g. Waari" className="w-full p-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-indigo-500 outline-none" />
                        </div>
                        <div>
                          <label className="block text-xs text-gray-500 mb-1">Warranty</label>
                          <input type="text" value={item.warranty} onChange={(e) => handleEquipmentChange(item.id, 'warranty', e.target.value)} placeholder="e.g. 25 Years" className="w-full p-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-indigo-500 outline-none" />
                        </div>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>

            <button 
              onClick={handleDownloadPdf}
              disabled={!isFormValid}
              className="w-full mt-6 bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-300 text-white font-bold py-3 px-4 rounded-lg transition-colors flex items-center justify-center gap-2"
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
              Download PDF / Print
            </button>
          </div>
        </div>

        {/* RIGHT COLUMN: Live Document Preview */}
        <div className="w-full lg:w-2/3 flex justify-center overflow-x-auto">
          <div 
            id="printable-document" 
            className="bg-white w-[210mm] min-h-[297mm] p-[20mm] shadow-lg text-sm text-black border border-gray-300"
            style={{ fontFamily: '"Times New Roman", Times, serif' }}
          >
            
            {/* Header */}
            <div className="text-center mb-8 border-b-2 border-red-600 pb-4">
              <h1 className="text-3xl font-extrabold text-red-700 tracking-wide uppercase">INDUJA</h1>
              <h2 className="text-xl font-bold text-gray-800">Engineering Services Pvt Ltd</h2>
            </div>

            {/* Ref and Date */}
            <div className="flex justify-between mb-6">
              <div className="font-semibold">SQ No. IESPL/HTS/2025-26/SQ87</div>
              <div className="font-semibold">Date: {formatDate(formData.date)}</div>
            </div>

            {/* To Address */}
            {(formData.customerName || formData.customerAddress) && (
              <div className="mb-6">
                <p>To,</p>
                {formData.customerName && <p className="font-bold">{formData.customerName}</p>}
                {formData.customerAddress && <p>Address: {formData.customerAddress}</p>}
              </div>
            )}

            {/* Subject */}
            <div className="mb-6">
              <p className="font-bold">
                Subject: Technical offer for Rating-
                <span className="text-indigo-900 border-b border-dashed border-gray-400 px-1 mx-1">
                  {formData.kwhLoad || '___'}kw
                </span> 
                On-Grid Rooftop Solar System
              </p>
            </div>

            <div className="mb-6">
              <p>Dear Sir,</p>
              <p className="mt-2">We acknowledge with thanks for your valued enquiry. We are pleased to submit our offer for your requirement of products as below.</p>
            </div>

            {/* Annexure I - Price */}
            <div className="mb-6">
              <h3 className="font-bold underline mb-2">Price Schedule - Annexure "I"</h3>
              <p className="font-semibold bg-yellow-50 inline-block p-1 border border-yellow-200">
                Cost of {formData.kwhLoad || '___'}kw Solar System - ₹ {formData.cost ? `${formatCurrency(formData.cost)}/-` : '______/-'}
              </p>
            </div>

            {/* Annexure II - BOM */}
            <div className="mb-6">
              <h3 className="font-bold underline mb-2">Bill of Material- Annexure "II"</h3>
              <ul className="space-y-3 list-none pl-0">
                {equipmentList.filter(e => e.selected).map((item) => (
                  <li key={item.id} className="flex gap-2 relative pl-5">
                    <span className="absolute left-0 top-0">•</span>
                    <div>
                      <span className="font-semibold">{item.rating ? `${item.rating} ` : ''}{item.name} - {item.quantity} {item.unit}</span>
                      {(item.make || item.warranty) && (
                        <div className="text-gray-700 text-xs italic ml-1 mt-0.5">
                          {[
                            item.make ? `Make - ${item.make}` : '',
                            item.warranty ? `${item.warranty} Warranty by Manufacturer` : ''
                          ].filter(Boolean).join(', ')}
                        </div>
                      )}
                    </div>
                  </li>
                ))}
                {equipmentList.filter(e => e.selected).length === 0 && (
                  <li className="text-gray-400 italic">No equipment selected.</li>
                )}
              </ul>
            </div>

            {/* Annexure III - T&C */}
            <div className="mb-6">
              <h3 className="font-bold underline mb-2">Commercial Terms & Conditions - Annexure "III"</h3>
              <ul className="space-y-1 list-none pl-0">
                <li><span className="font-bold">Prices:</span> Ex-Works Hathras basis.</li>
                <li><span className="font-bold">GST:</span> Inclusive in above Prices.</li>
                <li><span className="font-bold">Freight:</span> Inclusive in above Prices.</li>
                <li><span className="font-bold">Installation & commissioning Charges:</span> Inclusive in above Prices.</li>
                <li><span className="font-bold">Payment Terms:</span> 100% Advance against Proforma Invoice before dispatch of the solar panel, inverter and other BOS items to be delivered.</li>
                <li><span className="font-bold">Validity of Quotation:</span> Our Offer Is Valid For 7 Days.</li>
                <li><span className="font-bold">Note:</span> Any Civil work will be in client's Scope.</li>
              </ul>
            </div>

            {/* Bank Details */}
            <div className="mb-8 border border-gray-400 p-4 rounded-md inline-block">
              <h3 className="font-bold mb-2 underline">Company's Bank Details</h3>
              <p className="font-bold text-lg">INDUJA ENGINEERING SERVICES PVT. LTD.</p>
              <p><span className="font-semibold">BANK A/C NO.:</span> 50200087428646</p>
              <p><span className="font-semibold">BANK NAME:</span> HDFC Bank</p>
              <p><span className="font-semibold">Swift Code:</span> HDFCINBB</p>
              <p><span className="font-semibold">IFSC CODE:</span> HDFC0000329</p>
            </div>

            {/* Footer Signoff */}
            <div className="mb-12">
              <p>We hope you will find above in line with your requirements. Should you require any further Information, please feel free to contact us.</p>
              <p className="mt-6 mb-8">Sincerely,</p>
              <p className="font-bold">Nitin Prem Rajput</p>
              <p>Induja Engineering Services Pvt Ltd</p>
            </div>

            {/* Footer Address */}
            <div className="mt-auto border-t-2 border-red-600 pt-4 text-center text-xs text-gray-600">
              <p>Office Address: D-31, Sector-7, Noida-201301, Uttar Pradesh, India</p>
              <p>www.indujagroup.com | indujaengineeringservices@gmail.com</p>
              <p>Email: nitinpremrajput@indujagroup.com</p>
            </div>

          </div>
        </div>

      </div>
    </div>
  );
}