"use client";

import { useSession, signIn, signOut } from "next-auth/react";
import { motion } from "framer-motion";
import Image from "next/image";
import Link from "next/link";
import { useEffect } from "react";
import { useRouter } from "next/navigation";
import {
  ArrowLeft,
  Mail,
  ShieldCheck,
  User,
  Calendar,
  LogOut,
  BadgeCheck,
} from "lucide-react";

export default function ProfilePage() {
  const { data: session, status } = useSession();
  const router = useRouter();

  const user = session?.user as any;

  // =========================
  // AUTO REDIRECT IF NOT LOGIN
  // =========================
  useEffect(() => {
    if (status === "loading") return;

    if (!session) {
      router.replace("/login");
    }
  }, [session, status, router]);

  if (status === "loading") {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-green-700 animate-pulse text-lg">
          🌿 Loading profile...
        </div>
      </div>
    );
  }

  // optional safety (biar tidak flash UI)
  if (!session) return null;

  return (
    <div className="space-y-6 p-4">

      {/* ================= HEADER ================= */}
      <motion.div
        initial={{ opacity: 0, y: 25, scale: 0.98 }}
        animate={{ opacity: 1, y: 0, scale: 1 }}
        className="relative rounded-4xl overflow-hidden"
      >
        <div className="absolute inset-0 bg-linear-to-br from-green-400 via-emerald-300 to-lime-300" />
        <div className="absolute inset-0 bg-white/25 backdrop-blur-2xl" />

        <div className="relative z-10 p-8 bg-white/45 backdrop-blur-2xl border border-white/40 shadow-[0_30px_80px_rgba(0,0,0,0.15)] rounded-[32px]">

          <div className="flex flex-col md:flex-row gap-8 items-center md:items-start">

            {/* AVATAR */}
            <div className="relative w-36 h-36 rounded-full overflow-hidden border-4 border-white shadow-2xl">
              {user?.image ? (
                <Image
                  src={user.image}
                  alt="Profile"
                  fill
                  className="object-cover"
                />
              ) : (
                <div className="w-full h-full bg-green-100 flex items-center justify-center">
                  <User className="w-14 h-14 text-green-700" />
                </div>
              )}
            </div>

            {/* INFO */}
            <div className="flex-1 space-y-3 text-center md:text-left">

              <h1 className="text-4xl font-bold text-green-950">
                {user?.name || "Unknown User"}
              </h1>

              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/70 text-green-800 text-sm font-semibold shadow">
                <BadgeCheck size={16} />
                {user?.role || "OPERATOR"}
              </div>

              <p className="text-green-950/75 text-sm">
                Sistem Inventory Agriculture Warehouse
              </p>

              <div className="grid md:grid-cols-2 gap-4 pt-4">

                <InfoCard icon={<Mail size={18} />} title="Email" value={user?.email || "-"} />
                <InfoCard icon={<ShieldCheck size={18} />} title="Role" value={user?.role || "OPERATOR"} />
                <InfoCard icon={<User size={18} />} title="User ID" value={String(user?.id || "-")} />
                <InfoCard icon={<Calendar size={18} />} title="Status" value="Active User" />

              </div>

              {/* BUTTONS */}
              <div className="flex flex-wrap gap-3 pt-6">

                {user?.role === "ADMIN" && (
                  <Link
                    href="/users"
                    className="px-5 py-3 rounded-2xl bg-white/80 border shadow font-semibold text-green-900 hover:scale-105 transition"
                  >
                    Manage Users
                  </Link>
                )}

                <button
                  onClick={() => signOut({ callbackUrl: "/login" })}
                  className="px-5 py-3 rounded-2xl bg-red-500 text-white shadow hover:scale-105 transition font-semibold flex items-center gap-2"
                >
                  <LogOut size={18} />
                  Logout
                </button>

              </div>

            </div>
          </div>
        </div>
      </motion.div>
    </div>
  );
}
function InfoCard({
  icon,
  title,
  value,
}: {
  icon: React.ReactNode;
  title: string;
  value: string;
}) {
  return (
    <div className="rounded-2xl bg-white/70 border border-white shadow p-4">
      <div className="flex items-center gap-2 text-green-700 text-sm font-semibold">
        {icon}
        {title}
      </div>

      <div className="mt-2 text-sm text-gray-800 break-all">
        {value}
      </div>
    </div>
  );
}

function SmallStat({
  title,
  value,
}: {
  title: string;
  value: string;
}) {
  return (
    <div className="rounded-2xl bg-linear-to-br from-green-50 to-white border border-green-100 p-5 shadow-sm">
      <p className="text-xs uppercase tracking-wider text-gray-500">
        {title}
      </p>

      <p className="mt-2 text-lg font-bold text-green-900">
        {value}
      </p>
    </div>
  );
}