'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 { 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 { updatePointStandardAction } from '../_actions';
import styles from './point-standard-form.module.scss';

interface PointStandardFormModalProps {
  standard: PointStandard;
  onClose: () => void;
}

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

  const [isDuplicable, setIsDuplicable] = useState(standard.isDuplicable);
  const [isActive, setIsActive] = useState(standard.isActive);

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

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

  return (
    <FoxModal
      open
      size="md"
      title="수정"
      onClose={onClose}
      actions={
        <>
          <FoxButton type="default" size="md" label="취소" onAction={onClose} />
          <FoxButton
            type="primary"
            size="md"
            label={isPending ? '저장 중...' : '수정'}
            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={standard.eventCode} />

        <div className={styles.field}>
          {/* 기획 ① 이벤트행은 수정불가(Read Only). 값은 hidden id가 갖는다. */}
          <FoxInput
            size="md"
            label="이벤트"
            requirement="required"
            value={standard.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)}
                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)}
                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>
  );
}