'use client';

import { useState } from 'react';
import { dataStore } from '@/lib/dataStore';

interface ComplaintFormProps {
  onClose: () => void;
}

interface FormData {
  name: string;
  email: string;
  phone: string;
  subject: string;
  type: 'sikayet' | 'oneri' | 'bilgi';
  message: string;
}

export default function ComplaintForm({ onClose }: ComplaintFormProps) {
  const [formData, setFormData] = useState<FormData>({
    name: '',
    email: '',
    phone: '',
    subject: '',
    type: 'oneri',
    message: ''
  });

  const [isSubmitting, setIsSubmitting] = useState(false);
  const [showSuccess, setShowSuccess] = useState(false);

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

    try {
      // dataStore'a kaydet
      dataStore.addMessage({
        name: formData.name,
        email: formData.email,
        phone: formData.phone,
        subject: formData.subject,
        type: formData.type,
        message: formData.message,
        date: new Date().toLocaleDateString('tr-TR'),
        read: false
      });

      setShowSuccess(true);
      setTimeout(() => {
        handleReset();
        setShowSuccess(false);
        onClose();
      }, 2000);
    } catch (error) {
      console.error('Form gönderilirken hata:', error);
      alert('Mesaj gönderilirken bir hata oluştu. Lütfen tekrar deneyin.');
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleReset = () => {
    setFormData({
      name: '',
      email: '',
      phone: '',
      subject: '',
      type: 'oneri',
      message: ''
    });
  };

  const handleClose = () => {
    handleReset();
    onClose();
  };

  return (
    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pt-8 md:pt-32 pb-8">
      <div className="bg-white rounded-2xl shadow-2xl p-6 lg:p-8">
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 bg-[#004B87] rounded-lg flex items-center justify-center">
              <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
              </svg>
            </div>
            <h2 className="text-2xl font-bold text-[#004B87]">Dilek ve Şikayet Formu</h2>
          </div>
          <button 
            onClick={handleClose}
            className="text-gray-500 hover:text-red-500 transition-colors"
          >
            <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        {/* Başarı Mesajı */}
        {showSuccess && (
          <div className="bg-green-50 border-l-4 border-green-500 p-4 mb-6 animate-fade-in">
            <div className="flex items-center">
              <svg className="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
              </svg>
              <p className="text-sm font-medium text-green-800">
                Mesajınız başarıyla gönderildi! En kısa sürede size dönüş yapılacaktır.
              </p>
            </div>
          </div>
        )}

        {/* Bilgilendirme */}
        <div className="bg-blue-50 border-l-4 border-[#00B4D8] p-4 mb-6">
          <div className="flex items-start">
            <svg className="w-5 h-5 text-[#00B4D8] mt-0.5 mr-3 shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
            </svg>
            <p className="text-sm text-gray-700">
              A2 Metro Hattı projesi ile ilgili dilek, öneri ve şikayetlerinizi bu form aracılığıyla iletebilirsiniz. Başvurularınız en kısa sürede değerlendirilecektir.
            </p>
          </div>
        </div>

        {/* Form */}
        <form className="space-y-6" onSubmit={handleSubmit}>
          {/* Başvuru Tipi */}
          <div>
            <label className="block text-sm font-semibold text-[#004B87] mb-3">
              Başvuru Tipi <span className="text-red-500">*</span>
            </label>
            <div className="flex gap-4">
              <label className="flex items-center cursor-pointer">
                <input
                  type="radio"
                  name="type"
                  value="oneri"
                  checked={formData.type === 'oneri'}
                  onChange={(e) => setFormData({...formData, type: e.target.value as 'oneri'})}
                  className="w-4 h-4 text-[#00B4D8] border-gray-300 focus:ring-[#00B4D8]"
                />
                <span className="ml-2 text-gray-700">Dilek / Öneri</span>
              </label>
              <label className="flex items-center cursor-pointer">
                <input
                  type="radio"
                  name="type"
                  value="sikayet"
                  checked={formData.type === 'sikayet'}
                  onChange={(e) => setFormData({...formData, type: e.target.value as 'sikayet'})}
                  className="w-4 h-4 text-[#00B4D8] border-gray-300 focus:ring-[#00B4D8]"
                />
                <span className="ml-2 text-gray-700">Şikayet</span>
              </label>
              <label className="flex items-center cursor-pointer">
                <input
                  type="radio"
                  name="type"
                  value="bilgi"
                  checked={formData.type === 'bilgi'}
                  onChange={(e) => setFormData({...formData, type: e.target.value as 'bilgi'})}
                  className="w-4 h-4 text-[#00B4D8] border-gray-300 focus:ring-[#00B4D8]"
                />
                <span className="ml-2 text-gray-700">Bilgi Talebi</span>
              </label>
            </div>
          </div>

          {/* İki Sütunlu Alan */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* Ad Soyad */}
            <div>
              <label htmlFor="name" className="block text-sm font-semibold text-[#004B87] mb-2">
                Ad Soyad <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                id="name"
                required
                value={formData.name}
                onChange={(e) => setFormData({...formData, name: e.target.value})}
                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all text-gray-900 placeholder:text-gray-500"
                placeholder="Adınız ve Soyadınız"
              />
            </div>

            {/* E-posta */}
            <div>
              <label htmlFor="email" className="block text-sm font-semibold text-[#004B87] mb-2">
                E-posta <span className="text-red-500">*</span>
              </label>
              <input
                type="email"
                id="email"
                required
                value={formData.email}
                onChange={(e) => setFormData({...formData, email: e.target.value})}
                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all text-gray-900 placeholder:text-gray-500"
                placeholder="ornek@email.com"
              />
            </div>

            {/* Telefon */}
            <div>
              <label htmlFor="phone" className="block text-sm font-semibold text-[#004B87] mb-2">
                Telefon
              </label>
              <input
                type="tel"
                id="phone"
                value={formData.phone}
                onChange={(e) => setFormData({...formData, phone: e.target.value})}
                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all text-gray-900 placeholder:text-gray-500"
                placeholder="0(5__) ___ __ __"
              />
            </div>

            {/* Konu */}
            <div>
              <label htmlFor="subject" className="block text-sm font-semibold text-[#004B87] mb-2">
                Konu <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                id="subject"
                required
                value={formData.subject}
                onChange={(e) => setFormData({...formData, subject: e.target.value})}
                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all text-gray-900 placeholder:text-gray-500"
                placeholder="Başvuru konusu"
              />
            </div>
          </div>

          {/* Mesaj */}
          <div>
            <label htmlFor="message" className="block text-sm font-semibold text-[#004B87] mb-2">
              Mesajınız <span className="text-red-500">*</span>
            </label>
            <textarea
              id="message"
              required
              rows={6}
              value={formData.message}
              onChange={(e) => setFormData({...formData, message: e.target.value})}
              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all resize-none text-gray-900 placeholder:text-gray-500"
              placeholder="Lütfen detaylı bilgi veriniz..."
            ></textarea>
          </div>

          {/* KVKK Onayı */}
          <div className="flex items-start">
            <input
              type="checkbox"
              id="kvkk"
              required
              className="w-4 h-4 mt-1 text-[#00B4D8] border-gray-300 rounded focus:ring-[#00B4D8]"
            />
            <label htmlFor="kvkk" className="ml-3 text-sm text-gray-700">
              <span className="text-red-500">*</span> Kişisel verilerimin işlenmesine ilişkin{' '}
              <span className="text-[#00B4D8] hover:underline">KVKK Aydınlatma Metni</span>&#39;ni okudum ve kabul ediyorum.
            </label>
          </div>

          {/* Butonlar */}
          <div className="flex flex-col sm:flex-row gap-4 pt-4">
            <button
              type="submit"
              disabled={isSubmitting}
              className="flex-1 px-6 py-3 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors font-semibold shadow-lg hover:shadow-xl flex items-center justify-center space-x-2 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isSubmitting ? (
                <>
                  <svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                  </svg>
                  <span>Gönderiliyor...</span>
                </>
              ) : (
                <>
                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                  </svg>
                  <span>Gönder</span>
                </>
              )}
            </button>
            <button
              type="button"
              onClick={handleReset}
              disabled={isSubmitting}
              className="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
            >
              Temizle
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}