'use client';

import { useActionState, useEffect, useRef, useState } from 'react';
import { FoxButton } from '@fox/core/components/fox-button';
import { FoxFileUpload } from '@fox/core/components/fox-file-upload';
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 { FoxSelect } from '@fox/core/components/fox-select';
import { FoxToggleSwitch } from '@fox/core/components/fox-toggle-switch';
import { submitFormAction } from '@/app/_hooks/submit-form-action';
import { useFeedback } from '@/app/_hooks/use-feedback';
import { fileModuleAccept, FILE_MODULE } from '@/lib/domain/file-module';
import {
  formatParentLabel,
  type SystemMenu,
  type SystemMenuNode,
} from '@/lib/domain/system-menu';
import {
  DESCRIPTION_MAX_LENGTH,
  INITIAL_SYSTEM_MENU_FORM_STATE,
  NAME_MAX_LENGTH,
  URL_MAX_LENGTH,
} from '@/lib/domain/system-menu-form';
import { saveSystemMenuAction } from '../_actions';
import styles from './menu-form.module.scss';

interface MenuFormModalProps {
  mode: 'create' | 'edit';
  /** 수정 대상. 추가일 때는 비어 있다. */
  menu?: SystemMenuNode;
  /** 추가일 때의 상위 메뉴. 수정일 때는 대상의 상위다. */
  parent: SystemMenu | null;
  roleOptions: { value: string; label: string }[];
  onClose: () => void;
}

const ICON_ACCEPT = fileModuleAccept(FILE_MODULE.menuIcon);
const ICON_HINT =
  '이미지 파일만 업로드 가능 (jpg, png, svg 등). 앱 화면에서 메뉴 표시 시 사용됩니다.';

