"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { motion, AnimatePresence } from "framer-motion";
import {
  ArrowLeftRight,
  Plus,
  CheckCircle2,
  Clock3,
  Truck,
  XCircle,
  Search,
  Warehouse,
  RefreshCcw,
  ChevronRight,
  Eye,
} from "lucide-react";
import { Select3D } from "../components/Select3D";
import { useRouter } from "next/navigation";
import { formatWIB } from "../lib/formatWIB";
import { useSession } from "next-auth/react";
import Loading from "../components/Loading";

export default function STOPage() {
  const [data, setData] = useState<any[]>([]);
  const [locations, setLocations] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  const [statuses, setStatus] = useState("");
  const [keyword, setKeyword] = useState("");

  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);

  const [showModal, setShowModal] = useState(false);

   const { data: session, status } = useSession();
 const router = useRouter();
 const currentUser = session?.user as any;

  const fetchLocations = async () => {
    const res = await fetch("/api/gudang", {
      cache: "no-store",
    });

    const json = await res.json();
    setLocations(json.locations || json.data || []);
  };

  const fetchData = async () => {
    try {
      setLoading(true);

      const query = new URLSearchParams();

      query.append("page", String(page));

      if (statuses) query.append("status", statuses);
      if (keyword) query.append("keyword", keyword);

      const res = await fetch(`/api/sto?${query.toString()}`, {
        cache: "no-store",
      });

      const json = await res.json();

      setData(json.data || []);
      setTotalPages(json.pagination?.totalPages || 1);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchLocations();
  }, []);

  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;
    }
    fetchData();
  }, [page, statuses, status]);

  const searchNow = () => {
    setPage(1);
    fetchData();
  };

  const badge = (status: string) => {
    const map: any = {
      DRAFT: {
        color: "from-gray-500 to-slate-400",
        icon: Clock3,
        label: "Draft",
      },
      CHECKED: {
        color: "from-blue-500 to-cyan-400",
        icon: CheckCircle2,
        label: "Checked",
      },
      APPROVED: {
        color: "from-green-500 to-emerald-400",
        icon: CheckCircle2,
        label: "Approved",
      },
      IN_TRANSIT: {
        color: "from-orange-500 to-amber-400",
        icon: Truck,
        label: "In Transit",
      },
      COMPLETED: {
        color: "from-lime-500 to-green-500",
        icon: CheckCircle2,
        label: "Completed",
      },
      CANCELLED: {
        color: "from-red-500 to-rose-400",
        icon: XCircle,
        label: "Cancelled",
      },
    };

    return map[status] || map.DRAFT;
  };

  return (
    <div
      className="min-h-screen p-4 md:p-6 space-y-6 relative overflow-hidden
      bg-linear-to-br from-green-50 via-emerald-50 to-lime-50"
    >
      {/* Glow */}
      <div className="absolute -top-40 -left-40 w-125 h-125 bg-green-300/20 blur-[180px]" />
      <div className="absolute bottom-0 right-0 w-125 h-125 bg-lime-300/20 blur-[180px]" />

      {/* Hero */}
      <motion.div
        initial={{ opacity: 0, y: 25 }}
        animate={{ opacity: 1, y: 0 }}
        className="relative rounded-[42px] overflow-hidden shadow-[0_60px_140px_rgba(0,0,0,0.18)]"
      >
        <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 md:p-8 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
          <div>
            <h1 className="text-3xl font-bold text-white drop-shadow">
              🌾 Stock Transfer Order
            </h1>

            <p className="text-white/80 text-sm mt-1">
              Transfer stok antar gudang secara cepat, rapi, dan profesional
            </p>
          </div>

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

      {/* Filters */}
      <div className="grid md:grid-cols-3 gap-4">
        <GlassCard>
          <label className="text-xs text-green-800/70">Status</label>

          <div className="mt-2">
            <Select3D
              value={statuses}
              onChange={(val: any) => {
                setStatus(val);
                setPage(1);
              }}
              fullWidth
              options={[
                { label: "Semua", value: "" },
                { label: "Draft", value: "DRAFT" },
                { label: "Checked", value: "CHECKED" },
                { label: "Approved", value: "APPROVED" },
                { label: "In Transit", value: "IN_TRANSIT" },
                { label: "Completed", value: "COMPLETED" },
                { label: "Cancelled", value: "CANCELLED" },
              ]}
            />
          </div>
        </GlassCard>

        <GlassCard>
          <label className="text-xs text-green-800/70">
            Cari Nomor STO
          </label>

          <div className="mt-2 relative">
            <Search className="absolute left-3 top-3 w-4 h-4 text-gray-400" />

            <input
              value={keyword}
              onChange={(e) => setKeyword(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && searchNow()}
              placeholder="Contoh: STO-202605..."
              className="w-full pl-10 pr-4 py-2 rounded-xl border bg-white/70"
            />
          </div>
        </GlassCard>

        <GlassCard>
          <label className="text-xs text-green-800/70">Refresh</label>

          <button
            onClick={fetchData}
            className="mt-2 w-full py-2 rounded-xl bg-white shadow flex items-center justify-center gap-2"
          >
            <RefreshCcw className="w-4 h-4" />
            Muat Ulang
          </button>
        </GlassCard>
      </div>

      {/* List */}
      <div className="space-y-5">
        {loading && (
          <div className="text-green-700 animate-pulse">
            🌿 Memuat transfer...
          </div>
        )}

        {!loading && data.length === 0 && (
          <GlassCard>
            <div className="text-center text-gray-500 py-6">
              Tidak ada data STO
            </div>
          </GlassCard>
        )}

        {!loading &&
          data.map((row, i) => {
            const meta = badge(row.status);
            const Icon = meta.icon;

            return (
              <motion.div
                key={row.id}
                initial={{ opacity: 0, y: 25 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: i * 0.04 }}
              >
                <Link href={`/sto/${row.id}`} className="block group">
                  <div
                    className="relative rounded-[30px] p-px
                    bg-linear-to-br from-green-200/60 to-transparent"
                  >
                    <div className="absolute inset-0 translate-y-3 blur-2xl rounded-[30px] bg-green-300/20" />

                    <div
                      className="relative p-5 rounded-[30px]
                      bg-white/75 backdrop-blur-xl border border-white/40 shadow-xl
                      group-hover:scale-[1.01] group-hover:shadow-2xl transition"
                    >
                      <div className="flex justify-between gap-4 flex-wrap">
                        <div>
                          <div className="font-bold text-green-900 text-lg">
                            {row.sto_number}
                          </div>

                          <div className="text-sm text-gray-500 mt-1 flex items-center gap-2 flex-wrap">
                            <Warehouse className="w-4 h-4" />
                            {row.from_location_name}

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

                            {row.to_location_name}
                          </div>

                          <div className="text-xs text-gray-400 mt-2">
                            Dibuat oleh <span className="font-bold">{row.created_by_name || "-"}</span>
                          </div>
                        </div>

                        <div className="flex flex-col items-end gap-3">
                          <div
                            className={`px-4 py-2 rounded-full text-white text-xs font-semibold shadow-md
                            bg-linear-to-r ${meta.color}
                            flex items-center gap-2`}
                          >
                            <Icon className="w-4 h-4" />
                            {meta.label}
                          </div>

                          <div className="text-green-700 flex items-center gap-1 text-sm font-semibold">
                            <Eye className="w-4 h-4" />
                            Detail
                            <ChevronRight className="w-4 h-4" />
                          </div>
                        </div>
                      </div>

                      <div className="mt-4 flex justify-between text-sm flex-wrap gap-2">
                        <div className="text-green-700 font-semibold">
                          {row.total_items} Item
                        </div>

                        <div className="text-gray-400">
                          {formatWIB(row.created_at)}
                        </div>
                      </div>

                      {row.remarks && (
                        <div className="mt-3 text-sm italic text-gray-600 line-clamp-2">
                          {row.remarks}
                        </div>
                      )}
                    </div>
                  </div>
                </Link>
              </motion.div>
            );
          })}
      </div>

      {/* Pagination */}
      <div className="flex justify-center gap-3 pt-6">
        <button
          disabled={page <= 1}
          onClick={() => setPage(page - 1)}
          className="px-4 py-2 rounded-xl bg-white shadow disabled:opacity-40"
        >
          Prev
        </button>

        <div className="px-4 py-2 text-sm text-gray-600">
          {page} / {totalPages}
        </div>

        <button
          disabled={page >= totalPages}
          onClick={() => setPage(page + 1)}
          className="px-4 py-2 rounded-xl bg-white shadow disabled:opacity-40"
        >
          Next
        </button>
      </div>

      {/* Modal */}
      <AnimatePresence>
        {showModal && (
          <CreateModal
            onClose={() => setShowModal(false)}
            locations={locations}
            reload={fetchData}
          />
        )}
      </AnimatePresence>
    </div>
  );
}

