"use client";

import { MapPinIcon, PencilIcon, CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { AddressForm, type AddressFormProps } from "@/features/services/components";
import type { Address } from "@customer-portal/domain/customer";
import { Button } from "@/components/atoms/button";
import { AlertBanner } from "@/components/molecules/AlertBanner/AlertBanner";
import { getCountryName } from "@/shared/constants";

function AddressDisplay({ address }: { address: Address }) {
  const primaryLine = address.address2 || address.address1;
  const secondaryLine = address.address2 && address.address1 ? address.address1 : null;
  const cityStateZip = [address.city, address.state, address.postcode].filter(Boolean).join(", ");
  const countryLabel = address.country
    ? (getCountryName(address.country) ?? address.country)
    : null;

  return (
    <div className="bg-card rounded-lg p-5 border border-border shadow-sm">
      <div className="text-foreground space-y-1.5">
        {primaryLine && <p className="font-medium text-base">{primaryLine}</p>}
        {secondaryLine && <p className="text-muted-foreground">{secondaryLine}</p>}
        {cityStateZip && <p className="text-muted-foreground">{cityStateZip}</p>}
        {countryLabel && <p className="text-muted-foreground">{countryLabel}</p>}
      </div>
    </div>
  );
}

function EmptyAddressState({ onEdit }: { onEdit: () => void }) {
  return (
    <div className="text-center py-12">
      <MapPinIcon className="h-12 w-12 text-muted-foreground/60 mx-auto mb-4" />
      <p className="text-muted-foreground mb-4">No address on file</p>
      <Button onClick={onEdit} leftIcon={<PencilIcon className="h-4 w-4" />}>
        Add Address
      </Button>
    </div>
  );
}

interface AddressCardProps {
  address: Address;
  isEditing: boolean;
  isSaving: boolean;
  error?: string | null;
  onEdit: () => void;
  onCancel: () => void;
  onSave: () => void;
  onAddressChange: NonNullable<AddressFormProps["onChange"]>;
}

export function AddressCard({
  address,
  isEditing,
  isSaving,
  error,
  onEdit,
  onCancel,
  onSave,
  onAddressChange,
}: AddressCardProps) {
  const hasAddress = Boolean(address.address1 || address.city);

  return (
    <div className="bg-card text-card-foreground rounded-xl border border-border shadow-[var(--cp-shadow-1)]">
      <div className="px-6 py-5 border-b border-border">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <MapPinIcon className="h-6 w-6 text-primary" />
            <h2 className="text-xl font-semibold text-foreground">Address Information</h2>
          </div>
          {!isEditing && hasAddress && (
            <Button
              variant="outline"
              size="sm"
              onClick={onEdit}
              leftIcon={<PencilIcon className="h-4 w-4" />}
            >
              Edit
            </Button>
          )}
        </div>
      </div>

      <div className="p-6">
        {isEditing ? (
          <div className="space-y-6">
            <AddressForm
              initialAddress={{
                address1: address.address1,
                address2: address.address2,
                city: address.city,
                state: address.state,
                postcode: address.postcode,
                country: address.country,
                countryCode: address.countryCode,
                phoneNumber: address.phoneNumber,
                phoneCountryCode: address.phoneCountryCode,
              }}
              onChange={addr => onAddressChange(addr, true)}
              title="Mailing Address"
            />
            <div className="flex items-center justify-end space-x-3 pt-2">
              <Button
                variant="outline"
                size="sm"
                onClick={onCancel}
                disabled={isSaving}
                leftIcon={<XMarkIcon className="h-4 w-4" />}
              >
                Cancel
              </Button>
              <Button
                size="sm"
                onClick={onSave}
                isLoading={isSaving}
                leftIcon={isSaving ? undefined : <CheckIcon className="h-4 w-4" />}
              >
                {isSaving ? "Saving..." : "Save Address"}
              </Button>
            </div>
            {error && (
              <AlertBanner variant="error" title="Address Error">
                {error}
              </AlertBanner>
            )}
          </div>
        ) : hasAddress ? (
          <AddressDisplay address={address} />
        ) : (
          <EmptyAddressState onEdit={onEdit} />
        )}
      </div>
    </div>
  );
}
