"use client";

import { useState } from "react";
import { Save } from "lucide-react";
import { updateContactSettings } from "@/app/actions/contact";

type ContactSettings = {
  address: string;
  phone: string;
  instagram: string;
  mapUrl: string;
};

export default function ContactClient({ settings }: { settings: ContactSettings }) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [successMessage, setSuccessMessage] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    setSuccessMessage(null);

    const formData = new FormData(e.currentTarget);
    const result = await updateContactSettings(formData);

    if (result.success) {
      setSuccessMessage("İletişim ayarları başarıyla kaydedildi.");
    } else {
      setError(result.error || "Bir hata oluştu");
    }
    setLoading(false);
  };

  return (
    <div className="p-8 max-w-4xl">
      <div className="mb-8">
        <h1 className="text-3xl font-serif text-gray-900">İletişim & Konum</h1>
        <p className="text-gray-500 mt-2">
          Site üzerindeki iletişim bilgilerini ve Google Haritalar iframe adresini buradan güncelleyebilirsiniz.
        </p>
      </div>

      <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <form onSubmit={handleSubmit} className="p-6 space-y-6">
          
          {error && (
            <div className="bg-red-50 text-red-600 p-4 rounded-lg text-sm font-medium">
              {error}
            </div>
          )}

          {successMessage && (
            <div className="bg-green-50 text-green-600 p-4 rounded-lg text-sm font-medium">
              {successMessage}
            </div>
          )}

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Adres</label>
              <textarea 
                name="address" 
                defaultValue={settings.address}
                placeholder="Örn: Akyaka Mah. Gökova..."
                required 
                rows={3}
                className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none resize-none"
              />
            </div>

            <div className="space-y-6">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Telefon / WhatsApp (Ülke Koduyla)</label>
                <input 
                  type="text" 
                  name="phone" 
                  defaultValue={settings.phone}
                  placeholder="Örn: 905001234567"
                  required 
                  className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Instagram Linki</label>
                <input 
                  type="url" 
                  name="instagram" 
                  defaultValue={settings.instagram}
                  placeholder="https://instagram.com/..."
                  required 
                  className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
                />
              </div>
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Google Maps Embed URL (src)</label>
            <textarea 
              name="mapUrl" 
              defaultValue={settings.mapUrl}
              placeholder="https://www.google.com/maps/embed?pb=..."
              required 
              rows={4}
              className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none font-mono text-sm"
            />
            <p className="text-xs text-gray-500 mt-2">
              Google Haritalar'dan "Harita Yerleştir" seçeneğini seçip içindeki <strong>src="..."</strong> kısmındaki URL'yi buraya yapıştırın.
            </p>
          </div>

          <div className="pt-4 flex justify-end border-t border-gray-100">
            <button 
              type="submit" 
              disabled={loading}
              className="bg-turquoise text-white px-8 py-2.5 rounded-lg hover:bg-turquoise/90 transition-colors disabled:opacity-50 flex items-center gap-2"
            >
              <Save size={18} />
              {loading ? "Kaydediliyor..." : "Ayarları Kaydet"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}