'use client';

import { useActionState, useEffect, useRef, useState } 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 { FoxTextArea } from '@fox/core/components/fox-text-area';
import { submitFormAction } from '@/app/_hooks/submit-form-action';
import { useFeedback } from '@/app/_hooks/use-feedback';
import {
  DESCRIPTION_MAX_LENGTH,
  INITIAL_POINT_STANDARD_FORM_STATE,
} from '@/lib/domain/point-standard-form';
import type { PointStandard } from '@/lib/domain/point-standard';
import type { CommonCode } from '@/lib/domain/common-code';
import {
  createPointStandardAction,
  updatePointStandardAction,
} from '../_actions';
import styles from './point-standard-form.module.scss';

interface PointStandardFormModalProps {
  /** 수정 대상. 없으면 등록이다. */
  standard?: PointStandard;
  /** 공통코드 `CODE_GROUP.pointEvent` — 등록의 이벤트 선택지(기획 ① "등록된 코드중에서 선택"). */
  eventCodes: readonly CommonCode[];
  onClose: () => void;
}

export function PointStandardFormModal({
  standard,
  eventCodes,
  onClose,
}: PointStandardFormModalProps) {
  const isCreate = standard === undefined;
  const { showToast } = useFeedback();
  const formRef = useRef<HTMLFormElement>(null);
  const [state, formAction, isPending] = useActionState(
    isCreate ? createPointStandardAction : updatePointStandardAction,
    INITIAL_POINT_STANDARD_FORM_STATE
  );

  const [eventCode, setEventCode] = useState(
    standard?.eventCode ?? eventCodes[0]?.code ?? ''
  );
  const [isDuplicable, setIsDuplicable] = useState(standard?.isDuplicable ?? true);
  const [isActive, setIsActive] = useState(standard?.isActive ?? true);

  useEffect(() => {
    if (state.status === 'success') {
      showToast({
        variant: 'success',
        message: isCreate
          ? '포인트 기준을 등록했습니다.'
          : '포인트 기준을 수정했습니다.',
      });
      onClose();
    }
  }, [state, showToast, onClose, isCreate]);

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

  return (
    <FoxModal
      open
      size="md"
      title={isCreate ? '등록' : '수정'}
      onClose={onClose}
      actions={
        <>
          <FoxButton type="default" size="md" label="취소" onAction={onClose} />
          <FoxButton
            type="primary"
            size="md"
            label={isPending ? '저장 중...' : isCreate ? '등록' : '수정'}
            disabled={isPending}
            onAction={() => formRef.current?.requestSubmit()}
          />
        </>
      }
    >
      <form
        ref={formRef}
        onSubmit={(event) => submitFormAction(event, formAction)}
        className={styles.fields}
      >
        <p className={styles.required}>* 는 필수 항목입니다.</p>

        <input type="hidden" name="id" value={standard?.id ?? ''} />
        {/* 수정에서는 화면이 읽기 전용이지만 백엔드 UPDATE가 EVENT_CD를 덮어써서 그대로 돌려보낸다. */}
        <input type="hidden" name="eventCode" value={eventCode} />

        <div className={styles.field}>
          {isCreate ? (
            // 기획 ① 등록된 코드중에서 선택.
            <FoxSelect
              size="md"
              label="이벤트"
              requirement="required"
              options={eventCodes.map((code) => ({
                value: code.code,
                label: code.label,
              }))}
              placeholder="이벤트를 선택하세요."
              value={eventCode}
              onValueChange={setEventCode}
              error={Boolean(errors.eventCode)}
              hint={errors.eventCode}
            />
          ) : (
            // 기획 ① 이벤트행은 수정불가(Read Only).
            <FoxInput
              size="md"
              label="이벤트"
              requirement="required"
              value={eventCode}
              readOnly
              state="view"
            />
          )}
        </div>

        <div className={styles.field}>
          <FoxFormLabel as="span" requirement="required">
            포인트
          </FoxFormLabel>
          <div className={styles.numberRow}>
            <div className={styles.numberField}>
              <FoxInput
                size="md"
                name="point"
                type="number"
                inputMode="numeric"
                min={0}
                aria-label="포인트"
                defaultValue={String(standard?.point ?? 0)}
                invalid={Boolean(errors.point)}
              />
            </div>
            <span className={styles.numberNote}>포인트</span>
          </div>
          {errors.point && <FoxHelperText type="danger" message={errors.point} />}
        </div>

        <div className={styles.field}>
          <FoxFormLabel as="span" requirement="required">
            제한포인트
          </FoxFormLabel>
          <div className={styles.numberRow}>
            <div className={styles.numberField}>
              <FoxInput
                size="md"
                name="limitPoint"
                type="number"
                inputMode="numeric"
                min={0}
                aria-label="제한포인트"
                defaultValue={String(standard?.limitPoint ?? 0)}
                invalid={Boolean(errors.limitPoint)}
              />
            </div>
            <span className={styles.numberNote}>
              &apos;0&apos; 일경우 일 누적 포인트에 대한 제한이 없습니다.
            </span>
          </div>
          {errors.limitPoint && (
            <FoxHelperText type="danger" message={errors.limitPoint} />
          )}
        </div>

        <div className={styles.field}>
          <FoxFormLabel as="span">중복 여부</FoxFormLabel>
          <FoxRadioGroup name="isDuplicable" size="md" label="중복 여부">
            <FoxRadio
              value="Y"
              label="중복 가능"
              checked={isDuplicable}
              onChange={() => setIsDuplicable(true)}
            />
            <FoxRadio
              value="N"
              label="중복 불가"
              checked={!isDuplicable}
              onChange={() => setIsDuplicable(false)}
            />
          </FoxRadioGroup>
        </div>

        <div className={styles.field}>
          <FoxTextArea
            name="description"
            label="이벤트 설명"
            requirement="required"
            defaultValue={standard?.description ?? ''}
            placeholder="이벤트 설명을 입력하세요."
            rows={4}
            counter
            maxLength={DESCRIPTION_MAX_LENGTH}
            invalid={Boolean(errors.description)}
            message={errors.description}
          />
        </div>

        <div className={styles.field}>
          <FoxFormLabel as="span">사용여부</FoxFormLabel>
          <FoxRadioGroup name="isActive" size="md" label="사용여부">
            <FoxRadio
              value="Y"
              label="사용"
              checked={isActive}
              onChange={() => setIsActive(true)}
            />
            <FoxRadio
              value="N"
              label="사용안함"
              checked={!isActive}
              onChange={() => setIsActive(false)}
            />
          </FoxRadioGroup>
        </div>

        {state.status === 'error' && state.message && (
          <FoxHelperText type="danger" message={state.message} />
        )}
      </form>
    </FoxModal>
  );
}