"use client";

import { useEffect, useMemo, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { motion } from "framer-motion";
import {
  ArrowLeft,
  Warehouse,
  Boxes,
  Layers3,
  ClipboardCheck,
  AlertTriangle,
  Calendar,
  User,
  MapPin,
  PackageCheck,
  Clock3,
  ShieldCheck,
  Plus,
  Package,
} from "lucide-react";
import { formatNumber } from "@/app/components/formatNumber";
// import { formatWIB } from "@/app/lib/formatWIB";

export default function StockOpnameDetailPage() {
  const { id } = useParams();
  const router = useRouter();
  const [submitting, setSubmitting] = useState(false);
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState(true);

  function formatWIB(date?: string | Date | null) {
  if (!date) return "-";

  return new Date(date).toLocaleString("id-ID", {
    timeZone: "Asia/Jakarta",
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
  });
};
  const [showUserModal, setShowUserModal] = useState(false);
  // const [users, setUsers] = useState<any[]>([]);
  const [users, setUsers] = useState<any[]>([]);
  const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
  const [filteredUsers, setFilteredUsers] = useState<any[]>([]);
  const [activeBinId, setActiveBinId] = useState<string | null>(null);

  const [userPage, setUserPage] = useState(1);
  const pageSize = 3;

  async function handleFinishToReview() {
    try {
      setSubmitting(true);

      const res = await fetch(`/api/stock-opname/${id}/to-review`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
      });

      const json = await res.json();

      if (!res.ok) {
        alert(json.message || "Gagal proses ke review");
        return;
      }

      // refresh data
      await fetchData();

      alert("Berhasil dipindahkan ke tahap REVIEW");
    } finally {
      setSubmitting(false);
    }
  }

  function goToCreate(binId: string) {
    const url = selectedUserId
      ? `/stock-opname/${id}/items/create?bin_id=${binId}&user_id=${selectedUserId}`
      : `/stock-opname/${id}/items/create?bin_id=${binId}`;

    router.push(url);
  }

  function goToQr(binId: string) {
    const url = selectedUserId
      ? `/stock-opname/${id}/items/scan?bin_id=${binId}&user_id=${selectedUserId}`
      : `/stock-opname/${id}/items/scan?bin_id=${binId}`;

    router.push(url);
  }

  const displayedUsers = useMemo(() => {
    const list = filteredUsers.length ? filteredUsers : users;

    return list.slice(0, userPage * pageSize);
  }, [filteredUsers, users, userPage]);

    function handleSearch(val: string) {
        const q = val.toLowerCase().trim();
        const list = users ?? [];

        const filtered = list.filter((u: any) => {
          const name = (u.name ?? "").toLowerCase();
          const email = (u.email ?? "").toLowerCase();
          const username = (u.username ?? "").toLowerCase();

          return name.includes(q) || email.includes(q) || username.includes(q);
        });

        setFilteredUsers(filtered);
        setUserPage(1); // 👈 penting
    }
    async function fetchData() {
      try {
        setLoading(true);

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

        const json = await res.json();
        setData(json.data);

      async function fetchUsers() {
        const res = await fetch("/api/users");
        const jsonUser = await res.json();
        // console.log("Users: ", jsonUser);
        const list = jsonUser?.users ?? [];
        setUsers(list);
        setFilteredUsers(list);

      }
        fetchUsers();

 
      } finally {
        setLoading(false);
      }
    }
  useEffect(() => {

    if (id) fetchData();
  }, [id]);

  useEffect(() => {
    if (showUserModal) {
      setFilteredUsers(users);
    }
  }, [showUserModal, users]);
  
  const groupedItems = useMemo(() => {
    if (!data?.items) return {};

    const map: any = {};

    data.items.forEach((item: any) => {
      const key = item.bin_id || "NO_BIN";

      if (!map[key]) map[key] = [];

      map[key].push(item);
    });

    return map;
  }, [data]);

  function statusBadge(status: string) {
    const base =
      "px-3 md:px-4 py-1.5 md:py-2 rounded-full text-[11px] md:text-xs font-bold border shadow-sm backdrop-blur-xl whitespace-nowrap";

    if (status === "APPROVED")
      return `${base} bg-emerald-100 text-emerald-700 border-emerald-200`;

    if (status === "COUNTING")
      return `${base} bg-sky-100 text-sky-700 border-sky-200`;

    if (status === "CHECKED")
      return `${base} bg-violet-100 text-violet-700 border-violet-200`;

    if (status === "POSTED")
      return `${base} bg-lime-100 text-lime-700 border-lime-200`;

    if (status === "CANCELLED")
      return `${base} bg-red-100 text-red-700 border-red-200`;

    return `${base} bg-slate-100 text-slate-700 border-slate-200`;
  }

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-linear-to-br from-emerald-50 via-white to-lime-50 px-4">
        <div className="px-6 md:px-8 py-4 md:py-5 rounded-3xl bg-white/70 border border-white shadow-2xl text-emerald-700 font-bold animate-pulse text-center text-sm md:text-base">
          🌿 Loading stock opname...
        </div>
      </div>
    );
  }

  if (!data) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-linear-to-br from-white to-emerald-50 px-4">
        <div className="text-center">
          <p className="text-xl md:text-2xl font-black text-emerald-900">
            Data tidak ditemukan
          </p>

          <button
            // onClick={() => router.back()}
            onClick={() => router.push(`/stock-opname/${id}`)}
            className="mt-4 px-4 md:px-5 py-2.5 md:py-3 rounded-2xl bg-emerald-600 text-white font-bold"
          >
            Kembali
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen relative overflow-hidden bg-linear-to-br from-emerald-50 via-white to-lime-50 p-3 md:p-6 space-y-5 md:space-y-6">
      {/* BG */}
      <div className="absolute -top-32 -left-24 w-72 md:w-96 h-72 md:h-96 bg-emerald-300/20 blur-3xl rounded-full" />
      <div className="absolute top-40 right-0 w-72 md:w-md h-72 md:h-112 bg-lime-300/20 blur-3xl rounded-full" />

      {/* BACK */}
      <button
        onClick={() => router.back()}
        className="relative z-10 flex items-center gap-2 px-3 md:px-4 py-2 rounded-2xl bg-white/70 border border-white shadow-lg text-emerald-700 font-bold hover:-translate-x-1 transition text-sm md:text-base"
      >
        <ArrowLeft size={18} />
        Back
      </button>

      {/* HERO */}
      <motion.div
        initial={{ opacity: 0, y: 25, scale: 0.98 }}
        animate={{ opacity: 1, y: 0, scale: 1 }}
        className="relative rounded-[28px] md:rounded-[38px] overflow-hidden border border-white/50 shadow-[0_40px_120px_rgba(0,0,0,0.18)]"
      >
        <div className="absolute inset-0 bg-linear-to-r from-emerald-500 via-lime-500 to-sky-400" />
        <div className="absolute inset-0 bg-white/30 backdrop-blur-3xl" />

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

              {/* icon bubble */}
              <span className="relative z-10 flex h-7 w-7 items-center justify-center rounded-full bg-linear-to-br from-emerald-500 to-lime-500 text-white shadow-[0_8px_18px_rgba(16,185,129,0.25)]">
                <ClipboardCheck size={14} />
              </span>

              {/* text */}
              <span className="relative z-10 tracking-wide">
                Stock Opname Detail
              </span>

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

              <h1 className="text-2xl md:text-5xl font-black text-green-950 mt-3 md:mt-4 wrap-break-word">
                {data.opname_number}
              </h1>

              <p className="text-green-900/75 mt-1 md:mt-2 text-sm md:text-base">
                Detail perhitungan stok gudang DSR
              </p>
            </div>

            <div className="flex flex-col gap-2 md:items-end">
              <span className={statusBadge(data.status)}>{data.status}</span>

              <button
                  onClick={handleFinishToReview}
                  disabled={submitting || data.status !== "COUNTING"}
                  className={`mt-2 px-4 py-2 rounded-2xl font-bold text-sm transition shadow
                    ${
                      data.status !== "COUNTING"
                        ? "bg-slate-200 text-slate-400 cursor-not-allowed"
                        : "bg-linear-to-r from-emerald-500 to-lime-500 text-white hover:scale-105"
                    }`}
                >
                  {submitting ? "Processing..." : "Selesai Hitung → Review"}
                </button>

              <div className="text-xs md:text-sm text-green-900/75">
                Dibuat: <span className="font-bold">{formatWIB(data.created_at)}</span>
              </div>
            </div>
          </div>
        </div>
      </motion.div>

      {/* SUMMARY */}
      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 md:gap-5">
        <Card icon={<Warehouse />} label="Gudang" value={data.warehouse_name || "-"} />
        <Card icon={<Boxes />} label="Total Area" value={formatNumber(data.summary?.available_bins) ?? 0} />
        <Card icon={<Layers3 />} label="Total Items" value={formatNumber(data.summary?.total_items) ?? 0} />
        <Card icon={<AlertTriangle />} label="Total Item Berbeda" value={formatNumber(data.summary?.variance_items) ?? 0} danger />
      </div>

      {/* CONTENT */}
    <div className="grid grid-cols-1 xl:grid-cols-3 gap-5 md:gap-6">
        {/* META */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          className="xl:col-span-2 rounded-3xl md:rounded-[30px] bg-white/65 backdrop-blur-2xl border border-white shadow-[0_25px_80px_rgba(0,0,0,0.12)] p-4 md:p-6"
        >
          <h2 className="font-black text-lg md:text-xl text-emerald-900 flex items-center gap-2 mb-4 md:mb-5">
            <PackageCheck size={20} />
            Informasi Opname
          </h2>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4">
            <Info icon={<ClipboardCheck size={16} />} label="Status" value={data.status} />
            <Info icon={<Calendar size={16} />} label="Dibuat Pada" value={formatWIB(data.created_at)} />
            <Info icon={<Clock3 size={16} />} label="Diperbarui Pada" value={data.updated_at ? formatWIB(data.updated_at) : "-"} />
            <Info icon={<MapPin size={16} />} label="Kode Gudang" value={data.warehouse_code || "-"} />
            {/* <Info icon={<Boxes size={16} />} label="Rak Dipilih" value={data.bin_name || "Semua Rak"} /> */}
            <Info icon={<ShieldCheck size={16} />} label="Disetujui Pada" value={data.approved_at ? formatWIB(data.approved_at) : "-"} />
          </div>
        </motion.div>

        {/* USERS */}
        <motion.div
          initial={{ opacity: 0, y: 35 }}
          animate={{ opacity: 1, y: 0 }}
          className="rounded-3xl md:rounded-[30px] bg-white/65 backdrop-blur-2xl border border-white shadow-[0_25px_80px_rgba(0,0,0,0.12)] p-4 md:p-6"
        >
          <h2 className="font-black text-lg md:text-xl text-emerald-900 flex items-center gap-2 mb-4 md:mb-5">
            <User size={20} />
            Alur Persetujuan
          </h2>

          <UserCard title="Dibuat Oleh" name={data.created_by || "-"} color="emerald" />
          <UserCard title="Diperiksa Oleh" name={data.checked_by || "-"} color="sky" />
          <UserCard title="Disetujui Oleh" name={data.approved_by || "-"} color="violet" />
        </motion.div>
      </div>

      {/* LOCATION BINS */}
      <motion.div
        initial={{ opacity: 0, y: 35 }}
        animate={{ opacity: 1, y: 0 }}
        className="rounded-3xl md:rounded-[30px] bg-white/65 backdrop-blur-2xl border border-white shadow-[0_25px_80px_rgba(0,0,0,0.12)] p-4 md:p-6"
      >
        <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-3 mb-5">
          <h2 className="font-black text-lg md:text-xl text-emerald-900 flex items-center gap-2">
            <Boxes size={20} />
            Area
          </h2>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
          {(data.bins || []).map((bin: any) => {
            const items = groupedItems[bin.id] || [];

            return (
              <div
                key={bin.id}
                className="rounded-3xl border border-emerald-100 bg-white/70 p-4 md:p-5 shadow-lg hover:-translate-y-1 transition flex flex-col"
              >
                <div className="flex justify-between gap-3">
                  <div>
                    <div className="text-[10px] md:text-xs font-bold text-emerald-600 uppercase">
                      {bin.type}
                    </div>

                    <div className="text-lg md:text-xl font-black text-emerald-950 mt-1 wrap-break-word">
                      {bin.name}
                    </div>

                    <div className="text-xs md:text-sm text-slate-500">
                      {bin.code}
                    </div>
                  </div>

                  <div className="h-10 w-10 md:h-12 md:w-12 rounded-2xl bg-emerald-100 flex items-center justify-center text-emerald-700 shrink-0">
                    <Boxes size={18} />
                  </div>
                </div>

                <div className="mt-3 md:mt-4 text-xs md:text-sm text-slate-600">
                  Total Item:{" "}
                  <span className="font-bold text-emerald-900">
                    {formatNumber(items.length)}
                  </span>
                </div>

                <div className="mt-3 md:mt-4 flex-1">
                  {items.length > 0 ? (
                    <div className="space-y-2 max-h-40 overflow-auto pr-1">
                      {items.map((item: any) => (
                        <div
                          key={item.id}
                          className="rounded-2xl bg-emerald-50 border border-emerald-100 px-3 py-2"
                        >
                          <div className="text-sm font-bold text-emerald-900 line-clamp-1">
                            {item.item_name}
                          </div>

                          <div className="text-xs text-slate-500">
                            SKU: {item.sku}
                          </div>

                          <div className="text-xs mt-1 text-slate-600">
                            Sys: {item.system_qty} | Count: {item.counted_qty}
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="min-h-24 md:min-h-27 rounded-2xl border border-dashed border-emerald-100 bg-emerald-50/40 flex items-center justify-center text-xs md:text-sm text-slate-400 px-4 text-center">
                      Belum ada item di bin ini
                    </div>
                  )}
                </div>

                {/* <button
                  onClick={() =>
                    router.push(
                      `/stock-opname/${data.id}/items/create?bin_id=${bin.id}`
                    )
                  }
                  className="mt-4 w-full h-10 md:h-11 rounded-2xl bg-linear-to-r from-emerald-500 to-lime-500 text-white font-bold hover:scale-[1.02] transition text-sm md:text-base"
                >
                  <Plus className="inline mr-2" size={16} />
                  Tambah Item ke Bin
                </button> */}
                {(data.status === "DRAFT" || data.status === "COUNTING") && (
                  <button
                    onClick={() => {
                      setActiveBinId(bin.id);
                      setSelectedUserId(null);
                      setShowUserModal(true);
                    }}
                    className="mt-4 w-full h-10 md:h-11 rounded-2xl bg-linear-to-r from-emerald-500 to-lime-500 text-white font-bold hover:scale-[1.02] transition text-sm md:text-base"
                  >
                    <Plus className="inline mr-2" size={16} />
                    Tambah Item ke Area
                  </button>
                )}
              </div>
            );
          })}
        </div>
      </motion.div>

      {/* NOTES */}
      <motion.div
        initial={{ opacity: 0, y: 35 }}
        animate={{ opacity: 1, y: 0 }}
        className="rounded-3xl md:rounded-[30px] bg-white/65 backdrop-blur-2xl border border-white shadow-[0_25px_80px_rgba(0,0,0,0.12)] p-4 md:p-6"
      >
        <h2 className="font-black text-lg md:text-xl text-emerald-900 mb-3 md:mb-4">
          📝 Catatan
        </h2>

        <div className="rounded-3xl bg-emerald-50/70 border border-emerald-100 p-4 md:p-5 text-emerald-900 leading-7 min-h-20 md:min-h-22 text-sm md:text-base">
          {data.notes || "Tidak ada catatan."}
        </div>
      </motion.div>
           {showUserModal && (
              <div className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-end md:items-center justify-center p-0 md:p-4">
                
                {/* STOP PROPAGATION BIAR TIDAK CLOSE SAAT CLICK DALAM */}
                <div
                  onClick={(e) => e.stopPropagation()}
                  className="w-full max-w-md max-h-[85vh] rounded-t-3xl md:rounded-3xl bg-white shadow-2xl border flex flex-col overflow-hidden"
                >

                  {/* HEADER */}
                  <div className="p-5 border-b bg-white sticky top-0 z-10">
                    <div className="flex items-center justify-between">
                      
                      <h2 className="text-lg font-black text-emerald-900">
                        Pilih Supervisi (Checker)
                      </h2>

                      <button
                        onClick={() => setShowUserModal(false)}
                        className="text-sm font-bold text-red-500 hover:text-red-700"
                      >
                        ✕
                      </button>

                    </div>

                    {/* SEARCH */}
                    <input
                      type="text"
                      placeholder="Cari user..."
                      className="w-full mt-3 px-4 py-3 rounded-2xl border border-slate-200 focus:border-emerald-400 outline-none"
                      onChange={(e) => handleSearch(e.target.value)}
                    />
                  </div>

                  {/* USER LIST */}
                  <div className="flex-1 overflow-y-auto p-4 space-y-2 max-h-[55vh]">
                    {(filteredUsers.length ? filteredUsers : users).map((u: any) => (
                      <button
                        key={u.id}
                        onClick={() => setSelectedUserId(u.id)}
                        className={`w-full flex flex-col text-left px-4 py-3 rounded-2xl border transition ${
                          selectedUserId === u.id
                            ? "bg-emerald-100 border-emerald-400"
                            : "bg-white border-slate-200 hover:bg-slate-50"
                        }`}
                      >
                        <div className="font-bold text-emerald-900">
                          {u.name}
                        </div>
                        <div className="text-xs text-slate-500">
                          {u.email}
                        </div>
                      </button>
                    ))}
                  </div>

                  {displayedUsers.length < (filteredUsers.length || users.length) && (
                    <button
                      onClick={() => setUserPage((p) => p + 1)}
                      className="w-full mt-3 py-3 rounded-2xl bg-slate-100 text-slate-700 font-bold"
                    >
                      Load more user
                    </button>
                  )}

                  {/* ACTION FOOTER */}
                  <div className="p-4 border-t bg-white space-y-3">

                    <div className="grid grid-cols-2 gap-3">

                      {/* MANUAL INPUT */}
                      {/* <button
                        onClick={() => {
                          setShowUserModal(false);
                          router.push(
                            `/stock-opname/${id}/items/create?bin_id=${activeBinId}${
                              selectedUserId ? `&user_id=${selectedUserId}` : ""
                            }`
                          );
                        }}
                        className="h-11 rounded-2xl bg-emerald-600 text-white font-bold"
                      >
                        Manual Input
                      </button> */}
                      <button
                          onClick={() => {
                            if (!selectedUserId) {
                              alert("Silakan pilih Supervisor (Checker) terlebih dahulu");
                              return;
                            }

                            setShowUserModal(false);

                            router.push(
                              `/stock-opname/${id}/items/create?bin_id=${activeBinId}&user_id=${selectedUserId}`
                            );
                          }}
                          className={`h-11 rounded-2xl font-bold ${
                              !selectedUserId
                                ? "bg-gray-300 text-gray-600 cursor-not-allowed"
                                : "bg-emerald-600 text-white"
                            }`}
                        >
                          Manual Input
                        </button>

                      {/* QR SCAN */}
                      {/* <button
                        onClick={() => {
                          setShowUserModal(false);
                          router.push(
                            `/stock-opname/${id}/items/scan-item?bin_id=${activeBinId}${
                              selectedUserId ? `&user_id=${selectedUserId}` : ""
                            }`
                          );
                        }}
                        className="h-11 rounded-2xl bg-slate-900 text-white font-bold"
                      >
                        Scan QR
                      </button> */}
                      <button
                        onClick={() => {
                          if (!selectedUserId) {
                            alert("Silakan pilih Supervisor (Checker) terlebih dahulu");
                            return;
                          }

                          setShowUserModal(false);

                          router.push(
                            `/stock-opname/${id}/items/scan-item?bin_id=${activeBinId}&user_id=${selectedUserId}`
                          );
                        }}
                        className={`h-11 rounded-2xl font-bold ${
                          !selectedUserId
                            ? "bg-gray-300 text-gray-600 cursor-not-allowed"
                            : "bg-emerald-600 text-white"
                        }`}
                      >
                        Scan QR
                      </button>

                    </div>

                    {/* SKIP USER */}
                    {/* <button
                      onClick={() => {
                        setSelectedUserId(null);
                        setShowUserModal(false);
                        router.push(`/stock-opname/${id}/items/create?bin_id=${activeBinId}`);
                      }}
                      className="w-full text-sm text-slate-500 hover:text-slate-700"
                    >
                      Lanjut tanpa pilih Supervisor (Checker)
                    </button> */}

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

/* CARD */
function Card({ icon, label, value, danger }: any) {
  return (
    <div
      className={`rounded-[22px] md:rounded-[26px] p-4 md:p-5 bg-white/65 backdrop-blur-xl border shadow-[0_20px_50px_rgba(0,0,0,0.08)] hover:-translate-y-1 transition ${
        danger ? "border-red-200" : "border-white"
      }`}
    >
      <div className="flex items-center gap-2 text-emerald-700 text-xs md:text-sm font-bold">
        {icon}
        {label}
      </div>

      <div
        className={`text-2xl md:text-3xl font-black mt-2 md:mt-3 ${
          danger ? "text-red-500" : "text-emerald-900"
        }`}
      >
        {value}
      </div>
    </div>
  );
}

/* INFO */
function Info({ icon, label, value }: any) {
  return (
    <div className="rounded-2xl border border-emerald-100 bg-white/70 px-3 md:px-4 py-3 md:py-4">
      <div className="flex items-center gap-2 text-[10px] md:text-xs font-bold text-emerald-700 uppercase tracking-wide">
        {icon}
        {label}
      </div>

      <div className="mt-2 text-sm font-semibold text-emerald-950 wrap-break-word">
        {value}
      </div>
    </div>
  );
}

/* USER CARD */
function UserCard({ title, name, color }: any) {
  const map: any = {
    emerald: "from-emerald-500/10 to-emerald-100",
    sky: "from-sky-500/10 to-sky-100",
    violet: "from-violet-500/10 to-violet-100",
  };

  return (
    <div
      className={`mb-3 last:mb-0 rounded-3xl p-4 border border-white bg-linear-to-r ${map[color]}`}
    >
      <div className="text-[10px] md:text-xs font-bold text-slate-500 uppercase">
        {title}
      </div>

      <div className="mt-1 text-base md:text-lg font-black text-slate-800 wrap-break-word">
        {name}
      </div>
    </div>
  );
}