"use client";

import { useState, useEffect } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { User, Loader2, Save } from "lucide-react";
import toast from "react-hot-toast";

export default function ProfilePage() {
  const { data: session, status } = useSession();
  const router = useRouter();
  const [form, setForm] = useState({ name: "", phone: "" });
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (status === "unauthenticated") { router.push("/login"); return; }
    if (session?.user) setForm({ name: session.user.name || "", phone: "" });
  }, [session, status, router]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    await new Promise((r) => setTimeout(r, 500));
    toast.success("Profile updated!");
    setLoading(false);
  };

  if (status === "loading") return <div className="flex justify-center py-20"><Loader2 className="w-8 h-8 animate-spin text-sky-500" /></div>;

  return (
    <div className="max-w-lg mx-auto px-4 py-8">
      <div className="flex items-center gap-3 mb-8">
        <div className="w-10 h-10 rounded-xl bg-sky-100 flex items-center justify-center">
          <User className="w-5 h-5 text-sky-600" />
        </div>
        <div>
          <h1 className="text-2xl font-black text-slate-900">My Profile</h1>
          <p className="text-slate-500 text-sm">{session?.user?.email}</p>
        </div>
      </div>

      <div className="bg-white rounded-2xl border border-sky-100 p-6">
        <form onSubmit={handleSubmit} className="space-y-4">
          {[
            { k: "name", label: "Full Name", type: "text", placeholder: "Your name" },
            { k: "phone", label: "Phone Number", type: "tel", placeholder: "0712 345 678" },
          ].map(({ k, label, type, placeholder }) => (
            <div key={k}>
              <label className="block text-sm font-bold text-slate-700 mb-2">{label}</label>
              <input type={type} value={form[k as keyof typeof form]} onChange={(e) => setForm((f) => ({ ...f, [k]: e.target.value }))}
                placeholder={placeholder}
                className="w-full px-4 py-3 rounded-xl border-2 border-slate-200 focus:border-sky-400 focus:outline-none text-sm transition-colors" />
            </div>
          ))}
          <div>
            <label className="block text-sm font-bold text-slate-700 mb-2">Email Address</label>
            <input type="email" value={session?.user?.email || ""} disabled
              className="w-full px-4 py-3 rounded-xl border-2 border-slate-100 bg-slate-50 text-slate-400 text-sm cursor-not-allowed" />
            <p className="text-xs text-slate-400 mt-1">Email cannot be changed</p>
          </div>
          <button type="submit" disabled={loading}
            className="w-full flex items-center justify-center gap-2 bg-sky-500 text-white py-3 rounded-xl font-bold hover:bg-sky-600 transition-colors disabled:opacity-50">
            {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
            {loading ? "Saving..." : "Save Changes"}
          </button>
        </form>
      </div>
    </div>
  );
}