import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import { Image } from "expo-image";
import { useRouter } from "expo-router";
import { Pressable, StyleSheet, Text, View } from "react-native";

import { useColors } from "@/hooks/use-colors";
import { getItemImage } from "@/lib/iptv/api";
import type { LiveStream, MovieStream, SeriesStream } from "@/lib/iptv/types";

export type MediaItem = LiveStream | MovieStream | SeriesStream;

export function BrandMark({ compact = false }: { compact?: boolean }) {
  return (
    <View style={[styles.brandRow, compact && styles.brandRowCompact]}>
      <View style={styles.brandMark}>
        <MaterialIcons name="play-arrow" size={compact ? 17 : 22} color="#F4F7FB" />
      </View>
      {!compact && (
        <View>
          <Text style={styles.brandTitle}>MANUS</Text>
          <Text style={styles.brandSubtitle}>IPTV PLAYER</Text>
        </View>
      )}
    </View>
  );
}

export function ScreenHeader({ title, subtitle, action }: { title: string; subtitle?: string; action?: React.ReactNode }) {
  return (
    <View style={styles.screenHeader}>
      <View style={styles.screenHeaderText}>
        <Text style={styles.screenTitle}>{title}</Text>
        {subtitle ? <Text style={styles.screenSubtitle}>{subtitle}</Text> : null}
      </View>
      {action}
    </View>
  );
}

export function SectionHeader({ title, actionLabel, onAction }: { title: string; actionLabel?: string; onAction?: () => void }) {
  const colors = useColors("dark");
  return (
    <View style={styles.sectionHeader}>
      <Text style={[styles.sectionTitle, { color: colors.foreground }]}>{title}</Text>
      {actionLabel && onAction ? (
        <Pressable onPress={onAction} style={({ pressed }) => [styles.textAction, pressed && { opacity: 0.65 }]}>
          <Text style={[styles.textActionLabel, { color: colors.primary }]}>{actionLabel}</Text>
          <MaterialIcons name="chevron-right" size={18} color={colors.primary} />
        </Pressable>
      ) : null}
    </View>
  );
}

export function MediaCard({
  item,
  kind,
  onPress,
  isFavorite,
  onToggleFavorite,
  horizontal = false,
}: {
  item: MediaItem;
  kind: "live" | "movie" | "series";
  onPress: () => void;
  isFavorite?: boolean;
  onToggleFavorite?: () => void;
  horizontal?: boolean;
}) {
  const colors = useColors("dark");
  const image = getItemImage(item);
  const isSeries = kind === "series";
  const isLive = kind === "live";
  return (
    <Pressable onPress={onPress} style={({ pressed }) => [horizontal ? styles.horizontalCard : styles.mediaCard, pressed && styles.pressed]}>
      <View style={[horizontal ? styles.horizontalImageWrap : styles.posterWrap, { backgroundColor: colors.surface }]}>
        {image ? (
          <Image source={{ uri: image }} contentFit="cover" transition={180} style={StyleSheet.absoluteFillObject} />
        ) : (
          <View style={styles.imageFallback}>
            <MaterialIcons name={isLive ? "live-tv" : isSeries ? "video-library" : "movie"} size={28} color={colors.muted} />
          </View>
        )}
        {isLive ? (
          <View style={styles.liveBadge}>
            <View style={styles.liveDot} />
            <Text style={styles.liveBadgeText}>AO VIVO</Text>
          </View>
        ) : null}
        {onToggleFavorite ? (
          <Pressable onPress={onToggleFavorite} hitSlop={8} style={({ pressed }) => [styles.favoriteButton, pressed && { opacity: 0.55 }] }>
            <MaterialIcons name={isFavorite ? "favorite" : "favorite-border"} size={18} color={isFavorite ? "#FF6B7A" : "#F4F7FB"} />
          </Pressable>
        ) : null}
      </View>
      <Text numberOfLines={horizontal ? 1 : 2} style={[styles.mediaTitle, { color: colors.foreground }]}>{item.name}</Text>
      {horizontal && "category_id" in item ? <Text style={[styles.mediaMeta, { color: colors.muted }]}>Conteúdo disponível</Text> : null}
    </Pressable>
  );
}

export function EmptyState({ icon, title, message, actionLabel, onAction }: { icon: React.ComponentProps<typeof MaterialIcons>["name"]; title: string; message: string; actionLabel?: string; onAction?: () => void }) {
  const colors = useColors("dark");
  return (
    <View style={styles.emptyState}>
      <View style={[styles.emptyIcon, { backgroundColor: colors.surface }]}>
        <MaterialIcons name={icon} size={30} color={colors.primary} />
      </View>
      <Text style={[styles.emptyTitle, { color: colors.foreground }]}>{title}</Text>
      <Text style={[styles.emptyMessage, { color: colors.muted }]}>{message}</Text>
      {actionLabel && onAction ? (
        <Pressable onPress={onAction} style={({ pressed }) => [styles.secondaryButton, { borderColor: colors.border }, pressed && styles.pressed]}>
          <Text style={[styles.secondaryButtonText, { color: colors.foreground }]}>{actionLabel}</Text>
        </Pressable>
      ) : null}
    </View>
  );
}

