"use client";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  Truck,
  Plus,
  Search,
  RefreshCcw,
  Phone,
  Mail,
  MapPin,
  Building2,
  Boxes,
} from "lucide-react";
import { useSession } from "next-auth/react";


export default function SuppliersPage() {
    const router = useRouter();
    const [data, setData] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);
    const [keyword, setKeyword] = useState("");
    const [showForm, setShowForm] = useState(false);

    const { data: session, status } = useSession();
    const currentUser = session?.user as any;
    const fetchData = async () => {
      setLoading(true);
      const res = await fetch("/api/suppliers");
      const json = await res.json();
      setData(json.data || []);
      setLoading(false);
  };
  // useEffect(() => {
  //   fetchData();
  // }, []);
      /* ================= GUARD (FIXED) ================= */
 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;
  }

  // // 3. kalau bukan admin → kick
  // if (currentUser?.role && currentUser.role !== "ADMIN") {
  //   router.replace("/users");
  //   return;
  // }

  // 4. baru fetch data kalau aman
    fetchData();

}, [status, currentUser, router]);

  // optional safety (biar tidak flash UI)
  if (!session) return null;
  const filtered = data.filter((s) =>
    s.name.toLowerCase().includes(keyword.toLowerCase())
  );

  return (
    <div className="min-h-screen p-4 md:p-6 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-300/20 blur-[160px]" />
      <div className="absolute bottom-0 right-0 w-125 h-125 bg-lime-300/20 blur-[160px]" />

      {/* HEADER 3D */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="relative rounded-[45px] overflow-hidden shadow-[0_70px_180px_rgba(0,0,0,0.25)]"
      >
        <div className="absolute inset-0 bg-linear-to-br from-green-700 via-emerald-500 to-lime-400" />
        <div className="absolute inset-0 bg-white/10 backdrop-blur-2xl" />

        <div className="relative p-6 flex justify-between items-center">
          <div>
            <h1 className="text-3xl font-bold text-white">
              🌾 Supplier Management
            </h1>
            <p className="text-white/80 text-sm">
              Vendor & bahan baku system
            </p>
          </div>

          <button
            onClick={() => setShowForm(true)}
            className="px-5 py-3 bg-white text-green-700 rounded-2xl font-semibold shadow-xl flex items-center gap-2 hover:scale-105 transition"
          >
            <Plus className="w-4 h-4" />
            Tambah Supplier
          </button>
        </div>
      </motion.div>

    {/* FILTER 3D UPGRADED */}
    <div className="grid md:grid-cols-2 gap-5 mt-6">

        {/* SEARCH */}
        <div className="relative group">
            {/* depth shadow */}
            <div className="absolute inset-0 translate-y-3 bg-green-300/20 blur-2xl rounded-2xl" />

            <div className="relative flex items-center gap-3 px-4 py-3
            rounded-2xl
            bg-white/70 backdrop-blur-2xl
            border border-white/40
            shadow-[0_20px_50px_rgba(0,0,0,0.12)]
            transition-all duration-300
            group-hover:-translate-y-1 group-hover:scale-[1.01]">

            <Search className="w-4 h-4 text-green-600" />

            <input
                value={keyword}
                onChange={(e) => setKeyword(e.target.value)}
                placeholder="🌿 Cari supplier..."
                className="w-full bg-transparent outline-none text-green-800 placeholder:text-green-400"
            />
            </div>
        </div>

        {/* REFRESH */}
        <div className="relative group cursor-pointer" onClick={fetchData}>

            {/* depth shadow */}
            <div className="absolute inset-0 translate-y-3 bg-lime-300/20 blur-2xl rounded-2xl" />

            <div className="relative flex items-center justify-center gap-2 px-4 py-3
            rounded-2xl
            bg-linear-to-br from-green-600 to-emerald-500
            text-white font-semibold
            shadow-[0_25px_60px_rgba(0,0,0,0.2)]
            transition-all duration-300
            group-hover:-translate-y-1 group-hover:scale-[1.02]
            active:scale-95">

            <RefreshCcw className="w-4 h-4" />
            Refresh Data
            </div>
        </div>

    </div>

      {/* LIST */}
      {/* <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6"> */}
      <div className="grid grid-cols-1 gap-5 mt-6">
        {loading && (
          <div className="text-green-700 animate-pulse">
            🌿 Loading supplier...
          </div>
        )}

        {!loading &&
          filtered.map((s, i) => (
            <motion.div
              key={s.id}
              initial={{ opacity: 0, y: 40, rotateX: 10 }}
              animate={{ opacity: 1, y: 0, rotateX: 0 }}
              transition={{ delay: i * 0.05 }}
            >
              <SupplierCard supplier={s} />
            </motion.div>
          ))}
      </div>

      {/* FORM */}
      <AnimatePresence>
        {showForm && (
          <SupplierForm
            onClose={() => setShowForm(false)}
            reload={fetchData}
          />
        )}
      </AnimatePresence>
    </div>
  );
}

