import { useState } from "react";
import "./FundDrive.css";
// Inside src/Components/FundDrive.jsx
import { submitVvvetForm } from "../vvvetApi";
import axios from "axios";



const FundDrive = () => {
  const [step, setStep] = useState(1);
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    age: "",
    dob: "",
    category: "",
    pan: "",
    customCategory: "",
    bankHolderName: "",
    bankName: "",
    ifscCode: "",
    fundAmount: "",
    accountNumber: "",
    images: []
  });
  const [isPanVerified, setIsPanVerified] = useState(false); // To track PAN verification status
  const [verificationError, setVerificationError] = useState(""); 
  const [panImage, setPanImage] = useState(null); // Define panImage state

  const categories = [
    "Medical Fundraising",
    "Education & Scholarships",
    "Disaster Relief &  Aid",
    "Memorial & Tribute Funds",
    "Community Development",
    "Social Causes",
    "Religious & Faith-Based Giving",
    "Crowdfunding for Needs",
    "Nonprofit & NGO Fundraising",
    "Others",
  ];

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  const handleImageUpload = (event) => {
    const files = Array.from(event.target.files);
    setFormData({ ...formData, images: [...formData.images, ...files] });
  };

  const handleNext = () => {
    setStep(step + 1);
  };

  const handleBack = () => {
    if (step > 1) setStep(step - 1);
  };

  // const handleSubmit = () => {
  //   alert("Fundraising submission successful!");
  // };
  const handlePanImageUpload = (e) => {
    const file = e.target.files[0];
    setPanImage(file); // Store PAN image in state
  };

  
  



  // const verifyPan = async () => {
  //   try {
  //     const formDataForPan = new FormData();
  //     formDataForPan.append("pan", formData.pan);
  //     formDataForPan.append("panImage", panImage); // panImage must be a File object
  
  //     const response = await axios.post(
  //       "http://localhost:5002/api/verify-pan",
  //       formDataForPan,
  //       {
  //         headers: {
  //           "Content-Type": "multipart/form-data",
  //         },
  //         withCredentials: true, // Ensures credentials (cookies) are sent
  //       }
  //     );
  //     console.log("vathuten da punda",response.data); // Check the backend response

  //     const isValid = response.data.verified;
  //     setIsPanVerified(isValid);
  
  //     if (!isValid) {
  //       setVerificationError("PAN number and uploaded image do not match.");
  //     }
  
  //     return isValid;
  //   } catch (error) {
  //     setVerificationError("An error occurred during PAN verification.");
  //     console.error(error);
  //     return false;
  //   }
  // };


  const verifyPan = async () => {
    try {
      // Validate PAN format client-side first
      const panRegex = /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/;
      if (!panRegex.test(formData.pan)) {
        setVerificationError("Invalid PAN format. It should be in the format ABCDE1234F.");
        setIsPanVerified(false);
        return false;
      }
  
      if (!panImage) {
        setVerificationError("Please upload a PAN card image.");
        setIsPanVerified(false);
        return false;
      }
  
      const formDataForPan = new FormData();
      formDataForPan.append("pan", formData.pan);
      formDataForPan.append("panImage", panImage);
  
      // Show loading state if needed
      // setIsLoading(true);
  
      const response = await axios.post(
        "http://localhost:5002/api/verify-pan",
        formDataForPan,
        {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        }
      );
  
      // Hide loading state
      // setIsLoading(false);
  
      console.log("PAN verification response:", response.data);
      
      if (response.data.verified) {
        setIsPanVerified(true);
        setVerificationError(""); // Clear any previous errors
        return true;
      } else {
        setIsPanVerified(false);
        setVerificationError(response.data.message || "PAN verification failed.");
        return false;
      }
    } catch (error) {
      // Hide loading state
      // setIsLoading(false);
      
      console.error("Error verifying PAN:", error);
      
      // Handle specific error cases
      if (error.response) {
        // The server responded with an error status
        setVerificationError(error.response.data.message || "PAN verification failed. Server returned an error.");
      } else if (error.request) {
        // The request was made but no response was received
        setVerificationError("Cannot connect to the verification service. Please try again later.");
      } else {
        // Something else caused the error
        setVerificationError("An error occurred during PAN verification.");
      }
      
      setIsPanVerified(false);
      return false;
    }
  };

  
  // const handleSubmit = async (e) => {
  //   e.preventDefault();
  
  //   if (!isPanVerified) {
  //     const verified = await verifyPan();
  //     if (!verified) {
  //       alert("PAN not verified. Please verify before submitting.");
  //       return;
  //     }
  //   }
  
  //   try {
  //     await submitVvvetForm(formData);
  //     alert('Form submitted successfully');
  //   } catch (error) {
  //     console.error("Error submitting form:", error);
  //     alert('Error submitting form');
  //   }
  // };
  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!isPanVerified) {
      const verified = await verifyPan();
      if (!verified) {
        alert("PAN not verified. Please verify before submitting.");
        return;
      }
    }

    // Proceed with form submission (assuming `submitVvvetForm` is defined)
    try {
      await submitVvvetForm(formData); // Make sure this function is defined elsewhere
      alert("Form submitted successfully!");
    } catch (error) {
      console.error("Error submitting form:", error);
      alert("Error submitting form");
    }
  };
  

  return (
    <div className="container">
      
       <div className="container-box">
       <form>
       {step === 1 && (
        <div className="step-box">
          <h4>Step 1: Personal Details</h4>

          <div className="form-grid">
            <div className="form-field">
              <label>Name</label>
              <input
                type="text"
                name="name"
                value={formData.name}
                onChange={handleInputChange}
                required
                placeholder="Full Name"
              />
            </div>

            <div className="form-field">
              <label>Email</label>
              <input
                type="email"
                name="email"
                value={formData.email}
                onChange={handleInputChange}
                required
                placeholder="example@domain.com"
              />
            </div>
            <div className="form-field">
              <label>Age</label>
              <input
                type="number"
                name="age"
                value={formData.age}
                onChange={handleInputChange}
                required
                placeholder="e.g. 25"
              />
            </div>
            <div className="form-field">
              <label>Date of Birth</label>
              <input
                type="date"
                name="dob"
                value={formData.date}
                onChange={handleInputChange}
                required
                placeholder="e.g. 25"
              />
            </div>
          </div>
          <div className="form-field">
              <label>Phone Number</label>
              <input
                type="tel"
                name="phone"
                value={formData.phone}
                onChange={handleInputChange}
                required
                placeholder="10-digit number"
              />
            </div>
          <div className="form-field">
            <label>PAN Number</label>
            <input
              type="text"
              name="pan"
              value={formData.pan}
              onChange={handleInputChange}
              required
              maxLength={10}
              placeholder="e.g. ABCDE1234F"
              className="input-small"
              pattern="[A-Z]{5}[0-9]{4}[A-Z]{1}"
              title="Enter valid 10-character PAN (e.g. ABCDE1234F)"
            />
          </div>
          <div className="form-field">
                <label>Upload PAN Image</label>
                <input
                  type="file"
                  accept="image/*"
                  onChange={handlePanImageUpload}
                  required
                />
                {panImage && <p>{panImage.name}</p>} {/* Display image file name */}
              </div>
          {verificationError && <p style={{ color: 'red' }}>{verificationError}</p>}
          <div className="form-field">
            <button
              type="button"
              className="form-button verify-button"
              onClick={verifyPan}
              disabled={!formData.pan || !panImage}
            >
              Verify PAN
            </button>
            {isPanVerified && <p style={{ color: 'green' }}>PAN verified successfully!</p>}
          </div>
          <div className="button-group">
            <button
              type="button"
              onClick={handleNext}
              className="form-button next-button"
              disabled={!formData.name || !formData.email || !formData.phone || !formData.age || !formData.dob || !formData.pan || !isPanVerified} 
            >
              Next
            </button>
          </div>
        </div>
      )}
        
        
        {step === 2 && (
           <div className="form-container-box">
            <h4>Step 2:Select a category</h4>
            {categories.map((item, index) => (
              <div key={index} className="radio-box">
                <input
                  type="radio"
                  name="category"
                  value={item}
                  checked={formData.category === item}
                  onChange={handleInputChange}
                  className="radio-input"
                />
                <label className="radio-label">{item}</label>
              </div>
            ))}
            {formData.category === "Others" && (
              <input
                type="text"
                name="customCategory"
                placeholder="Fill the category"
                value={formData.customCategory}
                onChange={handleInputChange}
                className="custom-category-input"
              />
            )}
            <div className="button-group">
              <button type="button" className="form-button back-button" onClick={handleBack}>Back</button>
              <button 
                type="button" 
                className="form-button next-button" 
                onClick={handleNext} 
                disabled={!formData.category || (formData.category === "Others" && !formData.customCategory.trim())}
              >
                Next
              </button>
            </div>
          </div>
        )}
        
        
        {/* {step === 3 && (
          <div className="upload-section-box">
            <h4>Step 3:Upload an Image</h4>
            <h3 className="upload-title">{formData.category === "Others" ? formData.customCategory : formData.category}</h3>
            <div className="upload-box">
              <input
                type="file"
                multiple
                accept="image/*"
                onChange={handleImageUpload}
                className="file-input"
              />
              <p className="upload-placeholder">Click or Drag & Drop to upload images</p>
            </div>
            <div className="image-preview">
              {formData.images.map((image, index) => (
                <img key={index} src={URL.createObjectURL(image)} alt={`Proof ${index + 1}`} className="uploaded-image" />
              ))}
            </div> */}
            {step === 3 && (
            <div className="upload-section-box">
              <h4>Step 3: Upload an Image</h4>
              <h3 className="upload-title">
                {formData.category === "Others" ? formData.customCategory : formData.category}
              </h3>

              {/* Common image upload */}
              <div className="upload-box">
                <input
                  type="file"
                  multiple
                  accept="image/*"
                  onChange={handleImageUpload}
                  className="file-input"
                />
                <p className="upload-placeholder">Click or Drag & Drop to upload images</p>
              </div>

              {/* Section-specific forms with headings */}
              {formData.category === "Medical Fundraising" && (
                <>
                  <h4 className="section-heading">Upload Medical Details</h4>
                  <input type="text" placeholder="Patient Name" className="form-field" />
                  <input type="text" placeholder="Patient Contact Number" className="form-field" />
                </>
              )}

              {formData.category === "Education & Scholarships" && (
                <>
                  <h4 className="section-heading">Upload Student Details</h4>
                  <input type="text" placeholder="Student Name" className="form-field" />
                  <input type="text" placeholder="Standard/Class" className="form-field" />
                </>
              )}

              {formData.category === "Disaster Relief & Aid" && (
                <>
                  <h4 className="section-heading">Upload Relief Information</h4>
                  <input type="text" placeholder="Cause/Place Affected" className="form-field" />
                </>
              )}

              {formData.category === "Memorial & Tribute Funds" && (
                <>
                  <h4 className="section-heading">Upload Tribute Details</h4>
                  <input type="text" placeholder="Person Honored" className="form-field" />
                </>
              )}

              {[
                "Community Development",
                "Social Causes",
                "Religious & Faith-Based Giving",
                "Crowdfunding for Needs",
                "Nonprofit & NGO Fundraising",
              ].includes(formData.category) && (
                <>
                  <h4 className="section-heading">Upload Cause Information</h4>
                  <input type="text" placeholder="Cause Details" className="form-field" />
                </>
              )}

              {formData.category === "Others" && (
                <>
                  <h4 className="section-heading">Upload Custom Details</h4>
                  <input type="text" placeholder="Describe your cause" className="form-field" />
                  <input type="file" className="form-field" />
                </>
              )}

              {/* Image preview */}
              <div className="image-preview">
                {formData.images.map((image, index) => (
                  <img
                    key={index}
                    src={URL.createObjectURL(image)}
                    alt={`Proof ${index + 1}`}
                    className="uploaded-image"
                  />
                ))}
            </div>
            <div className="button-group">
              <button type="button" className="form-button back-button" onClick={handleBack}>Back</button>
              <button 
                type="button" 
                className="form-button next-button" 
                onClick={handleNext} 
                disabled={!formData.category || (formData.category === "Others" && !formData.customCategory.trim())}
              >
                Next
              </button>
            </div>
          </div>
        )}
    {step === 4 && (
  <div className="bank-details-section-box">
    <h4>Step 4: Banking Details</h4>

    <div className="form-group">
      <label className="form-label">Bank Account Holder Name</label>
      <input
        type="text"
        placeholder="Bank Account Holder Name"
        className="form-field"
        value={formData.bankHolderName}
        onChange={(e) => setFormData({ ...formData, bankHolderName: e.target.value })}
      />
    </div>

    <div className="form-group">
      <label className="form-label">Bank Name</label>
      <input
        type="text"
        placeholder="Bank Name"
        className="form-field"
        value={formData.bankName}
        onChange={(e) => setFormData({ ...formData, bankName: e.target.value })}
      />
    </div>

    <div className="form-group">
      <label className="form-label">Bank Account Number</label>
      <input
        type="text"
        placeholder="Bank Account Number"
        className="form-field"
        value={formData.accountNumber}
        onChange={(e) => setFormData({ ...formData, accountNumber: e.target.value })}
      />
    </div>

    <div className="form-group">
      <label className="form-label">IFSC Code</label>
      <input
        type="text"
        placeholder="IFSC Code"
        className="form-field"
        value={formData.ifscCode}
        onChange={(e) => setFormData({ ...formData, ifscCode: e.target.value })}
      />
    </div>
    <div className="form-group">
      <label className="form-label">Fundraising Amount</label>    
      <input
        type="number"
        placeholder="Fundraising Amount"
        className="form-field"
        value={formData.fundAmount}
        onChange={(e) => {
          const value = parseInt(e.target.value, 10);
          if (!isNaN(value) && value >= 0) {
            setFormData({ ...formData, fundAmount: value });
          }
        }}
        min="1000"
      />
      {formData.fundAmount > 0 && formData.fundAmount < 1000 && (
        <p className="error-message">Minimum amount should be ₹1000</p>
      )}
    </div>
    <div className="button-group">
      <button type="button" className="form-button back-button" onClick={handleBack}>
        Back
      </button>
      <button type="button" className="form-button submit-button" onClick={handleSubmit}>
        Submit
      </button>
    </div>
  </div>
)}

        
      </form>
</div>
</div>
    
    
  );
};

export default FundDrive;
