'use client';

import React, { useState } from 'react';
import { colorRequestService } from '@/src/services/api';

interface ColorRequestFormProps {
  onSuccess?: () => void;
}

export default function ColorRequestForm({ onSuccess }: ColorRequestFormProps) {
  const [formData, setFormData] = useState({
    color_name: '',
    material_type: 'PLA',
    finish_type: 'Basic',
    user_name: '',
    user_email: '',
    user_phone: '',
    description: '',
    reference_url: ''
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    setMessage(null);

    try {
      const response = await colorRequestService.submit(formData);
      setMessage({ 
        type: 'success', 
        text: 'Vaš zahtev je uspešno poslat!' 
      });
      setFormData({
        color_name: '',
        material_type: 'PLA',
        finish_type: 'Basic',
        user_name: '',
        user_email: '',
        user_phone: '',
        description: '',
        reference_url: ''
      });
      if (onSuccess) onSuccess();
    } catch (error) {
      setMessage({ 
        type: 'error', 
        text: 'Greška pri slanju zahteva. Pokušajte ponovo.' 
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
      <h2 className="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-100">Zatraži Novu Boju</h2>
      
      {message && (
        <div className={`mb-4 p-4 rounded ${
          message.type === 'success' 
            ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400' 
            : 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400'
        }`}>
          {message.text}
        </div>
      )}

      <form onSubmit={handleSubmit} className="space-y-4">
        <div className="grid md:grid-cols-2 gap-4">
          <div>
            <label htmlFor="color_name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
              Naziv Boje *
            </label>
            <input
              type="text"
              id="color_name"
              name="color_name"
              required
              value={formData.color_name}
              onChange={handleChange}
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none"
              placeholder="npr. Sunset Orange"
            />
          </div>

          <div>
            <label htmlFor="material_type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
              Tip Materijala *
            </label>
            <select
              id="material_type"
              name="material_type"
              required
              value={formData.material_type}
              onChange={handleChange}
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none"
            >
              <option value="PLA">PLA</option>
              <option value="PETG">PETG</option>
              <option value="ABS">ABS</option>
              <option value="TPU">TPU</option>
              <option value="PLA-CF">PLA-CF</option>
              <option value="PETG-CF">PETG-CF</option>
            </select>
          </div>
        </div>

        <div className="grid md:grid-cols-2 gap-4">
          <div>
            <label htmlFor="finish_type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
              Tip Finiša
            </label>
            <select
              id="finish_type"
              name="finish_type"
              value={formData.finish_type}
              onChange={handleChange}
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none"
            >
              <option value="Basic">Basic</option>
              <option value="Matte">Matte</option>
              <option value="Silk">Silk</option>
              <option value="Metal">Metal</option>
              <option value="Sparkle">Sparkle</option>
              <option value="Glow">Glow</option>
              <option value="Transparent">Transparent</option>
            </select>
          </div>

          <div>
            <label htmlFor="user_email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
              Email *
            </label>
            <input
              type="email"
              id="user_email"
              name="user_email"
              required
              value={formData.user_email}
              onChange={handleChange}
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none"
              placeholder="Za obaveštenja o statusu"
            />
          </div>
        </div>

        <div className="grid md:grid-cols-2 gap-4">
          <div>
            <label htmlFor="user_phone" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
              Telefon *
            </label>
            <input
              type="tel"
              id="user_phone"
              name="user_phone"
              required
              value={formData.user_phone}
              onChange={handleChange}
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none"
              placeholder="063 123 4567"
            />
          </div>
        </div>

        <div className="flex justify-end">
          <button
            type="submit"
            disabled={isSubmitting}
            className={`px-6 py-2 rounded-md text-white font-medium ${
              isSubmitting 
                ? 'bg-gray-400 cursor-not-allowed' 
                : 'bg-purple-600 hover:bg-purple-700'
            } transition-colors`}
          >
            {isSubmitting ? 'Slanje...' : 'Pošalji Zahtev'}
          </button>
        </div>
      </form>
    </div>
  );
}