import React, { useEffect, useState } from 'react'
import styles from './add-invest.module.scss'
import { useForm } from '@inertiajs/react'

interface User {
  id: number | string
  name: string
}

interface AddInvestmentModalProps {
  closeModal: () => void
  users?: User[]
  loadingUsers?: boolean
}

const AddInvestmentModal: React.FC<AddInvestmentModalProps> = ({
  closeModal,
  users = [],
  loadingUsers = false,
}) => {
  const [loading, setLoading] = useState(loadingUsers)

  useEffect(() => {
    if (loadingUsers) setLoading(true)
    if (!loadingUsers && users.length > 0) setLoading(false)
  }, [loadingUsers, users])

  const { data, setData, post, processing, errors, reset } = useForm({
    user_id: '',
    amount_invested: '',
    profit_earned: 0,
    start_date: '',
    end_date: '',
  })

  function addInvestment(e: React.FormEvent) {
    e.preventDefault()

    if (!data.user_id || !data.amount_invested || !data.start_date || !data.end_date) {
      alert('Please fill all required fields.')
      return
    }

    post('/investments', {
      onSuccess: () => {
        reset()
        closeModal()
      },
    })
  }

  return (
    <div className={styles['add']}>
      <div className={styles['add__content']}>
        <div onClick={closeModal} className={styles['add__content--close']}>
          Close
        </div>

        <div className={styles['add__content--details']}>
          <div className={styles['add__content--details--header']}>
            <div className={styles['add__content--details--header--helper']}>New</div>
            <h2>Add Investment Plan</h2>
            <p>
              Assign a new investment plan to a user. The amount is supposed to be paid already and
              its equivalent will be debited from the user&apos;s wallet balance.
            </p>
          </div>

          {loading ? (
            <div className={styles['skeleton-wrapper']}>
              {[...Array(4)].map((_, i) => (
                <div key={i} className={styles['skeleton-field']}></div>
              ))}
              <div className={styles['skeleton-button']}></div>
            </div>
          ) : (
            <form onSubmit={addInvestment}>
              <div>
                <label htmlFor="user_id">Select User *</label>
                <select
                  id="user_id"
                  value={data.user_id}
                  onChange={(e) => setData('user_id', e.target.value)}
                  required
                >
                  <option value="">-- Choose a user --</option>
                  {users.length > 0 ? (
                    users.map((user) => (
                      <option key={user.id} value={user.id}>
                        {user.name}
                      </option>
                    ))
                  ) : (
                    <option disabled>No users available</option>
                  )}
                </select>
                {errors.user_id && <small className={styles.error}>{errors.user_id}</small>}
              </div>

              <div>
                <label htmlFor="amount_invested">Amount Invested *</label>
                <input
                  type="number"
                  id="amount_invested"
                  placeholder="Enter amount"
                  value={data.amount_invested}
                  onChange={(e) => setData('amount_invested', e.target.value)}
                  required
                />
                {errors.amount_invested && (
                  <small className={styles.error}>{errors.amount_invested}</small>
                )}
              </div>

              <div>
                <label htmlFor="start_date">Start Date *</label>
                <input
                  type="date"
                  id="start_date"
                  value={data.start_date}
                  onChange={(e) => setData('start_date', e.target.value)}
                  required
                />
                {errors.start_date && <small className={styles.error}>{errors.start_date}</small>}
              </div>

              <div>
                <label htmlFor="end_date">End Date *</label>
                <input
                  type="date"
                  id="end_date"
                  value={data.end_date}
                  onChange={(e) => setData('end_date', e.target.value)}
                  required
                />
                {errors.end_date && <small className={styles.error}>{errors.end_date}</small>}
              </div>

              <input type="hidden" value={data.profit_earned} readOnly />

              <button type="submit" disabled={processing}>
                {processing ? 'Adding...' : 'Add Investment'}
              </button>
            </form>
          )}
        </div>
      </div>
    </div>
  )
}

export default AddInvestmentModal