import React, { useState, useEffect, useRef, useCallback } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  ActivityIndicator,
  Modal,
  Animated,
  StyleSheet,
  ScrollView,
  FlatList,
  TextInput,
  Platform,
} from 'react-native';
import { useDubsTheme } from '../theme';
import { useDubs } from '../../provider';
import { useJackpot } from '../../hooks/useJackpot';
import { useEnterJackpot } from '../../hooks/useEnterJackpot';
import type { EnterJackpotMutationResult } from '../../hooks/useEnterJackpot';
import type { JackpotEntry } from '../../types';

export interface JackpotSheetProps {
  visible: boolean;
  onDismiss: () => void;
  onSuccess?: (result: EnterJackpotMutationResult) => void;
  onError?: (error: Error) => void;
  minEntry?: number;
  maxEntry?: number;
}

const STATUS_LABELS: Record<string, string> = {
  building: 'Building transaction...',
  signing: 'Approve in wallet...',
  confirming: 'Confirming entry...',
  success: "You're in! 🏆",
};

const QUICK_AMOUNTS = [0.1, 0.5, 1];

function formatSOL(lamports: string | number): string {
  const val = typeof lamports === 'string' ? parseInt(lamports, 10) : lamports;
  if (isNaN(val) || val === 0) return '0';
  const sol = val / 1_000_000_000;
  if (sol >= 100) return sol.toFixed(0);
  if (sol >= 1) return sol.toFixed(2);
  if (sol >= 0.01) return sol.toFixed(3);
  return sol.toFixed(4);
}

function truncateWallet(addr: string): string {
  if (!addr || addr.length < 8) return addr || '';
  return `${addr.slice(0, 4)}...${addr.slice(-4)}`;
}

