import { useMemo } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { useDubsTheme } from '../theme';
import type { GameDetail } from '../../types';

export interface LivePoolsCardProps {
  game: GameDetail;
  /** Custom short-name function for team labels. Defaults to full name. */
  shortName?: (name: string | null) => string;
  /** Override bar colors. Defaults to blue/red. */
  homeColor?: string;
  awayColor?: string;
}

/**
 * Pool breakdown card showing each side's SOL amount, bar chart, and implied odds.
 */
export function LivePoolsCard({
  game,
  shortName,
  homeColor = '#3B82F6',
  awayColor = '#EF4444',
}: LivePoolsCardProps) {
  const t = useDubsTheme();

  const opponents = game.opponents || [];
  const homeName = shortName ? shortName(opponents[0]?.name) : (opponents[0]?.name || 'Home');
  const awayName = shortName ? shortName(opponents[1]?.name) : (opponents[1]?.name || 'Away');
  const homePool = game.homePool || 0;
  const awayPool = game.awayPool || 0;
  const totalPool = game.totalPool || 0;

  const { homePercent, awayPercent, homeOdds, awayOdds } = useMemo(() => {
    return {
      homePercent: totalPool > 0 ? (homePool / totalPool) * 100 : 50,
      awayPercent: totalPool > 0 ? (awayPool / totalPool) * 100 : 50,
      homeOdds: homePool > 0 ? (totalPool / homePool).toFixed(2) : '—',
      awayOdds: awayPool > 0 ? (totalPool / awayPool).toFixed(2) : '—',
    };
  }, [homePool, awayPool, totalPool]);

  return (
    <View style={[styles.card, { backgroundColor: t.surface, borderColor: t.border }]}>
      <Text style={[styles.title, { color: t.text }]}>Live Pools</Text>
      <Text style={[styles.total, { color: t.accent }]}>{totalPool} SOL total</Text>

      <View style={styles.bars}>
        <PoolBar name={homeName} amount={homePool} percent={homePercent} color={homeColor} t={t} />
        <PoolBar name={awayName} amount={awayPool} percent={awayPercent} color={awayColor} t={t} />
      </View>

      <View style={styles.oddsRow}>
        <Text style={[styles.oddsText, { color: t.textMuted }]}>
          {homeName}: <Text style={{ color: t.text, fontWeight: '700' }}>{homeOdds}x</Text>
        </Text>
        <Text style={[styles.oddsText, { color: t.textMuted }]}>
          {awayName}: <Text style={{ color: t.text, fontWeight: '700' }}>{awayOdds}x</Text>
        </Text>
      </View>
    </View>
  );
}

function PoolBar({ name, amount, percent, color, t }: { name: string; amount: number; percent: number; color: string; t: any }) {
  return (
    <View style={styles.barRow}>
      <Text style={[styles.barLabel, { color: t.textSecondary }]} numberOfLines={1}>{name}</Text>
      <View style={[styles.barTrack, { backgroundColor: t.border }]}>
        <View style={[styles.barFill, { width: `${Math.max(percent, 2)}%`, backgroundColor: color }]} />
      </View>
      <Text style={[styles.barAmount, { color: t.text }]}>{amount} SOL</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { borderRadius: 16, borderWidth: 1, padding: 16 },
  title: { fontSize: 17, fontWeight: '700', marginBottom: 4 },
  total: { fontSize: 14, fontWeight: '600', marginBottom: 14 },
  bars: { gap: 10 },
  barRow: { flexDirection: 'row', alignItems: 'center', gap: 10 },
  barLabel: { width: 80, fontSize: 13, fontWeight: '600' },
  barTrack: { flex: 1, height: 10, borderRadius: 5, overflow: 'hidden' },
  barFill: { height: '100%', borderRadius: 5 },
  barAmount: { width: 70, textAlign: 'right', fontSize: 13, fontWeight: '700' },
  oddsRow: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 12 },
  oddsText: { fontSize: 12 },
});