import { useState } from 'react'
import { trpc } from '../trpc/client'

export function CreateCouponRoute() {
  const [mobileNumber, setMobileNumber] = useState('')
  const [isLoading, setIsLoading] = useState(false)
  const [success, setSuccess] = useState('')
  const [error, setError] = useState('')

  const createCouponMutation = trpc.admin.coupon.createCoupon.useMutation()

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    setSuccess('')
    setError('')

    try {
      const result = await createCouponMutation.mutateAsync({
        mobile: mobileNumber.trim(),
      })

      if (result.success) {
        setSuccess(`Coupon created successfully! Code: ${result.coupon.couponCode} for mobile: ${result.coupon.userMobile}`)
        setMobileNumber('')
      }
    } catch (err: any) {
      setError(err.message || 'Failed to create coupon')
    } finally {
      setIsLoading(false)
    }
  }

  const handleMobileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value.replace(/\D/g, '') // Only allow digits
    if (value.length <= 10) {
      setMobileNumber(value)
    }
  }

  return (
    <div className="max-w-md mx-auto mt-20">
      <div className="bg-white rounded-lg shadow-md p-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-6 text-center">
          Create Coupon
        </h1>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label htmlFor="mobile" className="block text-sm font-medium text-gray-700 mb-1">
              Mobile Number
            </label>
            <input
              id="mobile"
              type="tel"
              value={mobileNumber}
              onChange={handleMobileChange}
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="Enter 10-digit mobile number"
              maxLength={10}
              required
            />
            <p className="text-xs text-gray-500 mt-1">
              Enter 10-digit mobile number (digits only)
            </p>
          </div>

          {success && (
            <div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded">
              {success}
            </div>
          )}

          {error && (
            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
              {error}
            </div>
          )}

          <button
            type="submit"
            disabled={isLoading || mobileNumber.length !== 10}
            className="w-full bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 font-medium disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {isLoading ? 'Creating...' : 'Create Coupon'}
          </button>
        </form>

        <div className="mt-6 text-sm text-gray-600">
          <p><strong>Coupon Details:</strong></p>
          <ul className="list-disc list-inside mt-1">
            <li>20% discount</li>
            <li>Minimum order: ₹1000</li>
            <li>Maximum discount: ₹500</li>
            <li>One-time use per user</li>
            <li>Valid for 90 days from creation</li>
          </ul>
        </div>
      </div>
    </div>
  )
}