"use client";

import { useState, useTransition } from "react";
import { AboutSection } from "@prisma/client";
import { Save } from "lucide-react";
import { updateAboutSection } from "@/app/actions/about";

export default function AboutForm({ trData, enData }: { trData: AboutSection | null, enData: AboutSection | null }) {
  const [activeTab, setActiveTab] = useState<"tr" | "en">("tr");
  const [isPending, startTransition] = useTransition();
  const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);

  const handleSubmit = async (formData: FormData) => {
    setMessage(null);
    formData.append("lang", activeTab);
    
    startTransition(async () => {
      const result = await updateAboutSection(null, formData);
      if (result?.error) {
        setMessage({ type: 'error', text: result.error });
      } else if (result?.success) {
        setMessage({ type: 'success', text: result.message });
      }
    });
  };

  const activeData = activeTab === "tr" ? trData : enData;

  return (
    <div className="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden animate-fade-up">
      {/* Tabs */}
      <div className="flex border-b border-gray-100 bg-gray-50/50 p-2">
        <button
          onClick={() => setActiveTab("tr")}
          className={`flex-1 py-3 px-6 rounded-2xl text-sm font-bold tracking-widest uppercase transition-all ${
            activeTab === "tr" 
              ? "bg-white text-primary shadow-sm border border-gray-200" 
              : "text-gray-400 hover:text-dark hover:bg-white/50"
          }`}
        >
          🇹🇷 Türkçe
        </button>
        <button
          onClick={() => setActiveTab("en")}
          className={`flex-1 py-3 px-6 rounded-2xl text-sm font-bold tracking-widest uppercase transition-all ${
            activeTab === "en" 
              ? "bg-white text-primary shadow-sm border border-gray-200" 
              : "text-gray-400 hover:text-dark hover:bg-white/50"
          }`}
        >
          🇬🇧 English
        </button>
      </div>

      <div className="p-8 md:p-12">
        <form action={handleSubmit} className="space-y-8">
          
          {message && (
            <div className={`p-4 rounded-xl text-sm font-medium ${message.type === 'success' ? 'bg-green-50 text-green-600 border border-green-200' : 'bg-red-50 text-red-600 border border-red-200'}`}>
              {message.text}
            </div>
          )}

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="space-y-6">
              <h3 className="text-lg font-serif font-bold text-dark border-b border-gray-100 pb-3">Ana Başlıklar</h3>
              
              <div>
                <label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Üst Başlık (Rozet)</label>
                <input 
                  type="text" 
                  name="badge" 
                  defaultValue={activeData?.badge || "Hikayemiz"} 
                  className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all"
                />
              </div>

              <div>
                <label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Başlık 1. Satır</label>
                <input 
                  type="text" 
                  name="titleLine1" 
                  defaultValue={activeData?.titleLine1 || "Doğanın"} 
                  className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all"
                />
              </div>

              <div>
                <label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Başlık 2. Satır</label>
                <input 
                  type="text" 
                  name="titleLine2" 
                  defaultValue={activeData?.titleLine2 || "Kalbinde"} 
                  className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all"
                />
              </div>

              <div>
                <label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Vurgulu Başlık</label>
                <input 
                  type="text" 
                  name="titleHighlight" 
                  defaultValue={activeData?.titleHighlight || "Özel Bir Kaçış"} 
                  className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all"
                />
              </div>
            </div>

            <div className="space-y-6">
              <h3 className="text-lg font-serif font-bold text-dark border-b border-gray-100 pb-3">İçerik ve Görsel</h3>
              
              <div>
                <label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Açıklama Paragraf 1</label>
                <textarea 
                  name="description1" 
                  defaultValue={activeData?.description1 || "Gökova Körfezi'nin kristal sularına dökülen Azmak Nehri'nin hemen kıyısında, rüzgarın hiç eksik olmadığı eşsiz bir konumda yer alıyoruz."} 
                  rows={3}
                  className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all resize-none"
                />
              </div>

              <div>
                <label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Açıklama Paragraf 2</label>
                <textarea 
                  name="description2" 
                  defaultValue={activeData?.description2 || "Kite Beach Akyaka; kitesurf tutkusunu doğayla, konforla ve yerel lezzetlerle bütünleştiren benzersiz bir yaşam alanı sunar."} 
                  rows={3}
                  className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all resize-none"
                />
              </div>

              <div>
                <label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Görsel URL</label>
                <input 
                  type="url" 
                  name="image" 
                  defaultValue={activeData?.image || "https://images.unsplash.com/photo-1544551763-46a013bb70d5?q=80&w=2940&auto=format&fit=crop"} 
                  className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all"
                />
              </div>
            </div>

            <div className="space-y-6 md:col-span-2">
              <h3 className="text-lg font-serif font-bold text-dark border-b border-gray-100 pb-3">İstatistikler ve Rozetler</h3>
              
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
                <div>
                  <label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">İstatistik 1 (Sayı)</label>
                  <input 
                    type="text" 
                    name="statsGuestCount" 
                    defaultValue={activeData?.statsGuestCount || "500+"} 
                    className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all"
                  />
                </div>
                <div>
                  <label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">İstatistik 1 (Metin)</label>
                  <input 
                    type="text" 
                    name="statsGuestLabel" 
                    defaultValue={activeData?.statsGuestLabel || "Mutlu Misafir"} 
                    className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all"
                  />
                </div>
                <div>
                  <label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">İstatistik 2 (Sayı)</label>
                  <input 
                    type="text" 
                    name="statsYearCount" 
                    defaultValue={activeData?.statsYearCount || "10+"} 
                    className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all"
                  />
                </div>
                <div>
                  <label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">İstatistik 2 (Metin)</label>
                  <input 
                    type="text" 
                    name="statsYearLabel" 
                    defaultValue={activeData?.statsYearLabel || "Yıl Deneyim"} 
                    className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all"
                  />
                </div>
                <div>
                  <label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Rozet Başlık (Sol Üst)</label>
                  <input 
                    type="text" 
                    name="badgeIkoTitle" 
                    defaultValue={activeData?.badgeIkoTitle || "IKO"} 
                    className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all"
                  />
                </div>
                <div>
                  <label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Rozet Alt Metin</label>
                  <input 
                    type="text" 
                    name="badgeIkoLabel" 
                    defaultValue={activeData?.badgeIkoLabel || "Sertifikalı"} 
                    className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all"
                  />
                </div>
              </div>
            </div>
          </div>

          <div className="flex justify-end pt-8 mt-8 border-t border-gray-100">
            <button 
              type="submit" 
              disabled={isPending}
              className="flex items-center gap-2 bg-accent text-white font-bold tracking-widest uppercase py-4 px-10 rounded-xl hover:bg-accent/90 transition-all shadow-lg shadow-accent/20 text-sm disabled:opacity-50"
            >
              <Save className="w-5 h-5" />
              {isPending ? "Kaydediliyor..." : "Kaydet"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}