'use client';
import { QuizAnswer } from '@/types/types';
import { updatePoints } from '../actions';
import { useRef, useState } from 'react';
import { FaStar } from 'react-icons/fa';
import { FaSpinner } from 'react-icons/fa';

type CustomPointsFormProps = {
  answer: QuizAnswer;
};

export function CustomPointsForm({ answer }: CustomPointsFormProps) {
  const inputRef = useRef<HTMLInputElement>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [lastSubmittedValue, setLastSubmittedValue] = useState<number | null>(answer.points);

  const handleSubmit = async () => {
    if (inputRef.current && !isSubmitting) {
      const points = Number(inputRef.current.value);
      
      // Skip if value hasn't changed
      if (points === lastSubmittedValue) {
        return;
      }
      
      setIsSubmitting(true);
      setLastSubmittedValue(points);
      
      const formData = new FormData();
      formData.append('answerId', answer.id.toString());
      formData.append('customPoints', points.toString());
      
      try {
        await updatePoints(formData);
      } finally {
        setIsSubmitting(false);
      }
    }
  };

  return (
    <div className="flex flex-col gap-2">
      <div className="bg-white border border-gray-200 rounded-md p-3 text-sm">
        {answer.answer}
      </div>
      
      <div className="flex items-center gap-2">
        <div className="flex-grow text-sm text-gray-600 font-medium">Точки:</div>
        <div className="flex items-center gap-1 bg-amber-50 border border-amber-200 rounded-md px-2 py-1">
          {isSubmitting ? (
            <FaSpinner className="text-amber-500 animate-spin" />
          ) : (
            <FaStar className="text-amber-500" />
          )}
          <input
            ref={inputRef}
            type="number"
            defaultValue={answer.points}
            className="w-12 h-7 border border-amber-200 rounded px-2 bg-white text-sm text-amber-800"
            min={0}
            step={1}
            onBlur={handleSubmit}
            onKeyDown={(e) => {
              if (e.key === 'Enter') {
                e.preventDefault();
                handleSubmit();
              }
            }}
            disabled={isSubmitting}
          />
        </div>
      </div>
    </div>
  );
}