import { useRouter } from 'expo-router';
import { useEffect, useState } from 'react';
import { ScrollView, StyleSheet, Text } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { PrimaryButton } from '../../components/onboarding/ui/PrimaryButton';
import { CenterState, EditHeader, Field, FormNote, PageFooter } from '../../components/resume/EditKit';
import { useResume } from '../../src/hooks';
import { colors } from '../../src/theme';
import { isValidEmail, isValidPhone } from '../../src/utils';

/**
 * 基本信息编辑页。
 *
 * 只收简历正文里那四项：姓名 / 手机号 / 邮箱 / 所在城市。
 * - 期望城市不在这里（属求职意向，归 `/job-preference`，同一份数据不能有两个入口）
 * - 头像不在这里（由 API 层按姓名派生首字，页面从不传头像）
 * - 手机号与邮箱是**填了才校验**：引导流程未采集这两项，空值是「未采集」不是「填错了」
 */
export default function ResumeBasicScreen() {
  const router = useRouter();
  const { resume, loading, error, refresh, saving, saveBasicInfo } = useResume();

  /** 表单只在首次取到数据时初始化一次，此后由用户输入驱动（否则每次 refresh 都会把手输的值冲掉） */
  const [form, setForm] = useState<BasicForm | null>(null);
  const [formError, setFormError] = useState('');

  useEffect(() => {
    if (resume && !form) {
      setForm({
        name: resume.basicInfo.name,
        phone: resume.basicInfo.phone,
        email: resume.basicInfo.email,
        location: resume.basicInfo.location,
      });
    }
  }, [resume, form]);

  const header = <EditHeader title="编辑基本信息" onBack={() => router.back()} />;

  if (form === null) {
    return (
      <SafeAreaView style={styles.container} edges={['top']}>
        {header}
        {error !== null ? (
          <CenterState icon="alert-circle-outline" text="加载失败" actionLabel="点击重试" onAction={refresh} />
        ) : (
          <CenterState text={loading ? '正在加载…' : '简历数据为空'} />
        )}
      </SafeAreaView>
    );
  }

  const phone = form.phone.trim();
  const email = form.email.trim();
  const phoneError = phone !== '' && !isValidPhone(phone) ? '请输入 11 位手机号' : '';
  const emailError = email !== '' && !isValidEmail(email) ? '请输入正确的邮箱地址' : '';
  const canSave = phoneError === '' && emailError === '';

  const update = (field: keyof BasicForm, text: string) =>
    setForm((prev) => ({ ...(prev ?? form), [field]: text }));

  const handleSave = async () => {
    if (!canSave || saving) return;
    setFormError('');
    try {
      await saveBasicInfo({ name: form.name, phone, email, location: form.location });
      router.back();
    } catch {
      // 落库失败就留在本页如实说，不装作已经保存（后端接入后换成真实错误文案）
      setFormError('保存失败，请稍后重试');
    }
  };

  return (
    <SafeAreaView style={styles.container} edges={['top']}>
      {header}
      <ScrollView
        contentContainerStyle={styles.body}
        showsVerticalScrollIndicator={false}
        keyboardShouldPersistTaps="handled"
      >
        <Field
          label="姓名"
          value={form.name}
          onChangeText={(v) => update('name', v)}
          placeholder="请输入姓名"
          maxLength={20}
        />
        <Field
          label="手机号"
          value={form.phone}
          onChangeText={(v) => update('phone', v)}
          placeholder="请输入手机号"
          keyboardType="phone-pad"
          maxLength={11}
          error={phoneError}
        />
        <Field
          label="邮箱"
          value={form.email}
          onChangeText={(v) => update('email', v)}
          placeholder="请输入邮箱"
          keyboardType="email-address"
          error={emailError}
        />
        <Field
          label="所在城市"
          value={form.location}
          onChangeText={(v) => update('location', v)}
          placeholder="如：北京 · 朝阳区"
          maxLength={30}
        />

        {formError !== '' && <Text style={styles.formError}>{formError}</Text>}
        <FormNote text="手机号与邮箱引导流程未采集，需要在这里补全；简历里没填的项不显示空行。" />
      </ScrollView>

      <PageFooter>
        <PrimaryButton label={saving ? '保存中…' : '保存'} active={canSave} onPress={handleSave} loading={saving} />
      </PageFooter>
    </SafeAreaView>
  );
}

interface BasicForm {
  name: string;
  phone: string;
  email: string;
  location: string;
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: colors.pageBg },
  body: { padding: 8, paddingBottom: 24 },
  formError: { fontSize: 13, color: colors.dangerText, marginBottom: 8 },
});