import { Ionicons } from '@expo/vector-icons';
  import { LinearGradient } from 'expo-linear-gradient';
  import { router, useLocalSearchParams } from 'expo-router';
  import React from 'react';
  import { Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
  import { useSafeAreaInsets } from 'react-native-safe-area-context';
  import { useColors } from '@/hooks/useColors';

  const TERMS = [
    'You keep ownership of everything you upload — you grant ChinaSkills.co.za a licence to host and share it on the platform.',
    'You earn 70% of revenue from your courses and subscriptions; ChinaSkills.co.za keeps a 30% platform fee.',
    'Payouts are processed monthly once your balance reaches the R500 minimum threshold.',
    'You must be the original creator, or have full rights to any video, image, or course material you upload.',
    'Content that breaks our Community Guidelines may be removed without prior notice.',
  ];

  const GUIDELINES = [
    'No hate speech, harassment, or discriminatory content of any kind.',
    'Original work only — no plagiarized, stolen, or reposted content.',
    'Keep content appropriate for a general audience, including learners in Kids Academy.',
    'Be respectful in comments and messages with your learners.',
    'Represent your skills and qualifications honestly.',
  ];

  const TIPS = [
    { icon: 'flash', text: 'Post consistently — 3 to 5 shorts a week keeps your audience engaged.' },
    { icon: 'phone-portrait-outline', text: 'Shoot vertically, keep it under 60 seconds, with good lighting and clear audio.' },
    { icon: 'chatbubble-outline', text: 'Reply to comments within 24 hours — it boosts your reach.' },
    { icon: 'trending-up', text: 'Show real results and earnings potential to build trust with learners.' },
    { icon: 'gift-outline', text: 'Offer a free preview lesson before your paid course to convert more learners.' },
  ];

  function Section({ title, items, colors }: { title: string; items: string[]; colors: any }) {
    return (
      <View style={{ marginBottom: 22 }}>
        <Text style={[s.sectionTitle, { color: colors.foreground }]}>{title}</Text>
        {items.map((item, i) => (
          <View key={i} style={s.bulletRow}>
            <View style={[s.bulletDot, { backgroundColor: colors.primary }]} />
            <Text style={[s.bulletText, { color: colors.mutedForeground }]}>{item}</Text>
          </View>
        ))}
      </View>
    );
  }

  export default function CreatorGuidelinesScreen() {
    const colors = useColors();
    const insets = useSafeAreaInsets();
    const params = useLocalSearchParams<{ onboarding?: string }>();
    const isOnboarding = params.onboarding === '1';

    const topPad = Platform.OS === 'web' ? 67 : insets.top;
    const bottomPad = Platform.OS === 'web' ? 34 : insets.bottom;

    const handleContinue = () => {
      if (isOnboarding) {
        router.replace('/(tabs)/create');
      } else {
        router.back();
      }
    };

    return (
      <View style={[s.screen, { backgroundColor: colors.background }]}>
        <View style={[s.header, { paddingTop: topPad + 10, borderBottomColor: colors.border }]}>
          {!isOnboarding && (
            <TouchableOpacity onPress={() => router.back()} style={s.backBtn}>
              <Ionicons name="arrow-back" size={22} color={colors.foreground} />
            </TouchableOpacity>
          )}
          <Text style={[s.headerTitle, { color: colors.foreground }]}>Creator Guidelines & Terms</Text>
          <View style={{ width: 36 }} />
        </View>

        <ScrollView contentContainerStyle={[s.scroll, { paddingBottom: bottomPad + 24 }]}>
          <LinearGradient colors={['#FF6B3522', '#FF3CAC11']} style={s.banner}>
            <Ionicons name="ribbon-outline" size={40} color={colors.primary} />
            <Text style={[s.bannerTitle, { color: colors.foreground }]}>Welcome, Creator</Text>
            <Text style={[s.bannerSub, { color: colors.mutedForeground }]}>
              Please review the terms, community guidelines, and tips before you start uploading.
            </Text>
          </LinearGradient>

          <Section title="Creator Terms & Conditions" items={TERMS} colors={colors} />
          <Section title="Community Guidelines" items={GUIDELINES} colors={colors} />

          <Text style={[s.sectionTitle, { color: colors.foreground }]}>Tips for Success</Text>
          {TIPS.map((tip, i) => (
            <View key={i} style={[s.tipCard, { backgroundColor: colors.card, borderColor: colors.border }]}>
              <Ionicons name={tip.icon as any} size={20} color={colors.primary} />
              <Text style={[s.tipText, { color: colors.foreground }]}>{tip.text}</Text>
            </View>
          ))}

          <TouchableOpacity
            onPress={handleContinue}
            style={[s.continueBtn, { backgroundColor: colors.primary }]}
            activeOpacity={0.85}
          >
            <Text style={s.continueBtnText}>{isOnboarding ? 'I Agree & Continue' : 'Close'}</Text>
          </TouchableOpacity>
        </ScrollView>
      </View>
    );
  }

  const s = StyleSheet.create({
    screen: { flex: 1 },
    header: {
      flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',
      paddingHorizontal: 16, paddingBottom: 14, borderBottomWidth: 1,
    },
    backBtn: { width: 36, height: 36, alignItems: 'center', justifyContent: 'center' },
    headerTitle: { fontSize: 16, fontFamily: 'Poppins_700Bold', flex: 1, textAlign: 'center' },
    scroll: { padding: 16 },
    banner: { borderRadius: 20, padding: 24, alignItems: 'center', gap: 8, marginBottom: 24 },
    bannerTitle: { fontSize: 20, fontFamily: 'Poppins_700Bold' },
    bannerSub: { fontSize: 13, fontFamily: 'Poppins_400Regular', textAlign: 'center', lineHeight: 19 },
    sectionTitle: { fontSize: 16, fontFamily: 'Poppins_700Bold', marginBottom: 10 },
    bulletRow: { flexDirection: 'row', alignItems: 'flex-start', gap: 10, marginBottom: 10, paddingRight: 8 },
    bulletDot: { width: 6, height: 6, borderRadius: 3, marginTop: 7 },
    bulletText: { flex: 1, fontSize: 13, fontFamily: 'Poppins_400Regular', lineHeight: 19 },
    tipCard: {
      flexDirection: 'row', gap: 12, alignItems: 'flex-start',
      padding: 14, borderRadius: 12, borderWidth: 1, marginBottom: 8,
    },
    tipText: { flex: 1, fontSize: 13, fontFamily: 'Poppins_400Regular', lineHeight: 19 },
    continueBtn: { borderRadius: 14, paddingVertical: 16, alignItems: 'center', marginTop: 12 },
    continueBtnText: { color: '#fff', fontSize: 16, fontFamily: 'Poppins_700Bold' },
  });