import React from "react";
import { FlatList, Text, View } from "react-native";
import { Image } from "expo-image";
import { router } from "expo-router";

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

export const POSTER_W = isTV ? 220 : 128;

export function PosterCard({ item, width = POSTER_W, testID }: { item: Content; width?: number; testID?: string }) {
  const styles = useStyles();
  return (
    <Focusable
      testID={testID ?? `poster-${item.id}`}
      style={[styles.card, { width }]}
      onPress={() => router.push({ pathname: "/title/[id]", params: { id: item.id } })}
    >
      <Image source={{ uri: item.poster_url }} style={[styles.img, { width: width - 4, height: (width - 4) * 1.45 }]} contentFit="cover" transition={250} />
      {item.type === "series" && (
        <View style={styles.badge}>
          <Text style={styles.badgeText}>SÉRIE</Text>
        </View>
      )}
      <Text numberOfLines={1} style={styles.title}>
        {item.title}
      </Text>
    </Focusable>
  );
}

export function ContentRow({ title, items, testID }: { title: string; items: Content[]; testID: string }) {
  const styles = useStyles();
  if (!items.length) return null;
  return (
    <View testID={testID} style={styles.row}>
      <Text style={styles.rowTitle}>{title}</Text>
      <FlatList
        horizontal
        data={items}
        keyExtractor={(i) => i.id}
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={{ paddingHorizontal: sidePad, gap: space.md }}
        renderItem={({ item }) => <PosterCard item={item} />}
      />
    </View>
  );
}

const useStyles = makeStyles((c) => ({
  card: { borderRadius: radius.md, padding: 0 },
  img: { borderRadius: radius.md - 2, backgroundColor: c.surfaceTertiary },
  badge: { position: "absolute", top: space.sm, left: space.sm, backgroundColor: c.brandPrimary, borderRadius: radius.sm, paddingHorizontal: 6, paddingVertical: 2 },
  badgeText: { color: c.onBrandPrimary, fontSize: fs(9), fontWeight: "800", letterSpacing: 1 },
  title: { color: c.onSurfaceSecondary, fontSize: fs(12), marginTop: space.xs, paddingHorizontal: 2 },
  row: { marginTop: space.xl },
  rowTitle: { color: c.onSurface, fontSize: fs(18), fontWeight: "700", marginBottom: space.md, paddingHorizontal: sidePad },
}));