import { Ionicons } from '@expo/vector-icons';
import { useFocusEffect, useLocalSearchParams, useRouter } from 'expo-router';
import { useCallback, useState } from 'react';
import {
  ActivityIndicator,
  Alert,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useLegalData, useLegalMembership, useLegalServiceRequests } from '../../src/hooks';
import { LoadingState, ErrorState, EmptyState } from '../../src/components/StateView';
import { colors } from '../../src/theme';

/* ===================== 顶部导航 ===================== */

function Header({ onBack }: { onBack: () => void }) {
  return (
    <View style={styles.header}>
      <Pressable style={styles.headerBtn} onPress={onBack} hitSlop={8}>
        <Ionicons name="chevron-back" size={24} color={colors.textPrimary} />
      </Pressable>
      <Text style={styles.headerTitle}>会员服务</Text>
      <View style={styles.headerBtn} />
    </View>
  );
}

/* ===================== 页面 ===================== */

export default function LegalServiceScreen() {
  const router = useRouter();
  const { id } = useLocalSearchParams();
  const serviceId = Array.isArray(id) ? id[0] : id;
  const { services, loading, error, refresh } = useLegalData();
  const { membership, refresh: refreshMembership } = useLegalMembership();
  const {
    requests,
    loading: requestsLoading,
    error: requestsError,
    refresh: refreshRequests,
    submit,
    submitting,
  } = useLegalServiceRequests();

  const [content, setContent] = useState('');

  // 返回本页时刷新会员态与申请记录
  useFocusEffect(
    useCallback(() => {
      refreshMembership();
      refreshRequests();
    }, [refreshMembership, refreshRequests]),
  );

  const service = services.find((s) => s.id === serviceId);

  const handleSubmit = useCallback(async () => {
    if (!service) return;
    const text = content.trim();
    if (!text) {
      Alert.alert('提示', '请先填写你的需求描述');
      return;
    }
    try {
      await submit(service.id, text);
      setContent('');
      Alert.alert('提交成功', '我们已收到你的申请，将尽快安排专人跟进。');
    } catch (e) {
      Alert.alert('提交失败', (e as Error).message || '请稍后重试');
    }
  }, [service, content, submit]);

  if (loading) {
    return (
      <SafeAreaView style={styles.safeArea} edges={['top']}>
        <Header onBack={() => router.back()} />
        <LoadingState text="加载服务中…" />
      </SafeAreaView>
    );
  }

  // 接口失败：必须先于「服务不存在」判断，否则取数失败会伪装成业务空态，
  // 把用户引向「从法律服务页重新进入」这条无效的自救路径。
  if (error) {
    return (
      <SafeAreaView style={styles.safeArea} edges={['top']}>
        <Header onBack={() => router.back()} />
        <ErrorState message="服务加载失败，请重试" onRetry={refresh} />
      </SafeAreaView>
    );
  }

  if (!service) {
    return (
      <SafeAreaView style={styles.safeArea} edges={['top']}>
        <Header onBack={() => router.back()} />
        <EmptyState icon="alert-circle-outline" title="服务不存在" subtitle="请从法律服务页重新进入" />
      </SafeAreaView>
    );
  }

  // 未开通会员：拦截并引导开通（付费前不给权益）
  if (!membership) {
    return (
      <SafeAreaView style={styles.safeArea} edges={['top']}>
        <Header onBack={() => router.back()} />
        <View style={styles.lockedBox}>
          <View style={styles.lockedIconWrap}>
            <Ionicons name="lock-closed-outline" size={44} color={colors.action} />
          </View>
          <Text style={styles.lockedTitle}>{service.title}</Text>
          <Text style={styles.lockedDesc}>{service.description}</Text>
          <Text style={styles.lockedTip}>该服务为会员专享，开通后即可使用</Text>
          <Pressable style={styles.lockedBtn} onPress={() => router.push('/legal/upgrade')}>
            <Text style={styles.lockedBtnText}>开通会员</Text>
          </Pressable>
        </View>
      </SafeAreaView>
    );
  }

  const myRequests = requests.filter((r) => r.serviceId === service.id);
  const canSubmit = content.trim().length > 0 && !submitting;

  return (
    <SafeAreaView style={styles.safeArea} edges={['top']}>
      <Header onBack={() => router.back()} />
      <ScrollView
        style={styles.scroll}
        contentContainerStyle={styles.content}
        showsVerticalScrollIndicator={false}
      >
        {/* 服务说明 */}
        <View style={styles.card}>
          <View style={styles.serviceHead}>
            <View style={styles.serviceIconWrap}>
              <Ionicons
                name={service.icon as keyof typeof Ionicons.glyphMap}
                size={22}
                color={colors.action}
              />
            </View>
            <View style={styles.serviceHeadBody}>
              <Text style={styles.serviceName}>{service.title}</Text>
              <Text style={styles.serviceDesc}>{service.description}</Text>
            </View>
          </View>
          {service.requestHint && <Text style={styles.hint}>{service.requestHint}</Text>}
        </View>

        {/* 需求填写 */}
        <Text style={styles.sectionTitle}>填写你的需求</Text>
        <TextInput
          style={styles.input}
          value={content}
          onChangeText={setContent}
          placeholder="请描述你的具体情况与希望解决的问题…"
          placeholderTextColor={colors.textHint}
          multiline
          maxLength={500}
          textAlignVertical="top"
        />
        <Text style={styles.counter}>{content.length}/500</Text>

        <Pressable
          style={({ pressed }) => [
            styles.submitBtn,
            !canSubmit && styles.submitBtnDisabled,
            pressed && canSubmit && styles.submitBtnPressed,
          ]}
          onPress={handleSubmit}
          disabled={!canSubmit}
        >
          {submitting ? (
            <ActivityIndicator color={colors.white} />
          ) : (
            <Text style={styles.submitBtnText}>提交申请</Text>
          )}
        </Pressable>

        {/* 我的申请记录 */}
        <Text style={styles.sectionTitle}>我的申请记录</Text>
        {requestsLoading ? (
          <ActivityIndicator color={colors.primary} style={styles.requestsLoading} />
        ) : requestsError ? (
          // 申请记录取数失败不能渲染成「暂无申请记录」——那等于告诉用户记录没了
          <View style={styles.errorCard}>
            <Text style={styles.errorText}>申请记录加载失败</Text>
            <Pressable onPress={refreshRequests} hitSlop={8}>
              <Text style={styles.errorRetry}>重试</Text>
            </Pressable>
          </View>
        ) : myRequests.length === 0 ? (
          <View style={styles.emptyCard}>
            <Text style={styles.emptyText}>暂无申请记录</Text>
          </View>
        ) : (
          <View style={styles.requestList}>
            {myRequests.map((r) => (
              <View key={r.id} style={styles.requestCard}>
                <View style={styles.requestHead}>
                  <Text style={styles.requestService}>{r.serviceName}</Text>
                  <View style={styles.statusTag}>
                    <Text style={styles.statusText}>
                      {r.status === 'submitted' ? '已提交' : r.status === 'processing' ? '处理中' : '已完成'}
                    </Text>
                  </View>
                </View>
                <Text style={styles.requestContent}>{r.content}</Text>
                <Text style={styles.requestTime}>
                  {new Date(r.createdAt).toLocaleString('zh-CN')}
                </Text>
              </View>
            ))}
          </View>
        )}
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: colors.pageBg,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 8,
    height: 48,
    backgroundColor: colors.white,
    borderBottomWidth: 1,
    borderBottomColor: colors.borderLight,
  },
  headerBtn: {
    width: 40,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerTitle: {
    fontSize: 17,
    fontWeight: '700',
    color: colors.textPrimary,
  },
  scroll: {
    flex: 1,
  },
  content: {
    padding: 8,
    paddingBottom: 24,
  },
  card: {
    padding: 8,
    borderRadius: 8,
    backgroundColor: colors.white,
    borderWidth: 1,
    borderColor: colors.border,
  },
  serviceHead: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  serviceIconWrap: {
    width: 44,
    height: 44,
    borderRadius: 22,
    backgroundColor: colors.actionLight,
    alignItems: 'center',
    justifyContent: 'center',
  },
  serviceHeadBody: {
    flex: 1,
    marginLeft: 12,
  },
  serviceName: {
    fontSize: 16,
    fontWeight: '700',
    color: colors.textPrimary,
  },
  serviceDesc: {
    marginTop: 2,
    fontSize: 12,
    color: colors.textSecondary,
    lineHeight: 17,
  },
  hint: {
    marginTop: 12,
    paddingTop: 12,
    borderTopWidth: 1,
    borderTopColor: colors.borderLight,
    fontSize: 13,
    lineHeight: 19,
    color: colors.textSecondary,
  },
  sectionTitle: {
    marginTop: 20,
    marginBottom: 10,
    fontSize: 15,
    fontWeight: '700',
    color: colors.textPrimary,
  },
  input: {
    minHeight: 120,
    padding: 12,
    borderRadius: 8,
    backgroundColor: colors.white,
    borderWidth: 1,
    borderColor: colors.border,
    fontSize: 14,
    lineHeight: 20,
    color: colors.textPrimary,
  },
  counter: {
    marginTop: 6,
    textAlign: 'right',
    fontSize: 12,
    color: colors.textHint,
  },
  submitBtn: {
    marginTop: 16,
    height: 48,
    borderRadius: 8,
    backgroundColor: colors.primaryBtn,
    alignItems: 'center',
    justifyContent: 'center',
  },
  submitBtnPressed: {
    opacity: 0.9,
  },
  submitBtnDisabled: {
    opacity: 0.5,
  },
  submitBtnText: {
    fontSize: 16,
    fontWeight: '700',
    color: colors.white,
  },
  requestsLoading: {
    marginTop: 16,
  },
  emptyCard: {
    padding: 8,
    borderRadius: 8,
    backgroundColor: colors.white,
    alignItems: 'center',
  },
  emptyText: {
    fontSize: 13,
    color: colors.textSecondary,
  },
  errorCard: {
    padding: 8,
    borderRadius: 8,
    backgroundColor: colors.dangerLight,
    borderWidth: 1,
    borderColor: colors.dangerBorder,
    alignItems: 'center',
    gap: 8,
  },
  errorText: {
    fontSize: 13,
    color: colors.dangerText,
  },
  errorRetry: {
    fontSize: 13,
    fontWeight: '600',
    color: colors.primaryText,
  },
  requestList: {
    gap: 8,
  },
  requestCard: {
    padding: 8,
    borderRadius: 8,
    backgroundColor: colors.white,
    borderWidth: 1,
    borderColor: colors.border,
  },
  requestHead: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  requestService: {
    flex: 1,
    fontSize: 14,
    fontWeight: '700',
    color: colors.textPrimary,
    marginRight: 8,
  },
  statusTag: {
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 4,
    backgroundColor: colors.primaryLight,
  },
  statusText: {
    fontSize: 11,
    fontWeight: '700',
    color: colors.primaryText,
  },
  requestContent: {
    marginTop: 8,
    fontSize: 13,
    lineHeight: 19,
    color: colors.textSecondary,
  },
  requestTime: {
    marginTop: 8,
    fontSize: 11,
    color: colors.textHint,
  },
  lockedBox: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
  },
  lockedIconWrap: {
    width: 80,
    height: 80,
    borderRadius: 40,
    backgroundColor: colors.actionLight,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 16,
  },
  lockedTitle: {
    fontSize: 18,
    fontWeight: '700',
    color: colors.textPrimary,
  },
  lockedDesc: {
    marginTop: 8,
    fontSize: 14,
    lineHeight: 20,
    color: colors.textSecondary,
    textAlign: 'center',
  },
  lockedTip: {
    marginTop: 12,
    fontSize: 13,
    fontWeight: '600',
    color: colors.actionText,
  },
  lockedBtn: {
    marginTop: 28,
    width: 200,
    height: 46,
    borderRadius: 23,
    backgroundColor: colors.primaryBtn,
    alignItems: 'center',
    justifyContent: 'center',
  },
  lockedBtnText: {
    fontSize: 15,
    fontWeight: '700',
    color: colors.white,
  },
});