/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable react-hooks/exhaustive-deps */
import styles from './create-acc-type.module.scss'
import { useForm, router } from '@inertiajs/react'
import { useState, useEffect } from 'react'

interface CreateAccountTypeModalProps {
  closeModal: () => void
  type: 'add' | 'update'
  accountType?: {
    id?: any
    name?: string
    payment_type?: 'free' | 'paid'
    price_per_year?: string | number
    description?: string
    features?: string[]
  }
}

const CreateAccountTypeModal = ({ closeModal, type, accountType }: CreateAccountTypeModalProps) => {
  const accountId = accountType?.id

  // Determine initial payment type based on accountType.price
  // const initialPaymentType =
  //   type === 'update' && accountType?.price && Number(accountType.price) > 0
  //     ? 'paid'
  //     : accountType?.payment_type || 'free'

  // const [showPrice, setShowPrice] = useState(initialPaymentType === 'paid')
  const [features, setFeatures] = useState<string[]>(accountType?.features || [''])

  const { data, setData, post, put, processing, reset } = useForm({
    name: accountType?.name || '',
    price_per_year: accountType?.price_per_year || '',
    description: accountType?.description || '',
    features: accountType?.features || [],
  })

  // Local state for price formatting
  const [formattedPrice, setFormattedPrice] = useState(
    accountType?.price_per_year ? Number(accountType.price_per_year).toLocaleString() : ''
  )

  useEffect(() => {
    if (accountType?.price_per_year) {
      setFormattedPrice(Number(accountType.price_per_year).toLocaleString())
      setData('price_per_year', accountType.price_per_year)
    }
  }, [accountType?.price_per_year])

  // const handlePaymentChange = (value: 'free' | 'paid') => {
  //   // setShowPrice(value === 'paid')
  //   setData('payment_type', value)
  //   if (value !== 'paid') {
  //     setData('price', '')
  //     setFormattedPrice('')
  //   }
  // }

  const handleFeatureChange = (index: number, value: string) => {
    const updated = [...features]
    updated[index] = value
    setFeatures(updated)
    setData('features', updated)
  }

  const addFeature = () => {
    setFeatures([...features, ''])
  }

  const removeFeature = (index: number) => {
    const updated = features.filter((_, i) => i !== index)
    setFeatures(updated)
    setData('features', updated)
  }

  const handlePriceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const rawValue = e.target.value.replace(/,/g, '')
    if (!/^\d*\.?\d*$/.test(rawValue)) return
    const numberValue = Number(rawValue)
    const formatted = rawValue === '' ? '' : numberValue.toLocaleString()
    setFormattedPrice(formatted)
    setData('price_per_year', rawValue)
  }

 const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     if (type === "add") {
       post(route("admin_account_types.store"), {
         onSuccess: () => {
           reset();
           closeModal();
           router.reload({ only: ["flash"] });
         },
       });
       return;
     }
 
     if (type === "update" && accountId) {
       put(route("admin_account_types.update", accountId), {
         onSuccess: () => {
           reset();
           closeModal();
           router.reload({ only: ["flash"] });
         },
       });
     }
   };



  return (
    <div className={styles['add__acc']}>
      <div className={styles['add__acc__content']}>
        <div onClick={closeModal} className={styles['add__acc__content--close']}>
          ✕
        </div>

        <div className={styles['add__acc__content--details']}>
          <div className={styles['add__acc__content--details--header']}>
            <div className={styles['add__acc__content--details--header--helper']}>
              {type === 'add' ? 'Create' : 'Update'}
            </div>
            <h2>{type === 'add' ? 'Create Account Type' : 'Update Account Type'}</h2>
            <p>
              {type === 'add'
                ? 'Create a new account type. It will be available to users on your platform.'
                : 'Update the details you want to change and submit your changes easily.'}
            </p>
          </div>

          <form onSubmit={handleSubmit}>
            <div>
              <label htmlFor="name">Name *</label>
              <input
                id="name"
                type="text"
                placeholder="Enter account type name"
                value={data.name}
                onChange={(e) => setData('name', e.target.value)}
                required
              />
            </div>

            {/* <div>
              <label htmlFor="payment_type">Payment Type *</label>
              <select
                id="payment_type"
                value={data.payment_type}
                onChange={(e) => handlePaymentChange(e.target.value as 'free' | 'paid')}
              >
                <option value="free">Free</option>
                <option value="paid">Paid</option>
              </select>
            </div> */}

              <div>
                <label htmlFor="price">Price *</label>
                <input
                  id="price"
                  type="text"
                  placeholder="Enter plan price"
                  value={formattedPrice}
                  onChange={handlePriceChange}
                  required
                />
              </div>

            <div>
              <label htmlFor="description">Description *</label>
              <textarea
                id="description"
                placeholder="Enter plan description"
                value={data.description}
                onChange={(e) => setData('description', e.target.value)}
                required
              />
            </div>

            <div className={styles.features}>
              <label>Features</label>
              {features.map((feature, index) => (
                <div className={styles.features__row} key={index}>
                  <input
                    type="text"
                    placeholder={`Feature ${index + 1}`}
                    value={feature}
                    onChange={(e) => handleFeatureChange(index, e.target.value)}
                  />
                  <button
                    type="button"
                    className={styles['features__remove-btn']}
                    onClick={() => removeFeature(index)}
                  >
                    🗑
                  </button>
                </div>
              ))}
              <button
                type="button"
                className={styles.features__addBtn}
                onClick={addFeature}
              >
                + Add Feature
              </button>
            </div>

            <button type="submit" disabled={processing}>
              {processing
                ? 'Processing...'
                : type === 'add'
                ? 'Create Account Plan'
                : 'Update Account Plan'}
            </button>
          </form>
        </div>
      </div>
    </div>
  )
}

export default CreateAccountTypeModal