"use client";

import React, { useState, useEffect, ChangeEvent, FormEvent } from "react";
import styles from "./calculate.module.scss";
import CalculatedResults from "../CalculatedResults";

interface FormData {
  amount: number;
  duration: number;
  units: number;
}

const Calculator: React.FC = () => {
  const [formattedAmount, setFormattedAmount] = useState<string>("");
  const [formattedReturns, setFormattedReturns] = useState<string>("");
  const [results, setResults] = useState<number>(0);

  const [formData, setFormData] = useState<FormData>({
    amount: 10000,
    duration: 6,
    units: 1,
  });

  const { amount, duration, units } = formData;

  // Format entered investment amount for display
  useEffect(() => {
    setFormattedAmount(Number(amount).toLocaleString("en-US"));
  }, [amount]);

  // Handle form input changes
  const onChange = (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { id, value } = e.target;

    // convert numeric fields to numbers
    const parsed = id === "amount" || id === "duration" || id === "units" ? Number(value) : value;

    setFormData((prev) => ({
      ...prev,
      // TypeScript: index signature - we know keys match FormData
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      [id]: parsed,
    }));
  };

  // Calculate returns on investment
  const calculateReturns = (): void => {
    const interestRate = duration === 6 ? 10 : 15; // 10% for 6 months, 15% for 12 months
    const interestPercentage = interestRate / 100;
    const calculatedResults = amount * interestPercentage * units + amount;
    setResults(calculatedResults);
  };

  // Recalculate whenever inputs change
  useEffect(() => {
    calculateReturns();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [amount, duration, units]);

  // Format results for display
  useEffect(() => {
    setFormattedReturns(results.toLocaleString("en-US"));
  }, [results]);

  // Prevent form submit and trigger calculation (keeps enter key behavior)
  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    calculateReturns();
  };

  return (
    <div className={styles.calculate}>
      <div className={styles.calculate__header}>
        <h1>
          <span>$</span>
          {formattedAmount}
        </h1>

        <form className={styles.calculate__header__form} onSubmit={handleSubmit}>
          <div>
            <label htmlFor="amount">Amount to invest</label>
            <input
              id="amount"
              type="number"
              value={amount}
              onChange={onChange}
              min={0}
              step={1}
            />
          </div>

          <div>
            <label htmlFor="duration">Select an investment period</label>
            <select id="duration" value={duration} onChange={onChange}>
              <option value={6}>6 Months cycle</option>
              <option value={12}>12 Months cycle</option>
            </select>
          </div>

          <div>
            <label htmlFor="units">Enter number(s) of units</label>
            <input
              id="units"
              type="number"
              value={units}
              onChange={onChange}
              min={1}
              step={1}
            />
          </div>

          <div className={styles.calculate__header__form__actions}>
            {/* Use button so it is keyboard accessible and behaves like a form control */}
            <button
              type="submit"
              className={styles.calculate__header__form__btn}
              aria-label="Calculate ROI"
            >
              Calculate ROI
            </button>
          </div>
        </form>

        <CalculatedResults result={formattedReturns} />
      </div>
    </div>
  );
};

export default Calculator;