import { use, useEffect, useState } from "react";
import { PiDotsThreeOutlineVerticalFill } from "react-icons/pi";
import { Bounce, toast } from "react-toastify";
import api from "../../config/api";
import { IoMdAdd } from "react-icons/io";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import { FaSpinner } from "react-icons/fa";
import LoaderUi from "../../helper/LoaderUi";

import TemplateTable from "./TemplateTable";



const Templates = () => {
  const [activeFilter, setActiveFilter] = useState("All");
  const [loading, setLoading] = useState(false)
  const [templates, setTemplates] = useState([])
  const accountDetails = useSelector((state: any) => state.user.account);
  const accountId = accountDetails.id || "";
  const [showMenu, setShowMenu] = useState(null);

  const [activeAccountId, setActiveAccountId] = useState<string | null>(
    JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
  );

  const navigate = useNavigate();

  const filters = ["All", "My Templates", "Shared"];

  const handleAddTemplate = async () => {
    console.log("handleAddTemplate called");
    try {
      const res = await api.post(`/api/accounts/${activeAccountId}/templates`);
      navigate(`/process-step-one/${activeAccountId}/template/${res.data.id}`)
    } catch (error) {
      console.log(error)
    }

  }

  


  

  return (
    <div className="p-3 text-sm">
      {/* Header */}
      <div className="flex items-center justify-between mb-3">
        {/* Filter as pill buttons */}
        <div className="flex gap-2">
          {filters.map((filter) => (
            <button
              key={filter}
              onClick={() => setActiveFilter(filter)}
              className={`px-3 py-1 rounded-full text-xs border transition 
                ${activeFilter === filter
                  ? "bg-[var(--primary)] text-white"
                  : "border-gray-300 text-gray-600 hover:bg-gray-100"
                }`}
            >
              {filter}
            </button>
          ))}
        </div>

        <div
          onClick={handleAddTemplate}
          className="flex items-center gap-1 bg-gradient-to-br from-[var(--primary)] to-blue-600 px-2.5 py-1.5 rounded-sm cursor-pointer hover:opacity-90">
          <IoMdAdd className="text-white" />
          <button
            className="text-white rounded text-sm hover:opacity-90">
            Add Template
          </button>
        </div>
      </div>

      {/* Table */}
      <section className="my-4 mx-3"></section>
      <TemplateTable/>
    </div>
  );
};

export default Templates;