ExpandableField

import { useState } from 'react';
import { useAppForm } from '@mildang/design-system/Form';
import { Box, HStack, VStack } from '@mildang/styled-system/jsx';
import InfoOutline from '@mildang/icons/react/info-outline';
import { Text } from '@mildang/design-system/Text';
import { SegmentedControl } from '@mildang/design-system/SegmentedControl';
import { IconButton } from '@mildang/design-system/IconButton';
import DeleteIcon from '@mildang/icons/react/delete';
import { Button } from '@mildang/design-system/Button';
import AddIcon from '@mildang/icons/react/add';

type GradeRow = {
  label: string;
  min: string;
  description: string;
};

type GradeFormValues = {
  operator: 'gte' | 'gt';
  grades: GradeRow[];
};

const DEFAULT_GRADES: GradeRow[] = [
  { label: 'A', min: '90', description: '매우 우수' },
  { label: 'B', min: '80', description: '우수' },
  { label: 'C', min: '70', description: '보통' },
  { label: 'D', min: '60', description: '미흡' },
  // 마지막 행은 항상 "최하위" — 경계값 없이 나머지를 모두 받는다.
  { label: 'E', min: '', description: '미달' },
];

/** 최하위(마지막) 행을 제외한 나머지 행의 최소 정답률을 한 번에 검증. */
const getGradesError = (grades: GradeRow[]) => {
  const mins = grades.slice(0, -1).map((grade) => Number(grade.min));

  if (mins.some((min) => Number.isNaN(min) || min < 0 || min > 100)) {
    return '최소 정답률은 0~100 사이의 숫자로 입력해 주세요.';
  }
  if (new Set(mins).size !== mins.length) {
    return '최소 정답률은 서로 다른 값으로 입력해 주세요.';
  }
  return undefined;
};

/**
 * 행 사이의 관계(중복 금지 등)는 **폼 레벨 validator** 에 건다. 셀 하나가 바뀌면 그 셀의 validator 와
 * 폼 레벨 validator 만 다시 돌고 **부모 배열 필드의 validator 는 돌지 않기** 때문이다
 * (배열 필드 validator 는 push/insert/remove 처럼 배열 자체가 바뀔 때만 실행된다).
 *
 * 반환값을 `{ fields: { grades: 메시지 } }` 형태로 주면 TanStack 이 그 에러를 `grades` 필드의
 * `meta.errorMap` 으로 내려보내므로, 배열 필드 쪽에서 `field.state.meta.errors` 로 그대로 읽을 수 있다.
 */
const validateGradesForm = ({ value }: { value: GradeFormValues }) => {
  const gradesError = getGradesError(value.grades);
  return gradesError ? { fields: { grades: gradesError } } : undefined;
};

