"use client";

import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { useAuth } from "@/context/AuthContext";

export default function ProfilePage() {
  const { user, loading, logout } = useAuth();
  const router = useRouter();

  useEffect(() => {
    if (!loading && !user) {
      router.replace("/login");
    }
  }, [user, loading, router]);

  function handleLogout() {
    logout();

    router.push("/");
  }

  if (loading || !user) {
    return <main className="auth-page"><p className="profile-loading">Loading…</p></main>;
  }

  const fields = [
    {label: "Full Name", value: user.fullName},
    {label: "Username", value: user.username},
    {label: "Email", value: user.email},
    {label: "Phone", value: user.phone || "—"},
    {label: "Role", value: user.role},
    ...(user.storeName ? [{label: "Store", value: user.storeName}] : []),
  ];

  return (
    <main className="auth-page">
      <div className="profile-card">
        <div className="profile-avatar-circle">
          {(user.fullName || user.username).charAt(0).toUpperCase()}
        </div>

        <h1 className="profile-name">{user.fullName || user.username}</h1>
        <span className="profile-role-badge">{user.role}</span>

        <dl className="profile-fields">
          {fields.map(({ label, value }) => (
            <div key={label} className="profile-field-row">
              <dt className="profile-field-label">{label}</dt>
              <dd className="profile-field-value">{value}</dd>
            </div>
          ))}
        </dl>

        <button className="auth-submit-btn profile-logout-btn" onClick={handleLogout}>
          Log Out
        </button>
      </div>
    </main>
  );
}