import React, { useEffect, useRef, useState } from "react";
import { ActivityIndicator, FlatList, RefreshControl, ScrollView, Text, View, useWindowDimensions } from "react-native";
import { Image } from "expo-image";
import { LinearGradient } from "expo-linear-gradient";
import { router } from "expo-router";
import { useQuery } from "@tanstack/react-query";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Animated, { FadeInDown } from "react-native-reanimated";
import Ionicons from "@react-native-vector-icons/ionicons";

import { api, Content } from "@/src/api";
import { useAuth } from "@/src/auth";
import { Focusable } from "@/src/components/Focusable";
import { Logo } from "@/src/components/Logo";
import { ContentRow } from "@/src/components/PosterCard";
import { usesNativeTabs } from "@/src/navigation";
import { makeStyles, useTheme } from "@/src/theme";
import { fs, isTV, radius, sidePad, space } from "@/src/ui";

type Banner = { id: string; title: string; subtitle?: string; image_url: string; content_id?: string };
type Home = { banners: Banner[]; featured_movies: Content[]; featured_series: Content[]; rows: { id: string; title: string; items: Content[] }[] };

export default function HomeScreen() {
  const styles = useStyles();
  const { colors } = useTheme();
  const insets = useSafeAreaInsets();
  const { width, height } = useWindowDimensions();
  const { logout } = useAuth();
  const q = useQuery({ queryKey: ["home"], queryFn: () => api<Home>("/home") });
  const hist = useQuery({ queryKey: ["history"], queryFn: () => api<any[]>("/history") });
  const heroH = isTV ? height * 0.6 : Math.min(height * 0.6, 560);
  const bottomChrome = usesNativeTabs ? insets.bottom : 0;

  if (q.isLoading) {
    return (
      <View style={[styles.root, styles.center]} testID="home-loading">
        <ActivityIndicator color={colors.brandPrimary} size="large" />
      </View>
    );
  }
  if (q.error) {
    return (
      <View style={[styles.root, styles.center]} testID="home-error">
        <Ionicons name="cloud-offline-outline" size={48} color={colors.muted} />
        <Text style={styles.errText}>{(q.error as Error).message}</Text>
        <Focusable testID="home-retry-button" style={styles.secondaryBtn} onPress={() => q.refetch()}>
          <Text style={styles.secondaryText}>Tentar novamente</Text>
        </Focusable>
      </View>
    );
  }
  const data = q.data!;

  return (
    <View style={styles.root} testID="home-screen">
      <ScrollView
        contentContainerStyle={{ paddingBottom: bottomChrome + space.xl }}
        refreshControl={<RefreshControl refreshing={q.isRefetching} onRefresh={() => { q.refetch(); hist.refetch(); }} tintColor={colors.brandPrimary} />}
      >
        <HeroCarousel banners={data.banners} width={width} height={heroH} />
        {!!hist.data?.length && (
          <View style={{ marginTop: space.xl }} testID="row-continue-watching">
            <Text style={styles.rowTitle}>Continuar assistindo</Text>
            <FlatList
              horizontal
              data={hist.data}
              keyExtractor={(h) => h.content_id + (h.episode_id ?? "")}
              showsHorizontalScrollIndicator={false}
              contentContainerStyle={{ paddingHorizontal: sidePad, gap: space.md }}
              renderItem={({ item }) => (
                <Focusable
                  testID={`continue-${item.content_id}`}
                  style={styles.contCard}
                  onPress={() => router.push({ pathname: "/player", params: { url: item.stream_url, title: item.title, contentId: item.content_id, episodeId: item.episode_id ?? "", image: item.image ?? "", start: String(item.position) } })}
                >
                  <Image source={{ uri: item.image }} style={styles.contImg} contentFit="cover" />
                  <View style={styles.progressTrack}>
                    <View style={[styles.progressFill, { width: `${item.duration ? Math.min(100, (item.position / item.duration) * 100) : 0}%` }]} />
                  </View>
                  <Text numberOfLines={1} style={styles.contTitle}>{item.title}</Text>
                </Focusable>
              )}
            />
          </View>
        )}
        <ContentRow testID="row-featured-movies" title="Filmes em destaque" items={data.featured_movies} />
        <ContentRow testID="row-featured-series" title="Séries em destaque" items={data.featured_series} />
        {data.rows.map((r) => (
          <ContentRow key={r.id} testID={`row-category-${r.id}`} title={r.title} items={r.items} />
        ))}
      </ScrollView>

      {/* Sticky translucent header */}
      <LinearGradient colors={[colors.overlay, colors.scrimClear]} style={[styles.header, { paddingTop: insets.top + space.sm }]} pointerEvents="box-none">
        <View style={styles.headerRow}>
          <Logo size={20} />
          <Focusable testID="home-logout-button" style={styles.iconBtn} onPress={logout} focusScale={1.1}>
            <Ionicons name="log-out-outline" size={22} color={colors.onSurface} />
          </Focusable>
        </View>
        <View style={styles.chips}>
          <Focusable testID="home-chip-movies" style={styles.chip} onPress={() => router.push({ pathname: "/browse", params: { type: "movie" } })}>
            <Text style={styles.chipText}>Filmes</Text>
          </Focusable>
          <Focusable testID="home-chip-series" style={styles.chip} onPress={() => router.push({ pathname: "/browse", params: { type: "series" } })}>
            <Text style={styles.chipText}>Séries</Text>
          </Focusable>
          <Focusable testID="home-chip-live" style={styles.chip} onPress={() => router.push("/(tabs)/live")}>
            <Text style={styles.chipText}>Canais</Text>
          </Focusable>
        </View>
      </LinearGradient>
    </View>
  );
}

