"use client";

import { useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import {
  ClipboardList,
  CheckCircle2,
  XCircle,
  Clock,
  PackageCheck,
  Search,
} from "lucide-react";
import { formatWIB } from "@/app/lib/formatWIB";
import { Select3D } from "../../components/Select3D";

export default function StockOpnameListPage() {
  const router = useRouter();
  const [selectedLocations, setSelectedLocations] = useState<number[]>([]);
  const [selectedOpnames, setSelectedOpnames] = useState<number[]>([]);
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState<any[]>([]);
  const [keyword, setKeyword] = useState("");
  const [status, setStatus] = useState("ALL");

  function toggleLocation(locationId: number) {
    setSelectedLocations((prev) =>
      prev.includes(locationId)
        ? prev.filter((id) => id !== locationId)
        : [...prev, locationId]
    );
  }
  function toggleSelect(id: number) {
  setSelectedOpnames((prev) =>
    prev.includes(id)
      ? prev.filter((x) => x !== id)
      : [...prev, id]
  );
}

  function getVarianceColor(val: any) {
    const num = Number(val);

    if (num === 0) return "text-emerald-600";
    if (num > 0) return "text-red-500";
    return "text-blue-600";
 }
  async function fetchData() {
    try {
      setLoading(true);

      const res = await fetch(
        `/api/stock-opname?keyword=${keyword}&status=${status}`
      );

      const json = await res.json();
      console.log("Datanya: ", json);
      setData(json.data || []);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    fetchData();
  }, [keyword, status]);

  function goReport(id: number) {
      router.push(`/reports/opname/${id}`);
  }

  function getStatusUI(status: string) {
    switch (status) {
      case "APPROVED":
        return { color: "text-emerald-600", icon: <CheckCircle2 size={16} /> };
      case "CHECKED":
        return { color: "text-blue-600", icon: <PackageCheck size={16} /> };
      case "CANCELLED":
        return { color: "text-red-500", icon: <XCircle size={16} /> };
      case "COUNTING":
        return { color: "text-yellow-600", icon: <Clock size={16} /> };
      default:
        return { color: "text-slate-500", icon: <ClipboardList size={16} /> };
    }
  }

  return (
    <div className="min-h-screen bg-linear-to-br from-emerald-50 via-white to-lime-50 p-4 md:p-6">

      {/* HEADER */}
      <div className="mb-5">
        <h1 className="text-2xl md:text-3xl font-black text-emerald-900">
          Laporan Stock Opname
        </h1>
        <p className="text-slate-500 text-sm">
          Klik untuk melihat report detail
        </p>

          <button
            disabled={selectedOpnames.length === 0}
            onClick={() =>
              router.push(
                // `/stock-opname/compare?ids=${selectedOpnames.join(",")}`
                `/reports/opname/multiple?ids=${selectedOpnames.join(",")}`
              )
            }
            className="px-4 py-2 bg-emerald-600 text-white rounded-xl disabled:opacity-40"
          >
            Laporan ({selectedOpnames.length})
          </button>
      </div>

      {/* FILTER */}
      <div className="flex flex-col md:flex-row gap-3 mb-5">

        {/* SEARCH */}
        <div className="flex items-center gap-2 bg-white px-3 py-2 rounded-xl shadow w-full md:w-1/2">
          <Search size={16} className="text-slate-400" />
          <input
            value={keyword}
            onChange={(e) => setKeyword(e.target.value)}
            placeholder="Search opname / warehouse / user..."
            className="w-full outline-none text-sm"
          />
        </div>

        {/* STATUS FILTER */}
        <Select3D
            value={status}
            onChange={setStatus}
            fullWidth
            placeholder="Filter Status"
            options={[
                { label: "ALL STATUS", value: "ALL" },
                { label: "DRAFT", value: "DRAFT" },
                { label: "COUNTING", value: "COUNTING" },
                { label: "CHECKED", value: "CHECKED" },
                { label: "APPROVED", value: "APPROVED" },
                { label: "POSTED", value: "POSTED" },
                { label: "CANCELLED", value: "CANCELLED" },
            ]}
            />
      </div>

      {/* TABLE */}
      <div className="hidden md:block bg-white rounded-2xl shadow overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-emerald-100 text-emerald-900">
            <tr>
              <th className="p-3">Select</th>
              <th className="p-3 text-left">NO</th>
              <th className="p-3 text-left">Tanggal</th>
              <th className="p-3 text-left">Opname</th>
              <th className="p-3 text-left">Warehouse</th>
              <th className="p-3 text-left">Items</th>
              <th className="p-3 text-left">Selisih</th>
              <th className="p-3 text-left">Status</th>
            </tr>
          </thead>

          <tbody>
            {data.map((item: any, i: number) => {
              const statusUI = getStatusUI(item.status);

              return (
                <tr
                  key={item.id}
                  // onClick={() => goReport(item.id)}
                  // onClick={(e) => {
                  //   if (item.status !== "APPROVED") return;
                  //   if ((e.target as HTMLElement).tagName === "INPUT") return;
                  //   goReport(item.id);
                  // }}
                  className="border-t hover:bg-emerald-50 cursor-pointer"
                >
                  <td className="p-3">
                    {item.status === "APPROVED" && (
                      <input
                        type="checkbox"
                        checked={selectedOpnames.includes(item.id)}
                        onChange={() => toggleSelect(item.id)}
                      />
                    )}
                  </td>
                  {/* <td className="p-3">
                    <input
                      type="checkbox"
                      checked={selectedLocations.includes(item.location_id)}
                      onChange={() => toggleLocation(item.location_id)}
                      onClick={(e) => e.stopPropagation()}
                    />
                  </td> */}
                  <td className="p-3 font-bold">{i + 1}</td>
                  <td className="p-3 text-slate-500">
                    {formatWIB(item.created_at)}
                </td>

                  <td className="p-3 font-semibold text-emerald-900">
                    {item.opname_number}
                  </td>

                  <td className="p-3">{item.warehouse_name}</td>

                  <td className="p-3">
                    {item.total_items}
                  </td>

                <td className={`p-3 font-bold ${getVarianceColor(item.variance_items)}`}>
                    {item.variance_items}
                </td>

                  <td className={`p-3 font-bold flex items-center gap-2 ${statusUI.color}`}>
                    {statusUI.icon}
                    {item.status}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {/* MOBILE */}
      <div className="grid gap-3 md:hidden">
        {data.map((item: any, i: number) => {
          const statusUI = getStatusUI(item.status);

          return (
            <div
              key={item.id}
              onClick={() => goReport(item.id)}
              className="bg-white p-4 rounded-2xl shadow cursor-pointer"
            >
              <div className="flex justify-between">
                <input
                  type="checkbox"
                  checked={selectedLocations.includes(item.location_id)}
                  onChange={() => toggleLocation(item.location_id)}
                />
                <div>
                  <div className="font-bold text-emerald-900">
                    {item.opname_number}
                  </div>
                  <div className="text-xs text-slate-500">
                    {item.warehouse_name}
                  </div>
                </div>

                <div className="text-xs font-bold text-slate-400">
                  #{i + 1}
                </div>
              </div>

              <div className="flex justify-between mt-3 text-sm">
                <span>Items: {item.total_items}</span>
                <span className={`font-bold ${getVarianceColor(item.variance_items)}`}>
                    Selisih: {item.variance_items}
                </span>
              </div>

              <div className={`mt-2 flex items-center gap-2 text-sm font-bold ${statusUI.color}`}>
                {statusUI.icon}
                {item.status}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}