"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import ToastMessage from "@/components/common/ToastMessage";
import { Trash } from "lucide-react";
import Tiptap from "@/components/TipTap/tiptap";
import axios from "axios";

interface FooterSectionFormProps {
  initialData?: footerSectionType | null;
}

const FooterSectionForm: React.FC<FooterSectionFormProps> = ({ initialData }) => {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");

  useEffect(() => {
    if (initialData) {
      setTitle(initialData.title);
      setDescription(initialData.description);
    }
  }, [initialData]);

  const onSubmit = async (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    setLoading(true);

    if (!title || !description) {
      ToastMessage("Missing fields", "error");
      setLoading(false);
      return;
    }

    const apiUrl = initialData
      ? `/api/admin/footerSection/${initialData.id}`
      : "/api/admin/footerSection";

    const formData = new FormData();
    formData.append("title", title);
    formData.append("description", description);



    try {
      const response = initialData
        ? await axios.put(apiUrl, formData)
        : await axios.post(apiUrl, formData);


      if (response.status === 200) {
        ToastMessage(
          initialData
            ? "Footer Section updated successfully"
            : "Footer Section created successfully",
          "success"
        );
      }
      router.push("/admin/footerSection");
    }
    catch (error: any) {
      if (error.response && error.response.data && error.response.data.message) {
        ToastMessage(error.response.data.message, "error");
      }
    }


    setLoading(false);
  };

  return (
    <div className="max-w-6xl mx-auto bg-white rounded-2xl shadow-lg p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-gray-900">
          {initialData ? "Edit Footer Section" : "Add Footer Section"}
        </h1>

        {initialData && (
          <Button
            onClick={() => {
              if (confirm("Are you sure you want to delete this footer section?")) {
                axios
                  .delete(`/api/admin/footerSection/${initialData.id}`)
                  .then((res) => {
                    if (res.status === 200) {
                      ToastMessage("Footer Section deleted", "success");
                      router.push("/admin/footerSection");
                    } else {
                      ToastMessage("Deletion failed", "error");
                    }
                  });
              }
            }}
            className="bg-red-600 hover:bg-red-700 text-white rounded-full p-2 shadow-md transition active:scale-95"
          >
            <Trash size={18} />
          </Button>
        )}
      </div>

      {/* Form */}
      <form className="space-y-6">
        {/* Title */}
        <div className="space-y-2">
          <label className="text-sm font-semibold text-gray-700">
            Section Title
          </label>

          <select
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            className="w-full rounded-lg border border-gray-300 bg-gray-50 px-3 py-2 text-gray-900 focus:ring-2 focus:ring-blue-500 focus:outline-none"
            required
          >
            <option value="">Select section</option>

            <option value="homeBottom">HomePage Bottom</option>

            <option value="overview">Overview</option>
            <option value="pricing">Pricing</option>
            <option value="marketplace">Marketplace</option>
            <option value="features">Features</option>
            <option value="integrations">Integrations</option>
            <option value="about">About</option>
            <option value="team">Team</option>
            <option value="blog">Blog</option>
            <option value="careers">Careers</option>
            <option value="contact">Contact</option>
            <option value="privacy">Privacy</option>
            <option value="help">Help</option>
            <option value="sales">Sales</option>
            <option value="advertise">Advertise</option>
          </select>
        </div>

        {/* Description */}
        <div className="space-y-2">
          <label className="text-sm font-semibold text-gray-700">
            Description
          </label>
          <div className="rounded-lg border border-gray-300 overflow-hidden">
            <Tiptap
              content={description}
              onUpdate={(content: string) => setDescription(content)}
            />
          </div>
        </div>

        {/* Actions */}
        <div className="flex items-center gap-4 pt-4">
          <button
            onClick={onSubmit}
            disabled={loading}
            className="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2 rounded-lg shadow-md transition disabled:opacity-50"
          >
            {loading ? "Saving..." : "Save"}
          </button>

          <button
            type="button"
            onClick={() => router.back()}
            className="bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold px-6 py-2 rounded-lg transition"
          >
            Cancel
          </button>
        </div>
      </form>
    </div>
  );
};

export default FooterSectionForm;