'use client'

import { useState } from 'react';
import { Button } from '@/components/ui/button';

export default function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: '',
  });
  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');

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

    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });

      if (!response.ok) throw new Error('Failed to send message');

      setStatus('success');
      setFormData({ name: '', email: '', message: '' });
      setTimeout(() => setStatus('idle'), 3000);
    } catch (_error) {
      setStatus('error');
      setTimeout(() => setStatus('idle'), 3000);
    }
  };

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

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div>
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
          placeholder="Ваше имя"
          required
          className="w-full p-3 bg-black/30 border border-zinc-800 rounded-lg focus:outline-none focus:border-[#4AFF8F] text-white"
        />
      </div>
      <div>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
          placeholder="Ваш email"
          required
          className="w-full p-3 bg-black/30 border border-zinc-800 rounded-lg focus:outline-none focus:border-[#4AFF8F] text-white"
        />
      </div>
      <div>
        <textarea
          name="message"
          value={formData.message}
          onChange={handleChange}
          placeholder="Ваше сообщение"
          required
          rows={4}
          className="w-full p-3 bg-black/30 border border-zinc-800 rounded-lg focus:outline-none focus:border-[#4AFF8F] text-white resize-none"
        />
      </div>
      <Button
        type="submit"
        disabled={status === 'loading'}
        className="w-full bg-[#4AFF8F] text-black hover:bg-[#4AFF8F]/90"
      >
        {status === 'loading' ? 'Отправка...' : 
         status === 'success' ? 'Отправлено!' :
         status === 'error' ? 'Ошибка! Попробуйте снова' :
         'Отправить'}
      </Button>
    </form>
  );
}