"use client";

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

import {
  ArrowDownToLine,
  ArrowUpFromLine,
  RefreshCcw,
  ArrowRightLeft,
  Scale,
  Package,
} from "lucide-react";

export default function StockMovementsPage() {

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

  const [data, setData] = useState<any[]>([]);
  const [locations, setLocations] = useState<any[]>([]);
  const [locationId, setLocationId] = useState("");
  const [date, setDate] = useState("");

  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(20);
  const [totalPages, setTotalPages] = useState(1);

  const [loading, setLoading] = useState(true);

  const movementMeta: any = {
    IN: {
      label: "Stock In",
      icon: ArrowDownToLine,
      color: "from-green-500 to-emerald-400",
      desc: "Barang masuk ke gudang",
    },
    OUT: {
      label: "Stock Out",
      icon: ArrowUpFromLine,
      color: "from-red-500 to-rose-400",
      desc: "Barang keluar dari gudang",
    },
    TRANSFER_IN: {
      label: "Transfer In",
      icon: ArrowRightLeft,
      color: "from-blue-500 to-cyan-400",
      desc: "Barang pindah masuk",
    },
    TRANSFER_OUT: {
      label: "Transfer Out",
      icon: ArrowRightLeft,
      color: "from-orange-500 to-amber-400",
      desc: "Barang pindah keluar",
    },
    ADJUSTMENT: {
      label: "Adjustment",
      icon: Scale,
      color: "from-purple-500 to-violet-400",
      desc: "Penyesuaian stok",
    },
  };

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

    const query = new URLSearchParams();
    if (locationId) query.append("location_id", locationId);
    if (date) query.append("date", date);

    query.append("page", String(page));
    query.append("limit", String(limit));

    const res = await fetch(`/api/gudang/stock-movements?${query.toString()}`, {
      cache: "no-store",
    });

    const json = await res.json();

    setData(json.data || []);
    setTotalPages(json.pagination?.totalPages || 1);

    setLoading(false);
  };

  useEffect(() => {
    const load = async () => {
      const res = await fetch("/api/gudang");
      const json = await res.json();
      setLocations(json.locations || json.data || []);
    };

    load();
  }, []);

  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;
    }

    fetchData();
  }, [locationId, date, page, limit, status]);

   if (!data) {
    return (
      <Loading pageName="Stock Movement"/>
    );
  }
    // optional safety (biar tidak flash UI)
  if (!session) return null;

  const formatNumber = (num: number) =>
    new Intl.NumberFormat("id-ID").format(num);

  return (
    <div className="p-4 md:p-6 space-y-6 min-h-screen relative overflow-hidden
    bg-linear-to-b from-green-50 via-emerald-50 to-lime-50">

      {/* BACKGROUND GLOW */}
      <div className="absolute -top-40 -left-40 w-125 h-125 bg-green-400/20 blur-[160px]" />
      <div className="absolute bottom-0 right-0 w-125 h-125 bg-lime-300/20 blur-[160px]" />

      {/* HEADER */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="relative rounded-[40px] overflow-hidden
        shadow-[0_50px_140px_rgba(0,0,0,0.25)]"
      >
        <div className="absolute inset-0 bg-linear-to-br from-green-600 via-emerald-500 to-lime-400" />
        <div className="absolute inset-0 opacity-10 bg-[url('https://www.transparenttextures.com/patterns/leaf.png')]" />
        <div className="absolute inset-0 bg-white/20 backdrop-blur-2xl" />

        <div className="relative p-6">
          <h1 className="text-2xl md:text-3xl font-bold text-white drop-shadow">
            🌾 Aktifitas Gudang
          </h1>
          <p className="text-sm text-white/80">
            Tracking stok real-time & audit history
          </p>
        </div>
      </motion.div>

      {/* FILTER */}
      <div className="grid md:grid-cols-3 gap-4">
        <GlassCard>
          <label className="text-xs text-green-800/70">Gudang</label>
          <div className="mt-2">
            <Select3D
              value={locationId}
              onChange={setLocationId}
              placeholder="Semua Gudang"
              fullWidth
              options={[
                { label: "Semua Gudang", value: "" },
                ...locations.map((l: any) => ({
                  label: `${l.name} (${l.code})`,
                  value: l.id,
                })),
              ]}
            />
          </div>
        </GlassCard>

        <GlassCard>
          <label className="text-xs text-green-800/70">Tanggal</label>
          <input
            type="date"
            value={date}
            onChange={(e) => setDate(e.target.value)}
            className="w-full mt-2 px-4 py-2 rounded-xl border
            bg-white/70 backdrop-blur shadow-inner"
          />
        </GlassCard>

        <GlassCard>
          <label className="text-xs text-green-800/70">Limit Data</label>
      <Select3D
          value={limit}
          onChange={(val) => setLimit(Number(val))}
          placeholder="10 / halaman"
          fullWidth
          options={[
            { label: "10", value: 10 },
            { label: "20", value: 20 },
            { label: "50", value: 50 },
            { label: "100", value: 100 },
          ]}
        />
        </GlassCard>
      </div>

      {/* LIST */}
      <div className="space-y-5">
        {loading && (
            <Loading pageName="Stock Movement"/>
        )}

        {!loading && data.length === 0 && (
          <div className="text-center text-gray-500 py-10">
            🌿 Tidak ada aktivitas
          </div>
        )}

        {data.map((row, i) => (
          <motion.div
            key={row.id}
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: i * 0.03 }}
          >
            <ActivityCard
              row={row}
              formatNumber={formatNumber}
              movementMeta={movementMeta}
            />
          </motion.div>
        ))}
      </div>

      {/* PAGINATION */}
      <div className="flex justify-center items-center gap-3 pt-6">
        <button
          disabled={page <= 1}
          onClick={() => setPage(page - 1)}
          className="px-4 py-2 rounded-xl bg-white shadow disabled:opacity-40"
        >
          Prev
        </button>

        <div className="text-sm text-gray-600">
          Page {page} / {totalPages}
        </div>

        <button
          disabled={page >= totalPages}
          onClick={() => setPage(page + 1)}
          className="px-4 py-2 rounded-xl bg-white shadow disabled:opacity-40"
        >
          Next
        </button>
      </div>
    </div>
  );
}

