import { Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import { router } 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 { useAuth } from '@/contexts/AuthContext';
import { useColors } from '@/hooks/useColors';
import { CREATORS, formatCount } from '@/data/mockData';

interface ActionCardProps {
  icon: string;
  label: string;
  desc: string;
  gradient: [string, string];
  onPress: () => void;
}

function ActionCard({ icon, label, desc, gradient, onPress }: ActionCardProps) {
  const colors = useColors();
  return (
    <TouchableOpacity
      onPress={onPress}
      activeOpacity={0.85}
      style={[s.actionCard, { backgroundColor: colors.card, borderColor: colors.border }]}
    >
      <LinearGradient colors={gradient} style={s.actionCardGrad} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }}>
        <Ionicons name={icon as any} size={32} color="#fff" />
      </LinearGradient>
      <View style={s.actionCardInfo}>
        <Text style={[s.actionCardLabel, { color: colors.foreground }]}>{label}</Text>
        <Text style={[s.actionCardDesc, { color: colors.mutedForeground }]}>{desc}</Text>
      </View>
      <Ionicons name="chevron-forward" size={20} color={colors.mutedForeground} />
    </TouchableOpacity>
  );
}

export default function CreateScreen() {
  const colors = useColors();
  const insets = useSafeAreaInsets();
  const { user } = useAuth();

  const topPad = Platform.OS === 'web' ? 67 : insets.top;
  const isCreator = user?.isCreator ?? false;

  const creatorProfile = isCreator ? CREATORS[0] : null;

  const creatorStats = [
    { label: 'Views', value: '128.4K', icon: 'eye-outline' },
    { label: 'Students', value: '2,840', icon: 'school-outline' },
    { label: 'Earnings', value: '₦384K', icon: 'cash-outline' },
  ];

  return (
    <View style={[s.screen, { backgroundColor: colors.background }]}>
      <ScrollView
        contentContainerStyle={[s.scroll, { paddingTop: topPad + 16 }]}
        showsVerticalScrollIndicator={false}
      >
        <Text style={[s.heading, { color: colors.foreground }]}>Create</Text>

        {isCreator ? (
          <>
            <View style={[s.statsRow, { backgroundColor: colors.card, borderColor: colors.border }]}>
              {creatorStats.map((stat) => (
                <View key={stat.label} style={s.statItem}>
                  <Text style={[s.statValue, { color: colors.primary }]}>{stat.value}</Text>
                  <Text style={[s.statLabel, { color: colors.mutedForeground }]}>{stat.label}</Text>
                </View>
              ))}
            </View>

            <Text style={[s.sectionTitle, { color: colors.foreground }]}>Upload Content</Text>

            <ActionCard
              icon="videocam"
              label="Upload Short Video"
              desc="Share a 60-second skill preview"
              gradient={['#FF6B35', '#FF3CAC']}
              onPress={() => router.push('/upload' as any)}
            />
            <ActionCard
              icon="book"
              label="Create Full Course"
              desc="Build a structured learning program"
              gradient={['#7928CA', '#4A00E0']}
              onPress={() => router.push('/upload' as any)}
            />
            <ActionCard
              icon="bar-chart"
              label="View Analytics"
              desc="Track views, earnings, and engagement"
              gradient={['#0F2027', '#2C5364']}
              onPress={() => router.push('/earnings' as any)}
            />
              <ActionCard
                icon="ribbon"
                label="Creator Guidelines & Terms"
                desc="Rules, terms, and tips for using the platform"
                gradient={['#FF6B35', '#FFB86B']}
                onPress={() => router.push('/creator-guidelines' as any)}
              />

            <Text style={[s.sectionTitle, { color: colors.foreground }]}>Creator Tips</Text>

            {[
              { tip: 'Post shorts consistently — 3-5 per week keeps your audience engaged', icon: 'flash' },
              { tip: 'Show your earnings to attract learners. Transparency builds trust', icon: 'trending-up' },
              { tip: 'Respond to comments within 24 hours — it boosts your reach', icon: 'chatbubble' },
            ].map((item, i) => (
              <View key={i} style={[s.tipCard, { backgroundColor: colors.card, borderColor: colors.border }]}>
                <Ionicons name={item.icon as any} size={20} color={colors.primary} />
                <Text style={[s.tipText, { color: colors.foreground }]}>{item.tip}</Text>
              </View>
            ))}
          </>
        ) : (
          <>
            <LinearGradient
              colors={['#FF6B35', '#FF3CAC']}
              style={s.creatorBanner}
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 1 }}
            >
              <Ionicons name="star" size={40} color="rgba(255,255,255,0.9)" />
              <Text style={s.bannerTitle}>Become a Creator</Text>
              <Text style={s.bannerDesc}>
                Share your skills and earn income from your knowledge. Join 10,000+ creators already earning on our platform.
              </Text>
              <TouchableOpacity style={s.bannerBtn}>
                <Text style={s.bannerBtnText}>Apply to Create</Text>
              </TouchableOpacity>
            </LinearGradient>

            <Text style={[s.sectionTitle, { color: colors.foreground }]}>Creator Earnings</Text>

            {[
              { name: 'Amara Diallo', earn: '₦284,000/month', specialty: 'Nail Art' },
              { name: 'Kofi Mensah', earn: '₦520,000/month', specialty: 'Furniture' },
              { name: 'Chef Bola', earn: '₦390,000/month', specialty: 'Cooking' },
            ].map((item, i) => (
              <View key={i} style={[s.earnerCard, { backgroundColor: colors.card, borderColor: colors.border }]}>
                <View style={[s.earnerAvatar, { backgroundColor: ['#FF3CAC', '#8B4513', '#FF4500'][i] }]}>
                  <Text style={s.earnerInitials}>{item.name.split(' ').map((w) => w[0]).join('')}</Text>
                </View>
                <View style={s.earnerInfo}>
                  <Text style={[s.earnerName, { color: colors.foreground }]}>{item.name}</Text>
                  <Text style={[s.earnerSpec, { color: colors.mutedForeground }]}>{item.specialty}</Text>
                </View>
                <Text style={[s.earnerAmount, { color: colors.primary }]}>{item.earn}</Text>
              </View>
            ))}

            <View style={{ height: 16 }} />
          </>
        )}

        <View style={{ height: Platform.OS === 'web' ? 100 : 80 }} />
      </ScrollView>
    </View>
  );
}

