import React, { useState, useEffect, useRef, useCallback } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  ActivityIndicator,
  Modal,
  Animated,
  StyleSheet,
  KeyboardAvoidingView,
  Platform,
} from 'react-native';
import { useDubsTheme } from '../theme';
import { useDubs } from '../../provider';
import { useEnterArcadePool } from '../../hooks/useEnterArcadePool';
import type { EnterArcadePoolMutationResult } from '../../hooks/useEnterArcadePool';
import type { ArcadePool, ArcadePoolStats } from '../../types';

export interface EnterArcadePoolSheetProps {
  visible: boolean;
  onDismiss: () => void;
  pool: ArcadePool;
  stats?: ArcadePoolStats | null;
  mode?: 'join' | 'rejoin';
  onSuccess?: (result: EnterArcadePoolMutationResult) => void;
  onError?: (error: Error) => void;
}

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

export function EnterArcadePoolSheet({
  visible,
  onDismiss,
  pool,
  stats,
  mode = 'join',
  onSuccess,
  onError,
}: EnterArcadePoolSheetProps) {
  const t = useDubsTheme();
  const { wallet } = useDubs();
  const mutation = useEnterArcadePool();

  const overlayOpacity = useRef(new Animated.Value(0)).current;

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

  // Reset on open
  useEffect(() => {
    if (visible) {
      mutation.reset();
    }
  }, [visible]); // eslint-disable-line react-hooks/exhaustive-deps

  // Auto-dismiss on success
  useEffect(() => {
    if (mutation.status === 'success' && mutation.data) {
      onSuccess?.(mutation.data);
      const timer = setTimeout(() => {
        onDismiss();
      }, 1500);
      return () => clearTimeout(timer);
    }
  }, [mutation.status, mutation.data]); // eslint-disable-line react-hooks/exhaustive-deps

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

  const buyInSol = (pool.buy_in_lamports / 1_000_000_000).toFixed(4);
  const totalPlayers = stats?.total_entries ?? 0;
  const totalBuyIns = pool.total_entries ?? totalPlayers;
  const topScore = stats?.top_score ?? 0;
  const potSol = ((pool.buy_in_lamports * Number(totalBuyIns)) / 1_000_000_000).toFixed(4);

  const isMutating = mutation.status !== 'idle' && mutation.status !== 'success' && mutation.status !== 'error';
  const canJoin = !isMutating && mutation.status !== 'success';

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

  const statusLabel = STATUS_LABELS[mutation.status] || '';
  const isRejoin = mode === 'rejoin';
  const headerTitle = isRejoin ? 'Play Again' : 'Join Pool';
  const ctaLabel = isRejoin
    ? `Play Again \u2014 ${buyInSol} SOL`
    : `Join Pool \u2014 ${buyInSol} SOL`;
  const successLabel = isRejoin ? 'Lives refilled!' : 'Joined!';

  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>

      <KeyboardAvoidingView
        style={styles.keyboardView}
        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
      >
        <View style={styles.sheetPositioner}>
          <View style={[styles.sheet, { backgroundColor: t.background }]}>
            {/* Drag handle */}
            <View style={styles.handleRow}>
              <View style={[styles.handle, { backgroundColor: t.textMuted }]} />
            </View>

            {/* Header */}
            <View style={styles.header}>
              <Text style={[styles.headerTitle, { color: t.text }]}>{headerTitle}</Text>
              <TouchableOpacity onPress={onDismiss} activeOpacity={0.8}>
                <Text style={[styles.closeButton, { color: t.textMuted }]}>{'\u2715'}</Text>
              </TouchableOpacity>
            </View>

            {/* Pool name */}
            <Text style={[styles.poolName, { color: t.textSecondary }]}>{pool.name}</Text>

            {/* Summary Card */}
            <View style={[styles.summaryCard, { backgroundColor: t.surface, borderColor: t.border }]}>
              <View style={styles.summaryRow}>
                <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Buy-in</Text>
                <Text style={[styles.summaryValue, { color: t.text }]}>{buyInSol} SOL</Text>
              </View>
              <View style={[styles.summarySep, { backgroundColor: t.border }]} />
              <View style={styles.summaryRow}>
                <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Players in</Text>
                <Text style={[styles.summaryValue, { color: t.text }]}>{totalPlayers}</Text>
              </View>
              <View style={[styles.summarySep, { backgroundColor: t.border }]} />
              <View style={styles.summaryRow}>
                <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Current pot</Text>
                <Text style={[styles.summaryValue, { color: t.success }]}>{potSol} SOL</Text>
              </View>
              <View style={[styles.summarySep, { backgroundColor: t.border }]} />
              <View style={styles.summaryRow}>
                <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Lives</Text>
                <Text style={[styles.summaryValue, { color: t.text }]}>{pool.max_lives}</Text>
              </View>
              {topScore > 0 && (
                <>
                  <View style={[styles.summarySep, { backgroundColor: t.border }]} />
                  <View style={styles.summaryRow}>
                    <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Top score</Text>
                    <Text style={[styles.summaryValue, { color: t.text }]}>{topScore}</Text>
                  </View>
                </>
              )}
            </View>

            {/* Error Display */}
            {mutation.error && (
              <View style={[styles.errorBox, { backgroundColor: t.errorBg, borderColor: t.errorBorder }]}>
                <Text style={[styles.errorText, { color: t.errorText }]}>{mutation.error.message}</Text>
              </View>
            )}

            {/* CTA Button */}
            <TouchableOpacity
              style={[
                styles.ctaButton,
                { backgroundColor: canJoin ? t.accent : t.border },
              ]}
              disabled={!canJoin}
              onPress={handleJoin}
              activeOpacity={0.8}
            >
              {isMutating ? (
                <View style={styles.ctaLoading}>
                  <ActivityIndicator size="small" color="#FFFFFF" />
                  <Text style={styles.ctaText}>{statusLabel}</Text>
                </View>
              ) : mutation.status === 'success' ? (
                <Text style={styles.ctaText}>{successLabel}</Text>
              ) : (
                <Text style={[styles.ctaText, !canJoin && { opacity: 0.5 }]}>
                  {ctaLabel}
                </Text>
              )}
            </TouchableOpacity>
          </View>
        </View>
      </KeyboardAvoidingView>
    </Modal>
  );
}

