"use client";

import { Warehouse, Eye, Pencil, Boxes } from "lucide-react";
// import { formatWIB } from "../lib/formatWIB";

export default function StockOpnameTable({
  loading,
  data,
  onView,
  onEdit,
  onManageItems,
}: any) {
  function badge(status: string) {
    return `px-3 py-1 rounded-full text-xs font-bold border shadow-sm backdrop-blur transition-all duration-300 ${
      status === "APPROVED"
        ? "bg-emerald-100/80 text-emerald-700 border-emerald-200"
        : status === "COUNTING"
        ? "bg-sky-100/80 text-sky-700 border-sky-200"
        : status === "CHECKED"
        ? "bg-violet-100/80 text-violet-700 border-violet-200"
        : status === "POSTED"
        ? "bg-lime-100/80 text-lime-700 border-lime-200"
        : status === "CANCELLED"
        ? "bg-red-100/80 text-red-700 border-red-200"
        : "bg-slate-100/80 text-slate-700 border-slate-200"
    }`;
  }

  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",
    });
  };


  return (
    <div className="rounded-[28px] md:rounded-[34px] overflow-hidden border border-emerald-100/40 bg-linear-to-br from-white via-emerald-50/40 to-lime-50/30 backdrop-blur-2xl shadow-[0_20px_80px_-25px_rgba(16,185,129,0.35)]">

      {/* HEADER */}
      <div className="p-4 md:p-6 border-b border-emerald-100/40 bg-linear-to-r from-white via-emerald-50/60 to-lime-50/40">
        <h2 className="font-black text-emerald-900 tracking-wide text-base md:text-lg">
          🌿 Stock Opname List
        </h2>

        <p className="text-xs text-emerald-700/70 mt-1">
          Ringkasan pemantauan persediaan gudang DSR
        </p>
      </div>

      {/* TABLE DESKTOP */}
    <div className="hidden md:block overflow-auto rounded-3xl border border-emerald-100/70 bg-white/70 backdrop-blur-xl shadow-[0_10px_35px_rgba(16,185,129,0.08)]">
      <table className="w-full min-w-375 text-sm border-separate border-spacing-0">
        <thead className="sticky top-0 z-20">
          <tr className="bg-linear-to-r from-emerald-100 via-white to-lime-100 text-emerald-900 shadow-sm">
            <th className="p-4 text-left font-bold border-b border-emerald-200 whitespace-nowrap rounded-tl-3xl">
              Nomor
            </th>
            <th className="p-4 text-left font-bold border-b border-emerald-200 whitespace-nowrap">
              Gudang
            </th>
            <th className="p-4 text-center font-bold border-b border-emerald-200 whitespace-nowrap">
              Area
            </th>
            <th className="p-4 text-center font-bold border-b border-emerald-200 whitespace-nowrap">
              Item
            </th>
            <th className="p-4 text-center font-bold border-b border-emerald-200 whitespace-nowrap">
              Selisih
            </th>
            <th className="p-4 text-left font-bold border-b border-emerald-200 whitespace-nowrap">
              Dibuat Oleh
            </th>
            <th className="p-4 text-left font-bold border-b border-emerald-200 whitespace-nowrap">
              Diperiksa Oleh
            </th>
            <th className="p-4 text-left font-bold border-b border-emerald-200 whitespace-nowrap">
              Disetujui Oleh
            </th>
            <th className="p-4 text-center font-bold border-b border-emerald-200 whitespace-nowrap">
              Status
            </th>
            <th className="p-4 text-left font-bold border-b border-emerald-200 whitespace-nowrap">
              Dibuat
            </th>
            <th className="p-4 text-center font-bold border-b border-emerald-200 whitespace-nowrap rounded-tr-3xl">
              Aksi
            </th>
          </tr>
        </thead>

        <tbody>
          {loading ? (
            <tr>
              <td
                colSpan={11}
                className="p-12 text-center text-emerald-700/70 bg-white"
              >
                Loading agricultural data...
              </td>
            </tr>
          ) : (
            data.map((row: any, i: number) => (
              <tr
                key={row.id}
                className="group transition-all duration-300 hover:bg-linear-to-r hover:from-emerald-50/80 hover:to-lime-50/60"
              >
                <td className="p-4 font-bold text-emerald-900 border-b border-emerald-100 whitespace-nowrap">
                  {row.opname_number}
                </td>

                <td className="p-4 text-emerald-800 border-b border-emerald-100 whitespace-nowrap">
                  <div className="flex items-center gap-3">
                    <div className="p-2 rounded-2xl bg-emerald-100/80 border border-emerald-200 shadow-sm">
                      <Warehouse size={14} />
                    </div>
                    <span className="font-medium">{row.warehouse_name}</span>
                  </div>
                </td>

                <td className="p-4 text-center border-b border-emerald-100">
                  <div className="px-3 py-1 rounded-full text-[11px] font-bold bg-lime-100 text-lime-700 border border-lime-200 inline-flex shadow-sm">
                    📦 {row.total_bins || 0}
                  </div>
                </td>

                <td className="p-4 text-center border-b border-emerald-100">
                  <div className="px-3 py-1 rounded-full text-[11px] font-bold bg-emerald-100 text-emerald-700 border border-emerald-200 inline-flex shadow-sm">
                    🧺 {row.total_items}
                  </div>
                </td>

                <td className="p-4 text-center font-bold text-red-500 border-b border-emerald-100 whitespace-nowrap">
                  {row.variance_items}
                </td>

                <td className="p-4 text-emerald-800 border-b border-emerald-100 whitespace-nowrap">
                  {row.created_by || "-"}
                </td>

                <td className="p-4 text-emerald-800 border-b border-emerald-100 whitespace-nowrap">
                  {row.checked_by || "-"}
                </td>

                <td className="p-4 text-emerald-800 border-b border-emerald-100 whitespace-nowrap">
                  {row.approved_by || "-"}
                </td>

                <td className="p-4 text-center border-b border-emerald-100 whitespace-nowrap">
                  <span className={badge(row.status)}>{row.status}</span>
                </td>

                <td className="p-4 text-xs text-emerald-700/70 border-b border-emerald-100 whitespace-nowrap">
                  {formatWIB(row.created_at)}
                </td>

                <td className="p-4 border-b border-emerald-100">
                  <div className="flex justify-center gap-2">
                    <Btn
                      icon={<Pencil size={14} />}
                      onClick={() => onEdit?.(row)}
                    />
                      <Btn
                        icon={<Eye size={14} />}
                        onClick={() => onView?.(row)}
                      />
                     <Btn
                      icon={<Boxes size={14} />}
                      onClick={() => onManageItems?.(row)}
                    />
                  </div>
                </td>
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>

      {/* MOBILE CARD VIEW */}
      <div className="md:hidden space-y-4 p-3">
        {loading ? (
          <div className="py-10 text-center text-sm text-emerald-700/70">
            Memuat data stok opname...
          </div>
        ) : (
          data.map((row: any) => (
            <div
              key={row.id}
              className="rounded-3xl border border-emerald-100 bg-white/80 backdrop-blur-xl shadow-[0_10px_30px_rgba(16,185,129,0.08)] p-4 space-y-4"
            >
              <div className="flex items-start justify-between gap-3">
                <div>
                  <div className="text-[11px] font-semibold uppercase tracking-wide text-emerald-500">
                    Nomor Opname
                  </div>
                  <div className="text-sm font-bold text-emerald-900">
                    {row.opname_number}
                  </div>
                </div>

                <span className={badge(row.status)}>{row.status}</span>
              </div>

              <div className="flex items-center gap-3 rounded-2xl border border-emerald-100 bg-emerald-50/70 px-3 py-2">
                <div className="rounded-xl bg-white p-2 shadow-sm border border-emerald-100">
                  <Warehouse size={14} />
                </div>

                <div className="min-w-0">
                  <div className="text-[11px] font-semibold text-emerald-500">
                    Gudang
                  </div>
                  <div className="truncate text-sm font-medium text-emerald-900">
                    {row.warehouse_name}
                  </div>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3 text-xs">
                <div className="rounded-2xl border border-lime-200 bg-lime-100/80 px-3 py-2">
                  <div className="text-[11px] text-lime-700 font-semibold">
                    Total Area
                  </div>
                  <div className="mt-1 font-bold text-lime-800">
                    📦 {row.total_bins || 0}
                  </div>
                </div>

                <div className="rounded-2xl border border-emerald-200 bg-emerald-100/80 px-3 py-2">
                  <div className="text-[11px] text-emerald-700 font-semibold">
                    Total Item
                  </div>
                  <div className="mt-1 font-bold text-emerald-800">
                    🧺 {row.total_items}
                  </div>
                </div>
              </div>

              <div className="rounded-2xl border border-red-100 bg-red-50 px-3 py-2">
                <div className="text-[11px] font-semibold text-red-500">
                  Selisih Stok
                </div>
                <div className="mt-1 text-sm font-bold text-red-600">
                  {row.variance_items}
                </div>
              </div>

              <div className="rounded-2xl border border-emerald-100 bg-white px-3 py-2">
                <div className="text-[11px] font-semibold text-emerald-500">
                  Dibuat
                </div>
                <div className="mt-1 text-xs text-emerald-800">
                  {formatWIB(row.created_at)}
                </div>
              </div>

              <div className="flex gap-2 pt-1">

                    <Btn
                      icon={<Pencil size={14} />}
                      onClick={() => onEdit?.(row)}
                    />
                      <Btn
                        icon={<Eye size={14} />}
                        onClick={() => onView?.(row)}
                      />
                     <Btn
                      icon={<Boxes size={14} />}
                      onClick={() => onManageItems?.(row)}
                    />
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
}

function Btn({ icon, onClick }: any) {
  return (
    <button
      onClick={onClick}
      className="h-9 w-9 rounded-2xl bg-linear-to-br from-white to-emerald-50/60 border border-emerald-100/60 shadow-[0_6px_20px_-8px_rgba(16,185,129,0.35)] hover:-translate-y-1 hover:scale-105 active:scale-95 transition-all duration-300 flex items-center justify-center"
    >
      {icon}
    </button>
  );
}