"use client";

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

type StockOpname = {
  id: number;
  opname_number: string;
  warehouse_name: string;
  bin_name?: string;

  status:
    | "DRAFT"
    | "COUNTING"
    | "REVIEW"
    | "CHECKED"
    | "APPROVED"
    | "POSTED"
    | "CANCELLED";

  total_items: number;
  variance_items: number;

  created_at: string;
  counted_at?: string;
  approved_at?: string;
  posted_at?: string;

  created_by?: string;
  checked_by?: string;
  approved_by?: string;

  total_bins?: number;
  total_racks?: number;
};

export default function StockOpnamePage() {

  const { data: session, status } = useSession();
  const router = useRouter();
  const currentUser = session?.user as any;
  const [loading, setLoading] = useState(true);
  const [keyword, setKeyword] = useState("");
  const [statuses, setStatus] = useState("ALL");
  const [data, setData] = useState<StockOpname[]>([]);

  async function loadData() {
    try {
      setLoading(true);

      const res = await fetch("/api/stock-opname", {
        cache: "no-store",
      });

      const json = await res.json();
      // console.log("Datanya: ", json);
      setData(json.data || []);
    } finally {
      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", "OPERATOR", "SUPERVISOR", "CHECKER"];

    if (!allowedRoles.includes(currentUser?.role)) {
      router.replace("/");
      return;
    }
    loadData();
  }, [status]);


  const filtered = useMemo(() => {
    return data.filter((r) => {
      const q = keyword.toLowerCase();

      const matchQ =
        r.opname_number?.toLowerCase().includes(q) ||
        r.warehouse_name?.toLowerCase().includes(q) ||
        r.bin_name?.toLowerCase().includes(q) ||
        r.created_by?.toLowerCase().includes(q) ||
        r.checked_by?.toLowerCase().includes(q) ||
        r.approved_by?.toLowerCase().includes(q);

      const matchS = statuses === "ALL" || r.status === statuses;

      return matchQ && matchS;
    });
  }, [data, keyword, statuses]);

  const stats = useMemo(
    () => ({
      total: data.length,
      draft: data.filter((x) => x.status === "DRAFT").length,
      counting: data.filter((x) => x.status === "COUNTING").length,
       review: data.filter((x) => x.status === "REVIEW").length, // ✅ tambah ini
      approved: data.filter((x) => x.status === "APPROVED").length,
    }),
    [data]
  );

  return (
    <div className="min-h-screen relative overflow-hidden bg-linear-to-br from-emerald-50 via-lime-50 to-sky-50 p-4 md:p-5 space-y-6">
      <div className="absolute -top-40 -left-40 w-125 h-125 bg-emerald-300/30 blur-3xl rounded-full animate-pulse" />
      <div className="absolute top-40 -right-30 w-150 h-150 bg-lime-300/20 blur-3xl rounded-full" />

      {/* HERO */}
      <motion.div
        initial={{ opacity: 0, y: 40, scale: 0.97 }}
        animate={{ opacity: 1, y: 0, scale: 1 }}
        className="relative rounded-4xl md:rounded-[48px] overflow-hidden shadow-[0_40px_120px_rgba(0,0,0,0.2)] border border-white/40"
      >
        <div className="absolute inset-0 bg-linear-to-br from-emerald-400 via-lime-300 to-sky-300" />
        <div className="absolute inset-0 backdrop-blur-[40px] bg-white/30" />

        <div className="relative p-5 md:p-12">
          <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-6">
            
            {/* LEFT */}
            <div>
            <div className="group relative inline-flex items-center gap-3 overflow-hidden rounded-full border border-white/70 bg-linear-to-r from-white/85 via-emerald-50/90 to-lime-50/80 px-4 py-2 shadow-[0_12px_28px_rgba(16,185,129,0.12)] backdrop-blur-xl transition-all duration-300 hover:-translate-y-0.5 hover:shadow-[0_18px_38px_rgba(16,185,129,0.18)]">
              <span className="absolute inset-0 bg-linear-to-tr from-white/40 via-transparent to-lime-100/30" />
              <span className="absolute top-0 left-3 right-3 h-px bg-white/90" />

              <span className="relative z-10 flex h-8 w-8 items-center justify-center rounded-full bg-linear-to-br from-emerald-500 to-lime-500 text-white shadow-md">
                <Leaf size={15} />
              </span>

              <span className="relative z-10 text-sm font-semibold tracking-wide text-emerald-900">
                DSR Inventory
              </span>

              <span className="relative z-10 h-2 w-2 rounded-full bg-lime-400 shadow-[0_0_10px_rgba(163,230,53,0.8)]" />
            </div>

              {/* <h1 className="text-3xl md:text-5xl font-black text-green-950 mt-4 md:mt-5 drop-shadow-[0_20px_40px_rgba(0,0,0,0.25)]">
                Stock Opname Gudang
              </h1> */}
              <h1 className="relative mt-4 md:mt-5 text-3xl md:text-5xl font-black tracking-tight leading-tight">
                <span className="absolute inset-0 translate-y-1 md:translate-y-2 scale-[1.01] text-lime-900/10 blur-sm select-none">
                  Stock Opname Gudang
                </span>

                <span className="relative bg-linear-to-br from-green-950 via-emerald-800 to-lime-600 bg-clip-text text-transparent drop-shadow-[0_18px_35px_rgba(16,185,129,0.18)]">
                  Stock Opname Gudang
                </span>

                <span className="absolute -top-2 right-0 md:right-6 h-3 w-3 rounded-full bg-lime-400/70 blur-[1px]" />
                <span className="absolute top-2 -left-2 h-2.5 w-2.5 rounded-full bg-emerald-400/60 blur-[1px]" />
              </h1>

              <p className="text-green-900/70 mt-2 text-sm md:text-base">
                Sistem pencatatan dan perhitungan stok di gudang DSR
              </p>
            </div>

            {/* RIGHT BUTTONS */}
            <div className="flex flex-col sm:flex-row gap-3 w-full md:w-auto">
            <button
                onClick={loadData}
                className="group relative px-4 py-3 rounded-2xl border border-white/70 bg-linear-to-br from-white via-emerald-50 to-lime-50 shadow-[0_14px_28px_rgba(16,185,129,0.12)] hover:-translate-y-1 hover:shadow-[0_20px_40px_rgba(16,185,129,0.18)] active:translate-y-0 transition-all duration-300 flex items-center justify-center backdrop-blur-xl overflow-hidden"
              >
                <span className="absolute inset-0 bg-linear-to-tr from-white/40 via-transparent to-emerald-100/30" />
                <span className="absolute top-0 left-0 right-0 h-px bg-white/90" />
                
                <RefreshCcw
                  size={18}
                  className="relative z-10 text-emerald-700 group-hover:rotate-180 transition-transform duration-500"
                />
            </button>

            <Link
                href={currentUser?.role === "CHECKER" ? "#" : "/stock-opname/create"}
                onClick={(e) => {
                  if (currentUser?.role === "CHECKER") {
                    e.preventDefault();
                  }
                }}
                className={`px-5 py-3 rounded-2xl font-bold text-center transition
                  ${
                    currentUser?.role === "CHECKER"
                      ? "bg-slate-300 text-slate-500 cursor-not-allowed pointer-events-none"
                      : "bg-linear-to-r from-emerald-600 to-lime-500 text-white hover:-translate-y-1 shadow-2xl"
                  }
                `}
              >
                <Plus className="inline mr-2" />
                Tambah Opname
              </Link>
            </div>
          </div>
        </div>
      </motion.div>

      {/* STAT */}
      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 md:gap-6">
        <StatCard title="Total Opname" value={stats.total} icon={<ClipboardCheck />} />
        <StatCard title="Draft" value={stats.draft} icon={<Clock3 />} />
        <StatCard title="Proses Hitung" value={stats.counting} icon={<RefreshCcw />} />
        <StatCard title="Review" value={stats.review} icon={<ClipboardCheck />} />
        <StatCard title="Disetujui" value={stats.approved} icon={<CheckCircle2 />} />
      </div>

      {/* FILTER */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-5 bg-white/40 backdrop-blur-3xl p-4 md:p-6 rounded-3xl md:rounded-4xl border border-white/40 shadow-[0_40px_120px_rgba(0,0,0,0.15)]">
        {/* <input
          value={keyword}
          onChange={(e) => setKeyword(e.target.value)}
          placeholder="Cari nomor opname / gudang / user..."
          className="h-12 rounded-2xl border px-4 bg-white/70 shadow-inner focus:outline-none focus:ring-2 focus:ring-emerald-300"
        /> */}
        <div className="relative group w-full">
  <div className="absolute inset-0 rounded-2xl bg-linear-to-r from-emerald-300/20 via-lime-200/20 to-green-300/20 blur-xl group-focus-within:blur-2xl transition-all duration-300" />

  <div className="relative overflow-hidden rounded-2xl border border-white/70 bg-white/80 shadow-[0_12px_30px_rgba(16,185,129,0.10)] backdrop-blur-xl">
    <div className="absolute inset-y-0 left-0 w-14 bg-linear-to-b from-emerald-100/70 to-lime-100/40 border-r border-emerald-100 flex items-center justify-center">
      <span className="text-lg">🔍</span>
    </div>

    <input
      value={keyword}
      onChange={(e) => setKeyword(e.target.value)}
      placeholder="Cari nomor opname / gudang / user..."
      className="h-12 w-full pl-14 pr-4 rounded-2xl bg-transparent text-sm md:text-base text-emerald-950 placeholder:text-emerald-700/45 focus:outline-none focus:ring-2 focus:ring-emerald-300/70 transition-all"
    />

    <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-white/80" />
  </div>
</div>

        <Select3D
          fullWidth
          value={statuses}
          onChange={setStatus}
          options={[
            { value: "ALL", label: "Semua Status" },
            { value: "DRAFT", label: "Draft" },
            { value: "COUNTING", label: "Proses Hitung" },
            { value: "REVIEW", label: "Review" }, // ✅ tambah ini
            { value: "CHECKED", label: "Diperiksa" },
            { value: "APPROVED", label: "Disetujui" },
            { value: "POSTED", label: "Diposting" },
            { value: "CANCELLED", label: "Dibatalkan" },
          ]}
        />
      </div>

      {/* TABLE */}
      <StockOpnameTable
        loading={loading}
        data={filtered}
        // onEdit={(row: any) => router.push(`/stock-opname/${row.id}/edit`)}
        onEdit={(row: any) => router.push(`/stock-opname/${row.id}`)}
        onView={(row: any) => router.push(`/stock-opname/${row.id}/review`)}
        // onManageItems={(row: any) => router.push(`/stock-opname/${row.id}/items`)}
        onManageItems={(row: any) => router.push(`/stock-opname/${row.id}/comparison`)}
      />
    </div>
  );
}

function StatCard({ title, value, icon }: any) {
  return (
    <div className="relative p-5 md:p-6 rounded-3xl md:rounded-4xl bg-white/50 border border-white/40 shadow-[0_30px_90px_rgba(0,0,0,0.18)] backdrop-blur-2xl hover:-translate-y-2 md:hover:-translate-y-3 hover:shadow-[0_50px_140px_rgba(0,0,0,0.25)] transition">
      <div className="absolute inset-0 bg-linear-to-br from-white/40 to-emerald-100/30 rounded-3xl md:rounded-4xl" />

      <div className="relative flex justify-between items-center">
        <div>
          <p className="text-xs md:text-sm text-slate-500">{title}</p>
          <h3 className="text-2xl md:text-3xl font-black text-green-900 drop-shadow">
            {value}
          </h3>
        </div>

        <div className="text-emerald-600">{icon}</div>
      </div>
    </div>
  );
}