/**
 * AddressFieldset
 *
 * Reusable controlled fieldset for the domain Address type. Pure presentation:
 * renders labeled inputs for street / zip / city / country and bubbles changes
 * via onChange(next). The parent owns the value and any save logic, which is
 * why this component is decoupled from any mutation / edit-toggle concerns.
 *
 * Consumed by:
 *   - CompanySettingsPage (inside the big company form)
 *   - PersonalAddressSection (dedicated personal-account edit surface)
 *
 * (c) 2026 TWWIM UG. All rights reserved. (www.twwim.com)
 */

import type { Address } from '@archer/domain';
import { CurrencyResolver, Channel } from '@archer/domain';
import { useTranslation } from '@/i18n/TranslationProvider';
import { CountrySelect } from '@archer/ui/components';

interface Props {
  value: Address;
  onChange: (next: Address) => void;
  disabled?: boolean;
  /** When true, render a red asterisk after each visible label to mark the
   *  fields as Pflichtangaben. The component itself does not enforce
   *  required at HTML level — the parent form decides validation. */
  required?: boolean;
  /** Override input class to match host styling if needed. */
  inputClassName?: string;
}

const DEFAULT_INPUT_CLASS =
  'w-full px-3 py-2.5 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50';

export function AddressFieldset({ value, onChange, disabled, required, inputClassName }: Props) {
  const { t } = useTranslation();
  const cls = inputClassName ?? DEFAULT_INPUT_CLASS;
  const patch = (p: Partial<Address>) => onChange({ ...value, ...p });
  const star = required ? <span className="text-destructive"> *</span> : null;

  return (
    <>
      <div>
        <label htmlFor="addr-street" className="block text-sm font-medium text-foreground mb-1">
          {t('address.street')}{star}
        </label>
        <input
          id="addr-street"
          data-testid="address-street"
          type="text"
          value={value.street ?? ''}
          onChange={e => patch({ street: e.target.value })}
          disabled={disabled}
          required={required}
          className={cls}
        />
      </div>
      <div className="grid grid-cols-3 gap-4">
        <div>
          <label htmlFor="addr-zip" className="block text-sm font-medium text-foreground mb-1">
            {t('address.zip')}{star}
          </label>
          <input
            id="addr-zip"
            data-testid="address-zip"
            type="text"
            value={value.zip ?? ''}
            onChange={e => patch({ zip: e.target.value })}
            disabled={disabled}
            required={required}
            className={cls}
          />
        </div>
        <div>
          <label htmlFor="addr-city" className="block text-sm font-medium text-foreground mb-1">
            {t('address.city')}{star}
          </label>
          <input
            id="addr-city"
            data-testid="address-city"
            type="text"
            value={value.city ?? ''}
            onChange={e => patch({ city: e.target.value })}
            disabled={disabled}
            required={required}
            className={cls}
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-foreground mb-1">
            {t('address.country')}{star}
          </label>
          <div className="flex items-center gap-2">
            <div className="flex-1 min-w-0">
              <CountrySelect
                value={value.country ?? ''}
                onChange={(code) => patch({ country: code })}
                disabled={disabled}
                placeholder={t('address.countryPlaceholder')}
              />
            </div>
            {/* Resolved billing currency preview — driven by the same domain
                service the backend uses at registration. Informational only:
                a company's actual preferredCurrency is managed on the
                Billing currency card (this tag just previews what the rule
                would pick for the selected country). */}
            {value.country && (
              <span
                className="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold bg-primary/10 text-primary whitespace-nowrap"
                title={t('address.countryCurrencyHint') || 'Resolved billing currency for this country'}
              >
                → {CurrencyResolver.resolve({ countryCode: value.country, channel: Channel.WEBSITE })}
              </span>
            )}
          </div>
        </div>
      </div>
    </>
  );
}