// ✅ 프로젝트 표준: M3 semantic styles 사용
style: context.textStyles.titleSmall                              // 16px + w600
style: context.textStyles.bodyMedium                              // 16px + w400
style: context.textStyles.labelLarge.copyWith(fontWeight: .w600)  // 14px + w600 (커스텀)

// ✅ copyWith 조합
style: context.textStyles.titleSmall.copyWith(
  color: context.appColors.neutral5,
)

// ✅ 새로운 API: features 파라미터
TextField(
  controller: controller,
  placeholder: const Text('입력해주세요'),
  filled: true,  // 배경색 적용 (surfaceContainer)
  features: [
    InputFeature.leading(const Icon(Icons.search, size: 20)),
    InputFeature.trailing(const Icon(Icons.clear, size: 18)),
  ],
  onChanged: (value) => ...,
)

// ❌ deprecated: leading/trailing 파라미터
TextField(
  leading: Icon(Icons.search),   // deprecated
  trailing: Icon(Icons.clear),   // deprecated
)

// ✅ CORRECT: 존재하는 크기 사용
ButtonStyle.primary(size: .normal)
ButtonStyle.primary(size: .small)

// ❌ WRONG: medium 없음 (컴파일 에러)
ButtonStyle.primary(size: .medium)  // 에러!

// 테이블 내 컴팩트한 버튼
CoButton(
  variant: CoreButtonVariant.outline,
  size: CoreComponentSize.sm,
  onPressed: handleTap,
  child: const Text('복사'),
)

// 기본 사용
const CoBadge(variant: CoreBadgeVariant.primary, child: Text('판매중'))
const CoBadge(variant: CoreBadgeVariant.destructive, child: Text('판매 중지'))

// size로 컴팩트하게
const CoBadge(
  variant: CoreBadgeVariant.primary,
  size: CoreComponentSize.sm,
  child: Text('판매중'),
)

const CoBadge(
  variant: CoreBadgeVariant.destructive,
  size: CoreComponentSize.sm,
  child: Text('판매 중지'),
)

// 조건부 배지
child: book.isActive
    ? const CoBadge(
        variant: CoreBadgeVariant.primary,
        size: CoreComponentSize.sm,
        child: Text('판매중'),
      )
    : const CoBadge(
        variant: CoreBadgeVariant.destructive,
        size: CoreComponentSize.sm,
        child: Text('판매 중지'),
      ),

DatePicker(
  mode: .dialog,                          // dialog 또는 inline
  dialogTitle: Text('날짜 선택'),         // 다이얼로그 제목 (필수 권장)
  value: currentValue.value,              // 현재 선택된 날짜
  placeholder: Text(field.hint),          // 미선택 시 표시 텍스트
  stateBuilder: (date) { ... },           // 날짜 상태 결정 함수
  onChanged: (selectedDate) { ... },      // 변경 콜백
)

stateBuilder: (date) {
  // 1900년 이전 또는 2100년 이후 날짜 비활성화
  if (date.isBefore(DateTime(1900)) ||
      date.isAfter(DateTime(2100, 12, 31))) {
    return DateState.disabled;
  }
  return DateState.enabled;
}

material.FormField<DateTime>(
  builder: (formFieldState) {
    return Column(
      crossAxisAlignment: .start,
      children: [
        Expanded(
          child: DatePicker(
            mode: .dialog,
            dialogTitle: Text(context.i10n.common.select_date),
            value: currentValue.value,
            placeholder: Text(field.hint),
            stateBuilder: (date) {
              if (date.isBefore(DateTime(1900)) ||
                  date.isAfter(DateTime(2100, 12, 31))) {
                return DateState.disabled;
              }
              return DateState.enabled;
            },
            onChanged: (selectedDate) {
              dateNotifier.value = selectedDate;
              formFieldState.didChange(selectedDate);  // ✅ 필수: 검증 동기화
            },
          ),
        ),
        if (formFieldState.hasError) ...[
          const CoGap(size: CoreSpace.space4),
          Text(
            formFieldState.errorText!,
            style: FormInputStyles.errorTextStyle(context.appColors),
          ),
        ],
      ],
    );
  },
  validator: (value) {
    if (field.isRequired && value == null) {
      return context.i10n.common.date_required(label: field.label);
    }
    return null;
  },
)

// 에러 상태에 따른 높이 계산
final baseHeight = 40.0;
final errorHeight = formFieldState.hasError ? 20.0 : 0.0;
final totalHeight = baseHeight + errorHeight;

@override
Widget build(BuildContext context) {
  final dateNotifier = useState<DateTime?>(initialValue);

  // 외부에서 값이 변경되면 동기화
  useEffect(() {
    if (externalValue != dateNotifier.value) {
      dateNotifier.value = externalValue;
    }
    return null;
  }, [externalValue]);

  return DatePicker(
    value: dateNotifier.value,
    onChanged: (date) {
      dateNotifier.value = date;
      onExternalChange?.call(date);
    },
  );
}

const CoGap(size: CoreSpace.space4)   // 4px
const CoGap(size: CoreSpace.space8)   // 8px
const CoGap(size: CoreSpace.space16)  // 16px
const CoGap(size: CoreSpace.space24)  // 24px
CoGap(size: CoreSpace.space16)        // Insets.medium 대체

// 스켈레톤 로딩 (전체 위젯)
widget.skeletonizer(enabled: state.isLoading)

// 조건부 로딩 (스피너)
widget.loadingOr(
  isLoading: state.isLoading,
  loadingWidget: const CircularProgressIndicator(),
)

