"use client";

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

/* ================= TYPES ================= */
type Item = {
  id: number;
  sku: string;
  name: string;
  category: string;
  unit: string;
  is_active: boolean;
  total_stock: number;
  locations: { location: string; qty: number }[];
  barcode: string;
};

export default function BarangPage() {
  const [data, setData] = useState<Item[]>([]);
  const [categories, setCategories] = useState<string[]>([]);
  const [summary, setSummary] = useState<any>({});
  const [loading, setLoading] = useState(true);

  const [search, setSearch] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("");
  const [statuses, setStatus] = useState("active");
  const [selectedLocation, setSelectedLocation] = useState("");

  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(10);

  const { data: session, status } = useSession();
  const router = useRouter();
  const currentUser = session?.user as any;
  
  /* ================= FETCH ================= */
  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)) {
      router.replace("/");
      return;
    }

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

        const res = await fetch("/api/barang");
        const json = await res.json();

        setData(json.items || []);
        setCategories(json.categories || []);
        setSummary(json.summary || {});
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [status]);

    if (!session) return null;
  /* ================= LOCATIONS ================= */
  const locations = useMemo(() => {
    const set = new Set<string>();
    data.forEach((i) => i.locations.forEach((l) => set.add(l.location)));
    return Array.from(set);
  }, [data]);

  /* ================= FILTER ================= */
  const filtered = useMemo(() => {
    return data.filter((item) => {
      const matchSearch =
        item.name.toLowerCase().includes(search.toLowerCase()) ||
        item.sku.toLowerCase().includes(search.toLowerCase());

      const matchCategory =
        !selectedCategory || item.category === selectedCategory;

      const matchStatus =
        statuses === "all" ||
        (statuses === "active" && item.is_active) ||
        (statuses === "inactive" && !item.is_active);

      const matchLocation =
        !selectedLocation ||
        item.locations.some((l) => l.location === selectedLocation);

      return matchSearch && matchCategory && matchStatus && matchLocation;
    });
  }, [data, search, selectedCategory, statuses, selectedLocation]);

  /* ================= PAGINATION ================= */
  const totalPage = Math.max(1, Math.ceil(filtered.length / limit));
  const paginated = filtered.slice((page - 1) * limit, page * limit);

  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 -top-20 -left-10 w-72 h-72 bg-green-400/30 blur-[120px]" />
        <div className="absolute bottom-0 right-0 w-72 h-72 bg-lime-300/30 blur-[140px]" />
        <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 className="space-y-1">
              <h1 className="text-3xl font-bold text-green-900 tracking-tight">
                🌾 Inventory Barang
              </h1>
              <p className="text-sm text-green-800/70">
                Total: <b>{new Intl.NumberFormat("id-ID").format(summary.total_items || 0)}</b> •
                Aktif: <b>{new Intl.NumberFormat("id-ID").format(summary.active_items || 0)}</b> •
                Stok: <b>{new Intl.NumberFormat("id-ID").format(summary.total_stock || 0)}</b>
              </p>
            </div>

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

              <Input value={search} onChange={setSearch} placeholder="Cari barang..." />

              {/* CATEGORY */}
              <Select3D
                value={selectedCategory}
                onChange={setSelectedCategory}
                placeholder="Kategori"
                options={[
                  { label: "Semua Kategori", value: "" },
                  ...categories.map((c) => ({ label: c, value: c })),
                ]}
              />

              {/* LOCATION */}
              <Select3D
                value={selectedLocation}
                onChange={setSelectedLocation}
                placeholder="Gudang"
                options={[
                  { label: "Semua Gudang", value: "" },
                  ...locations.map((l) => ({ label: l, value: l })),
                ]}
              />

              {/* STATUS */}
              <Select3D
                value={statuses}
                onChange={setStatus}
                options={[
                  { label: "Semua", value: "all" },
                  { label: "Aktif", value: "active" },
                  { label: "Nonaktif", value: "inactive" },
                ]}
              />

              {/* LIMIT */}
              <Select3D
                value={limit}
                onChange={(v) => setLimit(Number(v))}
                options={[10, 20, 50].map((n) => ({
                  label: `${n}`,
                  value: n,
                }))}
              />

              {/* BUTTON */}
              <Link
                href="/barang/tambah"
                className="flex items-center gap-2 px-4 py-2 rounded-xl
                bg-linear-to-r from-green-600 via-emerald-500 to-lime-500
                text-white text-sm font-semibold
                shadow-[0_10px_30px_rgba(34,197,94,0.35)]
                hover:scale-105 active:scale-95 transition"
              >
                <Plus className="w-4 h-4" />
                Tambah
              </Link>

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

      {/* ================= TABLE ================= */}
      {loading ? (
        <div className="p-6 text-green-700 animate-pulse">
          🌱 Loading data barang...
        </div>
      ) : (
        <BarangTable
          data={paginated}
          page={page}
          limit={limit}
          selectedLocation={selectedLocation}
        />
      )}

      {/* ================= PAGINATION ================= */}
      <div className="flex justify-between items-center">

        <button
          disabled={page === 1}
          onClick={() => setPage((p) => p - 1)}
          className="px-4 py-2 rounded-xl
          bg-white/80 backdrop-blur-xl
          shadow-[0_10px_25px_rgba(0,0,0,0.15)]
          border border-green-100
          hover:scale-105 active:scale-95 transition
          disabled:opacity-40"
        >
          ← Previous
        </button>

        <div className="text-sm text-green-900 font-medium">
          Page <b>{page}</b> / {totalPage}
        </div>

        <button
          disabled={page >= totalPage}
          onClick={() => setPage((p) => p + 1)}
          className="px-4 py-2 rounded-xl
          bg-white/80 backdrop-blur-xl
          shadow-[0_10px_25px_rgba(0,0,0,0.15)]
          border border-green-100
          hover:scale-105 active:scale-95 transition
          disabled:opacity-40"
        >
          Next →
        </button>

      </div>
    </div>
  );
}

/* ================= INPUT ================= */
function Input({ value, onChange, placeholder }: any) {
  return (
    <div className="relative">
      <div className="absolute inset-0 bg-green-300/20 blur-xl rounded-xl" />

      <input
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        className="relative px-3 py-2 rounded-xl
        bg-white/70 backdrop-blur-xl
        border border-green-200
        shadow-inner shadow-green-100
        text-sm focus:outline-none focus:ring-2 focus:ring-green-400"
      />
    </div>
  );
}