'use client';

import { useState } from 'react';

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

interface FormData {
  name: string;
  email: string;
  phone: string;
  subject: string;
  type: string;
  message: string;
}

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

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    alert('Form gönderildi! (Demo)');
    handleReset();
    onClose();
  };

  const handleReset = () => {
    setFormData({
      name: '',
      email: '',
      phone: '',
      subject: '',
      type: 'dilek',
      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>

        {/* 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="dilek"
                  checked={formData.type === 'dilek'}
                  onChange={(e) => setFormData({...formData, type: e.target.value})}
                  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})}
                  className="w-4 h-4 text-[#00B4D8] border-gray-300 focus:ring-[#00B4D8]"
                />
                <span className="ml-2 text-gray-700">Şikayet</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"
              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"
            >
              <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}
              className="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors font-semibold"
            >
              Temizle
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}