"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { createWhatsappTemplate, updateWhatsappTemplate } from "./actions";

export default function WhatsappTemplateForm({
  initialData,
}: {
  initialData?: {
    id: number;
    serviceType: string;
    message: string;
  };
}) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const router = useRouter();

  const isEdit = !!initialData;

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

    const formData = new FormData(e.currentTarget);

    try {
      if (isEdit) {
        await updateWhatsappTemplate(initialData.id, formData);
      } else {
        await createWhatsappTemplate(formData);
      }
      router.push("/admin/whatsapp-templates");
      router.refresh();
    } catch (err: any) {
      setError(err.message || "Terjadi kesalahan");
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-6 bg-white p-6 md:p-8 rounded-xl shadow-sm border border-slate-200">
      {error && (
        <div className="bg-red-50 text-red-600 p-4 rounded-lg text-sm border border-red-200">
          {error}
        </div>
      )}

      <div className="space-y-4">
        <div>
          <label htmlFor="serviceType" className="block text-sm font-medium text-slate-700 mb-1">
            Tipe Layanan
          </label>
          <select
            id="serviceType"
            name="serviceType"
            required
            defaultValue={initialData?.serviceType || ""}
            className="w-full border border-slate-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-merah-ranata focus:border-merah-ranata outline-none transition"
          >
            <option value="" disabled>Pilih Layanan</option>
            <option value="tour">Tour (Paket Wisata)</option>
            <option value="flight">Flight (Tiket Pesawat)</option>
            <option value="car-rental">Car Rental (Sewa Mobil)</option>
            <option value="event">Event</option>
            <option value="general">General (Umum)</option>
          </select>
          <p className="text-xs text-slate-500 mt-1">Satu tipe layanan hanya bisa memiliki satu template.</p>
        </div>

        <div>
          <label htmlFor="message" className="block text-sm font-medium text-slate-700 mb-1">
            Isi Pesan (Template)
          </label>
          <textarea
            id="message"
            name="message"
            required
            rows={6}
            defaultValue={initialData?.message || ""}
            placeholder="Halo admin, saya tertarik pesan [TITLE] di lokasi [LOCATION]..."
            className="w-full border border-slate-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-merah-ranata focus:border-merah-ranata outline-none transition"
          />
          <div className="text-xs text-slate-500 mt-2 space-y-1">
            <p><strong>Placeholder yang tersedia:</strong></p>
            <p className="flex gap-2 flex-wrap">
              <span className="bg-slate-100 px-2 py-0.5 rounded border border-slate-200">[TITLE]</span>
              <span className="bg-slate-100 px-2 py-0.5 rounded border border-slate-200">[LOCATION]</span>
              <span className="bg-slate-100 px-2 py-0.5 rounded border border-slate-200">[PRICE]</span>
              <span className="bg-slate-100 px-2 py-0.5 rounded border border-slate-200">[AIRLINE]</span>
              <span className="bg-slate-100 px-2 py-0.5 rounded border border-slate-200">[CAPACITY]</span>
            </p>
          </div>
        </div>
      </div>

      <div className="flex gap-4 pt-4">
        <button
          type="button"
          onClick={() => router.back()}
          className="px-6 py-2 border border-slate-300 text-slate-700 font-medium rounded-lg hover:bg-slate-50 transition"
        >
          Batal
        </button>
        <button
          type="submit"
          disabled={loading}
          className="px-6 py-2 bg-merah-ranata text-white font-medium rounded-lg hover:bg-merah-ranata/90 transition disabled:opacity-50"
        >
          {loading ? "Menyimpan..." : "Simpan Template"}
        </button>
      </div>
    </form>
  );
}