/* ================= 3D SUPPLIER CARD ================= */
function SupplierCard({ supplier }: any) {
    const router = useRouter();
  return (
    <div className="relative group">

      {/* shadow depth layer */}
      <div className="absolute inset-0 translate-y-5 scale-[0.98] bg-green-400/20 blur-2xl rounded-[28px]" />

      {/* main card */}
      <div className="relative flex flex-col md:flex-row md:items-center justify-between gap-6
        rounded-[28px] p-5
        bg-white/70 backdrop-blur-2xl
        border border-white/40
        shadow-[0_25px_60px_rgba(0,0,0,0.15)]
        transition-all duration-300
        group-hover:-translate-y-1 group-hover:scale-[1.01]">

        {/* LEFT SECTION */}
        <div className="flex items-start gap-4 flex-1">

          {/* ICON */}
          <div className="w-12 h-12 rounded-2xl bg-green-100 flex items-center justify-center shadow-inner">
            <Truck className="w-5 h-5 text-green-600" />
          </div>

          {/* MAIN INFO */}
          <div className="flex-1">

            {/* NAME + CODE */}
            <div className="flex items-center justify-between">
              <h3 className="font-bold text-green-900 text-lg">
                {supplier.name}
              </h3>

              <span className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full">
                {supplier.code}
              </span>
            </div>

            {/* ITEMS */}
            <div className="mt-1 flex items-center gap-2 text-green-700 font-semibold">
              <Boxes className="w-4 h-4" />
              {supplier.total_items || 0} Items
            </div>

            {/* DETAILS ROW */}
            <div className="mt-3 grid grid-cols-2 gap-y-1 text-sm text-gray-600">

              {supplier.contact_person && (
                <div className="flex items-center gap-2">
                  <Building2 className="w-4 h-4 text-green-600" />
                  {supplier.contact_person}
                </div>
              )}

              {supplier.phone && (
                <div className="flex items-center gap-2">
                  <Phone className="w-4 h-4 text-green-600" />
                  {supplier.phone}
                </div>
              )}

              {supplier.email && (
                <div className="flex items-center gap-2">
                  <Mail className="w-4 h-4 text-green-600" />
                  {supplier.email}
                </div>
              )}

              {supplier.address && (
                <div className="flex items-center gap-2 col-span-2">
                  <MapPin className="w-4 h-4 text-green-600" />
                  {supplier.address}
                </div>
              )}
            </div>
          </div>
        </div>

        {/* RIGHT SECTION (ACTION) */}
        <div className="flex flex-row md:flex-col gap-2 md:items-end">
            {/* DETAILS BUTTON */}
            <button
                onClick={() => router.push(`/suppliers/${supplier.id}`)}
                className="px-4 py-2 rounded-xl bg-green-600 text-white text-sm shadow-lg hover:bg-green-700 transition
                active:scale-95"
            >
                Details
            </button>

            {/* ITEMS BUTTON */}
            {/* <button
                onClick={() => router.push(`/suppliers/${supplier.id}/items`)}
                className="px-4 py-2 rounded-xl bg-white border text-green-700 text-sm hover:bg-green-50 transition
                active:scale-95"
            >
                Items
            </button> */}

        </div>
      </div>
    </div>
  );
}