export function JackpotSheet({
  visible,
  onDismiss,
  onSuccess,
  onError,
  minEntry = 0.01,
  maxEntry = 10,
}: JackpotSheetProps) {
  const t = useDubsTheme();
  const { wallet, client } = useDubs();
  const { round, lastWinner, refetch } = useJackpot();
  const mutation = useEnterJackpot();

  const [betAmount, setBetAmount] = useState('0.1');
  const [entries, setEntries] = useState<JackpotEntry[]>([]);
  const overlayOpacity = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(overlayOpacity, {
      toValue: visible ? 1 : 0,
      duration: 250,
      useNativeDriver: true,
    }).start();
  }, [visible, overlayOpacity]);

  // Fetch entries when sheet opens
  useEffect(() => {
    if (visible) {
      mutation.reset();
      setBetAmount('0.1');
      refetch();
      client.getJackpotEntries().then(res => setEntries(res.entries)).catch(() => {});
    }
  }, [visible]); // eslint-disable-line react-hooks/exhaustive-deps

  // Auto-dismiss on success
  useEffect(() => {
    if (mutation.status === 'success' && mutation.data) {
      onSuccess?.(mutation.data);
      refetch();
      client.getJackpotEntries().then(res => setEntries(res.entries)).catch(() => {});
      const timer = setTimeout(() => onDismiss(), 2500);
      return () => clearTimeout(timer);
    }
  }, [mutation.status, mutation.data]); // eslint-disable-line react-hooks/exhaustive-deps

  useEffect(() => {
    if (mutation.status === 'error' && mutation.error) {
      onError?.(mutation.error);
    }
  }, [mutation.status, mutation.error]); // eslint-disable-line react-hooks/exhaustive-deps

  const potSol = round ? Number(BigInt(round.totalPotLamports || '0')) / 1_000_000_000 : 0;
  const totalWeight = round ? Number(BigInt(round.totalWeight || '0')) : 0;
  const betSol = parseFloat(betAmount) || 0;
  const entryLamports = Math.round(betSol * 1_000_000_000);

  // Live odds preview
  const userOdds = totalWeight > 0
    ? ((entryLamports / (totalWeight + entryLamports)) * 100).toFixed(1)
    : entries.length === 0 ? '100.0' : '0.0';

  const isMutating = mutation.status !== 'idle' && mutation.status !== 'success' && mutation.status !== 'error';
  const canEnter = !isMutating && mutation.status !== 'success' && round?.status === 'Open' && betSol >= minEntry;

  const handleQuickAdd = useCallback((amount: number) => {
    setBetAmount(prev => {
      const current = parseFloat(prev) || 0;
      const next = Math.min(current + amount, maxEntry);
      return next.toFixed(2);
    });
  }, [maxEntry]);

  const handleEnter = useCallback(async () => {
    if (!wallet.publicKey || entryLamports < 10000) return;
    try {
      await mutation.execute(entryLamports);
    } catch {
      // Error captured in mutation state
    }
  }, [wallet.publicKey, mutation.execute, entryLamports]); // eslint-disable-line react-hooks/exhaustive-deps

  const statusLabel = STATUS_LABELS[mutation.status] || '';

  const renderPlayerCard = ({ item, index }: { item: JackpotEntry; index: number }) => (
    <View style={styles.playerCard}>
      {/* Avatar */}
      <View style={styles.playerAvatar}>
        <Text style={styles.playerAvatarText}>
          {item.player.slice(0, 2).toUpperCase()}
        </Text>
      </View>
      {/* Username */}
      <Text style={styles.playerUsername} numberOfLines={1}>
        @{truncateWallet(item.player)}
      </Text>
      {/* Wager */}
      <View style={styles.playerWagerRow}>
        <Text style={styles.playerWagerAmount}>{item.weightSol.toFixed(2)} SOL</Text>
      </View>
      {/* Odds */}
      <Text style={styles.playerOdds}>{item.oddsPercent}%</Text>
    </View>
  );

  return (
    <Modal
      visible={visible}
      animationType="slide"
      transparent
      onRequestClose={onDismiss}
    >
      <Animated.View style={[styles.overlay, { opacity: overlayOpacity }]}>
        <TouchableOpacity style={styles.overlayTap} activeOpacity={1} onPress={onDismiss} />
      </Animated.View>

      <View style={styles.sheetPositioner}>
        <View style={styles.sheet}>
          {/* Drag handle */}
          <View style={styles.handleRow}>
            <View style={styles.handle} />
          </View>

          <ScrollView
            style={styles.scrollView}
            contentContainerStyle={styles.scrollContent}
            showsVerticalScrollIndicator={false}
            bounces={true}
          >
            {/* Header */}
            <View style={styles.header}>
              <Text style={styles.headerTitle}>Jackpot</Text>
              <TouchableOpacity onPress={onDismiss} activeOpacity={0.8} style={styles.closeBtn}>
                <Text style={styles.closeBtnText}>{'\u2715'}</Text>
              </TouchableOpacity>
            </View>

            {/* Hero pot card */}
            <View style={styles.heroCard}>
              <View style={styles.heroGradient} />
              <Text style={styles.heroLabel}>JACKPOT</Text>
              <View style={styles.heroPotRow}>
                <Text style={styles.heroPotValue}>{potSol.toFixed(4)} SOL</Text>
                <Text style={styles.heroEmoji}>🤑</Text>
              </View>
              {/* Accent bar */}
              <View style={styles.heroAccentBar} />
            </View>

            {/* Info cards row */}
            <View style={styles.infoRow}>
              <View style={styles.infoCard}>
                <Text style={styles.infoCardLabel}>YOUR WAGER</Text>
                <Text style={styles.infoCardValue}>{betSol.toFixed(2)}</Text>
              </View>
              <View style={styles.infoCard}>
                <Text style={styles.infoCardLabel}>YOUR CHANCE</Text>
                <Text style={[styles.infoCardValue, { color: '#22c55e' }]}>{userOdds}%</Text>
              </View>
              <View style={styles.infoCard}>
                <Text style={styles.infoCardLabel}>PLAYERS</Text>
                <Text style={styles.infoCardValue}>{entries.length}</Text>
              </View>
            </View>

            {/* Player carousel */}
            {entries.length > 0 && (
              <View style={styles.playersSection}>
                <View style={styles.playersSectionHeader}>
                  <Text style={styles.playersSectionTitle}>Players in Round</Text>
                  <View style={styles.playersBadge}>
                    <View style={styles.playersBadgeDot} />
                    <Text style={styles.playersBadgeText}>{entries.length} active</Text>
                  </View>
                </View>
                <FlatList
                  data={entries}
                  renderItem={renderPlayerCard}
                  keyExtractor={(item, i) => `${item.player}-${i}`}
                  horizontal
                  showsHorizontalScrollIndicator={false}
                  contentContainerStyle={styles.playersListContent}
                  ItemSeparatorComponent={() => <View style={{ width: 10 }} />}
                />
              </View>
            )}

            {/* Empty state */}
            {entries.length === 0 && (
              <View style={styles.emptyState}>
                <Text style={styles.emptyEmoji}>🤑</Text>
                <Text style={styles.emptyTitle}>No players yet</Text>
                <Text style={styles.emptySubtitle}>Be the first to join!</Text>
              </View>
            )}

            {/* Bet input section */}
            <View style={styles.betSection}>
              <Text style={styles.betLabel}>Bet Amount</Text>

              {/* Input row */}
              <View style={styles.betInputRow}>
                <View style={styles.solIcon}>
                  <Text style={styles.solIconText}>◎</Text>
                </View>
                <TextInput
                  style={styles.betInput}
                  value={betAmount}
                  onChangeText={setBetAmount}
                  keyboardType="decimal-pad"
                  placeholder="0.00"
                  placeholderTextColor="#6b6b6b"
                  selectTextOnFocus
                />
                <Text style={styles.betInputSuffix}>SOL</Text>
              </View>

              {/* Quick bet buttons */}
              <View style={styles.quickBetRow}>
                {QUICK_AMOUNTS.map(amount => (
                  <TouchableOpacity
                    key={amount}
                    style={styles.quickBetBtn}
                    onPress={() => handleQuickAdd(amount)}
                    activeOpacity={0.7}
                  >
                    <Text style={styles.quickBetText}>+{amount} SOL</Text>
                  </TouchableOpacity>
                ))}
              </View>
            </View>

            {/* Error */}
            {mutation.error && (
              <View style={styles.errorBox}>
                <Text style={styles.errorText}>{mutation.error.message}</Text>
              </View>
            )}

            {/* Place Bet CTA */}
            <TouchableOpacity
              style={[
                styles.placeBetBtn,
                !canEnter && styles.placeBetBtnDisabled,
                mutation.status === 'success' && styles.placeBetBtnSuccess,
              ]}
              disabled={!canEnter}
              onPress={handleEnter}
              activeOpacity={0.85}
            >
              {isMutating ? (
                <View style={styles.placeBetLoading}>
                  <ActivityIndicator size="small" color="#FFFFFF" />
                  <Text style={styles.placeBetText}>{statusLabel}</Text>
                </View>
              ) : mutation.status === 'success' ? (
                <Text style={styles.placeBetText}>You're in! 🏆</Text>
              ) : (
                <Text style={[styles.placeBetText, !canEnter && { opacity: 0.5 }]}>
                  Place Bet — {betSol.toFixed(2)} SOL
                </Text>
              )}
            </TouchableOpacity>

            {/* Last winner */}
            {lastWinner && (
              <View style={styles.lastWinnerSection}>
                <Text style={styles.lastWinnerLabel}>Last Winner</Text>
                <View style={styles.lastWinnerRow}>
                  <Text style={styles.lastWinnerWallet}>{truncateWallet(lastWinner.winner)}</Text>
                  <Text style={styles.lastWinnerAmount}>won {formatSOL(lastWinner.winAmount)} SOL</Text>
                </View>
              </View>
            )}
          </ScrollView>
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.65)',
  },
  overlayTap: { flex: 1 },
  sheetPositioner: {
    flex: 1,
    justifyContent: 'flex-end',
  },
  sheet: {
    backgroundColor: '#08080e',
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    maxHeight: '92%',
    borderWidth: 1,
    borderColor: '#1e1e2a',
    borderBottomWidth: 0,
  },
  handleRow: { alignItems: 'center', paddingTop: 10, paddingBottom: 4 },
  handle: { width: 36, height: 4, borderRadius: 2, backgroundColor: '#2a2a3a' },
  scrollView: { flexGrow: 0 },
  scrollContent: {
    paddingHorizontal: 16,
    paddingBottom: Platform.OS === 'ios' ? 40 : 24,
  },
  // Header
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 12,
  },
  headerTitle: { fontSize: 20, fontWeight: '700', color: '#FFFFFF' },
  closeBtn: { padding: 4 },
  closeBtnText: { fontSize: 20, color: '#6b6b6b' },

  // Hero pot card
  heroCard: {
    borderRadius: 16,
    borderWidth: 1,
    borderColor: 'rgba(34, 197, 94, 0.2)',
    padding: 16,
    overflow: 'hidden',
    position: 'relative',
  },
  heroGradient: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(34, 197, 94, 0.04)',
  },
  heroLabel: {
    fontSize: 10,
    fontWeight: '600',
    color: '#6b6b6b',
    letterSpacing: 3,
    marginBottom: 4,
  },
  heroPotRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  heroPotValue: {
    fontSize: 32,
    fontWeight: '900',
    color: '#4ade80',
    letterSpacing: -1,
  },
  heroEmoji: {
    fontSize: 36,
    opacity: 0.2,
  },
  heroAccentBar: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    width: '60%',
    height: 2,
    backgroundColor: '#22c55e',
  },

  // Info row
  infoRow: {
    flexDirection: 'row',
    gap: 8,
    marginTop: 12,
  },
  infoCard: {
    flex: 1,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: '#1e1e2a',
    backgroundColor: '#0c0c14',
    padding: 12,
  },
  infoCardLabel: {
    fontSize: 9,
    fontWeight: '600',
    color: '#6b6b6b',
    letterSpacing: 2,
    marginBottom: 4,
  },
  infoCardValue: {
    fontSize: 18,
    fontWeight: '700',
    color: '#FFFFFF',
  },

  // Players section
  playersSection: {
    marginTop: 16,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: '#1e1e2a',
    backgroundColor: 'rgba(139, 92, 246, 0.03)',
    padding: 12,
    overflow: 'hidden',
  },
  playersSectionHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 12,
  },
  playersSectionTitle: {
    fontSize: 13,
    fontWeight: '600',
    color: '#a0a0a0',
  },
  playersBadge: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
    backgroundColor: 'rgba(34, 197, 94, 0.15)',
    paddingHorizontal: 8,
    paddingVertical: 3,
    borderRadius: 100,
  },
  playersBadgeDot: {
    width: 6,
    height: 6,
    borderRadius: 3,
    backgroundColor: '#22c55e',
  },
  playersBadgeText: {
    fontSize: 11,
    fontWeight: '700',
    color: '#22c55e',
  },
  playersListContent: {
    paddingRight: 4,
  },

  // Player cards (carousel items)
  playerCard: {
    width: 110,
    borderRadius: 12,
    borderWidth: 1.5,
    borderColor: 'rgba(139, 92, 246, 0.4)',
    backgroundColor: 'rgba(139, 92, 246, 0.08)',
    padding: 12,
    alignItems: 'center',
    gap: 6,
  },
  playerAvatar: {
    width: 48,
    height: 48,
    borderRadius: 24,
    borderWidth: 2,
    borderColor: '#8b5cf6',
    backgroundColor: 'rgba(139, 92, 246, 0.15)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  playerAvatarText: {
    fontSize: 16,
    fontWeight: '700',
    color: '#a78bfa',
  },
  playerUsername: {
    fontSize: 11,
    fontWeight: '500',
    color: '#a0a0a0',
    textAlign: 'center',
  },
  playerWagerRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  playerWagerAmount: {
    fontSize: 13,
    fontWeight: '600',
    color: '#a78bfa',
  },
  playerOdds: {
    fontSize: 11,
    fontWeight: '700',
    color: '#22c55e',
  },

  // Empty state
  emptyState: {
    marginTop: 16,
    alignItems: 'center',
    paddingVertical: 24,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: '#1e1e2a',
    backgroundColor: '#0c0c14',
  },
  emptyEmoji: { fontSize: 40, marginBottom: 8 },
  emptyTitle: { fontSize: 16, fontWeight: '600', color: '#FFFFFF' },
  emptySubtitle: { fontSize: 13, color: '#6b6b6b', marginTop: 4 },

  // Bet section
  betSection: {
    marginTop: 16,
  },
  betLabel: {
    fontSize: 13,
    fontWeight: '500',
    color: '#6b6b6b',
    marginBottom: 8,
  },
  betInputRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    backgroundColor: '#08080e',
    borderWidth: 1,
    borderColor: '#2a2a3a',
    borderRadius: 12,
    paddingHorizontal: 14,
    paddingVertical: Platform.OS === 'ios' ? 14 : 10,
  },
  solIcon: {
    width: 32,
    height: 32,
    borderRadius: 16,
    backgroundColor: 'rgba(139, 92, 246, 0.15)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  solIconText: {
    fontSize: 18,
    color: '#a78bfa',
    fontWeight: '700',
  },
  betInput: {
    flex: 1,
    fontSize: 24,
    fontWeight: '700',
    color: '#FFFFFF',
    padding: 0,
  },
  betInputSuffix: {
    fontSize: 14,
    fontWeight: '500',
    color: '#6b6b6b',
  },
  quickBetRow: {
    flexDirection: 'row',
    gap: 8,
    marginTop: 10,
  },
  quickBetBtn: {
    flex: 1,
    paddingVertical: 12,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#2a2a3a',
    backgroundColor: '#08080e',
    alignItems: 'center',
  },
  quickBetText: {
    fontSize: 13,
    fontWeight: '600',
    color: '#FFFFFF',
  },

  // Error
  errorBox: {
    marginTop: 12,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: '#3A1515',
    backgroundColor: '#1A0A0A',
    padding: 12,
  },
  errorText: { fontSize: 13, fontWeight: '500', color: '#F87171' },

  // Place Bet CTA
  placeBetBtn: {
    marginTop: 16,
    height: 56,
    borderRadius: 14,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#22c55e',
    shadowColor: '#22c55e',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.25,
    shadowRadius: 12,
    elevation: 6,
  },
  placeBetBtnDisabled: {
    backgroundColor: '#1e1e2a',
    shadowOpacity: 0,
    elevation: 0,
  },
  placeBetBtnSuccess: {
    backgroundColor: '#16a34a',
  },
  placeBetText: { color: '#FFFFFF', fontSize: 16, fontWeight: '700' },
  placeBetLoading: { flexDirection: 'row', alignItems: 'center', gap: 10 },

  // Last winner
  lastWinnerSection: {
    marginTop: 14,
    paddingTop: 14,
    borderTopWidth: 1,
    borderTopColor: '#1e1e2a',
  },
  lastWinnerLabel: {
    fontSize: 11,
    fontWeight: '600',
    color: '#6b6b6b',
    letterSpacing: 1,
    textTransform: 'uppercase',
    marginBottom: 4,
  },
  lastWinnerRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
  },
  lastWinnerWallet: {
    fontSize: 13,
    fontWeight: '500',
    color: '#a0a0a0',
  },
  lastWinnerAmount: {
    fontSize: 13,
    fontWeight: '600',
    color: '#22c55e',
  },
});