const ExpandableFieldRichContentExample = () => {
    const [submitted, setSubmitted] = useState<GradeFormValues | null>(null);

    const form = useAppForm({
      defaultValues: {
        operator: 'gte',
        grades: DEFAULT_GRADES,
      } as GradeFormValues,
      validators: { onChange: validateGradesForm },
      onSubmit: async ({ value }) => {
        setSubmitted(value);
      },
    });

    return (
      <form
        noValidate
        onSubmit={(e) => {
          e.preventDefault();
          form.handleSubmit();
        }}
        style={{ width: 720 }}
      >
        <form.AppForm>
          <form.AppField name="grades" mode="array">
            {(gradesField) => {
              const rows = gradesField.state.value;
              const [firstError] = gradesField.state.meta.errors;
              const errorMessage = typeof firstError === 'string' ? firstError : undefined;
              const lastIndex = rows.length - 1;

              return (
                <form.ExpandableField
                  fullWidth
                  defaultExpanded
                  label="등급 설정"
                  description="점수별 등급 기준을 설정합니다."
                  helpText={errorMessage ?? '최소 정답률은 100% 이하의 서로 다른 값으로 입력해 주세요.'}
                  helpVariant={errorMessage ? 'error' : 'info'}
                  helpIcon={Boolean(errorMessage)}
                >
                  <VStack gap="16" alignItems="stretch" bg="neutral.surface.low" borderRadius="12" padding="16">
                    {/* 안내 바 — 기준 종류 표시 + 경계 연산자(폼 값) 선택 */}
                    <HStack
                      justify="space-between"
                      alignItems="center"
                      gap="8"
                      bg="neutral.surface.high"
                      borderRadius="8"
                      paddingX="12"
                      paddingY="8"
                    >
                      <HStack gap="4" alignItems="center" color="neutral.fill.base">
                        <InfoOutline width={16} />
                        <Text variant="body-md" color="neutral.text.low">
                          기준 : 정답률(%)
                        </Text>
                      </HStack>
                      <HStack gap="8" alignItems="center">
                        <Text variant="body-md" color="neutral.text.low">
                          기준 점수
                        </Text>
                        <form.AppField name="operator">
                          {(operatorField) => (
                            <operatorField.SegmentedControlField size="sm" aria-label="기준 점수 연산자">
                              <SegmentedControl.Item value="gte">≥</SegmentedControl.Item>
                              <SegmentedControl.Item value="gt">&gt;</SegmentedControl.Item>
                            </operatorField.SegmentedControlField>
                          )}
                        </form.AppField>
                      </HStack>
                    </HStack>

                    {/* 컬럼 헤더 */}
                    <HStack gap="8" alignItems="center" color="neutral.text.lowest">
                      <Text variant="caption-lg-medium" width="120px">
                        라벨
                      </Text>
                      <Text variant="caption-lg-medium" width="24px" />
                      <Text variant="caption-lg-medium" width="140px">
                        최소
                      </Text>
                      <Text variant="caption-lg-medium" flex="1">
                        설명(선택)
                      </Text>
                      <Box width="40px" />
                    </HStack>

                    {/* 반복 행 — 마지막 행은 경계값 없이 "최하위 (자동)" */}
                    {rows.map((_row, index) => {
                      const isLast = index === lastIndex;

                      return (
                        <HStack key={index} gap="8" alignItems="center">
                          <Box width="120px">
                            <form.AppField name={`grades[${index}].label`}>
                              {(cell) => <cell.InputField fullWidth aria-label={`${index + 1}번째 등급 라벨`} />}
                            </form.AppField>
                          </Box>

                          <Text variant="body-md" width="24px" textAlign="center" color="neutral.text.low">
                            {isLast ? (
                              '<'
                            ) : (
                              <form.Subscribe selector={(state) => state.values.operator}>
                                {(operator) => <>{operator === 'gte' ? '≥' : '>'}</>}
                              </form.Subscribe>
                            )}
                          </Text>

                          {isLast ? (
                            <Text variant="body-md" width="140px" textAlign="center" color="neutral.text.lowest">
                              최하위 (자동)
                            </Text>
                          ) : (
                            <Box width="140px">
                              <form.AppField name={`grades[${index}].min`}>
                                {(cell) => (
                                  <cell.InputField
                                    fullWidth
                                    inputMode="numeric"
                                    aria-label={`${index + 1}번째 최소 정답률`}
                                    endAdornment={
                                      <Text variant="body-md" color="neutral.text.lowest">
                                        %
                                      </Text>
                                    }
                                  />
                                )}
                              </form.AppField>
                            </Box>
                          )}

                          <Box flex="1" minWidth="0">
                            <form.AppField name={`grades[${index}].description`}>
                              {(cell) => (
                                <cell.InputField
                                  fullWidth
                                  placeholder="placeholder"
                                  aria-label={`${index + 1}번째 등급 설명`}
                                />
                              )}
                            </form.AppField>
                          </Box>

                          <IconButton
                            type="button"
                            variant="tertiary"
                            aria-label={`${index + 1}번째 등급 삭제`}
                            disabled={rows.length <= 2}
                            onClick={() => gradesField.removeValue(index)}
                          >
                            <DeleteIcon width={20} />
                          </IconButton>
                        </HStack>
                      );
                    })}

                    <Button
                      type="button"
                      variant="secondary"
                      size="sm"
                      startIcon={<AddIcon width={16} />}
                      alignSelf="flex-start"
                      // 최하위 행은 항상 마지막에 남도록 그 앞에 끼워 넣는다.
                      onClick={() => gradesField.insertValue(lastIndex, { label: '', min: '', description: '' })}
                    >
                      등급 추가
                    </Button>
                  </VStack>
                </form.ExpandableField>
              );
            }}
          </form.AppField>
        </form.AppForm>

        <HStack gap="8" alignItems="center" marginTop="20">
          <form.Subscribe selector={(state) => [state.isSubmitting, state.canSubmit] as const}>
            {([isSubmitting, canSubmit]) => (
              <Button type="submit" variant="primary" loading={isSubmitting} disabled={!canSubmit}>
                전송
              </Button>
            )}
          </form.Subscribe>
          <Button type="button" variant="quaternary" onClick={() => setSubmitted(null)}>
            결과 지우기
          </Button>
        </HStack>

        {submitted && (
          <VStack
            gap="8"
            alignItems="stretch"
            marginTop="12"
            bg="neutral.surface.low"
            borderRadius="8"
            padding="12"
          >
            <Text variant="caption-lg-medium" color="neutral.text.lowest">
              제출된 값
            </Text>
            <Text as="pre" variant="caption-lg" color="neutral.text.base" whiteSpace="pre-wrap">
              {JSON.stringify(submitted, null, 2)}
            </Text>
          </VStack>
        )}
      </form>
    );
  };

export default ExpandableFieldRichContentExample;