'use client';

import React, { useState } from 'react';
import { Send, CheckCircle2, AlertCircle, Loader2 } from 'lucide-react';

export default function ContactForm() {
  const [form, setForm] = useState({ name: '', email: '', subject: '', message: '' });
  const [loading, setLoading] = useState(false);
  const [status, setStatus] = useState<{ type: 'success' | 'error'; message: string } | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) {
      setStatus({ type: 'error', message: 'Lütfen zorunlu alanları eksiksiz doldurunuz.' });
      return;
    }

    setLoading(true);
    setStatus(null);

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

      if (res.ok && data.success) {
        setStatus({ type: 'success', message: data.message || 'Mesajınız başarıyla iletildi!' });
        setForm({ name: '', email: '', subject: '', message: '' });
      } else {
        setStatus({ type: 'error', message: data.message || 'Bir hata oluştu.' });
      }
    } catch (err) {
      setStatus({ type: 'error', message: 'Sunucuya bağlanılamadı. Lütfen tekrar deneyiniz.' });
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="glass-card rounded-3xl p-8 sm:p-10 border border-slate-800 relative">
      {status && (
        <div className={`mb-6 p-4 rounded-xl border flex items-center gap-3 text-xs font-medium ${
          status.type === 'success' 
            ? 'bg-emerald-950/60 border-emerald-500/40 text-emerald-300' 
            : 'bg-rose-950/60 border-rose-500/40 text-rose-300'
        }`}>
          {status.type === 'success' ? <CheckCircle2 className="w-5 h-5 shrink-0" /> : <AlertCircle className="w-5 h-5 shrink-0" />}
          <span>{status.message}</span>
        </div>
      )}

      <form onSubmit={handleSubmit} className="space-y-5">
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
          <div className="space-y-1.5">
            <label htmlFor="name" className="block text-xs font-mono uppercase text-slate-400">Adınız Soyadınız *</label>
            <input
              type="text"
              id="name"
              required
              placeholder="örn. Caner Kaya"
              value={form.name}
              onChange={e => setForm({ ...form, name: e.target.value })}
              className="w-full px-4 py-3 rounded-xl bg-slate-950/80 border border-slate-800 text-white placeholder-slate-600 focus:outline-none focus:border-cyan-500 text-sm transition-all"
            />
          </div>

          <div className="space-y-1.5">
            <label htmlFor="email" className="block text-xs font-mono uppercase text-slate-400">E-Posta Adresiniz *</label>
            <input
              type="email"
              id="email"
              required
              placeholder="örn. caner@sirket.com"
              value={form.email}
              onChange={e => setForm({ ...form, email: e.target.value })}
              className="w-full px-4 py-3 rounded-xl bg-slate-950/80 border border-slate-800 text-white placeholder-slate-600 focus:outline-none focus:border-cyan-500 text-sm transition-all"
            />
          </div>
        </div>

        <div className="space-y-1.5">
          <label htmlFor="subject" className="block text-xs font-mono uppercase text-slate-400">Konu</label>
          <input
            type="text"
            id="subject"
            placeholder="örn. Programatik SEO / Next.js Web Mimarisi"
            value={form.subject}
            onChange={e => setForm({ ...form, subject: e.target.value })}
            className="w-full px-4 py-3 rounded-xl bg-slate-950/80 border border-slate-800 text-white placeholder-slate-600 focus:outline-none focus:border-cyan-500 text-sm transition-all"
          />
        </div>

        <div className="space-y-1.5">
          <label htmlFor="message" className="block text-xs font-mono uppercase text-slate-400">Mesajınız *</label>
          <textarea
            id="message"
            rows={5}
            required
            placeholder="Projenizden, hedeflerinizden veya danışmanlık ihtiyacınızdan bahsedin..."
            value={form.message}
            onChange={e => setForm({ ...form, message: e.target.value })}
            className="w-full px-4 py-3 rounded-xl bg-slate-950/80 border border-slate-800 text-white placeholder-slate-600 focus:outline-none focus:border-cyan-500 text-sm transition-all resize-none"
          />
        </div>

        <button
          type="submit"
          disabled={loading}
          className="w-full py-4 rounded-xl bg-gradient-to-r from-cyan-500 to-indigo-600 text-slate-950 font-bold text-sm hover:from-cyan-400 hover:to-indigo-500 transition-all shadow-lg shadow-cyan-500/20 flex items-center justify-center gap-2 disabled:opacity-50"
        >
          {loading ? (
            <>
              <Loader2 className="w-4 h-4 animate-spin" />
              <span>Gönderiliyor...</span>
            </>
          ) : (
            <>
              <Send className="w-4 h-4" />
              <span>Mesajı Gönder</span>
            </>
          )}
        </button>
      </form>
    </div>
  );
}