/* ================= GLASS CARD ================= */
function GlassCard({ children }: any) {
  return (
    <div className="relative rounded-2xl p-px
    bg-linear-to-br from-green-200/60 to-transparent">

      <div className="absolute inset-0 translate-y-3
      bg-green-300/20 blur-2xl rounded-2xl" />

      <div className="relative p-4 rounded-2xl
      bg-white/70 backdrop-blur-2xl
      border border-white/40 shadow-xl">
        {children}
      </div>
    </div>
  );
}

/* ================= CARD UPGRADED ================= */
function ActivityCard({ row, formatNumber, movementMeta }: any) {
  const meta = movementMeta[row.movement_type] || {
    label: row.movement_type,
    icon: Package,
    color: "from-gray-400 to-gray-500",
    desc: "",
  };

  const Icon = meta.icon;

  return (
    <div className="relative rounded-[28px] p-px
    bg-linear-to-br from-green-200/60 to-transparent">

      <div className="absolute inset-0 translate-y-4
      bg-green-300/20 blur-2xl rounded-[28px]" />

      <div className="relative p-5 rounded-[28px]
      bg-white/75 backdrop-blur-2xl
      border border-white/40 shadow-xl">

        <div className="flex justify-between items-start">

          <div>
            <div className="font-semibold text-green-900 flex items-center gap-2">
              🌾 {row.item_name}
            </div>

            <div className="text-xs text-gray-500">
              <span className="font-bold">SKU</span>: {row.sku}
            </div>

            <div className="text-xs text-gray-500">
              🏬 <span className="font-bold">Location</span>: {row.location_name}
            </div>
          </div>

          {/* BADGE UPGRADED */}
          <div className={`flex items-center gap-2 px-3 py-1 text-xs text-white rounded-full
          bg-gradient-to-r ${meta.color} shadow-md`}>
            <Icon className="w-3.5 h-3.5" />
            {meta.label}
          </div>
        </div>

        <div className="mt-4 flex justify-between">
          <div className="font-semibold text-green-800">
            Qty: {formatNumber(row.quantity)}
          </div>

          <div className="text-xs text-gray-400">
            Created: {new Date(row.created_at).toLocaleString("id-ID")}
          </div>
        </div>

        {row.user_name && (
          <div className="text-xs text-gray-500 mt-2">
            👤 {row.user_name}
          </div>
        )}

        {row.notes && (
          <div className="text-xs italic text-gray-600 mt-2">
            Note: {row.notes}
          </div>
        )}
      </div>
    </div>
  );
}