'use client';

import {
  useActionState,
  useEffect,
  useRef,
  useState,
  useTransition,
} from 'react';
import { FoxButton } from '@fox/core/components/fox-button';
import { FoxFormLabel } from '@fox/core/components/fox-form-label';
import { FoxHelperText } from '@fox/core/components/fox-helper-text';
import { FoxInput } from '@fox/core/components/fox-input';
import { FoxModal } from '@fox/core/components/fox-modal';
import { FoxRadio } from '@fox/core/components/fox-radio';
import { FoxRadioGroup } from '@fox/core/components/fox-radio-group';
import { FoxSelect } from '@fox/core/components/fox-select';
import { submitFormAction } from '@/app/_hooks/submit-form-action';
import { useFeedback } from '@/app/_hooks/use-feedback';
import {
  DEFAULT_MERCHANT_DIVISION_CODE,
  formatOptionalValue,
  type Merchant,
  type MerchantCodeTables,
} from '@/lib/domain/merchant';
import {
  ADDRESS_DETAIL_MAX_LENGTH,
  INITIAL_MERCHANT_FORM_STATE,
  MEMO_MAX_LENGTH,
  NAME_MAX_LENGTH,
  ACCOUNT_NUMBER_MAX_LENGTH,
  OWNER_MAX_LENGTH,
} from '@/lib/domain/merchant-form';
import { saveMerchantAction } from '../_actions';
import { openPostcodeSearch } from '@/app/_components/postcode';
import styles from './merchant-form.module.scss';

interface MerchantFormModalProps {
  merchant?: Merchant;
  /** 업종·업태·구분·은행 코드표 — 선택지. */
  codeTables: MerchantCodeTables;
  onClose: () => void;
}

/**
 * 가맹몰(가맹점) 등록·수정 모달 — 기획 MCH_002_p·MCH_003_p. 모든 항목을 고칠 수 있다(사용자 확정).
 * 요청은 백엔드 `MngrVocInsertReqVo`/`MngrVocUpdateReqVo`대로 보낸다 — 지금은 BizPlay(웹캐시)로
 * 위임되고 곧 우리 DB 저장으로 바뀐다.
 */
