"use client";

import { useEffect, useState } from "react";
import { motion } from "framer-motion";
import Link from "next/link";
import { Plus } from "lucide-react";
import { CategoriesTable } from "./CategoriesTable";
import { Select3D } from "../components/Select3D";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import Loading from "../components/Loading";

/* ================= TYPES ================= */
type Category = {
  id: number;
  name: string;
  description: string;
  is_active: boolean;
  created_at: string;
  total_items: number;
};

export default function CategoriesPage() {
  const { data: session, status } = useSession();
  const router = useRouter();
  const currentUser = session?.user as any;

  const [data, setData] = useState<Category[]>([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(true);
  const [isAdmin, setIsAdmin] = useState(false);
  const [search, setSearch] = useState("");
  const [limit, setLimit] = useState(10);
  const [page, setPage] = useState(1);

  const totalPage = Math.ceil(total / limit);

  const fetchData = async () => {
    setLoading(true);

    const res = await fetch(
      `/api/categories?search=${search}&page=${page}&limit=${limit}`,
      {
        cache: "no-store",
      }
    );

    const json = await res.json();

    setData(json.categories);
    setTotal(json.total);

    setLoading(false);
  };

  useEffect(() => {
    // 1. tunggu session selesai load
    if (status === "loading") return;

    // 2. kalau belum login
    if (status === "unauthenticated") {
      router.replace("/login");
      return;
    }
    const allowedRoles = ["ADMIN"];

    if (allowedRoles.includes(currentUser?.role)) {
      setIsAdmin(true);
      // router.replace("/");
      // return;
    }
    fetchData();
  }, [search, page, limit, status, router]);


    // optional safety (biar tidak flash UI)
  if (!session) return null;

  return (
    <div className="space-y-6 p-4">

      {/* ================= HEADER ================= */}
      <motion.div
        initial={{ opacity: 0, y: 30, scale: 0.98 }}
        animate={{ opacity: 1, y: 0, scale: 1 }}
        className="relative rounded-[28px] overflow-hidden"
      >
        <div className="absolute inset-0 bg-linear-to-br from-green-300 via-emerald-200 to-lime-200" />
        <div className="absolute inset-0 opacity-[0.08] bg-[url('https://www.transparenttextures.com/patterns/soil.png')]" />

        <div className="absolute inset-0 bg-white/30 backdrop-blur-2xl" />

        <div className="relative z-10 p-6
        border border-white/40
        bg-white/60 backdrop-blur-2xl
        shadow-[0_25px_80px_rgba(0,0,0,0.25)]
        rounded-[28px]">

          <div className="flex flex-col md:flex-row md:justify-between gap-4">

            {/* TITLE */}
            <div>
              <h1 className="text-3xl font-bold text-green-900">
                📦 Master Categories
              </h1>
              <p className="text-sm text-green-800/70">
                Total: <b>{total}</b>
              </p>
            </div>

            {/* FILTER */}
            <div className="flex flex-wrap gap-2 items-center">

              <Input
                value={search}
                onChange={(v: string) => {
                  setPage(1);
                  setSearch(v);
                }}
                placeholder="Cari kategori..."
              />

              <Select3D
                value={limit}
                onChange={(v) => {
                  setPage(1);
                  setLimit(Number(v));
                }}
                options={[
                  { label: "10", value: 10 },
                  { label: "20", value: 20 },
                  { label: "50", value: 50 },
                  { label: "100", value: 100 },
                ]}
              />

              <Link
                href="/categories/tambah"
                className="flex items-center gap-2 px-4 py-2 rounded-xl
                bg-linear-to-r from-green-600 to-emerald-500
                text-white text-sm font-semibold"
              >
                <Plus className="w-4 h-4" />
                Tambah
              </Link>

            </div>
          </div>
        </div>
      </motion.div>

      {/* TABLE */}
      {loading ? (
        <Loading pageName="Categories"/>
      ) : (
        <CategoriesTable isAdmin={isAdmin} data={data} page={page} limit={limit} />
      )}

      {/* PAGINATION */}
      <div className="flex justify-between items-center">
        <button
          disabled={page === 1}
          onClick={() => setPage(page - 1)}
        >
          Prev
        </button>

        <div>
          Page {page} / {totalPage || 1}
        </div>

        <button
          disabled={page >= totalPage}
          onClick={() => setPage(page + 1)}
        >
          Next
        </button>
      </div>
    </div>
  );
}

/* INPUT */
function Input({ value, onChange, placeholder }: any) {
  return (
    <input
      value={value}
      onChange={(e) => onChange(e.target.value)}
      placeholder={placeholder}
      className="px-4 py-2 rounded-xl border border-green-200"
    />
  );
}