"use client";

import { useMemo, useState, useEffect } from "react";
import { motion } from "framer-motion";
import dataJson from "../data/mutations.json";
import { MutasiTable } from "./Mutasitable";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import Loading from "../components/Loading";
/* ================= TYPES ================= */
type MovementType =
  | "IN"
  | "OUT"
  | "TRANSFER_IN"
  | "TRANSFER_OUT"
  | "ADJUSTMENT";

type Movement = {
  id: number;
  item_name: string;
  sku: string;
  location: string;
  movement_type: MovementType;
  quantity: number;
  reference_type: string;
  reference_id: number;
  created_by: string;
  created_at: string;
};

export default function MutasiPage() {
//   const [data] = useState<Movement[]>(dataJson.movements);
    const [data] = useState<Movement[]>(
    (dataJson as { movements: Movement[] }).movements
    );

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

  const [search, setSearch] = useState<string>("");
  const [type, setType] = useState<MovementType | "">("");

  const [page, setPage] = useState<number>(1);
  const [limit] = useState<number>(10);

  /* ================= RESET PAGE ================= */
  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;
    }

    setPage(1);
  }, [search, type, status]);

  /* ================= FILTER ================= */
  const filtered = useMemo(() => {
    const keyword = search.toLowerCase();

    return data.filter((m) => {
      const matchSearch =
        m.item_name.toLowerCase().includes(keyword) ||
        m.sku.toLowerCase().includes(keyword);

      const matchType = !type || m.movement_type === type;

      return matchSearch && matchType;
    });
  }, [data, search, type]);

  const totalPage = Math.max(1, Math.ceil(filtered.length / limit));

  const paginated = useMemo(() => {
    const start = (page - 1) * limit;
    return filtered.slice(start, start + limit);
  }, [filtered, page, limit]);

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

      {/* ================= HEADER ================= */}
      <motion.div
        initial={{ opacity: 0, y: 15 }}
        animate={{ opacity: 1, y: 0 }}
        className="relative rounded-4xl overflow-hidden"
      >
        {/* BG */}
        <div className="absolute inset-0 bg-gradient-to-br from-green-200 via-emerald-100 to-lime-100" />
        <div className="absolute inset-0 bg-white/40 backdrop-blur-3xl" />

        <div className="relative z-10 p-6 border border-white/40 bg-white/60 backdrop-blur-2xl rounded-4xl shadow-xl">

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

            {/* LEFT */}
            <div>
              <h1 className="text-2xl font-bold text-green-900">
                🔄 Mutasi Stock
              </h1>
              <p className="text-sm text-gray-600">
                Total Data: <b>{filtered.length}</b>
              </p>
            </div>

            {/* RIGHT FILTER */}
            <div className="flex flex-col sm:flex-row gap-3 items-end sm:items-center">

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

              <Select value={type} onChange={setType}>
                <option value="">Semua Tipe</option>
                <option value="IN">IN</option>
                <option value="OUT">OUT</option>
                <option value="TRANSFER_IN">TRANSFER IN</option>
                <option value="TRANSFER_OUT">TRANSFER OUT</option>
                <option value="ADJUSTMENT">ADJUSTMENT</option>
              </Select>

            </div>

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

      {/* ================= TABLE ================= */}
      <MutasiTable data={paginated} page={page} limit={limit} />

      {/* ================= 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 shadow-md hover:shadow-lg disabled:opacity-50"
        >
          ← Previous
        </button>

        <span className="text-sm text-gray-600">
          Page {page} / {totalPage}
        </span>

        <button
          disabled={page >= totalPage}
          onClick={() => setPage((p) => p + 1)}
          className="px-4 py-2 rounded-xl bg-white shadow-md hover:shadow-lg disabled:opacity-50"
        >
          Next →
        </button>
      </div>

    </div>
  );
}

/* ================= INPUT ================= */
type InputProps = {
  value: string;
  onChange: (val: string) => void;
  placeholder?: string;
};

function Input({ value, onChange, placeholder }: InputProps) {
  return (
    <input
      value={value}
      onChange={(e) => onChange(e.target.value)}
      placeholder={placeholder}
      className="w-56 px-3 py-2 rounded-xl border border-green-200 text-sm
      focus:outline-none focus:ring-2 focus:ring-green-400 bg-white/80"
    />
  );
}

/* ================= SELECT ================= */
type SelectProps = {
  value: string;
  onChange: (val: any) => void;
  children: React.ReactNode;
};

function Select({ value, onChange, children }: SelectProps) {
  return (
    <select
      value={value}
      onChange={(e) => onChange(e.target.value)}
      className="px-3 py-2 rounded-xl border border-green-200 text-sm
      focus:outline-none focus:ring-2 focus:ring-green-400 bg-white/80"
    >
      {children}
    </select>
  );
}