"use client";

import { useEffect, useState } from "react";
import { motion } from "framer-motion";
import { useRouter } from "next/navigation";
import { Save, ArrowLeft } from "lucide-react";
import Link from "next/link";
import { useSession } from "next-auth/react";
import Loading from "../../components/Loading";

/* ================= TYPES ================= */
type FormState = {
  code: string;
  name: string;
  category: string;
  symbol: string;
  is_base: boolean;
  is_active: boolean;
};

/* ================= PAGE ================= */
export default function AddUnitPage() {

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

  const [form, setForm] = useState<FormState>({
    code: "",
    name: "",
    category: "LAINNYA",
    symbol: "",
    is_base: false,
    is_active: true,
  });
  useEffect(() => {
    // 1. tunggu session selesai load
    if (status === "loading") return;

    // 2. kalau belum login
    if (status === "unauthenticated") {
      router.replace("/login");
      return;
    }

    // 3. kalau bukan admin → kick
    const allowedRoles = ["ADMIN"];

    if (!allowedRoles.includes(currentUser?.role)) {
      router.replace("/");
      return;
    }

    // 4. baru fetch data kalau aman

  }, [status, currentUser, router]);

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

  const handleChange = <K extends keyof FormState>(
    key: K,
    value: FormState[K]
  ) => {
    setForm((prev) => ({
      ...prev,
      [key]: value,
    }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

    try {
      const res = await fetch("/api/satuan", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(form),
      });

      const json = await res.json();

      if (!res.ok) {
        alert(json.message || "Gagal menambah unit");
        return;
      }

      alert("Unit berhasil ditambahkan 🌱");
      router.push("/satuan");
    } catch (err) {
      console.error(err);
      alert("Terjadi error");
    } finally {
      setLoading(false);
    }
  };
 // optional safety (biar tidak flash UI)
  if (!session) return null;
  
  return (
    <div className="p-4 space-y-6">

      {/* HEADER */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="relative rounded-[28px] overflow-hidden"
      >
        <div className="absolute inset-0 bg-linear-to-br from-emerald-300 via-green-200 to-lime-200" />
        <div className="absolute inset-0 bg-white/30 backdrop-blur-2xl" />

        <div className="relative p-6 border border-white/40 bg-white/60 rounded-[28px]">
          <div className="flex justify-between items-center">

            <div>
              <h1 className="text-3xl font-bold text-green-900">
                🌿 Tambah Unit
              </h1>
              <p className="text-sm text-green-800/70">
                Buat satuan baru untuk item inventory
              </p>
            </div>

            <Link
              href="/units"
              className="flex items-center gap-2 px-4 py-2 rounded-xl bg-white border border-green-200 text-green-800 hover:shadow-md transition"
            >
              <ArrowLeft size={16} />
              Kembali
            </Link>

          </div>
        </div>
      </motion.div>

      {/* FORM */}
      <motion.form
        onSubmit={handleSubmit}
        initial={{ opacity: 0, scale: 0.98 }}
        animate={{ opacity: 1, scale: 1 }}
        className="relative rounded-3xl p-px bg-linear-to-br from-green-200/40 to-transparent"
      >
        <div className="absolute inset-0 translate-y-6 bg-green-300/20 blur-3xl rounded-3xl" />

        <div className="relative bg-white/85 backdrop-blur-2xl p-6 rounded-3xl border border-white/40 shadow-xl space-y-4">

          <Input
            label="Code"
            value={form.code}
            onChange={(v) => handleChange("code", v)}
            placeholder="PCS / MTR / LTR"
          />

          <Input
            label="Name"
            value={form.name}
            onChange={(v) => handleChange("name", v)}
            placeholder="Pieces / Meter / Liter"
          />

          <Select
            label="Category"
            value={form.category}
            onChange={(v) => handleChange("category", v)}
            options={[
                //     { label: "Satuan", value: "SATUAN" },
                // { label: "Panjang", value: "PANJANG" },
                // { label: "Luas", value: "LUAS" },
                // { label: "Berat", value: "BERAT" },
                // { label: "Volume", value: "VOLUME" },
                // { label: "Kemasan", value: "KEMASAN" },
                // { label: "Industri", value: "INDUSTRI" },
                // { label: "Lainnya", value: "LAINNYA" },
                "SATUAN",
                "PANJANG",
                "LUAS",
                "BERAT",
                "VOLUME",
                "KEMASAN",
                "INDUSTRI",
              "LAINNYA",
            ]}
            />
            {/* //   "PIECE",
            //   "LENGTH",
            //   "AREA",
            //   "WEIGHT",
            //   "VOLUME",
            //   "PACK",
            //   "INDUSTRIAL",
            //   "OTHER", */}

          <Input
            label="Symbol"
            value={form.symbol}
            onChange={(v) => handleChange("symbol", v)}
            placeholder="pcs / m / L"
          />

          {/* TOGGLES */}
          <div className="flex gap-6">

            <Toggle
              label="Base Unit"
              value={form.is_base}
              onChange={(v: boolean) => handleChange("is_base", v)}
            />

            <Toggle
              label="Active"
              value={form.is_active}
              onChange={(v: boolean) => handleChange("is_active", v)}
            />

          </div>

          <button
            type="submit"
            disabled={loading}
            className="w-full mt-4 flex items-center justify-center gap-2
            bg-linear-to-r from-green-600 to-emerald-500
            text-white py-3 rounded-xl font-semibold
            hover:scale-[1.01] transition shadow-lg disabled:opacity-50"
          >
            <Save size={18} />
            {loading ? "Menyimpan..." : "Simpan Unit"}
          </button>

        </div>
      </motion.form>

    </div>
  );
}

/* ================= UI COMPONENTS ================= */

function Input({
  label,
  value,
  onChange,
  placeholder,
}: {
  label: string;
  value: string;
  onChange: (v: string) => void;
  placeholder?: string;
}) {
  return (
    <div className="space-y-1">
      <label className="text-sm text-green-900 font-medium">{label}</label>
      <input
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        className="w-full px-4 py-2 rounded-xl border border-green-200 focus:outline-none focus:ring-2 focus:ring-green-300"
      />
    </div>
  );
}

function Select({
  label,
  value,
  onChange,
  options,
}: {
  label: string;
  value: string;
  onChange: (v: string) => void;
  options: string[];
}) {
  return (
    <div className="space-y-1">
      <label className="text-sm text-green-900 font-medium">{label}</label>
      <select
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="w-full px-4 py-2 rounded-xl border border-green-200"
      >
        {options.map((opt) => (
          <option key={opt} value={opt}>
            {opt}
          </option>
        ))}
      </select>
    </div>
  );
}

function Toggle({
  label,
  value,
  onChange,
}: {
  label: string;
  value: boolean;
  onChange: (v: boolean) => void;
}) {
  return (
    <label className="flex items-center gap-2 cursor-pointer select-none">
      <input
        type="checkbox"
        checked={value}
        onChange={(e) => onChange(e.target.checked)}
        className="w-4 h-4 accent-green-600"
      />
      <span className="text-sm text-green-900">{label}</span>
    </label>
  );
}