export function AccountBadge({ label }: { label: string }) {
  const colors = useColors("dark");
  return (
    <View style={[styles.accountBadge, { backgroundColor: colors.surface, borderColor: colors.border }]}>
      <View style={styles.accountDot} />
      <Text numberOfLines={1} style={[styles.accountText, { color: colors.foreground }]}>{label}</Text>
    </View>
  );
}

export function GoToPlayer({ title, kind, id, extension }: { title: string; kind: "live" | "movie" | "series"; id: number; extension?: string }) {
  const router = useRouter();
  return (
    <Pressable onPress={() => router.push({ pathname: "/player" as never, params: { title, kind, id: String(id), extension: extension ?? "" } })} style={({ pressed }) => [styles.playButton, pressed && styles.pressed]}>
      <MaterialIcons name="play-arrow" size={18} color="#F4F7FB" />
      <Text style={styles.playButtonText}>Reproduzir</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  brandRow: { flexDirection: "row", alignItems: "center", gap: 12 },
  brandRowCompact: { gap: 0 },
  brandMark: { width: 46, height: 46, borderRadius: 15, alignItems: "center", justifyContent: "center", backgroundColor: "#5C7CFA" },
  brandTitle: { color: "#F4F7FB", fontSize: 18, fontWeight: "800", letterSpacing: 2.4 },
  brandSubtitle: { color: "#93A4BD", fontSize: 9, fontWeight: "700", letterSpacing: 1.4, marginTop: 2 },
  screenHeader: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginBottom: 18 },
  screenHeaderText: { flex: 1 },
  screenTitle: { color: "#F4F7FB", fontSize: 26, fontWeight: "800", letterSpacing: -0.4 },
  screenSubtitle: { color: "#93A4BD", fontSize: 13, marginTop: 4 },
  sectionHeader: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginTop: 22, marginBottom: 12 },
  sectionTitle: { fontSize: 18, fontWeight: "800" },
  textAction: { flexDirection: "row", alignItems: "center", gap: 2 },
  textActionLabel: { fontSize: 13, fontWeight: "700" },
  mediaCard: { width: 132, marginRight: 12 },
  horizontalCard: { width: 160, marginRight: 12 },
  posterWrap: { height: 185, borderRadius: 16, overflow: "hidden", position: "relative", marginBottom: 9 },
  horizontalImageWrap: { height: 94, borderRadius: 14, overflow: "hidden", position: "relative", marginBottom: 8 },
  imageFallback: { flex: 1, alignItems: "center", justifyContent: "center" },
  liveBadge: { position: "absolute", left: 8, bottom: 8, flexDirection: "row", alignItems: "center", paddingHorizontal: 7, paddingVertical: 4, borderRadius: 7, backgroundColor: "rgba(9,17,31,0.82)" },
  liveDot: { width: 6, height: 6, borderRadius: 3, backgroundColor: "#FF6B7A", marginRight: 5 },
  liveBadgeText: { color: "#F4F7FB", fontSize: 9, fontWeight: "800", letterSpacing: 0.5 },
  favoriteButton: { position: "absolute", top: 8, right: 8, width: 30, height: 30, borderRadius: 15, backgroundColor: "rgba(9,17,31,0.78)", alignItems: "center", justifyContent: "center" },
  mediaTitle: { fontSize: 13, lineHeight: 18, fontWeight: "700" },
  mediaMeta: { fontSize: 11, marginTop: 3 },
  pressed: { opacity: 0.72, transform: [{ scale: 0.985 }] },
  emptyState: { alignItems: "center", justifyContent: "center", paddingHorizontal: 28, paddingVertical: 46 },
  emptyIcon: { width: 64, height: 64, borderRadius: 22, alignItems: "center", justifyContent: "center", marginBottom: 14 },
  emptyTitle: { fontSize: 18, fontWeight: "800", textAlign: "center" },
  emptyMessage: { textAlign: "center", fontSize: 13, lineHeight: 19, marginTop: 7 },
  secondaryButton: { borderWidth: 1, borderRadius: 13, paddingHorizontal: 18, paddingVertical: 11, marginTop: 20 },
  secondaryButtonText: { fontSize: 13, fontWeight: "700" },
  accountBadge: { flexDirection: "row", alignItems: "center", borderWidth: 1, borderRadius: 999, paddingHorizontal: 10, paddingVertical: 8, maxWidth: 190 },
  accountDot: { width: 7, height: 7, borderRadius: 4, backgroundColor: "#36D399", marginRight: 7 },
  accountText: { fontSize: 12, fontWeight: "700", flexShrink: 1 },
  playButton: { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 7, borderRadius: 13, paddingHorizontal: 16, paddingVertical: 12, backgroundColor: "#5C7CFA" },
  playButtonText: { color: "#F4F7FB", fontSize: 14, fontWeight: "800" },
});