import React from 'react';
import {
  ActivityIndicator,
  Dimensions,
  Image,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import {TVTouchable as TouchableOpacity} from '../common/TVTouchable';
import LinearGradient from 'react-native-linear-gradient';
import {MetaDetail} from '../../api/addonTypes';
import {colors, typography} from '../../utils/colors';
import {IS_TV} from '../../utils/tv';
import {formatRuntime, formatRating, formatYear} from '../../utils/formatters';
import Badge from '../common/Badge';

const {width: SW} = Dimensions.get('window');
const HERO_H = SW * 0.65;

interface Props {
  meta: MetaDetail;
  isInWatchlist: boolean;
  isFavorite: boolean;
  onAddToWatchlist: () => void;
  onToggleFavorite: () => void;
  onPressPlay?: () => void;
  streamsLoading?: boolean;
  isMovie?: boolean;
}

export default function DetailHero({
  meta,
  isInWatchlist,
  isFavorite,
  onAddToWatchlist,
  onToggleFavorite,
  onPressPlay,
  streamsLoading,
  isMovie,
}: Props) {
  return (
    <View>
      {/* Backdrop */}
      <View style={{height: HERO_H}}>
        <Image
          style={styles.backdrop}
          source={{uri: meta.background || meta.poster}}
          resizeMode="cover"
        />
        <LinearGradient
          colors={['transparent', colors.background]}
          locations={[0.4, 1]}
          style={StyleSheet.absoluteFillObject}
        />
      </View>

      {/* Poster + info row */}
      <View style={styles.infoRow}>
        <Image
          style={styles.poster}
          source={{uri: meta.poster}}
          resizeMode="cover"
        />

        <View style={styles.textBlock}>
          <Text style={styles.title} numberOfLines={3}>
            {meta.name}
          </Text>
          <View style={styles.metaRow}>
            {meta.releaseInfo && (
              <Text style={styles.metaText}>{formatYear(meta.releaseInfo)}</Text>
            )}
            {meta.runtime && (
              <Text style={styles.metaText}>{formatRuntime(meta.runtime)}</Text>
            )}
            {meta.imdbRating && (
              <View style={styles.ratingContainer}>
                <Text style={styles.ratingText}>
                  ★ {formatRating(meta.imdbRating)}
                </Text>
              </View>
            )}
          </View>
          {meta.genres && meta.genres.length > 0 && (
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={styles.genres}>
                {meta.genres.slice(0, 4).map(g => (
                  <Badge key={g} label={g} variant="muted" style={styles.genreBadge} />
                ))}
              </View>
            </ScrollView>
          )}
        </View>
      </View>

      {/* Action buttons */}
      <View style={styles.actions}>
        {/* Always show play button area for movies */}
        {isMovie ? (
          streamsLoading ? (
            <TouchableOpacity style={[styles.playBtn, styles.playBtnLoading]} disabled focusable={IS_TV || undefined}>
              <ActivityIndicator size="small" color="#fff" style={{marginRight: 6}} />
              <Text style={styles.playBtnText}>Loading...</Text>
            </TouchableOpacity>
          ) : onPressPlay ? (
            <TouchableOpacity style={styles.playBtn} onPress={onPressPlay} focusable={IS_TV || undefined}>
              <Text style={styles.playBtnText}>▶  Play</Text>
            </TouchableOpacity>
          ) : (
            <View style={[styles.playBtn, styles.playBtnDisabled]}>
              <Text style={[styles.playBtnText, styles.playBtnTextDisabled]}>No streams</Text>
            </View>
          )
        ) : onPressPlay ? (
          <TouchableOpacity style={styles.playBtn} onPress={onPressPlay} focusable={IS_TV || undefined}>
            <Text style={styles.playBtnText}>▶  Play</Text>
          </TouchableOpacity>
        ) : null}
        <TouchableOpacity
          style={styles.iconBtn}
          onPress={onAddToWatchlist}
          focusable={IS_TV || undefined}>
          <Text style={styles.iconBtnText}>
            {isInWatchlist ? '✓ List' : '+ List'}
          </Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.iconBtn} onPress={onToggleFavorite} focusable={IS_TV || undefined}>
          <Text style={[styles.iconBtnText, isFavorite && {color: colors.imdbYellow}]}>
            {isFavorite ? '★ Fav' : '☆ Fav'}
          </Text>
        </TouchableOpacity>
      </View>

      {/* Description */}
      {meta.description && (
        <Text style={styles.description}>{meta.description}</Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  backdrop: {
    ...StyleSheet.absoluteFillObject,
  },
  infoRow: {
    flexDirection: 'row',
    paddingHorizontal: 16,
    paddingTop: 12,
    gap: 14,
    marginTop: -HERO_H * 0.18,
  },
  poster: {
    width: 100,
    height: 150,
    borderRadius: 8,
    borderWidth: 2,
    borderColor: colors.border,
  },
  textBlock: {
    flex: 1,
    paddingTop: 8,
    justifyContent: 'flex-end',
  },
  title: {
    ...typography.title,
    color: colors.textPrimary,
    marginBottom: 6,
  },
  metaRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
    marginBottom: 8,
    flexWrap: 'wrap',
  },
  metaText: {
    ...typography.caption,
    color: colors.textSecondary,
  },
  ratingContainer: {
    backgroundColor: colors.imdbYellow + '22',
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 4,
  },
  ratingText: {
    ...typography.badge,
    color: colors.imdbYellow,
    fontSize: 11,
  },
  genres: {
    flexDirection: 'row',
    gap: 6,
  },
  genreBadge: {marginRight: 0},
  actions: {
    flexDirection: 'row',
    paddingHorizontal: 16,
    paddingVertical: 16,
    gap: 10,
  },
  playBtn: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: colors.primary,
    paddingVertical: 12,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
  },
  playBtnLoading: {
    backgroundColor: colors.primaryDark,
    opacity: 0.85,
  },
  playBtnDisabled: {
    backgroundColor: colors.surfaceLight,
  },
  playBtnText: {
    ...typography.subtitle,
    color: colors.textPrimary,
    fontWeight: '700',
  },
  playBtnTextDisabled: {
    color: colors.textMuted,
  },
  iconBtn: {
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderRadius: 8,
    backgroundColor: colors.surfaceLight,
    alignItems: 'center',
  },
  iconBtnText: {
    ...typography.caption,
    color: colors.textSecondary,
    fontWeight: '600',
  },
  description: {
    ...typography.body,
    color: colors.textSecondary,
    paddingHorizontal: 16,
    paddingBottom: 16,
    lineHeight: 22,
  },
});