// 빈 상태 처리
listWidget.emptyOrWhen(
  condition: () => list.isEmpty,
  emptyWidget: const EmptyStateWidget(),
)

class MyTabbedPage extends HookWidget {
  const MyTabbedPage({super.key});

  @override
  Widget build(BuildContext context) {
    final selectedTab = useState(_Tab.first);

    // ✅ 탭 변경 시 데이터 로드
    useEffect(() {
      final bloc = context.read<MyBloc>();
      switch (selectedTab.value) {
        case _Tab.first:
          bloc.add(const MyEvent.loadFirstTab());
        case _Tab.second:
          bloc.add(const MyEvent.loadSecondTab());
        case _Tab.third:
          bloc.add(const MyEvent.loadThirdTab());
      }
      return null;  // cleanup 불필요
    }, [selectedTab.value]);  // 의존성: 탭 변경 시마다 실행

    return TabBarView(
      selectedTab: selectedTab,
      // ...
    );
  }
}

// ✅ private enum으로 탭 정의 (매직 넘버 방지)
enum _Tab { first, second, third }

@override
Widget build(BuildContext context) {
  final selectedTab = useState(_Tab.first);
  final isInitialized = useState(false);

  // 초기 로딩 (한 번만)
  useEffect(() {
    context.read<MyBloc>().add(const MyEvent.initialize());
    isInitialized.value = true;
    return null;
  }, const []);  // 빈 의존성 = 최초 1회

  // 탭 변경 시 로딩 (초기화 후에만)
  useEffect(() {
    if (!isInitialized.value) return null;

    final bloc = context.read<MyBloc>();
    switch (selectedTab.value) {
      case _Tab.first:
        bloc.add(const MyEvent.loadFirstTab());
      // ...
    }
    return null;
  }, [selectedTab.value]);

  // ...
}

// ✅ CORRECT: private enum 사용
enum _Tab {
  publishers,   // 출판사 탭
  authors,      // 저자 탭
  contracts,    // 계약 탭
}

// Widget에서 사용
final selectedTab = useState(_Tab.publishers);

// Switch expression으로 탭별 로직
switch (selectedTab.value) {
  case _Tab.publishers => publishersList,
  case _Tab.authors => authorsList,
  case _Tab.contracts => contractsList,
}

// ❌ WRONG: 매직 넘버 사용
final selectedTab = useState(0);  // 0이 뭐지?
if (selectedTab.value == 0) { ... }  // 가독성 나쁨

class MyPage extends HookWidget {
  const MyPage({super.key});

  @override
  Widget build(BuildContext context) {
    final appColors = context.appColors;

    return BlocProvider(
      create: (_) => getIt<MyBloc>(),
      child: BlocBuilder<MyBloc, MyState>(
        builder: (context, state) {
          return Scaffold(
            headers: [
              AppBar(
                title: Text(
                  '페이지 제목',
                  style: context.textStyles.titleMedium.copyWith(
                    color: appColors.neutral5,
                  ),
                ),
              ),
            ],
            child: Padding(
              padding: const .symmetric(horizontal: Insets.medium),
              child: Column(
                crossAxisAlignment: .start,
                children: [
                  const CoGap(size: CoreSpace.space16),
                  TextField(
                    placeholder: const Text('이름을 입력하세요'),
                    features: const [
                      InputFeature.leading(Icon(Icons.person, size: 20)),
                    ],
                    onChanged: (value) => context.read<MyBloc>().add(
                      MyEvent.nameChanged(value),
                    ),
                  ),
                  const CoGap(size: CoreSpace.space16),
                  CoButton(
                    variant: CoreButtonVariant.primary,
                    expanded: true,
                    enabled: state.isValid,
                    onPressed: () => context.read<MyBloc>().add(
                      const MyEvent.submitted(),
                    ),
                    child: const Text('저장'),
                  ),
                ],
              ),
            ).skeletonizer(enabled: state.isLoading),
          );
        },
      ),
    );
  }
}

CoResizable(
  // direction: .horizontal (기본값), 세로 분할이면 .vertical
  panes: [
    CoreResizablePaneData(
      initialSize: 0.65,    // 초기 비율 (합이 1.0)
      minSize: 0.4,         // 최소 비율 (선택)
      // maxSize: 0.8,      // 최대 비율 (선택)
      content: leftWidget,
    ),
    CoreResizablePaneData(
      initialSize: 0.35,
      minSize: 0.25,
      content: rightWidget,
    ),
  ],
)

LayoutBuilder(
  builder: (context, constraints) {
    final isWide = constraints.maxWidth >= 768;
    if (!isWide || !isPanelOpen) return viewer;
    return CoResizable(
      panes: [
        CoreResizablePaneData(
          initialSize: 0.65,
          minSize: 0.4,
          content: viewer,
        ),
        CoreResizablePaneData(
          initialSize: 0.35,
          minSize: 0.25,
          content: panelHost,
        ),
      ],
    );
  },
)

// 헤더 배경 (본문과 구분)
color: context.appColors.neutral95,

// 진한 테두리 (선명하게)
border: Border(
  right: .new(color: context.appColors.neutral70),
),

// 기본 테두리
border: Border.all(color: context.appColors.neutral80),

// TextField 배경
TextField(
  filled: true,  // surfaceContainer 배경
  border: Border.all(color: context.colorScheme.surfaceContainerHigh),
)

// 필터 다이얼로그 테두리
OutlinedContainer(
  backgroundColor: theme.colorScheme.surface,
  borderColor: theme.colorScheme.surfaceContainerHigh,  // 진한 테두리
)