import React, { useState } from "react";
import { ActivityIndicator, FlatList, ScrollView, Text, View, useWindowDimensions } from "react-native";
import { router, useLocalSearchParams } 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, Content } from "@/src/api";
import { Focusable } from "@/src/components/Focusable";
import { PosterCard } from "@/src/components/PosterCard";
import { makeStyles, useTheme } from "@/src/theme";
import { fs, isTV, radius, sidePad, space } from "@/src/ui";

export default function Browse() {
  const styles = useStyles();
  const { colors } = useTheme();
  const insets = useSafeAreaInsets();
  const { width } = useWindowDimensions();
  const { type } = useLocalSearchParams<{ type: "movie" | "series" }>();
  const [cat, setCat] = useState<string | null>(null);
  const cats = useQuery({ queryKey: ["categories"], queryFn: () => api<{ id: string; name: string }[]>("/categories") });
  const items = useQuery({
    queryKey: ["content", type, cat],
    queryFn: () => api<Content[]>(`/content?type=${type}${cat ? `&category=${cat}` : ""}`),
  });
  const cols = isTV ? 6 : width > 700 ? 4 : 3;
  const cardW = (width - sidePad * 2 - space.md * (cols - 1)) / cols;

  return (
    <View style={[styles.root, { paddingTop: insets.top }]} testID="browse-screen">
      <View style={styles.header}>
        <Focusable testID="browse-back-button" style={styles.back} onPress={() => router.back()}>
          <Ionicons name="chevron-back" size={26} color={colors.onSurface} />
        </Focusable>
        <Text style={styles.title}>{type === "series" ? "Séries" : "Filmes"}</Text>
      </View>
      <View style={styles.chipRow}>
        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: space.sm, paddingHorizontal: sidePad, alignItems: "center" }}>
          {[{ id: null as string | null, name: "Todos" }, ...(cats.data ?? [])].map((c) => (
            <Focusable key={c.id ?? "all"} testID={`browse-chip-${c.id ?? "all"}`} style={[styles.chip, cat === c.id && styles.chipActive]} onPress={() => setCat(c.id)} focusScale={1.04}>
              <Text style={styles.chipText}>{c.name}</Text>
            </Focusable>
          ))}
        </ScrollView>
      </View>
      {items.isLoading ? (
        <ActivityIndicator color={colors.brandPrimary} style={{ marginTop: space.xxl }} />
      ) : (
        <FlatList
          key={cols}
          data={items.data ?? []}
          numColumns={cols}
          keyExtractor={(i) => i.id}
          columnWrapperStyle={{ gap: space.md }}
          contentContainerStyle={{ paddingHorizontal: sidePad, paddingTop: space.sm, gap: space.md, paddingBottom: insets.bottom + space.xl }}
          ListEmptyComponent={<Text testID="browse-empty" style={styles.empty}>Nenhum conteúdo encontrado</Text>}
          renderItem={({ item }) => <PosterCard item={item} width={cardW} />}
        />
      )}
    </View>
  );
}

const useStyles = makeStyles((c) => ({
  root: { flex: 1, backgroundColor: c.surface },
  header: { flexDirection: "row", alignItems: "center", gap: space.sm, paddingHorizontal: space.sm, paddingVertical: space.sm },
  back: { width: 44, height: 44, alignItems: "center", justifyContent: "center", borderRadius: radius.pill },
  title: { color: c.onSurface, fontSize: fs(24), fontWeight: "800" },
  chipRow: { height: 56, justifyContent: "center" },
  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" },
  empty: { color: c.muted, fontSize: fs(15), textAlign: "center", marginTop: space.xxl },
}));