import React, { useState } from "react";
import { ActivityIndicator, FlatList, Text, View, useWindowDimensions } from "react-native";
import { Image } from "expo-image";
import { router, useFocusEffect } from "expo-router";
import { useQuery } from "@tanstack/react-query";
import { useSafeAreaInsets } from "react-native-safe-area-context";

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

export default function MyListScreen() {
  const styles = useStyles();
  const { colors } = useTheme();
  const insets = useSafeAreaInsets();
  const { width } = useWindowDimensions();
  const [tab, setTab] = useState<"fav" | "hist">("fav");
  const favs = useQuery({ queryKey: ["favorites"], queryFn: () => api<Content[]>("/favorites") });
  const hist = useQuery({ queryKey: ["history"], queryFn: () => api<any[]>("/history") });
  useFocusEffect(
    React.useCallback(() => {
      favs.refetch();
      hist.refetch();
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []),
  );
  const bottomChrome = usesNativeTabs ? insets.bottom : 0;
  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="mylist-screen">
      <Text style={styles.title}>Minha Lista</Text>
      <View style={styles.seg}>
        {(["fav", "hist"] as const).map((k) => (
          <Focusable key={k} testID={`mylist-tab-${k}`} onPress={() => setTab(k)} style={[styles.segBtn, tab === k && styles.segActive]} focusScale={1.02}>
            <Text style={[styles.segText, tab === k && { color: colors.onBrandPrimary }]}>{k === "fav" ? "Favoritos" : "Histórico"}</Text>
          </Focusable>
        ))}
      </View>
      {tab === "fav" ? (
        favs.isLoading ? (
          <ActivityIndicator color={colors.brandPrimary} style={{ marginTop: space.xxl }} />
        ) : (
          <FlatList
            key={`fav-${cols}`}
            data={favs.data ?? []}
            numColumns={cols}
            keyExtractor={(i) => i.id}
            columnWrapperStyle={{ gap: space.md }}
            contentContainerStyle={{ paddingHorizontal: sidePad, gap: space.md, paddingBottom: bottomChrome + space.xl }}
            ListEmptyComponent={<Text testID="favorites-empty" style={styles.empty}>Você ainda não tem favoritos.</Text>}
            renderItem={({ item }) => <PosterCard item={item} width={cardW} testID={`favorite-${item.id}`} />}
          />
        )
      ) : (
        <FlatList
          data={hist.data ?? []}
          keyExtractor={(h) => h.content_id + (h.episode_id ?? "")}
          contentContainerStyle={{ paddingHorizontal: sidePad, gap: space.md, paddingBottom: bottomChrome + space.xl }}
          ListEmptyComponent={<Text testID="history-empty" style={styles.empty}>Nada assistido ainda.</Text>}
          renderItem={({ item }) => (
            <Focusable
              testID={`history-${item.content_id}`}
              style={styles.histRow}
              focusScale={1.02}
              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.histImg} contentFit="cover" />
              <View style={{ flex: 1 }}>
                <Text style={styles.histTitle} numberOfLines={2}>{item.title}</Text>
                <Text style={styles.histMeta}>
                  {Math.floor(item.position / 60)} min de {Math.max(1, Math.floor(item.duration / 60))} min
                </Text>
                <View style={styles.track}>
                  <View style={[styles.fill, { width: `${item.duration ? Math.min(100, (item.position / item.duration) * 100) : 0}%` }]} />
                </View>
              </View>
            </Focusable>
          )}
        />
      )}
    </View>
  );
}

const useStyles = makeStyles((c) => ({
  root: { flex: 1, backgroundColor: c.surface },
  title: { color: c.onSurface, fontSize: fs(26), fontWeight: "800", paddingHorizontal: sidePad, paddingVertical: space.lg },
  seg: { flexDirection: "row", marginHorizontal: sidePad, marginBottom: space.lg, backgroundColor: c.surfaceSecondary, borderRadius: radius.pill, padding: 4 },
  segBtn: { flex: 1, height: 40, borderRadius: radius.pill, alignItems: "center", justifyContent: "center" },
  segActive: { backgroundColor: c.brandPrimary },
  segText: { color: c.onSurfaceTertiary, fontSize: fs(14), fontWeight: "700" },
  empty: { color: c.muted, fontSize: fs(15), textAlign: "center", marginTop: space.xxl },
  histRow: { flexDirection: "row", gap: space.md, backgroundColor: c.surfaceSecondary, borderRadius: radius.md, padding: space.sm, alignItems: "center" },
  histImg: { width: 120, height: 68, borderRadius: radius.sm, backgroundColor: c.surfaceTertiary },
  histTitle: { color: c.onSurface, fontSize: fs(15), fontWeight: "700" },
  histMeta: { color: c.muted, fontSize: fs(12), marginTop: 2 },
  track: { height: 3, backgroundColor: c.border, marginTop: space.sm, borderRadius: 2 },
  fill: { height: 3, backgroundColor: c.brandPrimary, borderRadius: 2 },
}));