/* ================= GLASS ================= */
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 bg-white/70 backdrop-blur-xl rounded-2xl border shadow-xl">
        {children}
      </div>
    </div>
  );
}

/* ================= FORM (UNCHANGED) ================= */
function SupplierForm({ onClose, reload }: any) {
  const [form, setForm] = useState({
    name: "",
    contact_person: "",
    phone: "",
    email: "",
    address: "",
    city: "",
  });

  const save = async () => {
    await fetch("/api/suppliers", {
      method: "POST",
      body: JSON.stringify(form),
    });

    reload();
    onClose();
  };

  return (
    <motion.div
      className="fixed inset-0 bg-black/40 backdrop-blur-md flex items-center justify-center p-4 z-50"
      initial={{ opacity: 0, scale: 1.05 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0 }}
    >
      {/* BACKGROUND GLOW DEPTH */}
      <div className="absolute w-125 h-125 bg-green-400/20 blur-[140px] rounded-full -top-20 -left-20" />
      <div className="absolute w-125 h-125 bg-lime-400/20 blur-[140px] rounded-full bottom-0 right-0" />

      {/* CARD 3D */}
      <motion.div
        initial={{ y: 40, rotateX: 10, opacity: 0 }}
        animate={{ y: 0, rotateX: 0, opacity: 1 }}
        transition={{ duration: 0.4 }}
        className="relative w-full max-w-xl"
      >
        {/* SHADOW LAYER (DEPTH) */}
        <div className="absolute inset-0 translate-y-6 scale-[0.98] bg-green-500/20 blur-2xl rounded-4xl" />

        {/* MAIN CARD */}
        <div className="relative bg-white/70 backdrop-blur-2xl border border-white/40 rounded-4xl p-6 shadow-[0_40px_100px_rgba(0,0,0,0.25)]">

          {/* HEADER */}
          <h2 className="text-xl font-bold text-green-800 mb-4 flex items-center gap-2">
            🌾 Tambah Supplier
          </h2>

          {/* FORM */}
          <div className="space-y-3">
            {["name", "contact_person", "phone", "email", "address", "city"].map(
              (key) => (
                <div key={key} className="relative group">

                  {/* INPUT SHADOW DEPTH */}
                  <div className="absolute inset-0 translate-y-2 bg-green-300/20 blur-xl rounded-xl" />

                  <input
                    placeholder={key}
                    value={(form as any)[key]}
                    onChange={(e) =>
                      setForm({ ...form, [key]: e.target.value })
                    }
                    className="relative w-full p-3 rounded-xl border border-white/40 bg-white/60 backdrop-blur-xl
                    shadow-inner focus:shadow-[0_0_0_2px_rgba(34,197,94,0.3)] 
                    outline-none transition-all"
                  />
                </div>
              )
            )}
          </div>

          {/* ACTION BUTTONS */}
          <div className="flex justify-end gap-3 mt-6">

            <button
              onClick={onClose}
              className="px-4 py-2 rounded-xl bg-gray-100 text-gray-700 hover:bg-gray-200 transition shadow-md active:scale-95"
            >
              Batal
            </button>

            <button
              onClick={save}
              className="px-5 py-2 rounded-xl bg-linear-to-br from-green-600 to-emerald-500 text-white font-semibold
              shadow-[0_20px_50px_rgba(0,0,0,0.25)] hover:scale-[1.03] transition active:scale-95"
            >
              Simpan
            </button>

          </div>

        </div>
      </motion.div>
    </motion.div>
  );
}