const s = StyleSheet.create({
  screen: { flex: 1 },
  scroll: { paddingHorizontal: 16 },
  heading: { fontSize: 26, fontFamily: 'Poppins_700Bold', marginBottom: 20 },
  statsRow: {
    flexDirection: 'row', borderRadius: 16, borderWidth: 1,
    padding: 16, marginBottom: 24, justifyContent: 'space-around',
  },
  statItem: { alignItems: 'center', gap: 4 },
  statValue: { fontSize: 20, fontFamily: 'Poppins_700Bold' },
  statLabel: { fontSize: 12, fontFamily: 'Poppins_400Regular' },
  sectionTitle: { fontSize: 17, fontFamily: 'Poppins_700Bold', marginBottom: 12, marginTop: 4 },
  actionCard: {
    flexDirection: 'row', alignItems: 'center', gap: 14,
    borderRadius: 16, padding: 16, marginBottom: 10, borderWidth: 1,
  },
  actionCardGrad: { width: 56, height: 56, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
  actionCardInfo: { flex: 1 },
  actionCardLabel: { fontSize: 15, fontFamily: 'Poppins_600SemiBold' },
  actionCardDesc: { fontSize: 12, fontFamily: 'Poppins_400Regular', marginTop: 2 },
  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 },
  creatorBanner: {
    borderRadius: 20, padding: 24, alignItems: 'center', gap: 12, marginBottom: 28,
  },
  bannerTitle: { color: '#fff', fontSize: 22, fontFamily: 'Poppins_700Bold' },
  bannerDesc: { color: 'rgba(255,255,255,0.85)', fontSize: 14, fontFamily: 'Poppins_400Regular', textAlign: 'center', lineHeight: 20 },
  bannerBtn: { backgroundColor: 'rgba(255,255,255,0.2)', borderRadius: 20, paddingHorizontal: 24, paddingVertical: 12, borderWidth: 1, borderColor: 'rgba(255,255,255,0.4)' },
  bannerBtnText: { color: '#fff', fontSize: 15, fontFamily: 'Poppins_700Bold' },
  earnerCard: {
    flexDirection: 'row', alignItems: 'center', gap: 12,
    padding: 14, borderRadius: 14, borderWidth: 1, marginBottom: 10,
  },
  earnerAvatar: { width: 46, height: 46, borderRadius: 23, alignItems: 'center', justifyContent: 'center' },
  earnerInitials: { color: '#fff', fontSize: 15, fontFamily: 'Poppins_700Bold' },
  earnerInfo: { flex: 1 },
  earnerName: { fontSize: 14, fontFamily: 'Poppins_600SemiBold' },
  earnerSpec: { fontSize: 12, fontFamily: 'Poppins_400Regular' },
  earnerAmount: { fontSize: 14, fontFamily: 'Poppins_700Bold' },
});