info-target-mobile/screens/profile/ui/ManualTab.tsx

import { useTheme } from '@/components/ThemeContext';
import { ResizeMode, Video } from 'expo-av';
import { useRouter } from 'expo-router';
import { ArrowLeft } from 'lucide-react-native';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
  Dimensions,
  Image,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

const { width } = Dimensions.get('window');

type ManualStep = {
  title: string;
  text: string;
  image?: any;
};

export function ManualTab() {
  const { isDark } = useTheme();
  const { t } = useTranslation();
  const router = useRouter();
  const [videoLang, setVideoLang] = useState<'uz' | 'ru' | 'en'>('uz');

  const theme = {
    background: isDark ? '#0f172a' : '#f8fafc',
    cardBg: isDark ? '#1e293b' : '#ffffff',
    text: isDark ? '#ffffff' : '#0f172a',
    textSecondary: isDark ? '#94a3b8' : '#64748b',
    primary: '#3b82f6',
  };

  const steps: ManualStep[] = [
    {
      title: "Foydalanish qo'lanmasi",
      text: "Foydalanish qo'lanmasi",
      image: require('@/assets/manual/step1.jpg'),
    },
    {
      title: "Ro'yxatdan o'tish (Registratsiya) – 1 daqiqa ichida",
      text: "Platformaga kirish uchun avval ro'yxatdan o'ting.",
      image: require('@/assets/manual/step2.jpg'),
    },
    {
      title: "Profilni to'ldirish va tasdiqlash",
      text: "Muhim: Ro'yxatdan o'tgandan keyin profil to'liq bo'lishi kerak — aks holda platforma cheklangan rejimda ishlaydi.",
      image: require('@/assets/manual/step3.jpg'),
    },
    {
      title: "Xodimlarni qo'shish",
      text: "Profil ichida Xodimlar bo'limiga o'ting va + tugmasi orqali xodim qo'shing.",
      image: require('@/assets/manual/step4.jpg'),
    },
    {
      title: "E'lon berish va o'z mahsulot/xizmatlaringizni ko'rsatish",
      text: "Pastki menyudan E'lonlar bo'limiga o'ting va yangi e'lon yarating.",
      image: require('@/assets/manual/step5.jpg'),
    },
    {
      title: 'Mijozlarni qidirish va topish',
      text: 'Filtrdan foydalanib kerakli kompaniyalarni toping va profiliga kirib xabar yuboring.',
      image: require('@/assets/manual/step6.jpg'),
    },
    {
      title: 'Muhim maslahatlar va xavfsizlik',
      text: 'Faqat tasdiqlangan profillarga ishonch bilan murojaat qiling.',
      image: require('@/assets/manual/step7.jpg'),
    },
  ];

  const videos: Record<'uz' | 'ru' | 'en', any> = {
    uz: require('@/assets/manual/manual_video_uz.mp4'),
    ru: require('@/assets/manual/manual_video_ru.mp4'),
    en: require('@/assets/manual/manual_video_en.mp4'),
  };

  const handleVideoChange = (lang: 'uz' | 'ru' | 'en') => {
    setVideoLang(lang);
  };

  return (
    <ScrollView style={[styles.container, { backgroundColor: theme.background }]}>
      <View style={[styles.header, { backgroundColor: isDark ? '#0f172a' : '#fff' }]}>
        <Pressable onPress={() => router.push('/profile')}>
          <ArrowLeft color={isDark ? '#fff' : '#0f172a'} />
        </Pressable>

        <Text style={[styles.headerTitle, { color: isDark ? '#fff' : '#0f172a' }]}>
          {t("Foydalanish qo'lanmasi")}
        </Text>
      </View>

      {steps.map((step, index) => (
        <View key={index} style={[styles.card, { backgroundColor: theme.cardBg }]}>
          <Text style={[styles.headerTitle, { color: theme.text }]}>{t(step.title)}</Text>
          <Text style={[styles.text, { color: theme.textSecondary, marginTop: 8 }]}>
            {t(step.text)}
          </Text>
          {step.image && <Image source={step.image} style={styles.image} resizeMode="contain" />}
        </View>
      ))}

      {/* Video bo'limi */}
      <View style={[styles.card, { backgroundColor: theme.cardBg }]}>
        <Text style={[styles.headerTitle, { color: theme.text }]}>{t("Qo'llanma video")}</Text>

        {/* Til tanlash tugmalari */}
        <View style={styles.buttonRow}>
          <TouchableOpacity
            style={[
              styles.langButton,
              {
                backgroundColor: videoLang === 'uz' ? theme.primary : theme.cardBg,
                borderColor: theme.primary,
              },
            ]}
            onPress={() => handleVideoChange('uz')}
          >
            <Text style={{ color: videoLang === 'uz' ? '#fff' : theme.text }}>O'zbek</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={[
              styles.langButton,
              {
                backgroundColor: videoLang === 'ru' ? theme.primary : theme.cardBg,
                borderColor: theme.primary,
              },
            ]}
            onPress={() => handleVideoChange('ru')}
          >
            <Text style={{ color: videoLang === 'ru' ? '#fff' : theme.text }}>Русский</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={[
              styles.langButton,
              {
                backgroundColor: videoLang === 'en' ? theme.primary : theme.cardBg,
                borderColor: theme.primary,
              },
            ]}
            onPress={() => handleVideoChange('en')}
          >
            <Text style={{ color: videoLang === 'en' ? '#fff' : theme.text }}>English</Text>
          </TouchableOpacity>
        </View>

        <Video
          source={videos[videoLang]}
          style={styles.video}
          useNativeControls
          isLooping
          resizeMode={ResizeMode.COVER}
        />
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  card: { borderRadius: 16, padding: 16, marginBottom: 16 },
  headerTitle: { fontSize: 18, fontWeight: '700', lineHeight: 24 },
  text: { fontSize: 14, lineHeight: 20 },
  image: { width: width - 64, height: 200, marginTop: 12, borderRadius: 12 },
  video: { width: width - 64, height: 320, marginTop: 12, borderRadius: 12 },
  buttonRow: { flexDirection: 'row', justifyContent: 'space-around', marginVertical: 12 },
  langButton: {
    paddingVertical: 8,
    paddingHorizontal: 16,
    borderRadius: 8,
    borderWidth: 1,
  },
  header: {
    padding: 16,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
    gap: 10,
    elevation: 3,
  },
});