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

import { api, Content, Episode } from "@/src/api";
import { Focusable } from "@/src/components/Focusable";
import { queryClient } from "@/src/query-client";
import { makeStyles, useTheme } from "@/src/theme";
import { fs, isTV, radius, sidePad, space } from "@/src/ui";

export default function TitleScreen() {
  const styles = useStyles();
  const { colors } = useTheme();
  const insets = useSafeAreaInsets();
  const { width, height } = useWindowDimensions();
  const { id, autoplay } = useLocalSearchParams<{ id: string; autoplay?: string }>();
  const q = useQuery({ queryKey: ["content", id], queryFn: () => api<Content>(`/content/${id}`) });
  const [season, setSeason] = useState(0);
  const [fav, setFav] = useState(false);
  const item = q.data;

  useEffect(() => {
    if (item) setFav(!!item.is_favorite);
  }, [item]);

  const play = (url: string, title: string, episode?: Episode) =>
    router.push({
      pathname: "/player",
      params: { url, title, contentId: item!.id, episodeId: episode?.id ?? "", image: episode?.thumbnail_url ?? item!.backdrop_url ?? "" },
    });

  const playMain = () => {
    if (!item) return;
    if (item.type === "movie" && item.stream_url) play(item.stream_url, item.title);
    const ep = item.seasons?.[season]?.episodes?.[0];
    if (item.type === "series" && ep) play(ep.stream_url, `${item.title} · T${item.seasons![season].number}E${ep.number} ${ep.title}`, ep);
  };

  useEffect(() => {
    if (autoplay === "1" && item) playMain();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [autoplay, item?.id]);

  const toggleFav = async () => {
    const next = !fav;
    setFav(next);
    await api(`/favorites/${id}`, { method: next ? "POST" : "DELETE" }).catch(() => setFav(!next));
    queryClient.invalidateQueries({ queryKey: ["favorites"] });
  };

  if (!item) {
    return (
      <View style={[styles.root, { alignItems: "center", justifyContent: "center" }]} testID="title-loading">
        {q.error ? <Text style={styles.syn}>{(q.error as Error).message}</Text> : <ActivityIndicator color={colors.brandPrimary} size="large" />}
      </View>
    );
  }

  const heroH = isTV ? height * 0.55 : Math.min(width * 1.1, height * 0.55);
  const eps = item.seasons?.[season]?.episodes ?? [];

  return (
    <View style={styles.root} testID="title-screen">
      <ScrollView contentContainerStyle={{ paddingBottom: insets.bottom + space.xl }}>
        <View style={{ height: heroH }}>
          <Image source={{ uri: item.backdrop_url }} style={{ width: "100%", height: heroH }} contentFit="cover" transition={300} />
          <LinearGradient colors={[colors.overlay, colors.scrimClear, colors.surface]} locations={[0, 0.4, 1]} style={styles.fill} />
        </View>
        <Animated.View entering={FadeIn.duration(400)} style={styles.body}>
          <Text testID="title-name" style={styles.title}>{item.title}</Text>
          <Text style={styles.meta}>
            {[item.year, item.rating, item.type === "series" ? `${item.seasons?.length ?? 0} temporada(s)` : item.duration_min ? `${item.duration_min} min` : null].filter(Boolean).join("  ·  ")}
          </Text>
          <View style={styles.btns}>
            <Focusable testID="title-play-button" style={styles.playBtn} onPress={playMain} hasTVPreferredFocus>
              <Ionicons name="play" size={22} color={colors.onSurfaceInverse} />
              <Text style={styles.playText}>{item.type === "series" ? "Assistir T" + (item.seasons?.[season]?.number ?? 1) + "E1" : "Assistir"}</Text>
            </Focusable>
            <Focusable testID="title-favorite-button" style={styles.favBtn} onPress={toggleFav}>
              <Ionicons name={fav ? "heart" : "heart-outline"} size={24} color={fav ? colors.brandPrimary : colors.onSurface} />
            </Focusable>
          </View>
          <Text testID="title-synopsis" style={styles.syn}>{item.synopsis}</Text>

          {item.type === "series" && (
            <>
              <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.seasonRow}>
                {item.seasons?.map((s, i) => (
                  <Focusable key={s.number} testID={`season-chip-${s.number}`} style={[styles.chip, i === season && styles.chipActive]} onPress={() => setSeason(i)} focusScale={1.04}>
                    <Text style={styles.chipText}>{s.title || `Temporada ${s.number}`}</Text>
                  </Focusable>
                ))}
              </ScrollView>
              {eps.map((ep) => (
                <Focusable
                  key={ep.id}
                  testID={`episode-${ep.id}`}
                  style={styles.ep}
                  focusScale={1.02}
                  onPress={() => play(ep.stream_url, `${item.title} · T${item.seasons![season].number}E${ep.number} ${ep.title}`, ep)}
                >
                  <Image source={{ uri: ep.thumbnail_url }} style={styles.epImg} contentFit="cover" />
                  <View style={{ flex: 1 }}>
                    <Text style={styles.epTitle} numberOfLines={1}>{ep.number}. {ep.title}</Text>
                    <Text style={styles.epSyn} numberOfLines={2}>{ep.synopsis}</Text>
                  </View>
                  <Ionicons name="play-circle-outline" size={30} color={colors.onSurface} />
                </Focusable>
              ))}
            </>
          )}
        </Animated.View>
      </ScrollView>
      <Focusable testID="title-back-button" style={[styles.back, { top: insets.top + space.sm }]} onPress={() => (router.canGoBack() ? router.back() : router.replace("/(tabs)"))}>
        <Ionicons name="chevron-back" size={26} color={colors.onSurface} />
      </Focusable>
    </View>
  );
}

