'use client';

import { useActionState, useRef, useState } from 'react';
import { FoxButton } from '@fox/core/components/fox-button';
import {
  FoxDescriptionList,
  type FoxDescriptionItem,
} from '@fox/core/components/fox-description-list';
import { FoxModal } from '@fox/core/components/fox-modal';
import { FoxToggleSwitch } from '@fox/core/components/fox-toggle-switch';
import {
  formatGradeClassNumber,
  formatOptionalValue,
  type StudentMember,
} from '@/lib/domain/student-member';
import {
  updateStudentActiveStatus,
  type UpdateStudentActiveStatusState,
} from '../_actions';
import styles from './student-detail-modal.module.scss';

interface StudentDetailModalProps {
  member: StudentMember;
  onClose: () => void;
}

const INITIAL_STATE: UpdateStudentActiveStatusState = { status: 'idle' };
const DETAIL_FORM_ID = 'student-active-status-form';

/** 시안은 두 값을 " / "로 묶는다("홍라애 / 010-2222-1234"). 둘 다 없으면 `-`다. */
function joinPair(first: string | null, second: string | null) {
  const parts = [first, second].filter(
    (value): value is string => value !== null && value !== ''
  );
  return parts.length > 0 ? parts.join(' / ') : '-';
}

/**
 * 학생 회원 조회 팝업 — 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) modal 5227:809
 *
 * 모든 항목이 조회 전용이다. 데이터는 목록 행이 이미 갖고 있는 member를 그대로 받으므로
 * 재조회하지 않는다(백엔드에 단건 조회 API도 아직 없다). 백엔드가 주지 않는 값은 `-`다.
 *
 * 시안은 보호자(이름/연락처)와 학교(학교/학년·반·번호)를 각각 한 줄로 묶는다 — 종전처럼
 * 항목을 따로 두지 않고 시안의 8줄 구성을 그대로 따랐다.
 *
 * 사용여부는 이 팝업에서 유일하게 수정 가능한 항목이지만, 백엔드 목록 응답에 값이 없고 변경
 * API도 없어 토글·저장 버튼을 비활성으로 둔다(`_actions.ts`의 미지원 처리와 짝). 폼·Server
 * Action 배선은 남겨 두었으므로 API가 생기면 `IS_ACTIVE_STATUS_EDITABLE`만 되돌리면 된다.
 *
 * 저장 버튼은 `form={DETAIL_FORM_ID}`로 폼과 이어 둔다 — FoxModal이 버튼을 `foot` 슬롯에
 * 그려 폼의 자손이 아니게 되는데, 네이티브 `form` 속성은 같은 문서 안에서 id만 맞으면 그
 * 폼을 제출한다.
 */
export function StudentDetailModal({ member, onClose }: StudentDetailModalProps) {
  const [state, formAction, isPending] = useActionState(
    updateStudentActiveStatus,
    INITIAL_STATE
  );
  const formRef = useRef<HTMLFormElement>(null);
  // 토글은 화면에서 바로 반응해야 하므로 이 컴포넌트가 상태를 갖는다 — prop에서 계산하면
  // 스위치를 넘겨도 라벨이 그대로다. 저장이 되지 않으므로 이 값은 화면에만 머문다.
  const [isActive, setIsActive] = useState(member.isActive ?? false);

  const items: FoxDescriptionItem[] = [
    { key: 'name', term: '이름', description: member.name },
    { key: 'loginId', term: 'ID', description: member.loginId },
    {
      key: 'phoneNumber',
      term: '휴대전화 번호',
      description: formatOptionalValue(member.phoneNumber),
    },
    {
      key: 'email',
      term: '이메일',
      description: formatOptionalValue(member.email),
    },
    {
      key: 'birthDate',
      term: '생년월일',
      description: formatOptionalValue(member.birthDate),
    },
    {
      key: 'guardian',
      term: '보호자 이름 / 연락처',
      description: joinPair(member.guardianName, member.guardianPhoneNumber),
    },
    {
      key: 'school',
      term: '학교 / 학년·반·번호',
      description: joinPair(
        member.schoolName,
        formatGradeClassNumber(member) === '-'
          ? null
          : formatGradeClassNumber(member)
      ),
    },
    {
      key: 'isActive',
      term: '사용여부',
      description: (
        <FoxToggleSwitch
          name="isActive"
          value="true"
          label={isActive ? '활성' : '비활성'}
          checked={isActive}
          onChange={(checked) => setIsActive(checked)}
        />
      ),
    },
  ];

  return (
    <FoxModal
      open
      size="sm"
      title="학생 회원 조회"
      onClose={onClose}
      utility={
        state.status === 'error' ? (
          <p className={styles.error} role="alert">
            {state.error}
          </p>
        ) : undefined
      }
      actions={
        <>
          <FoxButton
            type="default"
            size="md"
            label="취소"
            onAction={onClose}
          />
          {/* FoxButton에는 폼을 가리키는 prop이 없다(네이티브 `form` 속성 미노출). 버튼이
              foot 슬롯에 그려져 폼의 자손이 아니므로 ref로 직접 제출한다. */}
          <FoxButton
            type="primary"
            size="md"
            label={isPending ? '저장 중...' : '저장'}
            disabled={isPending}
            onAction={() => formRef.current?.requestSubmit()}
          />
        </>
      }
    >
      <form
        ref={formRef}
        id={DETAIL_FORM_ID}
        action={formAction}
        className={styles.form}
      >
        <input type="hidden" name="id" value={member.id} />
        <FoxDescriptionList items={items} />
      </form>
    </FoxModal>
  );
}