"use client";

import { useState } from "react";
import { Save } from "lucide-react";
import { updateBeachSettings } from "@/app/actions/beach";
import ImageUpload from "@/components/admin/ImageUpload";

type BeachSettings = {
  title: string;
  description: string;
  reservationInfo: string;
  image1: string;
  image2: string;
  image3: string;
  image4: string;
};

export default function BeachClient({ settings }: { settings: BeachSettings }) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [successMessage, setSuccessMessage] = useState<string | null>(null);
  
  const [image1, setImage1] = useState(settings.image1);
  const [image2, setImage2] = useState(settings.image2);
  const [image3, setImage3] = useState(settings.image3);
  const [image4, setImage4] = useState(settings.image4);

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

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

    if (result.success) {
      setSuccessMessage("Plaj 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">Plaj Yönetimi</h1>
        <p className="text-gray-500 mt-2">
          Site üzerindeki Plaj (Beach) bölümünün yazılarını ve görsellerini buradan değiştirebilirsiniz.
        </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>
            <label className="block text-sm font-medium text-gray-700 mb-1">Başlık</label>
            <input 
              name="title" 
              defaultValue={settings.title}
              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">Açıklama (Ana Metin)</label>
            <textarea 
              name="description" 
              defaultValue={settings.description}
              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 resize-none"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Rezervasyon Bilgisi (Buton Üstü Not)</label>
            <textarea 
              name="reservationInfo" 
              defaultValue={settings.reservationInfo}
              required 
              rows={2}
              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="border-t border-gray-100 pt-6">
            <h3 className="text-lg font-medium text-gray-900 mb-4">Plaj Görselleri (4 Adet)</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">Görsel 1 (Sol Üst, Dikey)</label>
                <ImageUpload
                  name="image1"
                  value={image1}
                  onChange={setImage1}
                  label="Görsel 1 Yükle"
                />
              </div>
              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">Görsel 2 (Sol Alt, Kare)</label>
                <ImageUpload
                  name="image2"
                  value={image2}
                  onChange={setImage2}
                  label="Görsel 2 Yükle"
                />
              </div>
              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">Görsel 3 (Sağ Üst, Kare)</label>
                <ImageUpload
                  name="image3"
                  value={image3}
                  onChange={setImage3}
                  label="Görsel 3 Yükle"
                />
              </div>
              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">Görsel 4 (Sağ Alt, Dikey)</label>
                <ImageUpload
                  name="image4"
                  value={image4}
                  onChange={setImage4}
                  label="Görsel 4 Yükle"
                />
              </div>
            </div>
          </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>
  );
}