"use client";

import { useActionState } from "react";
import { updateSettings } from "@/app/actions/settings";
import { Save, CheckCircle2 } from "lucide-react";
import { SiteSettings } from "@prisma/client";

export default function SettingsForm({ defaultValues }: { defaultValues: SiteSettings | null }) {
  const [state, formAction, isPending] = useActionState(updateSettings, null);

  // Fallback data if db is empty
  const fallback = {
    title: "Kite Beach Akyaka",
    email: "info@kitebeach.com",
    phone: "+90 555 123 4567",
    address: "Akyaka, Muğla, Türkiye",
    instagram: "https://instagram.com/kitebeachakyaka"
  };

  const values = defaultValues || fallback;

  return (
    <>
      {state?.success && (
        <div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-xl flex items-center gap-3 text-green-800 animate-fade-in">
          <CheckCircle2 className="w-5 h-5 text-green-600" />
          <p className="font-medium">{state.message}</p>
        </div>
      )}

      <div className="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden relative">
        <form action={formAction} className="p-8 md:p-10">
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
            <div className="col-span-1 md:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-1">Site Başlığı</label>
              <input 
                type="text" 
                name="title" 
                defaultValue={values.title}
                required 
                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 hover:border-gray-300"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">İletişim E-posta</label>
              <input 
                type="email" 
                name="email" 
                defaultValue={values.email}
                required 
                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 hover:border-gray-300"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Telefon Numarası</label>
              <input 
                type="tel" 
                name="phone" 
                defaultValue={values.phone}
                required 
                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 hover:border-gray-300"
              />
            </div>

            <div className="col-span-1 md:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-1">Açık Adres</label>
              <textarea 
                name="address" 
                defaultValue={values.address}
                required 
                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 hover:border-gray-300 resize-none"
              />
            </div>

            <div className="col-span-1 md:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-1">Instagram Bağlantısı</label>
              <input 
                type="url" 
                name="instagram" 
                defaultValue={values.instagram || ""}
                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 hover:border-gray-300"
              />
            </div>
          </div>

          <div className="flex justify-end border-t border-gray-100 pt-6">
            <button 
              type="submit" 
              disabled={isPending}
              className="flex items-center justify-center gap-3 bg-accent text-white font-bold tracking-widest uppercase py-4 px-10 rounded-xl hover:bg-accent/90 transition-all disabled:opacity-70 disabled:cursor-not-allowed shadow-lg shadow-accent/20"
            >
              {isPending ? (
                <>Kaydediliyor...</>
              ) : (
                <>
                  <Save className="w-5 h-5" />
                  Ayarları Kaydet
                </>
              )}
            </button>
          </div>

        </form>
      </div>
    </>
  );
}