import { useState } from "react";

export default function CardForm({ onSubmit }) {
  const [v, setV] = useState({
    credit_score: 720,
    annual_income: 70000,
    carry_balance: false,
    travel_abroad: false,
    no_annual_fee: true,
    balance_transfer: false,
    rewards_pref: "cashback",
    spend_groceries: 300,
    spend_dining: 250,
    spend_gas: 120,
    spend_travel: 80,
    spend_online: 200,
    top_k: 10,
  });

  function set(name, value) {
    setV((p) => ({ ...p, [name]: value }));
  }

  return (
    <form className="form" onSubmit={(e) => { e.preventDefault(); onSubmit(v); }}>
      <div className="cardHeader">
        <h2>Credit Cards</h2>
      </div>

      <div className="grid2">
        <div className="field">
          <label>Credit score</label>
          <input
            type="range"
            min="300"
            max="850"
            value={v.credit_score}
            onChange={(e) => set("credit_score", Number(e.target.value))}
          />
          <div className="muted small">{v.credit_score}</div>
        </div>

        <div className="field">
          <label>Annual income</label>
          <input
            type="number"
            value={v.annual_income}
            onChange={(e) => set("annual_income", Number(e.target.value))}
          />
        </div>

        <div className="field">
          <label>Rewards</label>
          <select value={v.rewards_pref} onChange={(e) => set("rewards_pref", e.target.value)}>
            <option value="cashback">Cashback</option>
            <option value="travel">Travel</option>
            <option value="points">Points</option>
            <option value="none">No preference</option>
          </select>
        </div>

        <div className="field">
          <label>Top results</label>
          <input type="number" value={v.top_k} min="1" max="50" onChange={(e) => set("top_k", Number(e.target.value))} />
        </div>
      </div>

      <div className="grid2">
        <div className="field">
          <label><input type="checkbox" checked={v.carry_balance} onChange={(e) => set("carry_balance", e.target.checked)} /> I carry a balance</label>
        </div>
        <div className="field">
          <label><input type="checkbox" checked={v.travel_abroad} onChange={(e) => set("travel_abroad", e.target.checked)} /> I travel abroad</label>
        </div>
        <div className="field">
          <label><input type="checkbox" checked={v.no_annual_fee} onChange={(e) => set("no_annual_fee", e.target.checked)} /> Prefer no annual fee</label>
        </div>
        <div className="field">
          <label><input type="checkbox" checked={v.balance_transfer} onChange={(e) => set("balance_transfer", e.target.checked)} /> Need balance transfer</label>
        </div>
      </div>

      <div className="grid2">
        <div className="field">
          <label>Groceries ($/mo)</label>
          <input type="number" value={v.spend_groceries} onChange={(e) => set("spend_groceries", Number(e.target.value))} />
        </div>
        <div className="field">
          <label>Dining ($/mo)</label>
          <input type="number" value={v.spend_dining} onChange={(e) => set("spend_dining", Number(e.target.value))} />
        </div>
        <div className="field">
          <label>Gas ($/mo)</label>
          <input type="number" value={v.spend_gas} onChange={(e) => set("spend_gas", Number(e.target.value))} />
        </div>
        <div className="field">
          <label>Travel ($/mo)</label>
          <input type="number" value={v.spend_travel} onChange={(e) => set("spend_travel", Number(e.target.value))} />
        </div>
        <div className="field">
          <label>Online ($/mo)</label>
          <input type="number" value={v.spend_online} onChange={(e) => set("spend_online", Number(e.target.value))} />
        </div>
      </div>

      <button className="primary" type="submit">Show cards</button>
    </form>
  );
}