Assist_Design/apps/portal/src/features/account/views/ProfileContainer.tsx

"use client";

import { useEffect, useState, useRef } from "react";
import { Skeleton } from "@/components/atoms/loading-skeleton";
import { AlertBanner } from "@/components/molecules/AlertBanner/AlertBanner";
import {
  MapPinIcon,
  PencilIcon,
  CheckIcon,
  XMarkIcon,
  UserIcon,
} from "@heroicons/react/24/outline";
import { useAuthStore } from "@/features/auth/services/auth.store";
import { accountService } from "@/features/account/services/account.service";
import { useProfileEdit } from "@/features/account/hooks/useProfileEdit";
import { AddressForm } from "@/features/catalog/components/base/AddressForm";
import { Button } from "@/components/atoms/button";
import { useAddressEdit } from "@/features/account/hooks/useAddressEdit";

export default function ProfileContainer() {
  const { user } = useAuthStore();
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [editingProfile, setEditingProfile] = useState(false);
  const [editingAddress, setEditingAddress] = useState(false);
  const hasLoadedRef = useRef(false);

  const profile = useProfileEdit({
    firstname: user?.firstname || "",
    lastname: user?.lastname || "",
    phonenumber: user?.phonenumber || "",
  });

  const address = useAddressEdit({
    address1: "",
    address2: "",
    city: "",
    state: "",
    postcode: "",
    country: "",
    countryCode: "",
    phoneNumber: "",
    phoneCountryCode: "",
  });

  useEffect(() => {
    // Only load data once on mount
    if (hasLoadedRef.current) return;
    hasLoadedRef.current = true;

    void (async () => {
      try {
        setLoading(true);
        const [addr, prof] = await Promise.all([
          accountService.getAddress().catch(() => null),
          accountService.getProfile().catch(() => null),
        ]);
        if (addr) {
          address.setValue("address1", addr.address1 ?? "");
          address.setValue("address2", addr.address2 ?? "");
          address.setValue("city", addr.city ?? "");
          address.setValue("state", addr.state ?? "");
          address.setValue("postcode", addr.postcode ?? "");
          address.setValue("country", addr.country ?? "");
          address.setValue("countryCode", addr.countryCode ?? "");
          address.setValue("phoneNumber", addr.phoneNumber ?? "");
          address.setValue("phoneCountryCode", addr.phoneCountryCode ?? "");
        }
        if (prof) {
          profile.setValue("firstname", prof.firstname || "");
          profile.setValue("lastname", prof.lastname || "");
          profile.setValue("phonenumber", prof.phonenumber || "");
          useAuthStore.setState(state => ({
            ...state,
            user: state.user
              ? {
                  ...state.user,
                  firstname: prof.firstname || state.user.firstname,
                  lastname: prof.lastname || state.user.lastname,
                  phonenumber: prof.phonenumber || state.user.phonenumber,
                }
              : (prof as unknown as typeof state.user),
          }));
        }
      } catch (e) {
        setError(e instanceof Error ? e.message : "Failed to load profile data");
      } finally {
        setLoading(false);
      }
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  if (loading) {
    return (
      <div className="py-6">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 md:px-8 space-y-8">
          <div className="bg-white shadow-sm rounded-xl border border-gray-200">
            <div className="px-6 py-5 border-b border-gray-200">
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-3">
                  <div className="h-6 w-6 bg-blue-200 rounded" />
                  <div className="h-6 w-40 bg-gray-200 rounded" />
                </div>
                <div className="h-8 w-20 bg-gray-200 rounded" />
              </div>
            </div>
            <div className="p-6">
              <div className="grid grid-cols-1 gap-8 sm:grid-cols-2">
                {Array.from({ length: 4 }).map((_, i) => (
                  <div key={i} className="space-y-2">
                    <Skeleton className="h-4 w-24" />
                    <Skeleton className="h-10 w-full" />
                  </div>
                ))}
                <div className="sm:col-span-2">
                  <Skeleton className="h-4 w-28 mb-3" />
                  <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
                    <div className="flex items-center justify-between">
                      <Skeleton className="h-5 w-48" />
                      <Skeleton className="h-5 w-24" />
                    </div>
                    <Skeleton className="h-3 w-64 mt-2" />
                  </div>
                </div>
              </div>
              <div className="flex items-center justify-end space-x-3 pt-6 border-t border-gray-200 mt-6">
                <Skeleton className="h-9 w-24" />
                <Skeleton className="h-9 w-28" />
              </div>
            </div>
          </div>

          <div className="bg-white shadow-sm rounded-xl border border-gray-200">
            <div className="px-6 py-5 border-b border-gray-200">
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-3">
                  <div className="h-6 w-6 bg-blue-200 rounded" />
                  <div className="h-6 w-48 bg-gray-200 rounded" />
                </div>
                <div className="h-8 w-20 bg-gray-200 rounded" />
              </div>
            </div>
            <div className="p-6">
              <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
                <div className="space-y-2">
                  <Skeleton className="h-4 w-60" />
                  <Skeleton className="h-4 w-48" />
                  <Skeleton className="h-4 w-52" />
                  <Skeleton className="h-4 w-32" />
                </div>
              </div>
              <div className="flex items-center justify-end space-x-3 pt-6">
                <Skeleton className="h-9 w-24" />
                <Skeleton className="h-9 w-28" />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="py-6">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 md:px-8">
        {error && (
          <AlertBanner variant="error" title="Error" className="mb-6">
            {error}
          </AlertBanner>
        )}

        <div className="bg-white shadow-sm rounded-xl border border-gray-200">
          <div className="px-6 py-5 border-b border-gray-200">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <UserIcon className="h-6 w-6 text-blue-600" />
                <h2 className="text-xl font-semibold text-gray-900">Personal Information</h2>
              </div>
              {!editingProfile && (
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setEditingProfile(true)}
                  leftIcon={<PencilIcon className="h-4 w-4" />}
                >
                  Edit
                </Button>
              )}
            </div>
          </div>

          <div className="p-6">
            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">First Name</label>
                {editingProfile ? (
                  <input
                    type="text"
                    value={profile.values.firstname}
                    onChange={e => profile.setValue("firstname", e.target.value)}
                    className="block w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                  />
                ) : (
                  <p className="text-base text-gray-900 py-2">
                    {user?.firstname || <span className="text-gray-500 italic">Not provided</span>}
                  </p>
                )}
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Last Name</label>
                {editingProfile ? (
                  <input
                    type="text"
                    value={profile.values.lastname}
                    onChange={e => profile.setValue("lastname", e.target.value)}
                    className="block w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                  />
                ) : (
                  <p className="text-base text-gray-900 py-2">
                    {user?.lastname || <span className="text-gray-500 italic">Not provided</span>}
                  </p>
                )}
              </div>
              <div className="sm:col-span-2">
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Email Address
                </label>
                <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
                  <div className="flex items-center justify-between">
                    <p className="text-base text-gray-900 font-medium">{user?.email}</p>
                  </div>
                  <p className="text-xs text-gray-500 mt-2">
                    Email cannot be changed from the portal.
                  </p>
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Phone Number</label>
                {editingProfile ? (
                  <input
                    type="tel"
                    value={profile.values.phonenumber}
                    onChange={e => profile.setValue("phonenumber", e.target.value)}
                    placeholder="+81 XX-XXXX-XXXX"
                    className="block w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                  />
                ) : (
                  <p className="text-base text-gray-900 py-2">
                    {user?.phonenumber || (
                      <span className="text-gray-500 italic">Not provided</span>
                    )}
                  </p>
                )}
              </div>
            </div>

            {editingProfile && (
              <div className="flex items-center justify-end space-x-3 pt-6 border-t border-gray-200 mt-6">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setEditingProfile(false)}
                  disabled={profile.isSubmitting}
                  leftIcon={<XMarkIcon className="h-4 w-4" />}
                >
                  Cancel
                </Button>
                <Button
                  size="sm"
                  onClick={() => {
                    void profile
                      .handleSubmit()
                      .then(() => {
                        setEditingProfile(false);
                      })
                      .catch(() => {
                        // Error is handled by useZodForm
                      });
                  }}
                  isLoading={profile.isSubmitting}
                  leftIcon={!profile.isSubmitting ? <CheckIcon className="h-4 w-4" /> : undefined}
                >
                  {profile.isSubmitting ? "Saving..." : "Save Changes"}
                </Button>
              </div>
            )}
          </div>
        </div>

        <div className="bg-white shadow-sm rounded-xl border border-gray-200 mt-8">
          <div className="px-6 py-5 border-b border-gray-200">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <MapPinIcon className="h-6 w-6 text-blue-600" />
                <h2 className="text-xl font-semibold text-gray-900">Address Information</h2>
              </div>
              {!editingAddress && (
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setEditingAddress(true)}
                  leftIcon={<PencilIcon className="h-4 w-4" />}
                >
                  Edit
                </Button>
              )}
            </div>
          </div>

          <div className="p-6">
            {editingAddress ? (
              <div className="space-y-6">
                <AddressForm
                  initialAddress={{
                    address1: address.values.address1,
                    address2: address.values.address2,
                    city: address.values.city,
                    state: address.values.state,
                    postcode: address.values.postcode,
                    country: address.values.country,
                    countryCode: address.values.countryCode,
                    phoneNumber: address.values.phoneNumber,
                    phoneCountryCode: address.values.phoneCountryCode,
                  }}
                  onChange={a => {
                    address.setValue("address1", a.address1 ?? "");
                    address.setValue("address2", a.address2 ?? "");
                    address.setValue("city", a.city ?? "");
                    address.setValue("state", a.state ?? "");
                    address.setValue("postcode", a.postcode ?? "");
                    address.setValue("country", a.country ?? "");
                    address.setValue("countryCode", a.countryCode ?? "");
                    address.setValue("phoneNumber", a.phoneNumber ?? "");
                    address.setValue("phoneCountryCode", a.phoneCountryCode ?? "");
                  }}
                  title="Mailing Address"
                />
                <div className="flex items-center justify-end space-x-3 pt-2">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setEditingAddress(false)}
                    disabled={address.isSubmitting}
                    leftIcon={<XMarkIcon className="h-4 w-4" />}
                  >
                    Cancel
                  </Button>
                  <Button
                    size="sm"
                    onClick={() => {
                      void address
                        .handleSubmit()
                        .then(() => {
                          setEditingAddress(false);
                        })
                        .catch(() => {
                          // Error is handled by useZodForm
                        });
                    }}
                    isLoading={address.isSubmitting}
                    leftIcon={!address.isSubmitting ? <CheckIcon className="h-4 w-4" /> : undefined}
                  >
                    {address.isSubmitting ? "Saving..." : "Save Address"}
                  </Button>
                </div>
                {address.submitError && (
                  <AlertBanner variant="error" title="Address Error">
                    {address.submitError}
                  </AlertBanner>
                )}
              </div>
            ) : (
              <div>
                {address.values.address1 || address.values.city ? (
                  <div className="bg-gray-50 rounded-lg p-5 border border-gray-200">
                    <div className="text-gray-900 space-y-1.5">
                      {address.values.address1 && (
                        <p className="font-medium text-base">{address.values.address1}</p>
                      )}
                      {address.values.address2 && (
                        <p className="text-gray-700">{address.values.address2}</p>
                      )}
                      <p className="text-gray-700">
                        {[address.values.city, address.values.state, address.values.postcode]
                          .filter(Boolean)
                          .join(", ")}
                      </p>
                      <p className="text-gray-700">{address.values.country}</p>
                    </div>
                  </div>
                ) : (
                  <div className="text-center py-12">
                    <MapPinIcon className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                    <p className="text-gray-600 mb-4">No address on file</p>
                    <Button
                      onClick={() => setEditingAddress(true)}
                      leftIcon={<PencilIcon className="h-4 w-4" />}
                    >
                      Add Address
                    </Button>
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}