import { BlurView } from "expo-blur";
import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import {
  Image,
  Pressable,
  Share,
  StyleSheet,
  Text,
  View,
  useWindowDimensions,
} from "react-native";
import { icons, img } from "../../../assets";
import KaraokeLyrics from "../../../components/KaraokeLyrics";
import {
  arrayRemove,
  arrayUnion,
  projectsRef,
  usersRef,
} from "../../../config/firebase";
import { Routes } from "../../../navigation";
import { navigate } from "../../../navigation/NavigationService";
import { useUser } from "../../../providers/UserDataProvider";
import { Palette } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
import { size } from "../../../styles/Style";
import CommentsPanel from "./CommentsPanel.web";

// Debug logging toggle for web playback
const DEBUG_PLAYBACK_WEB = true;

// NOTE: Web-only implementation that uses a native <video> element instead of expo-video
// - No Platform checks
// - Audio now comes directly from the MP4 playbackUrl

const PlaybackItem = ({
  item,
  isActive,
  userCache,
  getUserByUid,
  onBackgroundSync,
}) => {
  const { width: viewportWidth, height: viewportHeight } =
    useWindowDimensions();

  const [layoutSize, setLayoutSize] = useState({
    width: viewportWidth,
    height: viewportHeight,
  });
  const [openComments] = useState(true);
  const commentInputRef = useRef(null);
  const { currentUID, followUser, unfollowUser } = useUser() || {};

  const videoUrl = item?.playbackUrl || null;
  const videoRef = useRef(null); // HTMLVideoElement
  const wasActiveRef = useRef(false);
  const startedRef = useRef(false);

  const initialLikedBy = Array.isArray(item?.likedBy) ? item.likedBy : [];
  const [isLiked, setIsLiked] = useState(
    currentUID ? initialLikedBy.includes(currentUID) : false
  );
  const [likesCount, setLikesCount] = useState(initialLikedBy.length);

  const computedCommentsCount = useMemo(
    () => Number(item?.commentsCount || 0),
    [item?.commentsCount]
  );
  const [commentsCount, setCommentsCount] = useState(computedCommentsCount);
  useEffect(() => {
    setCommentsCount(computedCommentsCount);
  }, [computedCommentsCount]);

  const [owner, setOwner] = useState(
    item?.userId && userCache?.current?.get(item.userId)
      ? userCache.current.get(item.userId)
      : null
  );
  useEffect(() => {
    let cancelled = false;
    const run = async () => {
      try {
        const uid = item?.userId;
        if (!uid || !userCache) return;
        const cached = userCache.current.get(uid);
        if (cached) {
          if (!cancelled) setOwner(cached);
          return;
        }
        const user = await getUserByUid?.(uid);
        if (!cancelled && user) {
          userCache.current.set(uid, user);
          setOwner(user);
        }
      } catch (_e) {}
    };
    run();
    return () => {
      cancelled = true;
    };
  }, [item?.userId, userCache, getUserByUid]);

  useEffect(() => {
    const uid = item?.userId;
    if (!uid) return;
    const unsub = usersRef.doc(uid).onSnapshot(
      (doc) => {
        if (doc?.exists) {
          const data = { id: doc.id, ...doc.data() };
          setOwner(data);
          try {
            userCache?.current?.set(uid, data);
          } catch (_e) {}
        }
      },
      () => {}
    );
    return () => unsub?.();
  }, [item?.userId, userCache]);

  const [isFollowing, setIsFollowing] = useState(false);
  useEffect(() => {
    const list = Array.isArray(owner?.followedBy) ? owner.followedBy : [];
    setIsFollowing(currentUID ? list.includes(currentUID) : false);
  }, [owner?.followedBy, currentUID]);

  useEffect(() => {
    const lb = Array.isArray(item?.likedBy) ? item.likedBy : [];
    setLikesCount(lb.length);
    setIsLiked(currentUID ? lb.includes(currentUID) : false);
  }, [item?.likedBy, currentUID]);

  useEffect(() => {
    startedRef.current = false;
  }, [videoUrl]);

  // Start/reset when active, using the video's own audio
  useEffect(() => {
    const el = videoRef.current;
    if (!el) return;

    if (!isActive) {
      try {
        if (!el.paused) el.pause();
      } catch (_e) {}
      try {
        el.muted = true;
      } catch (_e) {}
      startedRef.current = false;
      onBackgroundSync?.({ isPlaying: false });
      return;
    }

    const start = async () => {
      try {
        if (!startedRef.current) {
          startedRef.current = true;
          const resetToStart = () => {
            try {
              el.currentTime = 0;
            } catch (_e) {}
          };
          if (el.readyState >= 1) {
            resetToStart();
          } else {
            const handleLoaded = () => {
              resetToStart();
            };
            el.addEventListener("loadeddata", handleLoaded, { once: true });
          }
        }
        el.muted = false;
        await el.play().catch((error) => {
          if (DEBUG_PLAYBACK_WEB) {
            console.log("[PlaybackItem.web] play() rejected", error);
          }
        });
        onBackgroundSync?.({
          currentTime: Number(el.currentTime || 0),
          isPlaying: !el.paused,
        });
      } catch (_e) {
        if (DEBUG_PLAYBACK_WEB) {
          console.log("[PlaybackItem.web] start error", _e);
        }
      }
    };

    start();
  }, [isActive, videoUrl, onBackgroundSync]);

  // Pause all on unmount
  useEffect(() => {
    const el = videoRef.current;
    return () => {
      try {
        if (el && !el.paused) el.pause();
      } catch (_e) {}
      onBackgroundSync?.({ isPlaying: false });
    };
  }, [onBackgroundSync]);

  // Lyrics timing based on video clock
  const alignedWords = useMemo(() => {
    const idx = Number(item?.songIndex) || 0;
    const ts = item?.musicTimestamps?.[idx];
    const arr = Array.isArray(ts?.alignedWords) ? ts.alignedWords : [];
    return arr.map((w) => ({
      word: String(w?.word ?? ""),
      startS: Number(w?.startS ?? 0),
      endS: Number(w?.endS ?? 0),
    }));
  }, [item?.musicTimestamps, item?.songIndex]);

  const [currentTimeS, setCurrentTimeS] = useState(0);
  useEffect(() => {
    if (!isActive) return;
    const id = setInterval(() => {
      try {
        const el = videoRef.current;
        const videoTime = Number(el?.currentTime || 0);
        const safeTime = Number.isFinite(videoTime) ? videoTime : 0;
        setCurrentTimeS(safeTime);

        onBackgroundSync?.({
          currentTime: safeTime,
          isPlaying: !!el && !el.paused,
        });
      } catch (_e) {}
    }, 250);
    return () => clearInterval(id);
  }, [isActive, onBackgroundSync]);

  useEffect(() => {
    if (!onBackgroundSync) return undefined;
    if (isActive) {
      wasActiveRef.current = true;
      return undefined;
    }
    if (wasActiveRef.current) {
      onBackgroundSync({ isPlaying: false });
      wasActiveRef.current = false;
    }
    return undefined;
  }, [isActive, onBackgroundSync]);

  const descriptionText =
    item?.description || item?.title || "Description chanson";

  const handleLayout = useCallback((event) => {
    const { width = 0, height = 0 } = event?.nativeEvent?.layout || {};
    setLayoutSize((prev) => ({
      width: width > 0 ? width : prev.width,
      height: height > 0 ? height : prev.height,
    }));
  }, []);

  const layoutWidth = layoutSize.width || viewportWidth;
  const layoutHeight = layoutSize.height || viewportHeight;

  const horizontalPadding = 64;
  const innerWidth = Math.max(layoutWidth - horizontalPadding * 2, 0);
  const gapBetweenColumns = 40;
  const minVideoWidth = 420;
  const maxVideoWidth = 720;
  const minCommentsWidth = 300;
  const maxCommentsWidth = 420;

  let desiredHeight = Math.max(420, layoutHeight * 0.8);
  let videoWidth = Math.min(
    maxVideoWidth,
    Math.max(minVideoWidth, innerWidth * 0.58)
  );
  let videoHeight = videoWidth * (16 / 9);
  if (videoHeight > desiredHeight) {
    videoHeight = desiredHeight;
    videoWidth = videoHeight * (9 / 16);
  }
  let commentsWidth = Math.min(
    maxCommentsWidth,
    Math.max(minCommentsWidth, innerWidth - videoWidth - gapBetweenColumns)
  );
  const panelHeight = Math.min(videoHeight, desiredHeight);

  // Attach verbose event listeners on the HTML video element
  useEffect(() => {
    const el = videoRef.current;
    if (!el || !DEBUG_PLAYBACK_WEB) return undefined;
    const handler = (e) => {
      // Avoid heavy logs: only show key events and brief state
      console.log("[PlaybackItem.web] video:", e.type, {
        t: Number(el.currentTime || 0).toFixed(2),
        paused: el.paused,
        rs: el.readyState,
      });
    };
    const events = [
      "loadedmetadata",
      "loadeddata",
      "play",
      "playing",
      "pause",
      "seeking",
      "seeked",
      "stalled",
      "waiting",
      "ended",
      "error",
    ];
    events.forEach((ev) => el.addEventListener(ev, handler));
    return () => {
      events.forEach((ev) => el.removeEventListener(ev, handler));
    };
  }, []);

  return (
    <View
      onLayout={handleLayout}
      style={[
        styles.itemContainerBase,
        styles.itemContainerRow,
        {
          height: "90%",
          paddingHorizontal: horizontalPadding,
          paddingVertical: Math.max((layoutHeight - panelHeight) / 2, 24),
        },
      ]}
    >
      <View
        style={[
          styles.videoColumn,
          { width: videoWidth, marginRight: gapBetweenColumns },
        ]}
      >
        <View style={[styles.videoSurface, { height: panelHeight }]}>
          <View style={styles.videoContainer}>
            {!!videoUrl ? (
              // Native HTML video for web
              <video
                ref={videoRef}
                src={videoUrl}
                playsInline
                muted={!isActive}
                preload="auto"
                // Using web CSS properties here on purpose
                style={{
                  position: "absolute",
                  inset: 0,
                  width: "100%",
                  height: "100%",
                  objectFit: "cover",
                  display: "block",
                }}
              />
            ) : (
              <Image
                source={img.placeholder3}
                style={StyleSheet.absoluteFillObject}
                resizeMode="cover"
              />
            )}

            <View style={styles.actionStack}>
              <View style={styles.ownerBlock}>
                <Pressable
                  style={styles.ownerAvatarButton}
                  onPress={() => {
                    navigate(Routes.SingerProfile, { userId: item?.userId });
                  }}
                >
                  {owner?.profilePictureURL && (
                    <Image
                      source={{ uri: owner.profilePictureURL }}
                      style={[
                        styles.ownerAvatar,
                        owner && !owner.profilePictureURL
                          ? { backgroundColor: Palette.gray }
                          : null,
                      ]}
                    />
                  )}
                </Pressable>
                {owner?.id && currentUID && owner.id !== currentUID && (
                  <Pressable
                    style={styles.followPressable}
                    onPress={async () => {
                      try {
                        const next = !isFollowing;
                        setIsFollowing(next);
                        setOwner((prev) => {
                          const fb = Array.isArray(prev?.followedBy)
                            ? prev.followedBy
                            : [];
                          const newFb = next
                            ? Array.from(new Set([...fb, currentUID]))
                            : fb.filter((x) => x !== currentUID);
                          return prev ? { ...prev, followedBy: newFb } : prev;
                        });
                        if (next) await followUser?.(owner.id);
                        else await unfollowUser?.(owner.id);
                      } catch (_e) {
                        setIsFollowing((v) => !v);
                      }
                    }}
                  >
                    <BlurView
                      tint="dark"
                      intensity={20}
                      style={styles.followButton}
                    >
                      <Text style={styles.followButtonText}>
                        {isFollowing ? "Suivi(e)" : "Suivre"}
                      </Text>
                    </BlurView>
                  </Pressable>
                )}
              </View>
              <Pressable
                onPress={async () => {
                  try {
                    if (!currentUID || !item?.id) return;
                    const nextLiked = !isLiked;
                    setIsLiked(nextLiked);
                    setLikesCount((c) => Math.max(0, c + (nextLiked ? 1 : -1)));

                    const ref = projectsRef.doc(item.id);
                    await ref.set(
                      {
                        likedBy: nextLiked
                          ? arrayUnion(currentUID)
                          : arrayRemove(currentUID),
                      },
                      { merge: true }
                    );
                  } catch (_e) {
                    setIsLiked((v) => !v);
                    setLikesCount((c) =>
                      isLiked ? c + 1 : Math.max(0, c - 1)
                    );
                  }
                }}
                style={[styles.actionButton, styles.actionSpacing]}
              >
                <Image
                  source={isLiked ? icons.heart : icons.heartOutline}
                  style={styles.actionIcon}
                  resizeMode="contain"
                />
                {!!likesCount && (
                  <Text style={styles.actionLabel}>{likesCount}</Text>
                )}
              </Pressable>
              <Pressable
                onPress={() => {}}
                style={[styles.actionButton, styles.actionSpacing]}
              >
                <Image
                  source={icons.chatBubble}
                  style={styles.actionIcon}
                  resizeMode="contain"
                />
                {!!commentsCount && (
                  <Text style={styles.actionLabel}>{commentsCount}</Text>
                )}
              </Pressable>
              <Pressable
                onPress={async () => {
                  try {
                    const url = item?.playbackUrl || "";
                    const title = item?.title || "Partager";
                    const base = item?.title
                      ? `Découvre « ${item.title} » sur MusicLand`
                      : `Découvre ce playback sur MusicLand`;
                    const message = url ? `${base}\n${url}` : base;

                    await Share.share({ message, title, url });
                  } catch (_e) {}
                }}
                style={[styles.actionButton, styles.actionSpacing]}
              >
                <Image
                  source={icons.share}
                  style={styles.actionIcon}
                  resizeMode="contain"
                />
              </Pressable>
            </View>

            <View style={styles.lyricsContainer}>
              <BlurView tint="dark" intensity={20} style={styles.lyricsCard}>
                {alignedWords?.length > 0 ? (
                  <KaraokeLyrics
                    alignedWords={alignedWords}
                    currentTimeS={currentTimeS}
                  />
                ) : (
                  <Text style={styles.lyricsText}>{descriptionText}</Text>
                )}
              </BlurView>
            </View>
          </View>
        </View>
      </View>

      {openComments && (
        <View
          style={[
            styles.commentsColumn,
            { width: commentsWidth, height: panelHeight },
          ]}
        >
          <CommentsPanel
            projectId={item?.id}
            description={descriptionText}
            commentsCount={commentsCount}
            onCommentAdded={() =>
              setCommentsCount((c) => Math.max(0, Number(c || 0) + 1))
            }
            inputRef={commentInputRef}
            panelHeight={panelHeight}
          />
        </View>
      )}
    </View>
  );
};