/* ======================================================= */

function CreateModal({ onClose, locations, reload }: any) {
  const [from, setFrom] = useState("");
  const [to, setTo] = useState("");
  const [remarks, setRemarks] = useState("");
  const [saving, setSaving] = useState(false);
  const router = useRouter();
  
  const save = async () => {
    if (!from || !to) {
      alert("Gudang wajib dipilih");
      return;
    }

    if (from === to) {
      alert("Gudang asal dan tujuan tidak boleh sama");
      return;
    }

    try {
      setSaving(true);

      const res = await fetch("/api/sto", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          from_location_id: from,
          to_location_id: to,
          remarks,
        }),
      });

      const json = await res.json();

      if (json.success) {
        // reload();
        onClose();
           router.push(`/sto/${json.id}`);
      } else {
        alert(json.message || "Gagal simpan");
      }
    } finally {
      setSaving(false);
    }
  };

  return (
    <motion.div
      className="fixed inset-0 z-50 bg-black/30 backdrop-blur-sm flex items-center justify-center p-4"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      <motion.div
        initial={{ y: 50, scale: 0.9 }}
        animate={{ y: 0, scale: 1 }}
        exit={{ y: 40, scale: 0.9 }}
        className="w-full max-w-xl rounded-4xl p-6 bg-white shadow-2xl"
      >
        <h2 className="text-xl font-bold text-green-800 mb-5">
          🌾 Buat Stock Transfer
        </h2>

        <div className="space-y-4">
          <Select3D
            value={from}
            onChange={setFrom}
            placeholder="Gudang Asal"
            fullWidth
            options={locations.map((x: any) => ({
              label: x.name,
              value: String(x.id),
            }))}
          />

          <Select3D
            value={to}
            onChange={setTo}
            placeholder="Gudang Tujuan"
            fullWidth
            options={locations.map((x: any) => ({
              label: x.name,
              value: String(x.id),
            }))}
          />

          <textarea
            value={remarks}
            onChange={(e) => setRemarks(e.target.value)}
            rows={4}
            placeholder="Catatan..."
            className="w-full rounded-2xl border p-4"
          />
        </div>

        <div className="flex justify-end gap-3 mt-6">
          <button
            onClick={onClose}
            className="px-4 py-2 rounded-xl bg-gray-100"
          >
            Batal
          </button>

          <button
            disabled={saving}
            onClick={save}
            className="px-5 py-2 rounded-xl bg-green-600 text-white disabled:opacity-50"
          >
            {saving ? "Menyimpan..." : "Simpan"}
          </button>
        </div>
      </motion.div>
    </motion.div>
  );
}

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