Assist_Design/apps/portal/src/features/account/containers/Profile.tsx

"use client";

import { useState } from "react";
import { PageLayout } from "@/components/layout/PageLayout";
import { useAuthStore } from "@/features/auth/services/auth.store";
import { useProfileData } from "../hooks/useProfileData";
import { PersonalInfoCard } from "../components/PersonalInfoCard";
import { AddressCard } from "../components/AddressCard";
import { PasswordChangeCard } from "../components/PasswordChangeCard";

export function ProfileContainer() {
  const { user } = useAuthStore();
  const {
    // loading,
    error,
    // billingInfo,
    formData,
    setFormData,
    addressData,
    setAddressData,
    saveProfile,
    saveAddress,
    isSavingProfile,
    isSavingAddress,
  } = useProfileData();

  const [isEditingInfo, setIsEditingInfo] = useState(false);
  const [isEditingAddress, setIsEditingAddress] = useState(false);

  const [pwdError, setPwdError] = useState<string | null>(null);
  const [pwdSuccess, setPwdSuccess] = useState<string | null>(null);
  const [isChangingPassword, setIsChangingPassword] = useState(false);
  const [pwdForm, setPwdForm] = useState({
    currentPassword: "",
    newPassword: "",
    confirmPassword: "",
  });

  const handleChangePassword = async () => {
    setIsChangingPassword(true);
    setPwdError(null);
    setPwdSuccess(null);
    try {
      if (!pwdForm.currentPassword || !pwdForm.newPassword) {
        setPwdError("Please fill in all password fields");
        return;
      }
      if (pwdForm.newPassword !== pwdForm.confirmPassword) {
        setPwdError("New password and confirmation do not match");
        return;
      }
      await useAuthStore.getState().changePassword({
        currentPassword: pwdForm.currentPassword,
        newPassword: pwdForm.newPassword,
        confirmPassword: pwdForm.newPassword,
      });
      setPwdSuccess("Password changed successfully.");
      setPwdForm({ currentPassword: "", newPassword: "", confirmPassword: "" });
    } catch (err) {
      setPwdError(err instanceof Error ? err.message : "Failed to change password");
    } finally {
      setIsChangingPassword(false);
    }
  };

  return (
    <PageLayout
      title={user?.firstName ? `${user.firstName} ${user.lastName || ""}` : "Profile"}
      description="Manage your personal information and address"
      icon={<></>}
    >
      <div className="space-y-8">
        <PersonalInfoCard
          data={formData}
          isEditing={isEditingInfo}
          isSaving={isSavingProfile}
          onEdit={() => setIsEditingInfo(true)}
          onCancel={() => setIsEditingInfo(false)}
          onChange={(field, value) => setFormData(prev => ({ ...prev, [field]: value }))}
          onSave={() => {
            void saveProfile(formData).then(ok => {
              if (ok) setIsEditingInfo(false);
            });
          }}
        />

        <AddressCard
          address={addressData}
          isEditing={isEditingAddress}
          isSaving={isSavingAddress}
          error={error}
          onEdit={() => setIsEditingAddress(true)}
          onCancel={() => setIsEditingAddress(false)}
          onSave={() => {
            void saveAddress(addressData).then(ok => {
              if (ok) setIsEditingAddress(false);
            });
          }}
          onAddressChange={addr => setAddressData(addr)}
        />

        <PasswordChangeCard
          isChanging={isChangingPassword}
          error={pwdError}
          success={pwdSuccess}
          form={pwdForm}
          setForm={next => setPwdForm(prev => ({ ...prev, ...next }))}
          onSubmit={() => {
            void handleChangePassword();
          }}
        />
      </div>
    </PageLayout>
  );
}