export default PlaybackItem;

const styles = StyleSheet.create({
  itemContainerBase: {
    width: "100%",
    paddingVertical: 36,
    alignItems: "center",
  },
  itemContainerRow: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
  videoColumn: {
    alignItems: "center",
    justifyContent: "center",
  },
  videoSurface: {
    alignSelf: "center",
    aspectRatio: 9 / 16,
    borderRadius: 32,
    overflow: "hidden",
    backgroundColor: "#07040D",
    shadowColor: "#000",
    shadowOpacity: 0.45,
    shadowRadius: 30,
    shadowOffset: { width: 0, height: 20 },
    elevation: 12,
  },
  videoContainer: {
    flex: 1,
    position: "relative",
  },
  actionStack: {
    position: "absolute",
    right: 18,
    top: 150,
    alignItems: "center",
  },
  ownerBlock: {
    alignItems: "center",
    marginBottom: 26,
  },
  ownerAvatarButton: {
    marginBottom: 16,
  },
  ownerAvatar: {
    ...size({ size: 56 }),
    borderRadius: 100,
  },
  followPressable: {
    alignSelf: "center",
  },
  followButton: {
    paddingVertical: 8,
    paddingHorizontal: 18,
    borderRadius: 14,
    borderWidth: 1,
    borderColor: Palette.white,
    backgroundColor: "#FFFFFF20",
    overflow: "hidden",
  },
  followButtonText: {
    fontSize: 14,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterMedium,
  },
  actionButton: {
    alignItems: "center",
    justifyContent: "center",
  },
  actionSpacing: {
    marginTop: 24,
  },
  actionIcon: {
    ...size({ size: 30 }),
  },
  actionLabel: {
    marginTop: 6,
    fontSize: 13,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterMedium,
    textAlign: "center",
  },
  lyricsContainer: {
    position: "absolute",
    left: 24,
    right: 24,
    bottom: 32,
  },
  lyricsCard: {
    paddingHorizontal: 18,
    paddingVertical: 12,
    borderRadius: 22,
    backgroundColor: Palette.glass,
    overflow: "hidden",
  },
  lyricsText: {
    fontSize: 14,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterRegular,
  },
  commentsColumn: {
    alignSelf: "stretch",
  },
});