'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { useTranslations } from 'next-intl';
import { addressApi, type CustomerAddressRow } from '@/lib/api';
import type { UseFormSetValue } from 'react-hook-form';

type AddressFields = {
  address_line: string;
  building?: string;
  floor?: string;
  apartment?: string;
  landmark?: string;
  recipient_name: string;
  recipient_phone_e164: string;
  governorate_id?: number | string;
  city_id?: number | string;
};

interface SavedAddressPickerProps {
  locale: string;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  setValue: UseFormSetValue<any>;
  onSelectionChange?: (address: CustomerAddressRow | null) => void;
}

export function SavedAddressPicker({ locale, setValue, onSelectionChange }: SavedAddressPickerProps) {
  const t = useTranslations('checkout.event');
  const [addresses, setAddresses] = useState<CustomerAddressRow[]>([]);
  const [loadError, setLoadError] = useState(false);

  const loadAddresses = () => {
    setLoadError(false);
    addressApi.list(locale).then(setAddresses).catch(() => setLoadError(true));
  };

  useEffect(() => {
    loadAddresses();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [locale]);

  if (loadError) {
    return (
      <div className="mb-3 rounded-lg border border-danger/20 bg-danger/5 px-4 py-3 text-sm text-danger flex items-center justify-between gap-3">
        <span>{t('error_generic')}</span>
        <button
          type="button"
          onClick={loadAddresses}
          className="shrink-0 font-medium underline hover:no-underline focus:outline-none"
        >
          {t('use_saved_address')}
        </button>
      </div>
    );
  }

  if (addresses.length === 0) {
    return (
      <div className="mb-3 rounded-lg border border-neutral-200 bg-neutral-50 px-4 py-3 text-sm text-neutral-600 flex items-center justify-between gap-3">
        <span>{t('no_saved_addresses')}</span>
        <Link href={`/${locale}/me/addresses`} className="shrink-0 font-medium text-primary-600 hover:underline">
          {t('add_first_address')}
        </Link>
      </div>
    );
  }

  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const val = e.target.value;

    // "new" sentinel means the user chose to enter a new address manually
    if (val === '' || val === '__new__') {
      onSelectionChange?.(null);
      return;
    }

    const addr = addresses.find((a) => a.public_id === val);
    if (!addr) {
      onSelectionChange?.(null);
      return;
    }

    const fields: AddressFields = {
      address_line: addr.address_line,
      building: addr.building ?? undefined,
      floor: addr.floor ?? undefined,
      apartment: addr.apartment ?? undefined,
      landmark: addr.landmark ?? undefined,
      recipient_name: addr.recipient_name,
      recipient_phone_e164: addr.recipient_phone_e164,
      governorate_id: addr.governorate_id,
      city_id: addr.city_id,
    };
    (Object.entries(fields) as [keyof AddressFields, string | undefined][]).forEach(([key, fval]) => {
      if (fval !== undefined) setValue(key, fval, { shouldValidate: true });
    });

    onSelectionChange?.(addr);
  };

  return (
    <div className="mb-3">
      <label className="block">
        <span className="mb-1 block text-xs font-medium">{t('use_saved_address')}</span>
        <select onChange={handleChange} defaultValue="" className="input">
          <option value="" disabled>
            {t('select_address')}
          </option>
          {addresses.map((a) => (
            <option key={a.public_id} value={a.public_id}>
              {a.label} — {a.address_line}
            </option>
          ))}
          <option value="__new__">{t('enter_new_address')}</option>
        </select>
      </label>
    </div>
  );
}