import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { router } from 'expo-router';
import { useTheme } from '../design/tokens';

export function NoProjectGate() {
  const theme = useTheme();
  return (
    <View style={S.root}>
      <Text style={[S.icon, { color: theme.bg.border }]}>◫</Text>
      <Text style={[S.title, { color: theme.text.muted }]}>请先创建工程</Text>
      <Text style={[S.sub, { color: theme.text.ghost }]}>
        在「工程」页面创建工程后即可开始采集
      </Text>
      <TouchableOpacity
        style={[S.btn, { backgroundColor: theme.blue.bg, borderColor: theme.blue.fg }]}
        onPress={() => router.push('/(tabs)/projects')}
        activeOpacity={0.8}
      >
        <Text style={[S.btnTxt, { color: theme.blue.fg }]}>前往工程页</Text>
      </TouchableOpacity>
    </View>
  );
}

const S = StyleSheet.create({
  root:   { flex: 1, justifyContent: 'center', alignItems: 'center', gap: 12 },
  icon:   { fontSize: 48 },
  title:  { fontSize: 17, fontWeight: '700' },
  sub:    { fontSize: 12, textAlign: 'center', paddingHorizontal: 40 },
  btn:    { marginTop: 8, borderRadius: 12, paddingVertical: 13, paddingHorizontal: 32, borderWidth: 1 },
  btnTxt: { fontSize: 14, fontWeight: '700', letterSpacing: 2 },
});