const useStyles = makeStyles((c) => ({
  root: { flex: 1, backgroundColor: c.surface },
  fill: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 },
  body: { paddingHorizontal: sidePad, marginTop: -space.xxxl },
  title: { color: c.onSurface, fontSize: fs(32), fontWeight: "900" },
  meta: { color: c.muted, fontSize: fs(14), marginTop: space.sm },
  btns: { flexDirection: "row", gap: space.md, marginTop: space.lg },
  playBtn: { flex: 1, maxWidth: 360, height: 52, flexDirection: "row", alignItems: "center", justifyContent: "center", gap: space.sm, backgroundColor: c.surfaceInverse, borderRadius: radius.md },
  playText: { color: c.onSurfaceInverse, fontSize: fs(16), fontWeight: "800" },
  favBtn: { width: 52, height: 52, borderRadius: radius.md, backgroundColor: c.surfaceTertiary, alignItems: "center", justifyContent: "center" },
  syn: { color: c.onSurfaceSecondary, fontSize: fs(15), lineHeight: fs(22), marginTop: space.lg },
  seasonRow: { gap: space.sm, paddingVertical: space.lg },
  chip: { height: 36, paddingHorizontal: space.lg, borderRadius: radius.pill, backgroundColor: c.surfaceTertiary, borderColor: c.border, justifyContent: "center", flexShrink: 0 },
  chipActive: { backgroundColor: c.brandPrimary, borderColor: c.brandPrimary },
  chipText: { color: c.onSurface, fontSize: fs(13), fontWeight: "600" },
  ep: { flexDirection: "row", alignItems: "center", gap: space.md, paddingVertical: space.sm, borderRadius: radius.md, marginBottom: space.sm },
  epImg: { width: 130, height: 74, borderRadius: radius.sm, backgroundColor: c.surfaceTertiary },
  epTitle: { color: c.onSurface, fontSize: fs(15), fontWeight: "700" },
  epSyn: { color: c.muted, fontSize: fs(12), marginTop: 2 },
  back: { position: "absolute", left: space.md, width: 44, height: 44, borderRadius: radius.pill, backgroundColor: c.glass, alignItems: "center", justifyContent: "center" },
}));