export function MenuFormModal({
  mode,
  menu,
  parent,
  roleOptions,
  onClose,
}: MenuFormModalProps) {
  const isCreate = mode === 'create';
  const { showToast } = useFeedback();
  const formRef = useRef<HTMLFormElement>(null);
  const [state, formAction, isPending] = useActionState(
    saveSystemMenuAction,
    INITIAL_SYSTEM_MENU_FORM_STATE
  );

  const [roleId, setRoleId] = useState(menu?.roleId ?? roleOptions[0]?.value ?? '');
  const [isTopActive, setIsTopActive] = useState(menu?.isTopActive ?? false);
  const [isActive, setIsActive] = useState(menu?.isActive ?? true);
  // 새창여부는 저장할 컬럼이 없어 화면에만 둔다(사용자 확정).
  const [opensNewWindow, setOpensNewWindow] = useState(false);
  const [largeIconId, setLargeIconId] = useState(menu?.largeIconId ?? '');
  const [smallIconId, setSmallIconId] = useState(menu?.smallIconId ?? '');

  useEffect(() => {
    if (state.status === 'success') {
      showToast({
        variant: 'success',
        message: isCreate ? '메뉴를 등록했습니다.' : '메뉴를 수정했습니다.',
      });
      onClose();
    }
  }, [state, showToast, onClose, isCreate]);

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

  function iconFiles(id: string, name: string | null, url: string | null) {
    return id
      ? [{ id, name: name ?? '등록된 아이콘', previewUrl: url ?? undefined }]
      : [];
  }

  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}
      >
        <input type="hidden" name="id" value={menu?.id ?? ''} />
        <input type="hidden" name="parentId" value={parent?.id ?? ''} />
        <input type="hidden" name="parentIdPath" value={parent?.idPath ?? ''} />
        <input type="hidden" name="roleId" value={roleId} />
        <input type="hidden" name="isTopActive" value={isTopActive ? 'Y' : 'N'} />
        <input type="hidden" name="isActive" value={isActive ? 'Y' : 'N'} />
        <input type="hidden" name="largeIconId" value={largeIconId} />
        <input type="hidden" name="smallIconId" value={smallIconId} />

        {/* 기획 ① 상위 메뉴가 없으면(최상위 등록) 이 칸을 감춘다. */}
        {parentLabel && (
          <div className={styles.field}>
            <FoxInput
              size="md"
              label="상위메뉴명"
              requirement="required"
              value={parentLabel}
              readOnly
              state="view"
            />
          </div>
        )}

        <div className={styles.field}>
          <FoxInput
            size="md"
            name="name"
            label="메뉴명"
            requirement="required"
            defaultValue={menu?.name ?? ''}
            placeholder="메뉴명을 입력하세요."
            maxLength={NAME_MAX_LENGTH}
            invalid={Boolean(errors.name)}
            message={errors.name}
          />
        </div>

        <div className={styles.field}>
          <div className={styles.narrow}>
            <FoxInput
              size="md"
              name="sortOrder"
              type="number"
              inputMode="numeric"
              min={1}
              label="메뉴순번"
              requirement="required"
              defaultValue={String(menu?.sortOrder ?? 1)}
              invalid={Boolean(errors.sortOrder)}
              message={errors.sortOrder}
            />
          </div>
        </div>

        <div className={styles.field}>
          <FoxSelect
            size="md"
            label="메뉴권한"
            requirement="required"
            options={roleOptions}
            value={roleId}
            onValueChange={setRoleId}
            error={Boolean(errors.roleId)}
            hint={errors.roleId}
          />
        </div>

        <div className={styles.field}>
          <FoxFormLabel as="span" requirement="required">
            최상위권한활성
          </FoxFormLabel>
          <FoxToggleSwitch
            size="md"
            label={isTopActive ? '활성' : '비활성'}
            checked={isTopActive}
            onChange={setIsTopActive}
          />
        </div>

        <div className={styles.field}>
          <FoxInput
            size="md"
            name="url"
            label="메뉴링크"
            requirement="required"
            defaultValue={menu?.url ?? ''}
            placeholder="메뉴링크를 입력하세요."
            maxLength={URL_MAX_LENGTH}
            invalid={Boolean(errors.url)}
            message={errors.url}
          />
        </div>

        <div className={styles.field}>
          <FoxFormLabel as="span" requirement="required">
            새창여부
          </FoxFormLabel>
          <FoxToggleSwitch
            size="md"
            label={opensNewWindow ? '예' : '아니오'}
            checked={opensNewWindow}
            onChange={setOpensNewWindow}
          />
          {/* TODO(백엔드): TB_SYS_MENU에 새창여부 컬럼이 없어 저장되지 않는다. */}
          <FoxHelperText
            type="information"
            message="저장되지 않는 항목입니다. 백엔드에 컬럼이 추가되면 연결됩니다."
          />
        </div>

        <div className={styles.field}>
          <FoxInput
            size="md"
            name="description"
            label="메뉴설명"
            requirement="required"
            defaultValue={menu?.description ?? ''}
            placeholder="메뉴설명을 입력하세요."
            maxLength={DESCRIPTION_MAX_LENGTH}
            invalid={Boolean(errors.description)}
            message={errors.description}
          />
        </div>

        <div className={styles.field}>
          <FoxFileUpload
            mode="image"
            name="largeIcon"
            label="큰 아이콘"
            selectLabel="파일선택"
            accept={ICON_ACCEPT}
            defaultFiles={iconFiles(
              largeIconId,
              menu?.largeIconName ?? null,
              menu?.largeIconUrl ?? null
            )}
            onRemove={() => setLargeIconId('')}
          />
          <span className={styles.iconHint}>{ICON_HINT}</span>
        </div>

        <div className={styles.field}>
          <FoxFileUpload
            mode="image"
            name="smallIcon"
            label="작은 아이콘"
            selectLabel="파일선택"
            accept={ICON_ACCEPT}
            defaultFiles={iconFiles(
              smallIconId,
              menu?.smallIconName ?? null,
              menu?.smallIconUrl ?? null
            )}
            onRemove={() => setSmallIconId('')}
          />
          <span className={styles.iconHint}>{ICON_HINT}</span>
        </div>

        <div className={styles.field}>
          <FoxFormLabel as="span" requirement="required">
            활성여부
          </FoxFormLabel>
          <FoxToggleSwitch
            size="md"
            label={isActive ? '사용' : '미사용'}
            checked={isActive}
            onChange={setIsActive}
          />
        </div>

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