"use client";

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

type AboutSettings = {
  title: string;
  description: string;
  card1Title: string;
  card1Desc: string;
  card2Title: string;
  card2Desc: string;
  card3Title: string;
  card3Desc: string;
  image: string;
};

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

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

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

    if (result.success) {
      setSuccessMessage("Hakkımızda 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">Hakkımızda Yönetimi</h1>
        <p className="text-gray-500 mt-2">
          Site üzerindeki Hakkımızda bölümünün metinlerini ve ana görselini 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 className="border-t border-gray-100 pt-6">
            <h3 className="text-lg font-medium text-gray-900 mb-4">Kart 1 (Örn: Kusursuz Sahil)</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">Başlık</label>
                <input 
                  name="card1Title" 
                  defaultValue={settings.card1Title}
                  required 
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
                />
              </div>
              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">Açıklama</label>
                <input 
                  name="card1Desc" 
                  defaultValue={settings.card1Desc}
                  required 
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
                />
              </div>
            </div>
          </div>

          <div className="border-t border-gray-100 pt-6">
            <h3 className="text-lg font-medium text-gray-900 mb-4">Kart 2 (Örn: Gastronomi)</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">Başlık</label>
                <input 
                  name="card2Title" 
                  defaultValue={settings.card2Title}
                  required 
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
                />
              </div>
              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">Açıklama</label>
                <input 
                  name="card2Desc" 
                  defaultValue={settings.card2Desc}
                  required 
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
                />
              </div>
            </div>
          </div>

          <div className="border-t border-gray-100 pt-6">
            <h3 className="text-lg font-medium text-gray-900 mb-4">Kart 3 (Örn: Canlı Eğlence)</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">Başlık</label>
                <input 
                  name="card3Title" 
                  defaultValue={settings.card3Title}
                  required 
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
                />
              </div>
              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">Açıklama</label>
                <input 
                  name="card3Desc" 
                  defaultValue={settings.card3Desc}
                  required 
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
                />
              </div>
            </div>
          </div>

          <div className="border-t border-gray-100 pt-6">
            <h3 className="text-lg font-medium text-gray-900 mb-4">Sağ Bölüm Görseli</h3>
            <div>
              <label className="block text-xs font-medium text-gray-700 mb-1">Görsel Yükle</label>
              <ImageUpload
                name="image"
                value={image}
                onChange={setImage}
                label="Yeni Görsel Yükle"
              />
            </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>
  );
}