/**
 * VideoCirclePlayer — telegram-style круглое видео-сообщение.
 *
 * Мигрировано с expo-av `<Video>` на expo-video `<VideoView>` +
 * useVideoPlayer hook (expo-av deprecated в SDK 54).
 *
 * UI:
 *   - Круглая thumbnail-рамка (Image превью первого кадра) с play-overlay
 *   - Tap → полноэкранный Modal с VideoView в круглой рамке, auto-play + loop
 *   - Duration badge снизу
 */
import React, { useState } from 'react';
import { View, Text, Pressable, Modal, Image } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useVideoPlayer, VideoView } from 'expo-video';

export interface VideoCirclePlayerProps {
  uri:       string;
  duration?: number;
  size?:     number;
}

function formatClock(sec: number): string {
  const m = Math.floor(sec / 60);
  const s = Math.floor(sec % 60);
  return `${m}:${String(s).padStart(2, '0')}`;
}

export function VideoCirclePlayer({ uri, duration, size = 220 }: VideoCirclePlayerProps) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Pressable
        onPress={() => setOpen(true)}
        style={{
          width: size, height: size, borderRadius: size / 2,
          overflow: 'hidden',
          backgroundColor: '#0a0a0a',
          marginBottom: 4,
          alignItems: 'center', justifyContent: 'center',
        }}
      >
        {/* Статический thumbnail через Image (первый кадр если платформа
            поддерживает, иначе чёрный фон). Реальное видео играет только
            в Modal ради производительности FlatList'а. */}
        <Image
          source={{ uri }}
          style={{ width: '100%', height: '100%' }}
          resizeMode="cover"
        />
        <View
          style={{
            position: 'absolute',
            width: 52, height: 52, borderRadius: 26,
            backgroundColor: 'rgba(0,0,0,0.55)',
            alignItems: 'center', justifyContent: 'center',
          }}
        >
          <Ionicons name="play" size={22} color="#ffffff" style={{ marginLeft: 2 }} />
        </View>
        {duration !== undefined && (
          <View
            style={{
              position: 'absolute',
              right: size / 2 - 26, bottom: 16,
              paddingHorizontal: 6, paddingVertical: 2,
              borderRadius: 6,
              backgroundColor: 'rgba(0,0,0,0.6)',
            }}
          >
            <Text style={{ color: '#ffffff', fontSize: 11, fontWeight: '600' }}>
              {formatClock(duration)}
            </Text>
          </View>
        )}
      </Pressable>

      {open && (
        <VideoModal uri={uri} onClose={() => setOpen(false)} />
      )}
    </>
  );
}

// Modal рендерится только когда open=true — это значит useVideoPlayer
// не создаёт лишних плееров пока пользователь не открыл overlay.

function VideoModal({ uri, onClose }: { uri: string; onClose: () => void }) {
  // useVideoPlayer может throw'нуть на некоторых платформах при
  // невалидных source'ах. try/catch вокруг render'а защищает парента
  // от полного crash'а.
  let player: ReturnType<typeof useVideoPlayer> | null = null;
  try {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    player = useVideoPlayer({ uri }, (p) => {
      p.loop = true;
      p.muted = false;
      p.play();
    });
  } catch {
    player = null;
  }

  return (
    <Modal visible transparent animationType="fade" onRequestClose={onClose}>
      <Pressable
        onPress={onClose}
        style={{
          flex: 1,
          backgroundColor: 'rgba(0,0,0,0.92)',
          alignItems: 'center',
          justifyContent: 'center',
          padding: 20,
        }}
      >
        <View
          style={{
            width: '90%',
            aspectRatio: 1,
            maxWidth: 420, maxHeight: 420,
            borderRadius: 9999,
            overflow: 'hidden',
            backgroundColor: '#000',
          }}
        >
          {player ? (
            <VideoView
              player={player}
              style={{ width: '100%', height: '100%' }}
              contentFit="cover"
              nativeControls={false}
            />
          ) : (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
              <Ionicons name="alert-circle-outline" size={36} color="#8b8b8b" />
              <Text style={{ color: '#8b8b8b', fontSize: 12, marginTop: 8 }}>
                Playback not available
              </Text>
            </View>
          )}
        </View>

        <Pressable
          onPress={onClose}
          style={{
            position: 'absolute',
            top: 48, right: 16,
            width: 40, height: 40, borderRadius: 20,
            backgroundColor: 'rgba(255,255,255,0.14)',
            alignItems: 'center', justifyContent: 'center',
          }}
        >
          <Ionicons name="close" size={22} color="#ffffff" />
        </Pressable>
      </Pressable>
    </Modal>
  );
}