const styles = StyleSheet.create({
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  overlayTap: { flex: 1 },
  keyboardView: { flex: 1, justifyContent: 'flex-end' },
  sheetPositioner: { justifyContent: 'flex-end' },
  sheet: {
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    paddingHorizontal: 20,
    paddingBottom: 40,
  },
  handleRow: { alignItems: 'center', paddingTop: 10, paddingBottom: 8 },
  handle: { width: 36, height: 4, borderRadius: 2, opacity: 0.4 },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 12,
  },
  headerTitle: { fontSize: 20, fontWeight: '700' },
  closeButton: { fontSize: 20, padding: 4 },
  poolName: { fontSize: 15, fontWeight: '600', marginBottom: 8 },
  summaryCard: {
    marginTop: 12,
    borderRadius: 16,
    borderWidth: 1,
    overflow: 'hidden',
  },
  summaryRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 14,
  },
  summaryLabel: { fontSize: 14 },
  summaryValue: { fontSize: 15, fontWeight: '700' },
  summarySep: { height: 1, marginHorizontal: 16 },
  errorBox: {
    marginTop: 16,
    borderRadius: 12,
    borderWidth: 1,
    padding: 12,
  },
  errorText: { fontSize: 13, fontWeight: '500' },
  ctaButton: {
    marginTop: 20,
    height: 56,
    borderRadius: 14,
    justifyContent: 'center',
    alignItems: 'center',
  },
  ctaText: { color: '#FFFFFF', fontSize: 16, fontWeight: '700' },
  ctaLoading: { flexDirection: 'row', alignItems: 'center', gap: 10 },
});