"use client";

import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { motion } from "framer-motion";
import { Truck, Save, X } from "lucide-react";
import { useSession } from "next-auth/react";


export default function EditSupplierPage() {
  const { id } = useParams();
  const router = useRouter();

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

  const [loading, setLoading] = useState(false);

  const [form, setForm] = useState({
    code: "",
    name: "",
    contact_person: "",
    phone: "",
    email: "",
    address: "",
    city: "",
    is_active: true,
  });

  /* LOAD DATA */
  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;
    }
    const fetchSupplier = async () => {
      const res = await fetch(`/api/suppliers/${id}`);
      const json = await res.json();

      const data = json?.data?.supplier;

      if (data) {
        setForm({
          code: data.code || "",
          name: data.name || "",
          contact_person: data.contact_person || "",
          phone: data.phone || "",
          email: data.email || "",
          address: data.address || "",
          city: data.city || "",
          is_active: data.is_active ?? true,
        });
      }
    };

    if (id) fetchSupplier();
  }, [status, currentUser, id, router]);
  // }, [id]);


  /* HANDLE CHANGE */
  const handleChange = (e: any) => {
    const { name, value, type, checked } = e.target;

    setForm((prev) => ({
      ...prev,
      [name]: type === "checkbox" ? checked : value,
    }));
  };
  // optional safety (biar tidak flash UI)
  if (!session) return null;
  /* SAVE */
  const handleSave = async () => {
    try {
      setLoading(true);

      const res = await fetch(`/api/suppliers/${id}`, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(form),
      });

      if (!res.ok) throw new Error("Failed update");

      router.push(`/suppliers/${id}`);
    } catch (err) {
      alert("Gagal update supplier");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen p-6 bg-linear-to-b from-green-50 via-emerald-50 to-lime-50 relative overflow-hidden">

      {/* ambient glow */}
      <div className="absolute -top-40 -left-40 w-125 h-125 bg-green-300/20 blur-[160px]" />
      <div className="absolute bottom-0 right-0 w-125 h-125 bg-lime-300/20 blur-[160px]" />

      {/* HEADER 3D FLOAT */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="relative rounded-[40px] overflow-hidden shadow-[0_60px_140px_rgba(0,0,0,0.25)] border border-white/30"
      >
        <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-3xl" />

        <div className="relative p-6 flex items-center justify-between">

          <div>
            <h1 className="text-2xl md:text-3xl font-bold text-white flex items-center gap-2 drop-shadow">
              <Truck className="w-6 h-6" />
              ✏️ Edit Supplier
            </h1>

            <p className="text-white/80 text-sm mt-1">
              Update supplier data
            </p>
          </div>

          <button
            onClick={() => router.back()}
            className="px-4 py-2 rounded-xl bg-white/20 text-white border border-white/30 hover:bg-white/30 transition shadow-lg active:scale-95"
          >
            ← Back
          </button>

        </div>
      </motion.div>

      {/* FORM CARD */}
      <div className="mt-6">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="rounded-[34px] p-6 bg-white/70 backdrop-blur-3xl shadow-[0_40px_120px_rgba(0,0,0,0.15)] border border-white/40"
        >

          <div className="grid md:grid-cols-2 gap-5 text-sm">

            <Input label="Code" name="code" value={form.code} onChange={handleChange} />
            <Input label="Name" name="name" value={form.name} onChange={handleChange} />

            <Input label="Contact Person" name="contact_person" value={form.contact_person} onChange={handleChange} />
            <Input label="Phone" name="phone" value={form.phone} onChange={handleChange} />

            <Input label="Email" name="email" value={form.email} onChange={handleChange} />
            <Input label="City" name="city" value={form.city} onChange={handleChange} />

            <div className="md:col-span-2">
              <label className="text-gray-500 text-xs">Address</label>
              <textarea
                name="address"
                value={form.address}
                onChange={handleChange}
                rows={3}
                className="w-full mt-1 p-3 rounded-xl bg-white/60 border border-white/40 shadow-inner focus:outline-none focus:ring-2 focus:ring-green-400"
              />
            </div>

            <div className="flex items-center gap-2 md:col-span-2">
              <input
                type="checkbox"
                name="is_active"
                checked={form.is_active}
                onChange={handleChange}
              />
              <span className="text-green-800 font-medium">
                Active Supplier
              </span>
            </div>

          </div>

          {/* ACTION BUTTONS */}
          <div className="flex justify-end gap-3 mt-8">

            <button
              onClick={() => router.back()}
              className="px-5 py-2 rounded-xl bg-gray-100 hover:bg-gray-200 shadow-md transition active:scale-95 flex items-center gap-2"
            >
              <X className="w-4 h-4" />
              Cancel
            </button>

            <button
              onClick={handleSave}
              disabled={loading}
              className="px-5 py-2 rounded-xl text-white font-semibold bg-linear-to-r from-green-600 to-emerald-500 shadow-lg hover:shadow-xl hover:scale-[1.02] transition active:scale-95 flex items-center gap-2"
            >
              <Save className="w-4 h-4" />
              {loading ? "Saving..." : "Save Changes"}
            </button>

          </div>

        </motion.div>
      </div>
    </div>
  );
}

/* INPUT COMPONENT (3D STYLE) */
function Input({ label, ...props }: any) {
  return (
    <div className="group">
      <label className="text-gray-500 text-xs">{label}</label>
      <input
        {...props}
        className="w-full mt-1 p-3 rounded-xl bg-white/60 border border-white/40 shadow-inner
        focus:outline-none focus:ring-2 focus:ring-green-400 focus:bg-white/80 transition
        group-hover:shadow-md"
      />
    </div>
  );
}