import React from "react";
import { ActivityIndicator, FlatList, RefreshControl, Text, View } from "react-native";
import { Image } from "expo-image";
import { router } from "expo-router";
import { useQuery } from "@tanstack/react-query";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Ionicons from "@react-native-vector-icons/ionicons";

import { api, Channel } from "@/src/api";
import { Focusable } from "@/src/components/Focusable";
import { usesNativeTabs } from "@/src/navigation";
import { makeStyles, useTheme } from "@/src/theme";
import { fs, radius, sidePad, space } from "@/src/ui";

export default function LiveScreen() {
  const styles = useStyles();
  const { colors } = useTheme();
  const insets = useSafeAreaInsets();
  const q = useQuery({ queryKey: ["channels"], queryFn: () => api<Channel[]>("/channels") });
  const bottomChrome = usesNativeTabs ? insets.bottom : 0;

  return (
    <View style={[styles.root, { paddingTop: insets.top }]} testID="live-screen">
      <View style={styles.header}>
        <Text style={styles.title}>Canais ao vivo</Text>
        <View style={styles.liveBadge}>
          <View style={styles.liveDot} />
          <Text style={styles.liveText}>AO VIVO</Text>
        </View>
      </View>
      {q.isLoading ? (
        <ActivityIndicator color={colors.brandPrimary} style={{ marginTop: space.xxl }} />
      ) : (
        <FlatList
          data={q.data ?? []}
          keyExtractor={(c) => c.id}
          refreshControl={<RefreshControl refreshing={q.isRefetching} onRefresh={() => { q.refetch(); }} tintColor={colors.brandPrimary} />}
          contentContainerStyle={{ paddingHorizontal: sidePad, paddingBottom: bottomChrome + space.xl, gap: space.md }}
          ListEmptyComponent={
            <Text testID="live-empty" style={styles.empty}>
              {q.error ? (q.error as Error).message : "Nenhum canal disponível"}
            </Text>
          }
          renderItem={({ item, index }) => (
            <Focusable
              testID={`channel-${item.id}`}
              hasTVPreferredFocus={index === 0}
              style={styles.card}
              focusScale={1.02}
              onPress={() => router.push({ pathname: "/player", params: { url: item.stream_url, title: item.name, live: "1" } })}
            >
              <Text style={styles.num}>{String(item.number).padStart(2, "0")}</Text>
              <Image source={{ uri: item.logo_url }} style={styles.logo} contentFit="cover" />
              <View style={{ flex: 1 }}>
                <Text style={styles.name} numberOfLines={1}>{item.name}</Text>
                <Text style={styles.now} numberOfLines={1}>{item.now_playing || item.category}</Text>
              </View>
              <Ionicons name="play-circle" size={34} color={colors.brandPrimary} />
            </Focusable>
          )}
        />
      )}
    </View>
  );
}

const useStyles = makeStyles((c) => ({
  root: { flex: 1, backgroundColor: c.surface },
  header: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: sidePad, paddingVertical: space.lg },
  title: { color: c.onSurface, fontSize: fs(26), fontWeight: "800" },
  liveBadge: { flexDirection: "row", alignItems: "center", gap: 6, backgroundColor: c.brandTertiary, paddingHorizontal: space.md, height: 28, borderRadius: radius.pill },
  liveDot: { width: 8, height: 8, borderRadius: 4, backgroundColor: c.brandPrimary },
  liveText: { color: c.onBrandTertiary, fontSize: fs(11), fontWeight: "800", letterSpacing: 1 },
  card: { flexDirection: "row", alignItems: "center", gap: space.md, backgroundColor: c.surfaceSecondary, borderRadius: radius.md, padding: space.md },
  num: { color: c.muted, fontSize: fs(16), fontWeight: "700", width: 28 },
  logo: { width: 88, height: 50, borderRadius: radius.sm, backgroundColor: c.surfaceTertiary },
  name: { color: c.onSurface, fontSize: fs(16), fontWeight: "700" },
  now: { color: c.muted, fontSize: fs(13), marginTop: 2 },
  empty: { color: c.muted, fontSize: fs(15), textAlign: "center", marginTop: space.xxl },
}));