import React, {useState} from 'react';
import {ScrollView, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import type {TestCase} from '../data/testCases';

export function CaseMetaPanel({item, onBack}: {item: TestCase; onBack: () => void}) {
  const [open, setOpen] = useState(false);
  return <View style={s.wrap} testID="one_to_one_case_info">
    <View style={s.head}>
      <TouchableOpacity testID="btn_back_to_index" accessibilityRole="button" accessibilityLabel="返回用例首页" style={s.back} onPress={onBack}>
        <Text style={s.backText}>‹</Text>
      </TouchableOpacity>
      <View style={s.headText}><Text style={s.id}>{item.id}</Text><Text numberOfLines={3} style={s.title}>{item.title}</Text></View>
      <TouchableOpacity testID="btn_toggle_case_info" accessibilityRole="button" accessibilityState={{expanded: open}} style={s.toggleButton} onPress={() => setOpen(!open)}>
        <Text style={s.toggle}>{open ? '收起' : '测试信息'}</Text>
      </TouchableOpacity>
    </View>
    {open && <ScrollView style={s.body} contentContainerStyle={s.bodyContent} nestedScrollEnabled>
      <Text style={s.label}>测试信息</Text>
      <Text style={s.text}>级别 {item.level} · {item.automatable ? '自动化' : '人工/专项'}</Text>
      <Text style={s.text}>前置：{item.preconditions}</Text>
      <Text style={s.label}>测试步骤与检查点</Text>
      {item.testSteps.map((step, index) => <View key={index} style={s.step}><Text style={s.text}>{index + 1}. {step.action}</Text><Text style={s.check}>检查点：{step.checkpoint}</Text></View>)}
      <Text style={s.label}>预期结果</Text><Text style={s.text}>{item.expectedResult}</Text>
      <Text style={s.label}>后置条件</Text><Text style={s.text}>{item.postconditions}</Text>
      {!!item.manualReason && <><Text style={s.label}>人工/专项说明</Text><Text style={s.text}>{item.manualReason}</Text></>}
      <Text style={s.note}>下方为真实操作与输出模块；PASS/FAIL 只能依据本次真实返回值、回调、界面状态或截图。</Text>
    </ScrollView>}
  </View>;
}

const s = StyleSheet.create({
  wrap: {backgroundColor: '#FFFFFF', borderBottomWidth: 1, borderBottomColor: '#CBD5E1'},
  head: {minHeight: 76, paddingRight: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'},
  back: {width: 48, height: 48, alignItems: 'center', justifyContent: 'center'},
  backText: {fontSize: 30, lineHeight: 32, color: '#0A59F7'},
  headText: {flex: 1, flexDirection: 'row', alignItems: 'center'}, id: {fontSize: 15, fontWeight: '800', color: '#0A59F7', marginRight: 8},
  title: {flex: 1, fontSize: 15, lineHeight: 20, fontWeight: '700', color: '#111827'},
  toggleButton: {minHeight: 36, minWidth: 60, paddingHorizontal: 8, alignItems: 'center', justifyContent: 'center'},
  toggle: {fontSize: 12, color: '#0A59F7'},
  body: {maxHeight: 230, backgroundColor: '#F8FAFC'}, bodyContent: {paddingHorizontal: 12, paddingBottom: 12},
  label: {fontSize: 13, fontWeight: '700', color: '#334155', marginTop: 8, marginBottom: 3},
  text: {fontSize: 13, lineHeight: 19, color: '#334155'}, step: {marginBottom: 6}, check: {fontSize: 12, lineHeight: 18, color: '#1765A3'},
  note: {fontSize: 12, lineHeight: 18, color: '#9A3412', marginTop: 10, fontWeight: '600'},
});