import React, { useMemo } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Share } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { TipReason } from '../types';
import { ConfidenceMeter } from './ConfidenceMeter';
import { buildTipLink } from '../utils/deepLinks';
import { useTheme, Theme } from '../theme/ThemeContext';

interface TipCardProps {
  recommendedBet: string;
  confidence: 'low' | 'medium' | 'high';
  reasons: TipReason[];
  tipId?: string;
  onSave?: () => void;
  onShare?: () => void;
  onSchedule?: () => void;
  onRefresh?: () => void;
  saved?: boolean;
}

const createStyles = (theme: Theme) =>
  StyleSheet.create({
    container: {
      backgroundColor: theme.card,
      borderRadius: 16,
      padding: 20,
      marginBottom: 16,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 4 },
      shadowOpacity: 0.1,
      shadowRadius: 12,
      elevation: 4,
    },
    header: {
      marginBottom: 16,
    },
    recommendedBet: {
      fontSize: 22,
      fontWeight: '800',
      color: theme.text,
      marginBottom: 10,
      lineHeight: 28,
    },
    actions: {
      flexDirection: 'row',
      justifyContent: 'space-around',
      paddingVertical: 12,
      borderTopWidth: 1,
      borderBottomWidth: 1,
      borderColor: theme.borderLight,
    },
    actionButton: {
      alignItems: 'center',
      gap: 4,
    },
    actionText: {
      fontSize: 12,
      color: theme.textSecondary,
    },
    actionTextActive: {
      color: '#3b82f6',
    },
    reasonsToggle: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 8,
      paddingVertical: 12,
    },
    reasonsToggleText: {
      flex: 1,
      fontSize: 14,
      color: theme.textSecondary,
      fontWeight: '500',
    },
    reasonsList: {
      paddingBottom: 12,
    },
    reasonItem: {
      flexDirection: 'row',
      alignItems: 'flex-start',
      gap: 10,
      marginBottom: 8,
    },
    reasonDot: {
      width: 8,
      height: 8,
      borderRadius: 4,
      backgroundColor: theme.textTertiary,
      marginTop: 6,
    },
    reasonDotPositive: {
      backgroundColor: '#22c55e',
    },
    reasonDotCaution: {
      backgroundColor: '#f59e0b',
    },
    reasonText: {
      flex: 1,
      fontSize: 14,
      color: theme.chipText,
      lineHeight: 20,
    },
    reasonTextCaution: {
      color: '#92400e',
    },
    disclaimer: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 6,
      paddingTop: 12,
      borderTopWidth: 1,
      borderColor: theme.borderLight,
    },
    disclaimerText: {
      fontSize: 12,
      color: theme.textTertiary,
    },
  });

export const TipCard: React.FC<TipCardProps> = ({
  recommendedBet,
  confidence,
  reasons,
  tipId,
  onSave,
  onShare,
  onSchedule,
  onRefresh,
  saved = false,
}) => {
  const { theme } = useTheme();
  const styles = useMemo(() => createStyles(theme), [theme]);
  const [showReasons, setShowReasons] = React.useState(false);

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.recommendedBet}>{recommendedBet}</Text>
        <ConfidenceMeter confidence={confidence} />
      </View>

      <View style={styles.actions}>
        <TouchableOpacity style={styles.actionButton} onPress={onSave}>
          <Ionicons
            name={saved ? 'bookmark' : 'bookmark-outline'}
            size={20}
            color={saved ? '#3b82f6' : theme.textSecondary}
          />
          <Text style={[styles.actionText, saved && styles.actionTextActive]}>
            {saved ? 'Saved' : 'Save'}
          </Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.actionButton}
          onPress={() => {
            if (onShare) {
              onShare();
            } else if (tipId) {
              const link = buildTipLink(tipId);
              Share.share({
                message: `Check out this tip on TipSharks: ${link}`,
              }).catch(() => {});
            }
          }}
        >
          <Ionicons name="share-outline" size={20} color={theme.textSecondary} />
          <Text style={styles.actionText}>Share</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.actionButton} onPress={onSchedule}>
          <Ionicons name="alarm-outline" size={20} color={theme.textSecondary} />
          <Text style={styles.actionText}>Schedule</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.actionButton} onPress={onRefresh}>
          <Ionicons name="refresh-outline" size={20} color={theme.textSecondary} />
          <Text style={styles.actionText}>Refresh</Text>
        </TouchableOpacity>
      </View>

      <TouchableOpacity
        style={styles.reasonsToggle}
        onPress={() => setShowReasons(!showReasons)}
      >
        <Ionicons name="bulb-outline" size={18} color={theme.textSecondary} />
        <Text style={styles.reasonsToggleText}>Why this tip?</Text>
        <Ionicons
          name={showReasons ? 'chevron-up' : 'chevron-down'}
          size={18}
          color={theme.textSecondary}
        />
      </TouchableOpacity>

      {showReasons && (
        <View style={styles.reasonsList}>
          {reasons.map((reason, index) => (
            <View key={index} style={styles.reasonItem}>
              <View
                style={[
                  styles.reasonDot,
                  reason.type === 'positive' && styles.reasonDotPositive,
                  reason.type === 'caution' && styles.reasonDotCaution,
                ]}
              />
              <Text
                style={[
                  styles.reasonText,
                  reason.type === 'caution' && styles.reasonTextCaution,
                ]}
              >
                {reason.text}
              </Text>
            </View>
          ))}
        </View>
      )}

      <View style={styles.disclaimer}>
        <Ionicons name="information-circle-outline" size={14} color={theme.textTertiary} />
        <Text style={styles.disclaimerText}>
          Set limits / Get help
        </Text>
      </View>
    </View>
  );
};