@Composable
fun RememberExample() {
    // remember 없이: Recomposition마다 0으로 초기화 → 버튼이 동작하지 않음
    var badCount = mutableStateOf(0)  // ❌ remember 없음

    // remember 있음: 최초 1회만 초기화, 이후 Recomposition에서 값 유지
    var goodCount by remember { mutableStateOf(0) }  // ✅

    Column {
        Text("동작 안 함: ${badCount.value}")
        Text("동작함: $goodCount")
        Button(onClick = { goodCount++ }) { Text("증가") }
    }
}

@Composable
fun StateTypes() {
    // 기본형: State 객체를 직접 다루는 방식 (.value로 접근)
    val countState = remember { mutableStateOf(0) }
    Text("카운트: ${countState.value}")
    Button(onClick = { countState.value++ }) { Text("증가") }

    // by 위임: getValue/setValue를 자동 위임 → .value 없이 직접 접근 (권장)
    var count by remember { mutableStateOf(0) }
    Text("카운트: $count")        // countState.value 대신 count
    Button(onClick = { count++ }) { Text("증가") }  // countState.value++ 대신 count++

    // 다양한 타입의 상태
    var text    by remember { mutableStateOf("") }
    var isCheck by remember { mutableStateOf(false) }
    var items   by remember { mutableStateOf(listOf<String>()) }
}

@Composable
fun SurveyForm() {
    // remember: 화면 회전 시 "" 로 초기화됨 ❌
    var badText by remember { mutableStateOf("") }

    // rememberSaveable: 화면 회전 후에도 입력값 유지 ✅
    var name by rememberSaveable { mutableStateOf("") }
    var age  by rememberSaveable { mutableStateOf("") }

    Column(modifier = Modifier.padding(16.dp)) {
        OutlinedTextField(
            value = name,
            onValueChange = { name = it },
            label = { Text("이름") },
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(8.dp))
        OutlinedTextField(
            value = age,
            onValueChange = { age = it },
            label = { Text("나이") },
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
            modifier = Modifier.fillMaxWidth()
        )
    }
}

// ❌ Stateful: 상태를 내부에 가짐 → 재사용/테스트 어려움
@Composable
fun StatefulCounter() {
    var count by remember { mutableStateOf(0) }
    Column {
        Text("카운트: $count")
        Button(onClick = { count++ }) { Text("증가") }
    }
}

// ✅ Stateless: 상태를 외부에서 주입받음 → 재사용/테스트 쉬움
@Composable
fun StatelessCounter(
    count: Int,              // 현재 값 (부모에서 내려옴)
    onIncrement: () -> Unit  // 이벤트 콜백 (부모에서 내려옴)
) {
    Column {
        Text("카운트: $count")
        Button(onClick = onIncrement) { Text("증가") }
    }
}

// 상태를 가진 부모 Composable
@Composable
fun CounterScreen() {
    var count by remember { mutableStateOf(0) }

    // Stateless 자식에 상태와 콜백을 전달
    StatelessCounter(
        count = count,
        onIncrement = { count++ }
    )
}

// Stateless: 선택된 탭과 콜백만 받음
@Composable
fun TabRow(
    tabs: List<String>,
    selectedIndex: Int,
    onTabSelect: (Int) -> Unit
) {
    Row(modifier = Modifier.fillMaxWidth()) {
        tabs.forEachIndexed { index, title ->
            Tab(
                selected = index == selectedIndex,  // 현재 선택 탭인지 비교
                onClick = { onTabSelect(index) },
                text = { Text(title) },
                modifier = Modifier.weight(1f)  // 모든 탭이 동일한 너비
            )
        }
    }
}

// Stateless: 탭별 콘텐츠를 인덱스에 따라 렌더링
@Composable
fun TabContent(selectedIndex: Int) {
    when (selectedIndex) {
        0 -> Text("홈 화면 내용", modifier = Modifier.padding(16.dp))
        1 -> Text("검색 화면 내용", modifier = Modifier.padding(16.dp))
        2 -> Text("프로필 화면 내용", modifier = Modifier.padding(16.dp))
    }
}

// 상태를 가진 부모: 탭 선택 상태를 소유하고 자식에게 전달
@Composable
fun TabScreen() {
    val tabs = listOf("홈", "검색", "프로필")
    var selectedTab by remember { mutableStateOf(0) }  // 상태는 여기에!

    Column {
        TabRow(
            tabs = tabs,
            selectedIndex = selectedTab,
            onTabSelect = { selectedTab = it }  // 콜백: 선택된 인덱스를 상태에 반영
        )
        Divider()
        TabContent(selectedIndex = selectedTab)
    }
}

// ViewModel 상태를 Compose에서 구독하는 방법
@Composable
fun ProductList(viewModel: ProductViewModel = viewModel()) {
    // collectAsState(): Flow/StateFlow를 Compose State로 변환
    // → products가 바뀌면 자동 재구성
    val products by viewModel.products.collectAsState()

    LazyColumn {
        items(products) { product ->
            ProductItem(product)
        }
    }
}