Assist_Design/apps/portal/src/components/checkout/address-confirmation.tsx

"use client";

import { useState, useEffect, useCallback } from "react";
import { authenticatedApi } from "@/lib/api";
import {
  MapPinIcon,
  PencilIcon,
  CheckIcon,
  XMarkIcon,
  ExclamationTriangleIcon,
} from "@heroicons/react/24/outline";

interface Address {
  street: string | null;
  streetLine2: string | null;
  city: string | null;
  state: string | null;
  postalCode: string | null;
  country: string | null;
}

interface BillingInfo {
  company: string | null;
  email: string;
  phone: string | null;
  address: Address;
  isComplete: boolean;
}

interface AddressConfirmationProps {
  onAddressConfirmed: (address?: Address) => void;
  onAddressIncomplete: () => void;
  orderType?: string; // Add order type to customize behavior
}

export function AddressConfirmation({
  onAddressConfirmed,
  onAddressIncomplete,
  orderType,
}: AddressConfirmationProps) {
  const [billingInfo, setBillingInfo] = useState<BillingInfo | null>(null);
  const [loading, setLoading] = useState(true);
  const [editing, setEditing] = useState(false);
  const [editedAddress, setEditedAddress] = useState<Address | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [addressConfirmed, setAddressConfirmed] = useState(false);

  const isInternetOrder = orderType === "Internet";
  const requiresAddressVerification = isInternetOrder;

  const fetchBillingInfo = useCallback(async () => {
    try {
      setLoading(true);
      const data = await authenticatedApi.get<BillingInfo>("/me/billing");
      setBillingInfo(data);

      // Since address is required at signup, it should always be complete
      // But we still need verification for Internet orders
      if (requiresAddressVerification) {
        // For Internet orders, don't auto-confirm - require explicit verification
        setAddressConfirmed(false);
        onAddressIncomplete(); // Keep disabled until explicitly confirmed
      } else {
        // For other order types, auto-confirm since address exists from signup
        onAddressConfirmed(data.address);
        setAddressConfirmed(true);
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to load address");
    } finally {
      setLoading(false);
    }
  }, [requiresAddressVerification, onAddressIncomplete, onAddressConfirmed]);

  useEffect(() => {
    void fetchBillingInfo();
  }, [fetchBillingInfo]);

  const handleEdit = () => {
    setEditing(true);
    setEditedAddress(
      billingInfo?.address || {
        street: "",
        streetLine2: "",
        city: "",
        state: "",
        postalCode: "",
        country: "",
      }
    );
  };

  const handleSave = () => {
    if (!editedAddress) return;

    // Validate required fields
    const isComplete = !!(
      editedAddress.street?.trim() &&
      editedAddress.city?.trim() &&
      editedAddress.state?.trim() &&
      editedAddress.postalCode?.trim() &&
      editedAddress.country?.trim()
    );

    if (!isComplete) {
      setError("Please fill in all required address fields");
      return;
    }

    try {
      setError(null);
      // Use the edited address for the order (will be flagged as changed)
      onAddressConfirmed(editedAddress);
      setEditing(false);
      setAddressConfirmed(true);

      // Update local state to show the new address
      if (billingInfo) {
        setBillingInfo({
          ...billingInfo,
          address: editedAddress,
          isComplete: true,
        });
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to update address");
    }
  };

  const handleConfirmAddress = () => {
    if (billingInfo?.address) {
      onAddressConfirmed(billingInfo.address);
      setAddressConfirmed(true);
    }
  };

  const handleCancel = () => {
    setEditing(false);
    setEditedAddress(null);
    setError(null);
  };

  if (loading) {
    return (
      <div className="bg-white border rounded-xl p-6 mb-6">
        <div className="flex items-center space-x-3">
          <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600"></div>
          <span className="text-gray-600">Loading address information...</span>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="bg-red-50 border border-red-200 rounded-xl p-6 mb-6">
        <div className="flex items-start space-x-3">
          <ExclamationTriangleIcon className="h-5 w-5 text-red-500 mt-0.5 flex-shrink-0" />
          <div>
            <h3 className="text-sm font-medium text-red-800">Address Error</h3>
            <p className="text-sm text-red-700 mt-1">{error}</p>
            <button
              onClick={() => void fetchBillingInfo()}
              className="text-sm text-red-600 hover:text-red-500 font-medium mt-2"
            >
              Try Again
            </button>
          </div>
        </div>
      </div>
    );
  }

  if (!billingInfo) return null;

  return (
    <div className="bg-white border rounded-xl p-6 mb-6">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center space-x-3">
          <MapPinIcon className="h-5 w-5 text-blue-600" />
          <h3 className="text-lg font-semibold text-gray-900">
            {isInternetOrder
              ? "Verify Installation Address"
              : billingInfo.isComplete
                ? "Confirm Service Address"
                : "Complete Your Address"}
          </h3>
        </div>
        {billingInfo.isComplete && !editing && (
          <button
            onClick={handleEdit}
            className="flex items-center space-x-2 text-blue-600 hover:text-blue-700 text-sm font-medium"
          >
            <PencilIcon className="h-4 w-4" />
            <span>Edit</span>
          </button>
        )}
      </div>

      {/* Address should always be complete since it's required at signup */}

      {isInternetOrder && !addressConfirmed && (
        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
          <div className="flex items-start space-x-3">
            <MapPinIcon className="h-5 w-5 text-blue-500 mt-0.5 flex-shrink-0" />
            <div>
              <p className="text-sm text-blue-800">
                <strong>Internet Installation Address Verification Required</strong>
              </p>
              <p className="text-sm text-blue-700 mt-1">
                Please verify this is the correct address for your internet installation. A
                technician will visit this location for setup.
              </p>
            </div>
          </div>
        </div>
      )}

      {editing ? (
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Street Address *</label>
            <input
              type="text"
              value={editedAddress?.street || ""}
              onChange={e => {
                setError(null); // Clear error on input
                setEditedAddress(prev => (prev ? { ...prev, street: e.target.value } : null));
              }}
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              placeholder="123 Main Street"
              required
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Street Address Line 2
            </label>
            <input
              type="text"
              value={editedAddress?.streetLine2 || ""}
              onChange={e => {
                setError(null);
                setEditedAddress(prev => (prev ? { ...prev, streetLine2: e.target.value } : null));
              }}
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="Apartment, suite, etc. (optional)"
            />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">City *</label>
              <input
                type="text"
                value={editedAddress?.city || ""}
                onChange={e => {
                  setError(null);
                  setEditedAddress(prev => (prev ? { ...prev, city: e.target.value } : null));
                }}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                placeholder="Tokyo"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                State/Prefecture *
              </label>
              <input
                type="text"
                value={editedAddress?.state || ""}
                onChange={e => {
                  setError(null);
                  setEditedAddress(prev => (prev ? { ...prev, state: e.target.value } : null));
                }}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                placeholder="Tokyo"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Postal Code *</label>
              <input
                type="text"
                value={editedAddress?.postalCode || ""}
                onChange={e => {
                  setError(null);
                  setEditedAddress(prev => (prev ? { ...prev, postalCode: e.target.value } : null));
                }}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                placeholder="100-0001"
              />
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Country *</label>
            <select
              value={editedAddress?.country || ""}
              onChange={e => {
                setError(null);
                setEditedAddress(prev => (prev ? { ...prev, country: e.target.value } : null));
              }}
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <option value="">Select Country</option>
              <option value="JP">Japan</option>
              <option value="US">United States</option>
              <option value="GB">United Kingdom</option>
              <option value="CA">Canada</option>
              <option value="AU">Australia</option>
            </select>
          </div>

          <div className="flex items-center space-x-3 pt-4">
            <button
              onClick={handleSave}
              className="flex items-center space-x-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
            >
              <CheckIcon className="h-4 w-4" />
              <span>Save Address</span>
            </button>
            <button
              onClick={handleCancel}
              className="flex items-center space-x-2 bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200 transition-colors"
            >
              <XMarkIcon className="h-4 w-4" />
              <span>Cancel</span>
            </button>
          </div>
        </div>
      ) : (
        <div>
          {billingInfo.address.street ? (
            <div className="bg-gray-50 rounded-lg p-4">
              <div className="text-gray-900">
                <p className="font-medium">{billingInfo.address.street}</p>
                {billingInfo.address.streetLine2 && <p>{billingInfo.address.streetLine2}</p>}
                <p>
                  {billingInfo.address.city}, {billingInfo.address.state}{" "}
                  {billingInfo.address.postalCode}
                </p>
                <p>{billingInfo.address.country}</p>
              </div>

              {/* Address Confirmation for Internet Orders */}
              {isInternetOrder && !addressConfirmed && (
                <div className="mt-4 pt-4 border-t border-gray-200">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-2">
                      <ExclamationTriangleIcon className="h-4 w-4 text-amber-500" />
                      <span className="text-sm text-amber-700 font-medium">
                        Verification Required
                      </span>
                    </div>
                    <button
                      onClick={handleConfirmAddress}
                      className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors font-medium"
                    >
                      ✓ Confirm Installation Address
                    </button>
                  </div>
                </div>
              )}

              {/* Address Confirmed Status */}
              {addressConfirmed && (
                <div className="mt-4 pt-4 border-t border-gray-200">
                  <div className="flex items-center space-x-2">
                    <CheckIcon className="h-4 w-4 text-green-500" />
                    <span className="text-sm text-green-700 font-medium">
                      {isInternetOrder ? "Installation Address Confirmed" : "Address Confirmed"}
                    </span>
                  </div>
                </div>
              )}
            </div>
          ) : (
            <div className="text-center py-8">
              <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={handleEdit}
                className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
              >
                Add Address
              </button>
            </div>
          )}
        </div>
      )}
    </div>
  );
}