/* ═══════════════════════════════════════════════════════════════════
   NORTHSTAR FINCORP — Business Loan Application
   ═══════════════════════════════════════════════════════════════════ */

const { useState, useEffect } = React;

function App() {
  // Initialize form data from demo profile
  const [formData, setFormData] = useState({ ...DEMO_PROFILE });
  
  // Track which fields were initially prefilled
  const [initialPrefilled, setInitialPrefilled] = useState(new Set(PREFILLED_KEYS));
  
  // Document upload modal state
  const [showDocumentModal, setShowDocumentModal] = useState(false);
  const [uploadedDocs, setUploadedDocs] = useState({});
  const [processingOCR, setProcessingOCR] = useState(false);
  const [ocrResults, setOcrResults] = useState([]);
  
  // Firebase state
  const [applicationId, setApplicationId] = useState(null);
  const [firebaseInitialized, setFirebaseInitialized] = useState(false);
  const [syncStatus, setSyncStatus] = useState('idle'); // idle, syncing, synced, error
  
  // Terms and conditions state
  const [termsAccepted, setTermsAccepted] = useState(false);
  const [privacyAccepted, setPrivacyAccepted] = useState(false);
  const [showSuccessModal, setShowSuccessModal] = useState(false);
  const [showPreview, setShowPreview] = useState(false);
  const [acknowledgementAccepted, setAcknowledgementAccepted] = useState(false);
  
  // Calculate form progress
  const calculateProgress = () => {
    const totalFields = Object.keys(DEMO_PROFILE).length;
    const filledFields = Object.keys(formData).filter(key => {
      const value = formData[key];
      return value !== '' && value !== false && value !== null && value !== undefined;
    }).length;
    return Math.round((filledFields / totalFields) * 100);
  };
  
  const formProgress = calculateProgress();
  
  // Load Firebase pre-fill data on mount and start real-time updates
  useEffect(() => {
    const setupRealtimeSync = async () => {
      // Use Firebase Realtime Database integration for instant updates
      if (window.FirebaseRealtimePreFill) {
        console.log('🔄 Setting up Firebase Realtime Database sync...');
        
        // Subscribe to real-time updates using onValue() listener
        await window.FirebaseRealtimePreFill.subscribeToPreFillData(
          // Update callback - triggered instantly when Firebase data changes
          (newData) => {
            if (newData && Object.keys(newData).length > 0) {
              console.log('🔔 Real-time update received (instant):', newData);
              setFormData(prev => ({ ...prev, ...newData }));
              
              // Update prefilled keys
              const updatedKeys = Object.keys(newData).filter(k => newData[k] !== '' && newData[k] !== false);
              setInitialPrefilled(prev => new Set([...prev, ...updatedKeys]));
              
              console.log(`✅ ${updatedKeys.length} field(s) updated instantly`);
            }
          },
          // Clear callback - called when data is deleted
          () => {
            console.log('🗑️ Clearing form data - Firebase was cleared');
            setFormData({ ...DEMO_PROFILE });
            setInitialPrefilled(new Set(PREFILLED_KEYS));
          }
        );
        
        console.log('✅ Real-time sync active - changes appear instantly!');
      } else {
        console.error('❌ FirebaseRealtimePreFill not loaded!');
      }
    };
    
    // Wait for Firebase to initialize
    setTimeout(setupRealtimeSync, 100);
    
    // Cleanup: unsubscribe from real-time updates when component unmounts
    return () => {
      if (window.FirebaseRealtimePreFill) {
        window.FirebaseRealtimePreFill.unsubscribe();
      }
    };
  }, []);
  
  // Initialize Vercel API and create application on mount
  useEffect(() => {
    const initApp = async () => {
      try {
        // Initialize with Vercel API
        const result = await window.VercelAPI.initialize(
          '919999999999', // Default phone for testing
          'Customer'
        );
        
        if (result.success) {
          setApplicationId(result.applicationId);
          setFirebaseInitialized(true);
          console.log('✅ Vercel API initialized:', {
            applicationId: result.applicationId,
            token: result.token,
            formUrl: result.formUrl
          });
        } else {
          console.error('❌ Vercel API initialization failed:', result.error);
        }
      } catch (error) {
        console.error('❌ Initialization error:', error);
      }
    };
    
    initApp();
  }, []);
  
  // Handle form submission
  const handleSubmit = async (e) => {
    e.preventDefault();
    
    // Check if acknowledgement is accepted
    if (!acknowledgementAccepted) {
      alert('⚠️ Please accept the declaration to proceed with submission.');
      return;
    }
    
    // Submit to Vercel API
    if (firebaseInitialized && applicationId) {
      setSyncStatus('syncing');
      try {
        // Submit final loan application data
        const result = await window.VercelAPI.submitLoanApplication(formData);
        
        if (result.success) {
          setSyncStatus('synced');
          // Show success modal and disable form
          setShowSuccessModal(true);
          
          // Clear form data to prevent reopening draft
          setFormData({ ...DEMO_PROFILE });
          setInitialPrefilled(new Set());
          
          console.log('✅ Application submitted successfully:', {
            applicationId: result.applicationId,
            status: result.status
          });
        } else {
          throw new Error(result.error || 'Submission failed');
        }
      } catch (error) {
        console.error('❌ Submission error:', error);
        setSyncStatus('error');
        alert('⚠️ Failed to submit application. Please try again.');
      }
    } else {
      // Show success modal even without Firebase
      setShowSuccessModal(true);
      // Clear form data
      setFormData({ ...DEMO_PROFILE });
      setInitialPrefilled(new Set());
    }
  };
  
  // Helper to update form fields with Vercel API sync
  const updateField = async (key, value) => {
    setFormData(prev => ({ ...prev, [key]: value }));
    
    // Sync to Vercel API in real-time (debounced updates)
    if (firebaseInitialized && applicationId) {
      setSyncStatus('syncing');
      
      // Update the form data via Vercel API
      const updatedData = { ...formData, [key]: value };
      const result = await window.VercelAPI.updateFormData(updatedData);
      
      setSyncStatus(result.success ? 'synced' : 'error');
      
      // Reset sync status after 2 seconds
      setTimeout(() => setSyncStatus('idle'), 2000);
    }
  };

  // Handle document upload with OCR processing via Vercel API
  const handleDocumentUpload = async (docType, file) => {
    console.log(`📄 Uploading ${docType}:`, file.name);
    
    // Update uploaded docs state immediately
    setUploadedDocs(prev => {
      const updated = { ...prev, [docType]: file };
      console.log('📦 Updated uploadedDocs:', Object.keys(updated));
      return updated;
    });
    
    // Store documents temporarily for batch upload
    const currentDocs = { ...uploadedDocs, [docType]: file };
    
    // Check if we have both PAN and Aadhar for OCR processing
    if (currentDocs.panCard && currentDocs.aadhaarCard) {
      setProcessingOCR(true);
      setSyncStatus('syncing');
      
      try {
        // Upload to Vercel API for OCR processing
        const result = await window.VercelAPI.uploadDocumentsForOCR(
          currentDocs.panCard,
          currentDocs.aadhaarCard
        );
        
        if (result.success && result.extractedFields) {
          // Auto-fill form with extracted data
          const extractedData = result.extractedFields;
          
          // Update form fields with extracted data
          if (extractedData.name) updateField('fullName', extractedData.name);
          if (extractedData.dob) updateField('dateOfBirth', extractedData.dob);
          if (extractedData.panNumber) updateField('panNumber', extractedData.panNumber);
          if (extractedData.aadharNumber) updateField('aadhaarNumber', extractedData.aadharNumber);
          if (extractedData.address) updateField('residentialAddress', extractedData.address);
          if (extractedData.fatherName) updateField('fatherName', extractedData.fatherName);
          
          setOcrResults(prev => [...prev, result]);
          setSyncStatus('synced');
          
          const fieldsCount = Object.keys(extractedData).length;
          alert(`✅ Documents processed successfully! ${fieldsCount} fields auto-filled from OCR.`);
          
          console.log('✅ OCR completed:', extractedData);
        } else {
          throw new Error(result.error || 'OCR processing failed');
        }
      } catch (error) {
        console.error('❌ OCR processing error:', error);
        setSyncStatus('error');
        alert('⚠️ Documents uploaded but OCR processing failed. Please fill the form manually.');
      } finally {
        setProcessingOCR(false);
        setTimeout(() => setSyncStatus('idle'), 2000);
      }
    } else {
      console.log(`📄 ${docType} uploaded. Waiting for both PAN and Aadhar to process OCR.`);
    }
  };

  // Process all documents from folder with Vercel API
  const handleProcessAllDocuments = async () => {
    const input = document.createElement('input');
    input.type = 'file';
    input.multiple = true;
    input.accept = '.pdf,.jpg,.jpeg,.png';
    
    input.onchange = async (e) => {
      const files = Array.from(e.target.files);
      if (files.length === 0) return;
      
      setProcessingOCR(true);
      
      try {
        // Process all uploaded files - don't require specific filenames
        console.log(`📤 Processing ${files.length} documents...`);
        
        // Process documents with local OCR processor
        const result = await window.OCRProcessor.processBatchDocuments(files);
        
        if (result.processedCount > 0) {
          // Auto-fill extracted fields using OCR processor
          const fieldsUpdated = window.OCRProcessor.autoFillForm(
            result.mergedData,
            (key, value) => {
              setFormData(prev => ({ ...prev, [key]: value }));
            }
          );
          
          setOcrResults(prev => [...prev, ...result.results]);
          
          // Mark documents as uploaded based on type
          const newUploadedDocs = { ...uploadedDocs };
          result.results.forEach((r, idx) => {
            if (r.type === 'PAN') newUploadedDocs.panCard = files[idx];
            if (r.type === 'Aadhaar') newUploadedDocs.aadhaarCard = files[idx];
            if (r.type === 'GST') newUploadedDocs.gstReturns = files[idx];
            if (r.type === 'Bank Statement') newUploadedDocs.bankStatements = files[idx];
            if (r.type === 'ITR') newUploadedDocs.itrReturns = files[idx];
            if (r.type === 'Udyam' || r.type === 'Business Registration') newUploadedDocs.businessRegistration = files[idx];
          });
          setUploadedDocs(newUploadedDocs);
          console.log('✅ Documents tracked:', Object.keys(newUploadedDocs));
          
          alert(`✅ Processed ${files.length} document(s)! ${fieldsUpdated} fields auto-filled from OCR.`);
          
          console.log(`✅ Batch OCR complete: ${fieldsUpdated} fields extracted from ${files.length} files`);
          console.log('📋 Extracted data:', result.mergedData);
        } else {
          alert('⚠️ No data could be extracted. Please ensure files contain recognizable PAN/Aadhaar/GST documents.');
        }
      } catch (error) {
        console.error('❌ Batch OCR error:', error);
        alert('⚠️ Some documents could not be processed. Please check and fill manually.');
      } finally {
        setProcessingOCR(false);
      }
    };
    
    input.click();
  };

  return (
    <div className="app">
      {/* Header */}
      <header className="app-header">
        <div className="header-content">
          <div className="logo">
            <img src="logo.svg" alt="Northstar Fincorp" className="logo-image" />
            <div className="logo-text">
              <h1>Northstar Fincorp</h1>
              <p className="tagline">Business Loan Application</p>
            </div>
          </div>
          <div className="header-actions">
            <div className="progress-indicator">
              <div className="progress-bar">
                <div className="progress-fill" style={{ width: `${formProgress}%` }}></div>
              </div>
              <span className="progress-text">{formProgress}% Complete</span>
            </div>
            {firebaseInitialized && (
              <div className={`sync-status sync-${syncStatus}`}>
                {syncStatus === 'syncing' && (
                  <>
                    <span className="sync-spinner"></span>
                    Syncing...
                  </>
                )}
                {syncStatus === 'synced' && (
                  <>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                      <circle cx="8" cy="8" r="7" fill="#10b981"/>
                      <path d="M5 8l2 2 4-4" stroke="white" strokeWidth="2" strokeLinecap="round"/>
                    </svg>
                    Synced
                  </>
                )}
                {syncStatus === 'error' && (
                  <>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                      <circle cx="8" cy="8" r="7" fill="#ef4444"/>
                      <path d="M6 6l4 4m0-4l-4 4" stroke="white" strokeWidth="2" strokeLinecap="round"/>
                    </svg>
                    Sync Error
                  </>
                )}
              </div>
            )}
            <button
              className="document-upload-btn"
              onClick={() => setShowDocumentModal(true)}
            >
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M10 4v12m-6-6h12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
              </svg>
              Upload Documents
            </button>
          </div>
        </div>
      </header>

      {/* Document Upload Modal */}
      {showDocumentModal && (
        <div className="modal-overlay" onClick={() => setShowDocumentModal(false)}>
          <div className="modal-content" onClick={e => e.stopPropagation()}>
            <div className="modal-header">
              <h2>Upload Required Documents</h2>
              <button className="modal-close" onClick={() => setShowDocumentModal(false)}>×</button>
            </div>
            
            <div className="modal-body">
              <p className="modal-instruction">Please upload the following documents to complete your loan application:</p>
              
              <div className="batch-upload-section">
                <button
                  className="batch-upload-btn"
                  onClick={handleProcessAllDocuments}
                  disabled={processingOCR}
                >
                  {processingOCR ? (
                    <>
                      <span className="spinner"></span>
                      Processing...
                    </>
                  ) : (
                    <>
                      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                        <path d="M4 16v1a2 2 0 002 2h8a2 2 0 002-2v-1M16 8l-4-4m0 0L8 8m4-4v12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                      Upload All Documents
                    </>
                  )}
                </button>
              </div>
              
              <div className="document-list">
                <DocumentUploadItem
                  title="PAN Card (Front Side)"
                  description="Personal PAN card - front side only"
                  uploaded={uploadedDocs.panCard}
                  onUpload={(file) => handleDocumentUpload('panCard', file)}
                />
                
                <DocumentUploadItem
                  title="Business Registration"
                  description="Shop & Establishment License, Udyam Certificate, or any valid business registration document"
                  uploaded={uploadedDocs.businessRegistration}
                  onUpload={(file) => handleDocumentUpload('businessRegistration', file)}
                />
                
                <DocumentUploadItem
                  title="Bank Statements"
                  description="Last 6 months bank statements of primary operative current account"
                  uploaded={uploadedDocs.bankStatements}
                  onUpload={(file) => handleDocumentUpload('bankStatements', file)}
                />
                
                <DocumentUploadItem
                  title="ITR Returns"
                  description="Last 1 year ITR Acknowledgement"
                  uploaded={uploadedDocs.itrReturns}
                  onUpload={(file) => handleDocumentUpload('itrReturns', file)}
                />
                
                <DocumentUploadItem
                  title="GST Returns"
                  description="Last 1 year GST Returns"
                  uploaded={uploadedDocs.gstReturns}
                  onUpload={(file) => handleDocumentUpload('gstReturns', file)}
                />
              </div>
            </div>
            
            <div className="modal-footer">
              <button className="btn-secondary" onClick={() => setShowDocumentModal(false)}>
                Close
              </button>
              <button className="btn-primary" onClick={() => setShowDocumentModal(false)}>
                Done
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Main Form */}
      <main className="app-main">
        <form className="loan-form" onSubmit={handleSubmit}>
          
          {/* Section 1: Personal Information */}
          <section className="form-section">
            <h2 className="section-title">Personal Information</h2>
            
            <TextField
              fieldKey="fullName"
              label="Full Name (as per PAN)"
              value={formData.fullName}
              onChange={v => updateField('fullName', v)}
              initialPrefilled={initialPrefilled.has('fullName')}
            />

            <div className="field-row">
              <TextField
                fieldKey="dob"
                label="Date of Birth"
                value={formData.dob}
                onChange={v => updateField('dob', v)}
                initialPrefilled={initialPrefilled.has('dob')}
                placeholder="DD Month YYYY"
              />
              
              <RadioGroup
                fieldKey="gender"
                label="Gender"
                value={formData.gender}
                onChange={v => updateField('gender', v)}
                options={['Male', 'Female', 'Other']}
                initialPrefilled={initialPrefilled.has('gender')}
              />
            </div>

            <TextField
              fieldKey="pan"
              label="PAN Number"
              value={formData.pan}
              onChange={v => updateField('pan', v)}
              initialPrefilled={initialPrefilled.has('pan')}
              placeholder="XXXXX0000X"
            />

            <div className="field-row">
              <TextField
                fieldKey="mobile"
                label="Mobile Number"
                value={formData.mobile}
                onChange={v => updateField('mobile', v)}
                initialPrefilled={initialPrefilled.has('mobile')}
                type="tel"
                readOnly={true}
              />
              
              <TextField
                fieldKey="email"
                label="Email Address"
                value={formData.email}
                onChange={v => updateField('email', v)}
                initialPrefilled={initialPrefilled.has('email')}
                type="email"
                readOnly={true}
              />
            </div>

            <h3 className="subsection-title">Residential Address</h3>
            
            <TextField
              fieldKey="addressLine1"
              label="Address Line 1"
              value={formData.addressLine1}
              onChange={v => updateField('addressLine1', v)}
              initialPrefilled={initialPrefilled.has('addressLine1')}
              placeholder="House/Flat No., Building Name, Street"
            />

            <TextField
              fieldKey="addressLine2"
              label="Address Line 2"
              optional="(Optional)"
              value={formData.addressLine2}
              onChange={v => updateField('addressLine2', v)}
              initialPrefilled={initialPrefilled.has('addressLine2')}
              placeholder="Locality, Area"
            />

            <div className="field-row">
              <TextField
                fieldKey="pincode"
                label="Pincode"
                value={formData.pincode}
                onChange={async (v) => {
                  updateField('pincode', v);
                  // Auto-fill district and state when pincode is complete
                  if (v.length === 6 && /^\d{6}$/.test(v)) {
                    const result = await window.PincodeAPI.lookup(v);
                    if (result.success) {
                      updateField('district', result.district);
                      updateField('state', result.state);
                    }
                  }
                }}
                initialPrefilled={initialPrefilled.has('pincode')}
                placeholder="000000"
                type="tel"
              />
              
              <TextField
                fieldKey="district"
                label="District"
                value={formData.district}
                onChange={v => updateField('district', v)}
                initialPrefilled={initialPrefilled.has('district')}
                readOnly={true}
              />
            </div>

            <TextField
              fieldKey="state"
              label="State"
              value={formData.state}
              onChange={v => updateField('state', v)}
              initialPrefilled={initialPrefilled.has('state')}
              readOnly={true}
            />
          </section>

          {/* Section 2: Business Information */}
          <section className="form-section">
            <h2 className="section-title">Business Information</h2>

            <TextField
              fieldKey="businessName"
              label="Business Name"
              value={formData.businessName}
              onChange={v => updateField('businessName', v)}
              initialPrefilled={initialPrefilled.has('businessName')}
            />

            <div className="field-row">
              <Select
                fieldKey="constitution"
                label="Business Constitution"
                value={formData.constitution}
                onChange={v => updateField('constitution', v)}
                options={['Sole Proprietorship', 'Partnership', 'Private Limited', 'LLP', 'Public Limited']}
                initialPrefilled={initialPrefilled.has('constitution')}
              />
              
              <TextField
                fieldKey="dateEstablished"
                label="Date Established"
                value={formData.dateEstablished}
                onChange={v => updateField('dateEstablished', v)}
                initialPrefilled={initialPrefilled.has('dateEstablished')}
                placeholder="DD Month YYYY"
              />
            </div>

            <div className="field-row">
              <TextField
                fieldKey="natureOfBusiness"
                label="Nature of Business"
                value={formData.natureOfBusiness}
                onChange={v => updateField('natureOfBusiness', v)}
                initialPrefilled={initialPrefilled.has('natureOfBusiness')}
              />
              
              <TextField
                fieldKey="sector"
                label="Sector"
                value={formData.sector}
                onChange={v => updateField('sector', v)}
                initialPrefilled={initialPrefilled.has('sector')}
              />
            </div>

            <div className="field-row">
              <TextField
                fieldKey="gstin"
                label="GSTIN"
                value={formData.gstin}
                onChange={v => updateField('gstin', v)}
                initialPrefilled={initialPrefilled.has('gstin')}
              />
              
              <TextField
                fieldKey="udyam"
                label="Udyam Registration"
                optional="(Optional)"
                value={formData.udyam}
                onChange={v => updateField('udyam', v)}
                initialPrefilled={initialPrefilled.has('udyam')}
              />
            </div>

            <h3 className="subsection-title">Registered Business Address</h3>
            
            <TextField
              fieldKey="businessAddressLine1"
              label="Address Line 1"
              value={formData.businessAddressLine1}
              onChange={v => updateField('businessAddressLine1', v)}
              initialPrefilled={initialPrefilled.has('businessAddressLine1')}
              placeholder="Building/Office No., Complex Name, Street"
            />

            <TextField
              fieldKey="businessAddressLine2"
              label="Address Line 2"
              optional="(Optional)"
              value={formData.businessAddressLine2}
              onChange={v => updateField('businessAddressLine2', v)}
              initialPrefilled={initialPrefilled.has('businessAddressLine2')}
              placeholder="Locality, Area"
            />

            <div className="field-row">
              <TextField
                fieldKey="businessPincode"
                label="Pincode"
                value={formData.businessPincode}
                onChange={async (v) => {
                  updateField('businessPincode', v);
                  // Auto-fill district and state when pincode is complete
                  if (v.length === 6 && /^\d{6}$/.test(v)) {
                    const result = await window.PincodeAPI.lookup(v);
                    if (result.success) {
                      updateField('businessDistrict', result.district);
                      updateField('businessState', result.state);
                    }
                  }
                }}
                initialPrefilled={initialPrefilled.has('businessPincode')}
                placeholder="000000"
                type="tel"
              />
              
              <TextField
                fieldKey="businessDistrict"
                label="District"
                value={formData.businessDistrict}
                onChange={v => updateField('businessDistrict', v)}
                initialPrefilled={initialPrefilled.has('businessDistrict')}
                readOnly={true}
              />
            </div>

            <TextField
              fieldKey="businessState"
              label="State"
              value={formData.businessState}
              onChange={v => updateField('businessState', v)}
              initialPrefilled={initialPrefilled.has('businessState')}
              readOnly={true}
            />

            <Select
              fieldKey="employees"
              label="Number of Employees"
              value={formData.employees}
              onChange={v => updateField('employees', v)}
              options={['1–10', '11–20', '21–50', '51–100', '100+']}
              initialPrefilled={initialPrefilled.has('employees')}
            />
          </section>

          {/* Section 3: Bank Details (NEW) */}
          <section className="form-section">
            <h2 className="section-title">Bank Details</h2>

            <div className="field-row">
              <TextField
                fieldKey="bankName"
                label="Bank Name"
                value={formData.bankName}
                onChange={v => updateField('bankName', v)}
                initialPrefilled={initialPrefilled.has('bankName')}
              />
              
              <TextField
                fieldKey="branchName"
                label="Branch Name"
                value={formData.branchName}
                onChange={v => updateField('branchName', v)}
                initialPrefilled={initialPrefilled.has('branchName')}
              />
            </div>

            <div className="field-row">
              <TextField
                fieldKey="accountNumber"
                label="Account Number"
                value={formData.accountNumber}
                onChange={v => updateField('accountNumber', v)}
                initialPrefilled={initialPrefilled.has('accountNumber')}
                type="tel"
              />
              
              <Select
                fieldKey="accountType"
                label="Account Type"
                value={formData.accountType}
                onChange={v => updateField('accountType', v)}
                options={['Current', 'Savings', 'Cash Credit', 'OD']}
                initialPrefilled={initialPrefilled.has('accountType')}
              />
            </div>

            <TextField
              fieldKey="ifscCode"
              label="IFSC Code"
              value={formData.ifscCode}
              onChange={v => updateField('ifscCode', v)}
              initialPrefilled={initialPrefilled.has('ifscCode')}
              placeholder="XXXX0000000"
            />
          </section>

          {/* Section 4: Financial Information */}
          <section className="form-section">
            <h2 className="section-title">Financial Information</h2>

            <CurrencyField
              fieldKey="turnoverLY"
              label="Annual Turnover (Last Year)"
              value={formData.turnoverLY}
              onChange={v => updateField('turnoverLY', v)}
              initialPrefilled={initialPrefilled.has('turnoverLY')}
            />

            <CurrencyField
              fieldKey="netProfitLY"
              label="Net Profit (Last Year)"
              value={formData.netProfitLY}
              onChange={v => updateField('netProfitLY', v)}
              initialPrefilled={initialPrefilled.has('netProfitLY')}
            />

            <div className="field-row">
              <RadioGroup
                fieldKey="gstFiled"
                label="GST Returns Filed Regularly?"
                value={formData.gstFiled}
                onChange={v => updateField('gstFiled', v)}
                options={['Yes', 'No']}
                initialPrefilled={initialPrefilled.has('gstFiled')}
              />
              
              <RadioGroup
                fieldKey="itrFiled"
                label="ITR Filed for Last 1 Year?"
                value={formData.itrFiled}
                onChange={v => updateField('itrFiled', v)}
                options={['Yes', 'No']}
                initialPrefilled={initialPrefilled.has('itrFiled')}
              />
            </div>

            <CurrencyField
              fieldKey="avgBankBalance"
              label="Average Monthly Bank Balance"
              value={formData.avgBankBalance}
              onChange={v => updateField('avgBankBalance', v)}
              initialPrefilled={initialPrefilled.has('avgBankBalance')}
            />

            <RadioGroup
              fieldKey="existingLoans"
              label="Any Existing Business Loans?"
              value={formData.existingLoans}
              onChange={v => updateField('existingLoans', v)}
              options={['Yes', 'No']}
              initialPrefilled={initialPrefilled.has('existingLoans')}
            />

            {formData.existingLoans === 'Yes' && (
              <CurrencyField
                fieldKey="existingLoanAmount"
                label="Total Outstanding Loan Amount"
                value={formData.existingLoanAmount}
                onChange={v => updateField('existingLoanAmount', v)}
                initialPrefilled={initialPrefilled.has('existingLoanAmount')}
              />
            )}

            <RadioGroup
              fieldKey="creditCardOD"
              label="Credit Card / OD Facility?"
              value={formData.creditCardOD}
              onChange={v => updateField('creditCardOD', v)}
              options={['Yes', 'No']}
              initialPrefilled={initialPrefilled.has('creditCardOD')}
            />

            {formData.creditCardOD === 'Yes' && (
              <CurrencyField
                fieldKey="creditCardLimit"
                label="Total Credit Limit"
                value={formData.creditCardLimit}
                onChange={v => updateField('creditCardLimit', v)}
                initialPrefilled={initialPrefilled.has('creditCardLimit')}
              />
            )}
          </section>

          {/* Section 5: Loan Requirements */}
          <section className="form-section">
            <h2 className="section-title">Loan Requirements</h2>

            <CurrencyField
              fieldKey="loanAmount"
              label="Loan Amount Requested"
              value={formData.loanAmount}
              onChange={v => updateField('loanAmount', v)}
              initialPrefilled={initialPrefilled.has('loanAmount')}
            />

            <TextArea
              fieldKey="loanPurpose"
              label="Purpose of Loan"
              value={formData.loanPurpose}
              onChange={v => updateField('loanPurpose', v)}
              initialPrefilled={initialPrefilled.has('loanPurpose')}
              rows={3}
            />

            <Select
              fieldKey="tenure"
              label="Preferred Loan Tenure"
              value={formData.tenure}
              onChange={v => updateField('tenure', v)}
              options={['12 Months', '24 Months', '36 Months', '48 Months', '60 Months']}
              initialPrefilled={initialPrefilled.has('tenure')}
            />

            <Select
              fieldKey="expectedDisbursement"
              label="Expected Disbursement Timeline"
              value={formData.expectedDisbursement}
              onChange={v => updateField('expectedDisbursement', v)}
              options={['Within 1 week', 'Within 2 weeks', 'Within 1 month', 'Flexible']}
              initialPrefilled={initialPrefilled.has('expectedDisbursement')}
            />

            <RadioGroup
              fieldKey="collateralPreference"
              label="Collateral Preference"
              value={formData.collateralPreference}
              onChange={v => updateField('collateralPreference', v)}
              options={['Secured', 'Unsecured']}
              initialPrefilled={initialPrefilled.has('collateralPreference')}
            />

            <TextField
              fieldKey="collateralType"
              label="Type of Collateral"
              optional="(Optional)"
              value={formData.collateralType}
              onChange={v => updateField('collateralType', v)}
              initialPrefilled={initialPrefilled.has('collateralType')}
              placeholder="e.g., Property, Machinery, Gold"
            />
            
            <CurrencyField
              fieldKey="collateralValue"
              label="Estimated Collateral Value"
              optional="(Optional)"
              value={formData.collateralValue}
              onChange={v => updateField('collateralValue', v)}
              initialPrefilled={initialPrefilled.has('collateralValue')}
            />
          </section>


          {/* Preview Section */}
          <section className="form-actions">
            <button
              type="button"
              className="btn-secondary"
              onClick={() => setShowPreview(true)}
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style={{ marginRight: '8px' }}>
                <path d="M12 5C7 5 2.73 8.11 1 12c1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7zm0 12c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="currentColor"/>
              </svg>
              Preview Application
            </button>
          </section>

          {/* Acknowledgement Section */}
          <section className="acknowledgement-section">
            <h2 className="section-title">Declaration</h2>
            <div className="acknowledgement-box">
              <label className="acknowledgement-checkbox">
                <input
                  type="checkbox"
                  checked={acknowledgementAccepted}
                  onChange={(e) => setAcknowledgementAccepted(e.target.checked)}
                />
                <span className="checkbox-label">
                  I hereby declare that all information and documents provided in this application are true, accurate, and complete to the best of my knowledge.
                </span>
              </label>
            </div>
          </section>

          {/* Submit Section */}
          <section className="form-actions">
            <button type="button" className="btn-secondary">Save as Draft</button>
            <button
              type="submit"
              className="btn-primary"
              disabled={!acknowledgementAccepted}
            >
              Submit Application
            </button>
          </section>

        </form>
      </main>

      {/* Footer */}
      <footer className="app-footer">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '12px' }}>
          <p>© 2026 Northstar Fincorp. All rights reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
        </div>
      </footer>


      {/* Preview Modal */}
      {showPreview && (
        <div className="modal-overlay" onClick={() => setShowPreview(false)}>
          <div className="modal-content preview-modal" onClick={e => e.stopPropagation()}>
            <div className="modal-header">
              <h2>Application Preview</h2>
              <button className="modal-close" onClick={() => setShowPreview(false)}>×</button>
            </div>
            
            <div className="modal-body">
              <div className="preview-content">
                
                {/* Personal Information Preview */}
                <div className="preview-section">
                  <h3>Personal Information</h3>
                  <div className="preview-grid">
                    <div className="preview-item"><strong>Full Name:</strong> {formData.fullName || '—'}</div>
                    <div className="preview-item"><strong>Date of Birth:</strong> {formData.dob || '—'}</div>
                    <div className="preview-item"><strong>Gender:</strong> {formData.gender || '—'}</div>
                    <div className="preview-item"><strong>PAN Number:</strong> {formData.pan || '—'}</div>
                    <div className="preview-item"><strong>Aadhaar Number:</strong> {formData.aadhaar || '—'}</div>
                    <div className="preview-item"><strong>Mobile:</strong> {formData.mobile || '—'}</div>
                    <div className="preview-item"><strong>Email:</strong> {formData.email || '—'}</div>
                    <div className="preview-item full-width">
                      <strong>Address:</strong> {[formData.addressLine1, formData.addressLine2, formData.pincode, formData.district, formData.state].filter(Boolean).join(', ') || '—'}
                    </div>
                  </div>
                </div>

                {/* Business Information Preview */}
                <div className="preview-section">
                  <h3>Business Information</h3>
                  <div className="preview-grid">
                    <div className="preview-item"><strong>Business Name:</strong> {formData.businessName || '—'}</div>
                    <div className="preview-item"><strong>Constitution:</strong> {formData.constitution || '—'}</div>
                    <div className="preview-item"><strong>Date Established:</strong> {formData.dateEstablished || '—'}</div>
                    <div className="preview-item"><strong>Nature of Business:</strong> {formData.natureOfBusiness || '—'}</div>
                    <div className="preview-item"><strong>Sector:</strong> {formData.sector || '—'}</div>
                    <div className="preview-item"><strong>GSTIN:</strong> {formData.gstin || '—'}</div>
                    <div className="preview-item"><strong>Udyam Registration:</strong> {formData.udyam || '—'}</div>
                    <div className="preview-item full-width">
                      <strong>Business Address:</strong> {[formData.businessAddressLine1, formData.businessAddressLine2, formData.businessPincode, formData.businessDistrict, formData.businessState].filter(Boolean).join(', ') || '—'}
                    </div>
                    <div className="preview-item"><strong>Number of Employees:</strong> {formData.employees || '—'}</div>
                  </div>
                </div>

                {/* Bank Details Preview */}
                <div className="preview-section">
                  <h3>Bank Details</h3>
                  <div className="preview-grid">
                    <div className="preview-item"><strong>Bank Name:</strong> {formData.bankName || '—'}</div>
                    <div className="preview-item"><strong>Branch Name:</strong> {formData.branchName || '—'}</div>
                    <div className="preview-item"><strong>Account Number:</strong> {formData.accountNumber || '—'}</div>
                    <div className="preview-item"><strong>Account Type:</strong> {formData.accountType || '—'}</div>
                    <div className="preview-item"><strong>IFSC Code:</strong> {formData.ifscCode || '—'}</div>
                  </div>
                </div>

                {/* Financial Information Preview */}
                <div className="preview-section">
                  <h3>Financial Information</h3>
                  <div className="preview-grid">
                    <div className="preview-item"><strong>Annual Turnover (Last Year):</strong> {formData.turnoverLY ? `₹${formData.turnoverLY}` : '—'}</div>
                    <div className="preview-item"><strong>Net Profit (Last Year):</strong> {formData.netProfitLY ? `₹${formData.netProfitLY}` : '—'}</div>
                    <div className="preview-item"><strong>GST Filed Regularly:</strong> {formData.gstFiled || '—'}</div>
                    <div className="preview-item"><strong>ITR Filed (Last 1 Year):</strong> {formData.itrFiled || '—'}</div>
                    <div className="preview-item"><strong>Avg Bank Balance:</strong> {formData.avgBankBalance ? `₹${formData.avgBankBalance}` : '—'}</div>
                    <div className="preview-item"><strong>Existing Loans:</strong> {formData.existingLoans || '—'}</div>
                    {formData.existingLoans === 'Yes' && (
                      <div className="preview-item"><strong>Loan Amount:</strong> {formData.existingLoanAmount ? `₹${formData.existingLoanAmount}` : '—'}</div>
                    )}
                    <div className="preview-item"><strong>Credit Card/OD:</strong> {formData.creditCardOD || '—'}</div>
                    {formData.creditCardOD === 'Yes' && (
                      <div className="preview-item"><strong>Credit Limit:</strong> {formData.creditCardLimit ? `₹${formData.creditCardLimit}` : '—'}</div>
                    )}
                  </div>
                </div>

                {/* Loan Requirements Preview */}
                <div className="preview-section">
                  <h3>Loan Requirements</h3>
                  <div className="preview-grid">
                    <div className="preview-item"><strong>Loan Amount:</strong> {formData.loanAmount ? `₹${formData.loanAmount}` : '—'}</div>
                    <div className="preview-item full-width"><strong>Purpose:</strong> {formData.loanPurpose || '—'}</div>
                    <div className="preview-item"><strong>Working Capital:</strong> {formData.purposeWC ? `₹${formData.purposeWC}` : '—'}</div>
                    <div className="preview-item"><strong>Infrastructure:</strong> {formData.purposeInfra ? `₹${formData.purposeInfra}` : '—'}</div>
                    <div className="preview-item"><strong>Tenure:</strong> {formData.tenure || '—'}</div>
                    <div className="preview-item"><strong>Expected Disbursement:</strong> {formData.expectedDisbursement || '—'}</div>
                    <div className="preview-item"><strong>Collateral:</strong> {formData.collateral || '—'}</div>
                    <div className="preview-item"><strong>Collateral Preference:</strong> {formData.collateralPreference || '—'}</div>
                    {formData.collateral === 'Yes' && (
                      <>
                        <div className="preview-item"><strong>Collateral Type:</strong> {formData.collateralType || '—'}</div>
                        <div className="preview-item"><strong>Collateral Value:</strong> {formData.collateralValue ? `₹${formData.collateralValue}` : '—'}</div>
                      </>
                    )}
                  </div>
                </div>

              </div>
            </div>
            
            <div className="modal-footer">
              <button className="btn-secondary" onClick={() => setShowPreview(false)}>
                Close
              </button>
            </div>
          </div>
        </div>
      )}

      
      {/* Success Modal */}
      {showSuccessModal && (
        <div className="modal-overlay" onClick={() => setShowSuccessModal(false)}>
          <div className="success-modal" onClick={(e) => e.stopPropagation()}>
            <div className="success-icon">
              <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
                <circle cx="40" cy="40" r="38" stroke="#10B981" strokeWidth="4" fill="none"/>
                <path d="M25 40L35 50L55 30" stroke="#10B981" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>
            
            <h2 className="success-title">Application Submitted Successfully! 🎉</h2>
            
            <div className="success-content">
              <p className="success-message">
                Thank you for submitting your loan application. Your application has been received and is now under review.
              </p>
              
              {applicationId && (
                <div className="application-id-box">
                  <p className="application-id-label">Your Application ID:</p>
                  <p className="application-id">{applicationId}</p>
                </div>
              )}
              
              <div className="next-steps">
                <h3>What Happens Next?</h3>
                <ul>
                  <li>📧 You will receive a confirmation email shortly</li>
                  <li>📋 Our team will review your application within 24-48 hours</li>
                  <li>📞 We may contact you for additional information if needed</li>
                  <li>✅ You will be notified of the decision via email and SMS</li>
                </ul>
              </div>
            </div>
            
            <button
              className="btn-primary success-close-btn"
              onClick={() => setShowSuccessModal(false)}
            >
              Close
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

// Document Upload Item Component
function DocumentUploadItem({ title, description, uploaded, onUpload, optional }) {
  const fileInputRef = React.useRef(null);
  
  const handleClick = () => {
    fileInputRef.current?.click();
  };
  
  const handleFileChange = (e) => {
    const file = e.target.files?.[0];
    if (file) {
      onUpload(file);
    }
  };
  
  return (
    <div className="document-item">
      <div className="document-info">
        <div className="document-title">
          {title}
          {optional && <span className="optional-badge">Optional</span>}
        </div>
        <div className="document-desc">{description}</div>
      </div>
      
      <div className="document-action">
        {uploaded ? (
          <div className="uploaded-status">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <circle cx="8" cy="8" r="7" fill="#10b981"/>
              <path d="M5 8l2 2 4-4" stroke="white" strokeWidth="2" strokeLinecap="round"/>
            </svg>
            <span>{uploaded.name}</span>
          </div>
        ) : (
          <button className="upload-btn" onClick={handleClick}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M8 2v10M4 6l4-4 4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M2 12h12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
            </svg>
            Upload
          </button>
        )}
        <input
          ref={fileInputRef}
          type="file"
          style={{ display: 'none' }}
          onChange={handleFileChange}
          accept=".pdf,.jpg,.jpeg,.png"
        />
      </div>
    </div>
  );
}

// Render the app directly without authentication
ReactDOM.render(
  <App />,
  document.getElementById('root')
);