function HeroCarousel({ banners, width, height }: { banners: Banner[]; width: number; height: number }) {
  const styles = useStyles();
  const { colors } = useTheme();
  const [index, setIndex] = useState(0);
  const ref = useRef<FlatList<Banner>>(null);

  useEffect(() => {
    if (banners.length < 2) return;
    const t = setInterval(() => {
      setIndex((i) => {
        const n = (i + 1) % banners.length;
        ref.current?.scrollToIndex({ index: n, animated: true });
        return n;
      });
    }, 6000);
    return () => clearInterval(t);
  }, [banners.length]);

  if (!banners.length) return <View style={{ height: 120 }} />;
  return (
    <View testID="home-hero-carousel">
      <FlatList
        ref={ref}
        horizontal
        pagingEnabled
        data={banners}
        keyExtractor={(b) => b.id}
        showsHorizontalScrollIndicator={false}
        getItemLayout={(_, i) => ({ length: width, offset: width * i, index: i })}
        onMomentumScrollEnd={(e) => setIndex(Math.round(e.nativeEvent.contentOffset.x / width))}
        renderItem={({ item }) => (
          <View style={{ width, height }}>
            <Image source={{ uri: item.image_url }} style={{ width, height }} contentFit="cover" transition={400} />
            <LinearGradient colors={[colors.scrimClear, colors.scrimMid, colors.surface]} locations={[0.35, 0.7, 1]} style={styles.heroScrim} />
            <Animated.View entering={FadeInDown.duration(500)} style={styles.heroContent}>
              <Text style={styles.heroTitle} numberOfLines={2}>{item.title}</Text>
              {!!item.subtitle && <Text style={styles.heroSub} numberOfLines={2}>{item.subtitle}</Text>}
              {!!item.content_id && (
                <View style={styles.heroBtns}>
                  <Focusable testID={`hero-play-${item.id}`} style={styles.playBtn} hasTVPreferredFocus onPress={() => router.push({ pathname: "/title/[id]", params: { id: item.content_id!, autoplay: "1" } })}>
                    <Ionicons name="play" size={20} color={colors.onSurfaceInverse} />
                    <Text style={styles.playText}>Assistir</Text>
                  </Focusable>
                  <Focusable testID={`hero-details-${item.id}`} style={styles.secondaryBtn} onPress={() => router.push({ pathname: "/title/[id]", params: { id: item.content_id! } })}>
                    <Ionicons name="information-circle-outline" size={20} color={colors.onSurface} />
                    <Text style={styles.secondaryText}>Detalhes</Text>
                  </Focusable>
                </View>
              )}
            </Animated.View>
          </View>
        )}
      />
      <View style={styles.dots}>
        {banners.map((b, i) => (
          <View key={b.id} style={[styles.dot, i === index && styles.dotActive]} />
        ))}
      </View>
    </View>
  );
}

const useStyles = makeStyles((c) => ({
  root: { flex: 1, backgroundColor: c.surface },
  center: { alignItems: "center", justifyContent: "center", gap: space.lg, padding: space.xl },
  errText: { color: c.onSurfaceSecondary, fontSize: fs(15), textAlign: "center" },
  header: { position: "absolute", top: 0, left: 0, right: 0, paddingHorizontal: sidePad, paddingBottom: space.xl },
  headerRow: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
  iconBtn: { width: 44, height: 44, borderRadius: radius.pill, alignItems: "center", justifyContent: "center" },
  chips: { flexDirection: "row", gap: space.sm, marginTop: space.sm },
  chip: { height: 36, paddingHorizontal: space.lg, borderRadius: radius.pill, borderColor: c.border, backgroundColor: c.glass, justifyContent: "center", flexShrink: 0 },
  chipText: { color: c.onSurface, fontSize: fs(13), fontWeight: "600" },
  heroScrim: { position: "absolute", left: 0, right: 0, bottom: 0, top: 0 },
  heroContent: { position: "absolute", left: sidePad, right: sidePad, bottom: space.xxl },
  heroTitle: { color: c.onSurface, fontSize: fs(34), fontWeight: "900", letterSpacing: -0.5 },
  heroSub: { color: c.onSurfaceSecondary, fontSize: fs(15), marginTop: space.sm, maxWidth: 560 },
  heroBtns: { flexDirection: "row", gap: space.md, marginTop: space.lg },
  playBtn: { flexDirection: "row", alignItems: "center", gap: space.sm, backgroundColor: c.surfaceInverse, height: 48, paddingHorizontal: space.xl, borderRadius: radius.md },
  playText: { color: c.onSurfaceInverse, fontSize: fs(16), fontWeight: "800" },
  secondaryBtn: { flexDirection: "row", alignItems: "center", gap: space.sm, backgroundColor: c.glass, height: 48, paddingHorizontal: space.xl, borderRadius: radius.md },
  secondaryText: { color: c.onSurface, fontSize: fs(16), fontWeight: "700" },
  dots: { flexDirection: "row", gap: 6, justifyContent: "center", marginTop: space.sm },
  dot: { width: 6, height: 6, borderRadius: 3, backgroundColor: c.border },
  dotActive: { width: 20, backgroundColor: c.brandPrimary },
  rowTitle: { color: c.onSurface, fontSize: fs(18), fontWeight: "700", marginBottom: space.md, paddingHorizontal: sidePad },
  contCard: { width: isTV ? 300 : 200, borderRadius: radius.md },
  contImg: { width: "100%", aspectRatio: 16 / 9, borderTopLeftRadius: radius.md, borderTopRightRadius: radius.md, backgroundColor: c.surfaceTertiary },
  progressTrack: { height: 3, backgroundColor: c.border },
  progressFill: { height: 3, backgroundColor: c.brandPrimary },
  contTitle: { color: c.onSurfaceSecondary, fontSize: fs(12), marginTop: space.xs },
}));