export function MerchantFormModal({ merchant, codeTables, onClose }: MerchantFormModalProps) {
  const isEdit = Boolean(merchant);
  const { showToast } = useFeedback();
  const formRef = useRef<HTMLFormElement>(null);
  const [state, formAction, isPending] = useActionState(
    saveMerchantAction,
    INITIAL_MERCHANT_FORM_STATE
  );

  const [categoryCode, setCategoryCode] = useState(merchant?.categoryCode ?? '');
  const [businessStatusCode, setBusinessStatusCode] = useState(merchant?.businessStatusCode ?? '');
  const [divisionCode, setDivisionCode] = useState(
    merchant?.divisionCode || DEFAULT_MERCHANT_DIVISION_CODE
  );
  const [bankCode, setBankCode] = useState('');
  // 조회 응답에 useYn이 없어 기존 가맹점은 값을 모른다 — 그때는 어느 쪽도 고르지 않는다.
  // 신규 등록만 「노출」로 시작한다.
  const [isVisible, setIsVisible] = useState<boolean | null>(
    merchant === undefined ? true : merchant.isVisible
  );
  // 주소·우편번호는 검색으로 채우거나 직접 고친다. 좌표는 검색 결과만 채운다.
  const [address, setAddress] = useState(merchant?.address ?? '');
  const [postalCode, setPostalCode] = useState(merchant?.postalCode ?? '');
  const [latitude, setLatitude] = useState(merchant?.latitude ?? '');
  const [longitude, setLongitude] = useState(merchant?.longitude ?? '');
  const [isSearching, startSearching] = useTransition();

  useEffect(() => {
    if (state.status === 'success') {
      showToast({
        variant: 'success',
        message: isEdit ? '가맹점을 수정했습니다.' : '가맹점을 등록했습니다.',
      });
      onClose();
      return;
    }

    // 칸별 오류는 해당 입력칸에 그대로 두고, 폼 전체에 걸린 사유만 토스트로 알린다 —
    // 긴 폼이라 맨 아래 문구는 스크롤 밖에 있으면 보이지 않는다.
    if (state.status === 'error' && state.message) {
      showToast({ variant: 'danger', message: state.message });
    }
  }, [state, showToast, onClose, isEdit]);

  const errors = state.status === 'error' ? (state.errors ?? {}) : {};

  /** 기획 ③ 주소 검색 연동 — 고른 주소로 우편번호·좌표까지 채운다. */
  function searchAddress() {
    startSearching(async () => {
      let picked;
      try {
        picked = await openPostcodeSearch();
      } catch {
        showToast({
          variant: 'danger',
          message: '주소 검색을 불러오지 못했습니다. 잠시 후 다시 시도해 주세요.',
        });
        return;
      }

      if (!picked) {
        return;
      }

      setAddress(picked.address);
      setPostalCode(picked.zonecode);
      setLatitude(picked.latitude);
      setLongitude(picked.longitude);
    });
  }

  return (
    <FoxModal
      dismissible={false}
      open
      size="md"
      title={isEdit ? '가맹몰 수정' : '가맹몰 등록'}
      onClose={onClose}
      actions={
        <>
          <FoxButton type="default" size="md" label="취소" onAction={onClose} />
          <FoxButton
            type="primary"
            size="md"
            label={isPending ? '저장 중...' : isEdit ? '수정' : '등록'}
            disabled={isPending}
            onAction={() => formRef.current?.requestSubmit()}
          />
        </>
      }
    >
      <form
        ref={formRef}
        onSubmit={(event) => submitFormAction(event, formAction)}
        className={styles.fields}
      >
        <input type="hidden" name="id" value={merchant?.id ?? ''} />
        <input type="hidden" name="categoryCode" value={categoryCode} />
        <input type="hidden" name="businessStatusCode" value={businessStatusCode} />
        <input type="hidden" name="divisionCode" value={divisionCode} />
        <input type="hidden" name="bankCode" value={bankCode} />
        <input type="hidden" name="isVisible" value={isVisible ? 'Y' : 'N'} />
        <input type="hidden" name="latitude" value={latitude} />
        <input type="hidden" name="longitude" value={longitude} />

        {/* 등록 시에는 코드가 아직 없다 — 저장할 때 서버가 만든다. */}
        {isEdit && (
          <div className={styles.field}>
            <FoxInput
              size="md"
              label="가맹점코드"
              value={merchant?.code ?? ''}
              readOnly
              state="view"
            />
          </div>
        )}

        {/* 메모·등록일은 백엔드에 컬럼이 없어 저장되지 않는다. 기획 시안에 있는 항목이라 화면에서는
            지우지 않고, 값이 없으면 `-`로 보여준다(사용자 확정). 브랜드명은 폼에서 뺐다(사용자 요청). */}
        <div className={styles.field}>
          <FoxInput
            size="md"
            name="name"
            label="가맹점명"
            requirement="required"
            defaultValue={merchant?.name ?? ''}
            placeholder="가맹점명을 입력하세요."
            maxLength={NAME_MAX_LENGTH}
            invalid={Boolean(errors.name)}
            message={errors.name}
          />
        </div>

        <div className={styles.field}>
          <div className={styles.pair}>
            <FoxSelect
              size="md"
              label="업종"
              requirement="required"
              options={codeTables.business.map((code) => ({ value: code.code, label: code.label }))}
              value={categoryCode}
              onValueChange={setCategoryCode}
              placeholder="선택"
              error={Boolean(errors.categoryCode)}
              hint={errors.categoryCode}
            />
            <FoxSelect
              size="md"
              label="업태"
              options={codeTables.businessStatus.map((code) => ({ value: code.code, label: code.label }))}
              value={businessStatusCode}
              onValueChange={setBusinessStatusCode}
              placeholder="선택"
            />
          </div>
        </div>

        <div className={styles.field}>
          <FoxSelect
            size="md"
            label="가맹점 구분"
            options={codeTables.division.map((code) => ({ value: code.code, label: code.label }))}
            value={divisionCode}
            onValueChange={setDivisionCode}
            placeholder="선택"
          />
        </div>

        <div className={styles.field}>
          <div className={styles.pair}>
            <FoxInput
                size="md"
              name="businessNumber"
              label="사업자등록번호"
              defaultValue={merchant?.businessNumber ?? ''}
              placeholder="000-00-00000"
              invalid={Boolean(errors.businessNumber)}
              message={errors.businessNumber}
            />
            <FoxInput
                size="md"
              name="ownerName"
              label="대표자명"
              defaultValue={merchant?.ownerName ?? ''}
              placeholder="대표자명을 입력하세요."
              maxLength={OWNER_MAX_LENGTH}
            />
          </div>
        </div>

        <div className={styles.field}>
          <FoxInput
            size="md"
            name="phoneNumber"
            label="전화번호"
            requirement="required"
            defaultValue={merchant?.phoneNumber ?? ''}
            placeholder="가게 전화번호를 입력하세요."
            invalid={Boolean(errors.phoneNumber)}
            message={errors.phoneNumber}
          />
        </div>

        <div className={styles.field}>
          <FoxFormLabel as="span" requirement="required">
            주소
          </FoxFormLabel>
          <div className={styles.addressRow}>
            <FoxInput
              size="md"
              name="postalCode"
              aria-label="우편번호"
              value={postalCode}
              onChange={setPostalCode}
              placeholder="우편번호"
              invalid={Boolean(errors.postalCode)}
              message={errors.postalCode}
            />
            <FoxButton
              type="secondary"
              size="md"
              label={isSearching ? '검색 중...' : '주소 검색'}
              disabled={isSearching}
              onAction={searchAddress}
            />
          </div>
          <FoxInput
            size="md"
            name="address"
            aria-label="주소"
            value={address}
            onChange={setAddress}
            placeholder="주소 검색으로 채우거나 직접 입력하세요."
          />
          <FoxInput
            size="md"
            name="addressDetail"
            aria-label="상세주소"
            defaultValue={merchant?.addressDetail ?? ''}
            placeholder="상세주소를 입력하세요."
            maxLength={ADDRESS_DETAIL_MAX_LENGTH}
          />
          {errors.address && (
            <FoxHelperText type="danger" message={errors.address} />
          )}
        </div>

        <div className={styles.field}>
          <FoxFormLabel as="span">위도 / 경도</FoxFormLabel>
          <div className={styles.pair}>
            <FoxInput
              size="md"
              aria-label="위도"
              value={latitude}
              readOnly
              state="view"
              placeholder="주소 검색 시 자동 입력"
            />
            <FoxInput
              size="md"
              aria-label="경도"
              value={longitude}
              readOnly
              state="view"
              placeholder="주소 검색 시 자동 입력"
            />
          </div>
        </div>

        <div className={styles.field}>
          <FoxFormLabel as="span">정산 계좌</FoxFormLabel>
          <div className={styles.pair}>
            <FoxSelect
              size="md"
              aria-label="입금 은행"
              options={codeTables.bank.map((code) => ({ value: code.code, label: code.label }))}
              value={bankCode}
              onValueChange={setBankCode}
              placeholder="은행 선택"
            />
            <FoxInput
              size="md"
              name="bankHolderName"
              aria-label="예금주명"
              placeholder="예금주명"
              maxLength={OWNER_MAX_LENGTH}
            />
          </div>
          <FoxInput
            size="md"
            name="accountNumber"
            aria-label="입금계좌번호"
            placeholder="입금계좌번호 (숫자와 -)"
            maxLength={ACCOUNT_NUMBER_MAX_LENGTH}
            invalid={Boolean(errors.accountNumber)}
            message={errors.accountNumber}
          />
        </div>

        <div className={styles.field}>
          <FoxFormLabel as="span" requirement="required">
            사용여부
          </FoxFormLabel>
          <FoxRadioGroup name="visibility" size="md" label="사용여부">
            <FoxRadio
              value="Y"
              label="노출"
              checked={isVisible === true}
              onChange={() => setIsVisible(true)}
            />
            <FoxRadio
              value="N"
              label="미노출"
              checked={isVisible === false}
              onChange={() => setIsVisible(false)}
            />
          </FoxRadioGroup>
        </div>

        <div className={styles.field}>
          <FoxInput
            size="md"
            name="memo"
            label="메모"
            defaultValue={merchant?.memo ?? ''}
            placeholder="관리자 메모 (사용자에게 노출되지 않음)"
            maxLength={MEMO_MAX_LENGTH}
          />
        </div>

        {isEdit && (
          <div className={styles.field}>
            <FoxFormLabel as="span">등록일 / 최종수정일</FoxFormLabel>
            <div className={styles.pair}>
              <FoxInput
                size="md"
                aria-label="등록일"
                value={formatOptionalValue(merchant?.createdAt)}
                readOnly
                state="view"
              />
              <FoxInput
                size="md"
                aria-label="최종수정일"
                value={formatOptionalValue(merchant?.updatedAt)}
                readOnly
                state="view"
              />
            </div>
          </div>
        )}
      </form>
    </FoxModal>
  );
}