import Layout from "@/Layout/Dashboard/Layout";
import React from "react";

interface ProfilePageProps {
  user: {
    firstName: string;
    lastName: string;
    email: string;
    phoneNumber: string;
    status?: string;
    profilePicture?: string;
    createdAt?: string;
    [key: string]: any;
  };
}

const formatDate = (dateString?: string) => {
  if (!dateString) return "-";
  const date = new Date(dateString);
  const day = String(date.getDate()).padStart(2, "0");
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const year = date.getFullYear();
  return `${day}-${month}-${year}`;
};

const ProfilePage: React.FC<ProfilePageProps> = ({ user }) => {
  console.log(user.WalletStatus);

  return (
    <Layout>
      <div className="max-w-2xl mx-auto bg-[var(--glass-bg)] rounded-xl shadow-lg p-8 mt-10">
        <div className="flex flex-col items-center">
          <img
            src={
              user.profilePicture
                ? `${process.env.NEXT_PUBLIC_PORT}/${user.profilePicture}`
                : "/assets/icons/user-placeholder.svg"
            }
            alt="Profile"
            className="w-32 h-32 rounded-full object-cover border-4 border-[var(--primary-theme-color)] mb-4"
          />
          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-1">
            {user.firstName} {user.lastName}
          </h2>
          <p className="text-gray-500 dark:text-gray-300 mb-4">
            {user.status || "Active"}
          </p>
        </div>
        <div className="mt-6 space-y-4">
          <div className="flex justify-between">
            <span className="font-medium text-gray-700 dark:text-gray-200">
              First Name:
            </span>
            <span className="text-gray-900 dark:text-white">
              {user.firstName}
            </span>
          </div>
          <div className="flex justify-between">
            <span className="font-medium text-gray-700 dark:text-gray-200">
              Last Name:
            </span>
            <span className="text-gray-900 dark:text-white">
              {user.lastName}
            </span>
          </div>
          <div className="flex justify-between">
            <span className="font-medium text-gray-700 dark:text-gray-200">
              Email:
            </span>
            <span className="text-gray-900 dark:text-white">{user.email}</span>
          </div>
          <div className="flex justify-between">
            <span className="font-medium text-gray-700 dark:text-gray-200">
              Phone:
            </span>
            <span className="text-gray-900 dark:text-white">
              {user.phoneNumber}
            </span>
          </div>
          <div className="flex justify-between">
            <span className="font-medium text-gray-700 dark:text-gray-200">
              Joined:
            </span>
            <span className="text-gray-900 dark:text-white">
              {formatDate(user.createdAt)}
            </span>
          </div>
          <div className="flex justify-between">
            <span className="font-medium text-gray-700 dark:text-gray-200">
              Wallet Status:
            </span>
            <span className="text-gray-900 dark:text-white">
              {user.WalletStatus ? "Active" : "Inactive"}
            </span>
          </div>
          <div className="flex justify-between">
            <span className="font-medium text-gray-700 dark:text-gray-200">
              Plan Type:
            </span>
            <span className="text-gray-900 dark:text-white">
              {user.planType}
            </span>
          </div>
          <div className="flex justify-between">
            <span className="font-medium text-gray-700 dark:text-gray-200">
              Two Step Verification:
            </span>
            <span className="text-gray-900 dark:text-white">
              {user.twoFactorVerification ? "Verified" : "Not Verified"}
            </span>
          </div>
        </div>
      </div>
    </Layout>
  );
};

export default ProfilePage;