'use client';

import { useState } from 'react';
import { reverseCommission } from '@/services/commission/commission.service';

interface CommissionReversalFormProps {
  onSuccess?: (commission: any) => void;
  onError?: (error: string) => void;
}

export const CommissionReversalForm = ({ onSuccess, onError }: CommissionReversalFormProps) => {
  const [commissionId, setCommissionId] = useState('');
  const [reason, setReason] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!commissionId) {
      onError?.('Commission ID is required.');
      return;
    }

    if (!reason || reason.length < 10) {
      onError?.('Reason must be at least 10 characters long.');
      return;
    }

    try {
      setIsSubmitting(true);
      const result = await reverseCommission(commissionId, reason);
      onSuccess?.(result);
      
      // Reset form
      setCommissionId('');
      setReason('');
    } catch (err: any) {
      onError?.(err?.response?.data?.message || 'Failed to reverse commission.');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4 bg-white rounded-lg shadow p-6">
      <h3 className="text-lg font-semibold text-gray-900">Reverse Commission</h3>
      <p className="text-sm text-gray-500">
        This will debit the user&apos;s wallet and mark the commission as reversed.
      </p>

      <div>
        <label htmlFor="commissionId" className="block text-sm font-medium text-gray-700">
          Commission ID <span className="text-red-500">*</span>
        </label>
        <input
          id="commissionId"
          type="text"
          value={commissionId}
          onChange={(e) => setCommissionId(e.target.value)}
          required
          className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
          placeholder="Enter commission ID"
        />
      </div>

      <div>
        <label htmlFor="reason" className="block text-sm font-medium text-gray-700">
          Reason <span className="text-red-500">*</span>
        </label>
        <textarea
          id="reason"
          value={reason}
          onChange={(e) => setReason(e.target.value)}
          required
          minLength={10}
          rows={4}
          className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
          placeholder="Provide a detailed reason for the reversal (min. 10 characters)"
        />
        <p className="mt-1 text-xs text-gray-500">{reason.length}/1000 characters</p>
      </div>

      <div className="flex items-center justify-between">
        <div className="flex items-center">
          <svg className="h-5 w-5 text-red-400 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
          </svg>
          <span className="text-xs text-red-500">This action cannot be undone</span>
        </div>
        <button
          type="submit"
          disabled={isSubmitting}
          className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-50"
        >
          {isSubmitting ? 'Processing...' : 'Reverse Commission'}
        </button>
      </div>
    </form>
  );
};