import { useState } from 'react';
import { StyleSheet, Text, TextInput, View } from 'react-native';
import { colors } from '../../../src/theme';
import { useOnboarding, useRegisterFinish } from '../../../src/hooks';
import { ScreenShell } from '../ui/ScreenShell';
import { Illustration } from '../ui/Illustration';
import { PrimaryButton } from '../ui/PrimaryButton';

export function B3Recruiter() {
  const { data, setData, back, meta } = useOnboarding();
  const finish = useRegisterFinish();
  const [submitted, setSubmitted] = useState(false);

  const canSubmit = data.recruiterCompany.trim().length > 0;

  return (
    <ScreenShell time={meta.time} battery={meta.battery} title="企业认证" showBack onBack={back}>
      <Text style={styles.tip}>请完成企业认证，开启招聘之旅（与求职者主线分开演示）</Text>

      <Text style={styles.label}>公司名称</Text>
      <TextInput
        style={styles.input}
        value={data.recruiterCompany}
        onChangeText={(t) => setData({ recruiterCompany: t })}
        placeholder="请输入公司全称"
        placeholderTextColor={colors.textHint}
      />

      <Text style={styles.label}>营业执照</Text>
      <View style={styles.upload}>
        <Illustration name="businessLicense" size={96} radius={12} />
        <Text style={styles.uploadText}>点击上传营业执照</Text>
      </View>

      <Text style={styles.label}>联系人</Text>
      <TextInput
        style={styles.input}
        value={data.school}
        onChangeText={(t) => setData({ school: t })}
        placeholder="请输入联系人姓名"
        placeholderTextColor={colors.textHint}
      />

      <View style={styles.footer}>
        <PrimaryButton
          label={submitted ? '已提交，等待审核' : '提交认证'}
          active={canSubmit && !submitted}
          onPress={() => {
            setSubmitted(true);
            finish('enterprise');
          }}
        />
      </View>
    </ScreenShell>
  );
}

const styles = StyleSheet.create({
  tip: { fontSize: 13, color: colors.textHint, marginBottom: 18 },
  label: { fontSize: 14, fontWeight: '700', color: colors.textPrimary, marginTop: 16, marginBottom: 8 },
  input: {
    height: 50,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: colors.border,
    backgroundColor: colors.white,
    paddingHorizontal: 14,
    fontSize: 15,
    color: colors.textPrimary,
  },
  upload: {
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
    paddingVertical: 18,
    borderRadius: 12,
    borderWidth: 1,
    borderStyle: 'dashed',
    borderColor: colors.borderStrong,
    backgroundColor: colors.white,
  },
  uploadText: { fontSize: 13, color: colors.textHint },
  footer: { marginTop: 28 },
});