import React, { useEffect, useRef } from "react";
import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
import { router, useLocalSearchParams } from "expo-router";
import { useVideoPlayer, VideoView } from "expo-video";
import { useEvent } from "expo";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Ionicons from "@react-native-vector-icons/ionicons";

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

type Params = { url: string; title: string; contentId?: string; episodeId?: string; image?: string; live?: string; start?: string };

export default function PlayerScreen() {
  const { colors } = useTheme();
  const insets = useSafeAreaInsets();
  const p = useLocalSearchParams<Params>();
  const isLive = p.live === "1";
  const player = useVideoPlayer(p.url, (pl) => {
    if (p.start && !isLive) pl.currentTime = Number(p.start) || 0;
    pl.play();
  });
  const { status, error } = useEvent(player, "statusChange", { status: player.status });
  const lastSaved = useRef(0);

  // Save playback progress (history / "continuar assistindo").
  useEffect(() => {
    if (isLive || !p.contentId) return;
    const save = () => {
      let position = 0;
      let duration = 0;
      try {
        position = player.currentTime;
        duration = player.duration || 0;
      } catch {
        return; // player already released
      }
      if (Math.abs(position - lastSaved.current) < 3) return;
      lastSaved.current = position;
      api("/history", {
        method: "POST",
        body: { content_id: p.contentId, episode_id: p.episodeId || null, title: p.title, image: p.image, stream_url: p.url, position, duration },
      })
        .then(() => queryClient.invalidateQueries({ queryKey: ["history"] }))
        .catch(() => {});
    };
    const t = setInterval(save, 10000);
    return () => {
      clearInterval(t);
      save();
    };
  }, [player, isLive, p.contentId, p.episodeId, p.title, p.image, p.url]);

  return (
    <View style={styles.root} testID="player-screen">
      <VideoView player={player} style={StyleSheet.absoluteFill} nativeControls contentFit="contain" allowsPictureInPicture fullscreenOptions={{ enable: true }} />
      {status === "loading" && (
        <View style={styles.center} pointerEvents="none">
          <ActivityIndicator size="large" color={colors.brandPrimary} />
        </View>
      )}
      {status === "error" && (
        <View style={styles.center} testID="player-error">
          <Ionicons name="alert-circle-outline" size={48} color={colors.error} />
          <Text style={{ color: colors.onSurface, fontSize: fs(16), marginTop: space.md }}>Erro de reprodução</Text>
          <Text style={{ color: colors.muted, fontSize: fs(12), marginTop: space.xs }}>{error?.message}</Text>
        </View>
      )}
      <View style={[styles.top, { paddingTop: insets.top + space.sm }]} pointerEvents="box-none">
        <Focusable testID="player-back-button" style={[styles.back, { backgroundColor: colors.overlay }]} onPress={() => (router.canGoBack() ? router.back() : router.replace("/(tabs)"))}>
          <Ionicons name="arrow-back" size={24} color={colors.onSurface} />
        </Focusable>
        <Text testID="player-title" numberOfLines={1} style={{ color: colors.onSurface, fontSize: fs(16), fontWeight: "700", flex: 1 }}>
          {p.title}
        </Text>
        {isLive && (
          <View style={{ backgroundColor: colors.brandPrimary, paddingHorizontal: space.sm, paddingVertical: 2, borderRadius: radius.sm }}>
            <Text style={{ color: colors.onBrandPrimary, fontWeight: "800", fontSize: fs(11) }}>AO VIVO</Text>
          </View>
        )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  root: { flex: 1, backgroundColor: "#000000" },
  center: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, alignItems: "center", justifyContent: "center" },
  top: { position: "absolute", top: 0, left: 0, right: 0, flexDirection: "row", alignItems: "center", gap: space.md, paddingHorizontal: space.lg },
  back: { width: 44, height: 44, borderRadius: radius.pill, alignItems: "center", justifyContent: "center" },
});