frontend/src/components/Form.jsx

import { useState } from 'react';
import axios from 'axios';
import { ArrowRight } from 'lucide-react';

export default function Form({ setResult, setLoading }) {
  const [formData, setFormData] = useState({
    gender: 'Male',
    married: 'No',
    dependents: '0',
    education: 'Graduate',
    self_employed: 'No',
    applicant_income: 5000,
    coapplicant_income: 0,
    loan_amount: 100,
    loan_amount_term: 360,
    credit_history: 1.0,
    property_area: 'Urban'
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: ['applicant_income', 'coapplicant_income', 'loan_amount', 'loan_amount_term', 'credit_history'].includes(name) 
        ? parseFloat(value) 
        : value
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    try {
      const response = await axios.post('/api/predict', formData);
      setResult(response.data);
    } catch (error) {
      console.error("Prediction error", error);
      alert('Error predicting. Make sure backend is running.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="glass-card" style={{ maxWidth: '800px', margin: '0 auto' }}>
      <h2 style={{ marginBottom: '1.5rem' }}>Application Details</h2>
      <form onSubmit={handleSubmit}>
        <div className="form-grid">
          <div className="form-group">
            <label>Gender</label>
            <select name="gender" value={formData.gender} onChange={handleChange}>
              <option>Male</option>
              <option>Female</option>
            </select>
          </div>
          <div className="form-group">
            <label>Married</label>
            <select name="married" value={formData.married} onChange={handleChange}>
              <option>No</option>
              <option>Yes</option>
            </select>
          </div>
          <div className="form-group">
            <label>Dependents</label>
            <select name="dependents" value={formData.dependents} onChange={handleChange}>
              <option>0</option>
              <option>1</option>
              <option>2</option>
              <option>3+</option>
            </select>
          </div>
          <div className="form-group">
            <label>Education</label>
            <select name="education" value={formData.education} onChange={handleChange}>
              <option>Graduate</option>
              <option>Not Graduate</option>
            </select>
          </div>
          <div className="form-group">
            <label>Self Employed</label>
            <select name="self_employed" value={formData.self_employed} onChange={handleChange}>
              <option>No</option>
              <option>Yes</option>
            </select>
          </div>
          <div className="form-group">
            <label>Applicant Income (Monthly)</label>
            <input type="number" name="applicant_income" value={formData.applicant_income} onChange={handleChange} required />
          </div>
          <div className="form-group">
            <label>Co-Applicant Income</label>
            <input type="number" name="coapplicant_income" value={formData.coapplicant_income} onChange={handleChange} required />
          </div>
          <div className="form-group">
            <label>Loan Amount (in Thousands)</label>
            <input type="number" name="loan_amount" value={formData.loan_amount} onChange={handleChange} required />
          </div>
          <div className="form-group">
            <label>Loan Term (Months)</label>
            <input type="number" name="loan_amount_term" value={formData.loan_amount_term} onChange={handleChange} required />
          </div>
          <div className="form-group">
            <label>Credit History</label>
            <select name="credit_history" value={formData.credit_history} onChange={handleChange}>
              <option value="1.0">Good (1.0)</option>
              <option value="0.0">Bad (0.0)</option>
            </select>
          </div>
          <div className="form-group">
            <label>Property Area</label>
            <select name="property_area" value={formData.property_area} onChange={handleChange}>
              <option>Urban</option>
              <option>Semiurban</option>
              <option>Rural</option>
            </select>
          </div>
        </div>
        
        <div style={{ marginTop: '2rem', textAlign: 'right' }}>
          <button type="submit" className="btn">
            Analyze Application <ArrowRight size={18} />
          </button>
        </div>
      </form>
    </div>
  );
}