{
  "expo": {
    "plugins": [
      [
        "expo-image-picker",
        {
          "photosPermission": "Застосунок потребує доступу до фотографій, щоб ви могли обрати аватар.",
          "cameraPermission": "Застосунок потребує доступу до камери для зйомки фото."
        }
      ],
      [
        "expo-media-library",
        {
          "photosPermission": "Дозвольте доступ до фотографій.",
          "savePhotosPermission": "Дозвольте зберігати фотографії.",
          "isAccessMediaLocationEnabled": true
        }
      ]
    ]
  }
}

import * as ImagePicker from 'expo-image-picker';
import { Linking, Pressable, StyleSheet, Text, View } from 'react-native';

type Props = {
  children: React.ReactNode;
};

export function PermissionGate({ children }: Props) {
  // Хук повертає [статус, requestAsync, getAsync]
  const [cameraStatus, requestCamera] =
    ImagePicker.useCameraPermissions();
  const [libraryStatus, requestLibrary] =
    ImagePicker.useMediaLibraryPermissions();

  // Поки дозволи ще не завантажились — нічого не рендеримо
  if (!cameraStatus || !libraryStatus) return null;

  const allGranted =
    cameraStatus.granted && libraryStatus.granted;

  if (allGranted) {
    // Всі дозволи є — рендеримо дочірній контент
    return <>{children}</>;
  }

  // Якщо хоча б один дозвіл "denied" — треба вести в Налаштування
  const anyDenied =
    cameraStatus.status === 'denied' ||
    libraryStatus.status === 'denied';

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Потрібен доступ</Text>
      <Text style={styles.description}>
        Для роботи з фото застосунок потребує доступу до
        камери та фото-бібліотеки.
      </Text>

      {anyDenied ? (
        // Дозвіл вже відхилений — система не покаже діалог знову.
        // Єдиний вихід — відкрити Налаштування вручну.
        <Pressable
          style={styles.button}
          onPress={() => Linking.openSettings()}
        >
          <Text style={styles.buttonText}>
            Відкрити Налаштування
          </Text>
        </Pressable>
      ) : (
        // Статус "undetermined" — можна запитати
        <Pressable
          style={styles.button}
          onPress={async () => {
            await requestCamera();
            await requestLibrary();
          }}
        >
          <Text style={styles.buttonText}>
            Надати доступ
          </Text>
        </Pressable>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 32,
    gap: 16,
  },
  title: { fontSize: 20, fontWeight: '700', textAlign: 'center' },
  description: { fontSize: 15, textAlign: 'center', color: '#666' },
  button: {
    backgroundColor: '#3b82f6',
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 10,
  },
  buttonText: { color: '#fff', fontWeight: '600', fontSize: 16 },
});

import * as ImagePicker from 'expo-image-picker';

export async function pickFromLibrary() {
  const result = await ImagePicker.launchImageLibraryAsync({
    // Які типи медіа показувати у picker-і
    // 'Images' | 'Videos' | 'All'
    mediaTypes: ImagePicker.MediaTypeOptions.Images,

    // Чи дозволити редактор кадрування після вибору
    // На iOS відкриває вбудований crop UI
    allowsEditing: true,

    // Пропорції кадрування (тільки якщо allowsEditing: true)
    // [ширина, висота] — наприклад, [1, 1] = квадрат
    aspect: [1, 1],

    // Якість стиснення JPEG: 0.0 (мінімальна) → 1.0 (максимальна)
    // Застосовується до JPEG/WebP; PNG не стискається (lossless)
    quality: 0.8,

    // Чи дозволити вибір кількох файлів одночасно (iOS 14+, Android)
    allowsMultipleSelection: false,

    // Чи повертати base64 разом з URI
    // Увімкнення суттєво збільшує час обробки і пам'ять!
    base64: false,

    // Чи повертати exif-метадані (геолокація, камера, час зйомки)
    exif: false,
  });

  return result;
}

import * as ImagePicker from 'expo-image-picker';
import { Alert, Linking } from 'react-native';

export type PickedAsset = ImagePicker.ImagePickerAsset;

export function usePhotoPicker() {
  const pickFromLibrary = async (): Promise<PickedAsset | null> => {
    // Запитуємо дозвіл (lazy — прямо перед дією)
    const { status } =
      await ImagePicker.requestMediaLibraryPermissionsAsync();

    if (status !== 'granted') {
      Alert.alert(
        'Потрібен доступ до фото',
        'Щоб обрати фото, надайте доступ до фото-бібліотеки у Налаштуваннях.',
        [
          { text: 'Скасувати', style: 'cancel' },
          { text: 'Налаштування', onPress: () => Linking.openSettings() },
        ],
      );
      return null;
    }

    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [1, 1],
      quality: 0.8,
    });

    if (result.canceled) return null;

    return result.assets[0];
  };

  return { pickFromLibrary };
}

import * as ImagePicker from 'expo-image-picker';
import { Alert, Linking } from 'react-native';

export function useCameraPicker() {
  const takePhoto = async () => {
    const { status } =
      await ImagePicker.requestCameraPermissionsAsync();

    if (status !== 'granted') {
      Alert.alert(
        'Потрібен доступ до камери',
        'Щоб зняти фото, надайте доступ до камери у Налаштуваннях.',
        [
          { text: 'Скасувати', style: 'cancel' },
          { text: 'Налаштування', onPress: () => Linking.openSettings() },
        ],
      );
      return null;
    }

    const result = await ImagePicker.launchCameraAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [1, 1],
      quality: 0.85,

      // Яка камера відкривається першою
      // 'front' (фронтальна) | 'back' (основна, за замовчуванням)
      cameraType: ImagePicker.CameraType.back,
    });

    if (result.canceled) return null;

    return result.assets[0];
  };

  return { takePhoto };
}

import * as ImagePicker from 'expo-image-picker';
import { Alert, Linking } from 'react-native';

type PhotoSource = 'library' | 'camera';

async function requestAndLaunch(source: PhotoSource) {
  if (source === 'library') {
    const { status } =
      await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (status !== 'granted') {
      Alert.alert('Немає доступу', 'Відкрийте Налаштування і надайте доступ до фото.', [
        { text: 'OK' },
        { text: 'Налаштування', onPress: () => Linking.openSettings() },
      ]);
      return null;
    }
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [1, 1],
      quality: 0.8,
    });
    return result.canceled ? null : result.assets[0];
  }

  // source === 'camera'
  const { status } = await ImagePicker.requestCameraPermissionsAsync();
  if (status !== 'granted') {
    Alert.alert('Немає доступу', 'Відкрийте Налаштування і надайте доступ до камери.', [
      { text: 'OK' },
      { text: 'Налаштування', onPress: () => Linking.openSettings() },
    ]);
    return null;
  }
  const result = await ImagePicker.launchCameraAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    aspect: [1, 1],
    quality: 0.85,
  });
  return result.canceled ? null : result.assets[0];
}

// Функція показує Alert з вибором джерела фото
export function showPhotoSourceSheet(
  onPicked: (asset: ImagePicker.ImagePickerAsset) => void,
) {
  Alert.alert(
    'Оберіть джерело фото',
    undefined,
    [
      {
        text: 'Фото-бібліотека',
        onPress: async () => {
          const asset = await requestAndLaunch('library');
          if (asset) onPicked(asset);
        },
      },
      {
        text: 'Камера',
        onPress: async () => {
          const asset = await requestAndLaunch('camera');
          if (asset) onPicked(asset);
        },
      },
      { text: 'Скасувати', style: 'cancel' },
    ],
  );
}

import { Image, StyleSheet, Text, View } from 'react-native';
import type { ImagePickerAsset } from 'expo-image-picker';

type Props = {
  asset: ImagePickerAsset | null;
};

export function PhotoPreview({ asset }: Props) {
  if (!asset) {
    return (
      <View style={styles.placeholder}>
        <Text style={styles.placeholderText}>Фото не обрано</Text>
      </View>
    );
  }

  return (
    <View>
      <Image
        source={{ uri: asset.uri }}
        style={styles.image}
        // Показуємо фото в його реальних пропорціях
        // width і height asset-а вже відомі — використаємо їх
        accessibilityLabel="Обране фото"
      />
      <Text style={styles.meta}>
        {asset.width} × {asset.height} px
        {asset.fileSize
          ? ` · ${(asset.fileSize / 1024 / 1024).toFixed(1)} МБ`
          : ''}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  placeholder: {
    width: 200,
    height: 200,
    borderRadius: 100,
    backgroundColor: '#f1f5f9',
    justifyContent: 'center',
    alignItems: 'center',
  },
  placeholderText: { color: '#94a3b8', fontSize: 14 },
  image: {
    width: 200,
    height: 200,
    borderRadius: 100,
  },
  meta: { textAlign: 'center', color: '#64748b', marginTop: 8, fontSize: 13 },
});

import * as ImageManipulator from 'expo-image-manipulator';

type CompressOptions = {
  maxWidth?: number;   // максимальна ширина (default: 800)
  maxHeight?: number;  // максимальна висота (default: 800)
  quality?: number;    // якість JPEG: 0–1 (default: 0.8)
};

export type CompressedImage = {
  uri: string;
  width: number;
  height: number;
};

export async function compressImage(
  uri: string,
  options: CompressOptions = {},
): Promise<CompressedImage> {
  const {
    maxWidth = 800,
    maxHeight = 800,
    quality = 0.8,
  } = options;

  // resize з лише однією стороною зберігає пропорції.
  // Але нам треба обмежити обидва виміри — тому беремо менший коефіцієнт.
  // Найпростіший підхід: спочатку обмежимо ширину, потім висоту.
  // ImageManipulator сам збереже пропорції при single-dimension resize.
  const result = await ImageManipulator.manipulateAsync(
    uri,
    [
      // Зменшуємо до maxWidth, зберігаючи пропорції
      { resize: { width: maxWidth } },
    ],
    {
      compress: quality,
      format: ImageManipulator.SaveFormat.JPEG,
    },
  );

  // Якщо після зменшення за шириною висота все ще перевищує maxHeight —
  // ще раз зменшуємо, тепер за висотою
  if (result.height > maxHeight) {
    const second = await ImageManipulator.manipulateAsync(
      result.uri,
      [{ resize: { height: maxHeight } }],
      {
        compress: quality,
        format: ImageManipulator.SaveFormat.JPEG,
      },
    );
    return second;
  }

  return result;
}

import { useState } from 'react';
import * as ImagePicker from 'expo-image-picker';
import { compressImage, type CompressedImage } from '@/utils/compressImage';

export function useAvatarUpload() {
  const [compressed, setCompressed] = useState<CompressedImage | null>(null);
  const [isProcessing, setIsProcessing] = useState(false);

  const pickAndCompress = async () => {
    const { status } =
      await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (status !== 'granted') return;

    const picked = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [1, 1],
      // Не стискаємо тут — зробимо це самі для повного контролю
      quality: 1,
    });

    if (picked.canceled) return;

    setIsProcessing(true);
    try {
      const asset = picked.assets[0];
      console.log(
        `Оригінал: ${asset.width}×${asset.height},`,
        `${((asset.fileSize ?? 0) / 1024 / 1024).toFixed(1)} МБ`,
      );

      const result = await compressImage(asset.uri, {
        maxWidth: 512,
        maxHeight: 512,
        quality: 0.82,
      });

      console.log(`Стиснуто: ${result.width}×${result.height}`);
      setCompressed(result);
    } finally {
      setIsProcessing(false);
    }
  };

  return { compressed, isProcessing, pickAndCompress };
}

import { useState, useEffect } from 'react';
import * as ImagePicker from 'expo-image-picker';
import * as FileSystem from 'expo-file-system';
import * as ImageManipulator from 'expo-image-manipulator';
import { Alert, Linking } from 'react-native';

const AVATARS_DIR = `${FileSystem.documentDirectory}avatars/`;
const AVATAR_FILE = `${AVATARS_DIR}current.jpg`;

export function useAvatarManager() {
  const [avatarUri, setAvatarUri] = useState<string | null>(null);
  const [isProcessing, setIsProcessing] = useState(false);

  // При старті завантажуємо збережений аватар (якщо є)
  useEffect(() => {
    (async () => {
      const info = await FileSystem.getInfoAsync(AVATAR_FILE);
      if (info.exists) {
        // Додаємо ?t= щоб обійти кеш Image-компонента
        setAvatarUri(`${AVATAR_FILE}?t=${Date.now()}`);
      }
    })();
  }, []);

  const pickAvatar = async () => {
    const { status } =
      await ImagePicker.requestMediaLibraryPermissionsAsync();

    if (status !== 'granted') {
      Alert.alert(
        'Потрібен доступ до фото',
        'Надайте доступ до фото-бібліотеки у Налаштуваннях.',
        [
          { text: 'Скасувати', style: 'cancel' },
          { text: 'Налаштування', onPress: () => Linking.openSettings() },
        ],
      );
      return;
    }

    const picked = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [1, 1],
      quality: 1,
    });

    if (picked.canceled) return;
    setIsProcessing(true);

    try {
      const tempUri = picked.assets[0].uri;

      // Стискаємо до 512×512, JPEG 82%
      const compressed = await ImageManipulator.manipulateAsync(
        tempUri,
        [{ resize: { width: 512 } }],
        { compress: 0.82, format: ImageManipulator.SaveFormat.JPEG },
      );

      // Гарантуємо директорію і зберігаємо
      await FileSystem.makeDirectoryAsync(AVATARS_DIR, { intermediates: true });
      await FileSystem.copyAsync({ from: compressed.uri, to: AVATAR_FILE });

      // cache-buster — Image кешує URI, тому змінюємо query
      setAvatarUri(`${AVATAR_FILE}?t=${Date.now()}`);
    } finally {
      setIsProcessing(false);
    }
  };

  const deleteAvatar = async () => {
    await FileSystem.deleteAsync(AVATAR_FILE, { idempotent: true });
    setAvatarUri(null);
  };

  return { avatarUri, isProcessing, pickAvatar, deleteAvatar };
}

export async function uploadAvatar(
  localUri: string,
  authToken: string,
): Promise<{ avatarUrl: string }> {
  const formData = new FormData();

  // В React Native FormData приймає об'єкт з uri, name, type
  formData.append('avatar', {
    uri: localUri,
    name: 'avatar.jpg',
    type: 'image/jpeg',
  } as unknown as Blob);

  const response = await fetch('https://api.example.com/profile/avatar', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${authToken}`,
      // НЕ встановлюйте Content-Type вручну — fetch зробить це сам!
      // Він додасть boundary: 'multipart/form-data; boundary=----...'
    },
    body: formData,
  });

  if (!response.ok) {
    const error = await response.text();
    throw new Error(`Upload failed: ${response.status} ${error}`);
  }

  return response.json();
}

import * as MediaLibrary from 'expo-media-library';
import { Alert, Linking } from 'react-native';

export async function savePhotoToCustomAlbum(
  localUri: string,
  albumName: string = 'Nomad',
): Promise<boolean> {
  // 1. Запитуємо дозвіл на запис у бібліотеку
  const { status } = await MediaLibrary.requestPermissionsAsync(true); // writeOnly = true

  if (status !== 'granted') {
    Alert.alert(
      'Немає дозволу',
      'Щоб зберегти фото в галерею, надайте доступ у Налаштуваннях.',
      [
        { text: 'Скасувати', style: 'cancel' },
        { text: 'Налаштування', onPress: () => Linking.openSettings() },
      ],
    );
    return false;
  }

  try {
    // 2. Створюємо asset у системній бібліотеці
    const asset = await MediaLibrary.createAssetAsync(localUri);

    // 3. Перевіряємо, чи вже існує наш альбом
    const album = await MediaLibrary.getAlbumAsync(albumName);

    if (album === null) {
      // Альбому ще немає — створюємо новий разом з цим asset
      await MediaLibrary.createAlbumAsync(albumName, asset, false);
    } else {
      // Альбом уже є — додаємо asset до існуючого альбому
      await MediaLibrary.addAssetsToAlbumAsync([asset], album, false);
    }

    return true;
  } catch (error) {
    console.error('Помилка збереження фото в галерею:', error);
    Alert.alert('Помилка', 'Не вдалося зберегти фото в галерею.');
    return false;
  }
}

import * as FileSystem from 'expo-file-system';
import * as ImageManipulator from 'expo-image-manipulator';

const BADGE_DIR = `${FileSystem.documentDirectory}badge/`;
const BADGE_AVATAR_URI = `${BADGE_DIR}avatar.jpg`;

export async function processAndSaveAvatar(sourceUri: string): Promise<string> {
  // 1. Апаратний ресайз та стиснення
  const manipulated = await ImageManipulator.manipulateAsync(
    sourceUri,
    [{ resize: { width: 512, height: 512 } }],
    {
      compress: 0.8,
      format: ImageManipulator.SaveFormat.JPEG,
    },
  );

  // 2. Створюємо директорію якщо немає
  await FileSystem.makeDirectoryAsync(BADGE_DIR, { intermediates: true });

  // 3. Копіюємо файл на постійне місце
  await FileSystem.copyAsync({
    from: manipulated.uri,
    to: BADGE_AVATAR_URI,
  });

  // 4. Повертаємо URI з cache-buster для Image
  return `${BADGE_AVATAR_URI}?t=${Date.now()}`;
}

export async function getSavedAvatarUri(): Promise<string | null> {
  const fileInfo = await FileSystem.getInfoAsync(BADGE_AVATAR_URI);
  if (fileInfo.exists) {
    return `${BADGE_AVATAR_URI}?t=${Date.now()}`;
  }
  return null;
}

export async function removeSavedAvatar(): Promise<void> {
  await FileSystem.deleteAsync(BADGE_AVATAR_URI, { idempotent: true });
}

import { useState, useEffect, useCallback } from 'react';
import * as ImagePicker from 'expo-image-picker';
import { Alert, Linking } from 'react-native';
import {
  processAndSaveAvatar,
  getSavedAvatarUri,
  removeSavedAvatar,
} from '@/utils/imageProcessor';

export function useBadgePhoto() {
  const [photoUri, setPhotoUri] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    getSavedAvatarUri().then((uri) => {
      if (uri) setPhotoUri(uri);
    });
  }, []);

  const handlePickFromLibrary = useCallback(async () => {
    const { status } =
      await ImagePicker.requestMediaLibraryPermissionsAsync();

    if (status !== 'granted') {
      Alert.alert('Потрібен дозвіл', 'Надайте доступ до фото у Налаштуваннях.', [
        { text: 'Скасувати' },
        { text: 'Налаштування', onPress: () => Linking.openSettings() },
      ]);
      return;
    }

    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [1, 1],
      quality: 1,
    });

    if (!result.canceled && result.assets[0]) {
      setLoading(true);
      try {
        const savedUri = await processAndSaveAvatar(result.assets[0].uri);
        setPhotoUri(savedUri);
      } catch (err) {
        Alert.alert('Помилка', 'Не вдалося обробити фото');
      } finally {
        setLoading(false);
      }
    }
  }, []);

  const handleTakePhoto = useCallback(async () => {
    const { status } = await ImagePicker.requestCameraPermissionsAsync();

    if (status !== 'granted') {
      Alert.alert('Потрібен дозвіл', 'Надайте доступ до камери у Налаштуваннях.', [
        { text: 'Скасувати' },
        { text: 'Налаштування', onPress: () => Linking.openSettings() },
      ]);
      return;
    }

    const result = await ImagePicker.launchCameraAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [1, 1],
      quality: 1,
    });

    if (!result.canceled && result.assets[0]) {
      setLoading(true);
      try {
        const savedUri = await processAndSaveAvatar(result.assets[0].uri);
        setPhotoUri(savedUri);
      } catch (err) {
        Alert.alert('Помилка', 'Не вдалося обробити знімок');
      } finally {
        setLoading(false);
      }
    }
  }, []);

  const handleDeletePhoto = useCallback(async () => {
    await removeSavedAvatar();
    setPhotoUri(null);
  }, []);

  return {
    photoUri,
    loading,
    pickFromLibrary: handlePickFromLibrary,
    takePhoto: handleTakePhoto,
    deletePhoto: handleDeletePhoto,
  };
}

import React from 'react';
import {
  View,
  Text,
  Image,
  StyleSheet,
  Pressable,
  ActivityIndicator,
} from 'react-native';

type BadgeCardProps = {
  name: string;
  role: string;
  company: string;
  photoUri: string | null;
  loading: boolean;
  onPressChangePhoto: () => void;
};

export function BadgeCard({
  name,
  role,
  company,
  photoUri,
  loading,
  onPressChangePhoto,
}: BadgeCardProps) {
  return (
    <View style={styles.card}>
      <View style={styles.header}>
        <Text style={styles.companyText}>{company.toUpperCase()}</Text>
        <View style={styles.badgeHole} />
      </View>

      <Pressable
        style={styles.avatarContainer}
        onPress={onPressChangePhoto}
        disabled={loading}
      >
        {loading ? (
          <ActivityIndicator size="large" color="#3b82f6" />
        ) : photoUri ? (
          <Image source={{ uri: photoUri }} style={styles.avatar} />
        ) : (
          <View style={styles.placeholder}>
            <Text style={styles.placeholderIcon}>📷</Text>
            <Text style={styles.placeholderText}>Додати фото</Text>
          </View>
        )}
        <View style={styles.editBadge}>
          <Text style={styles.editBadgeText}>Змінити</Text>
        </View>
      </Pressable>

      <View style={styles.body}>
        <Text style={styles.nameText}>{name || 'Імʼя Прізвище'}</Text>
        <Text style={styles.roleText}>{role || 'Посада'}</Text>
      </View>

      <View style={styles.footer}>
        <Text style={styles.passId}>PASS ID: #84920</Text>
        <View style={styles.statusDotContainer}>
          <View style={styles.statusDot} />
          <Text style={styles.statusText}>ACTIVE</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#ffffff',
    borderRadius: 20,
    padding: 24,
    width: '100%',
    maxWidth: 340,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 10 },
    shadowOpacity: 0.1,
    shadowRadius: 20,
    elevation: 8,
    borderWidth: 1,
    borderColor: '#e2e8f0',
  },
  header: {
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 24,
  },
  companyText: {
    fontSize: 14,
    fontWeight: '800',
    letterSpacing: 2,
    color: '#3b82f6',
  },
  badgeHole: {
    width: 36,
    height: 8,
    borderRadius: 4,
    backgroundColor: '#cbd5e1',
  },
  avatarContainer: {
    width: 140,
    height: 140,
    borderRadius: 70,
    backgroundColor: '#f8fafc',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 20,
    position: 'relative',
    borderWidth: 3,
    borderColor: '#3b82f6',
    overflow: 'hidden',
  },
  avatar: {
    width: '100%',
    height: '100%',
  },
  placeholder: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  placeholderIcon: {
    fontSize: 32,
    marginBottom: 4,
  },
  placeholderText: {
    fontSize: 12,
    color: '#64748b',
    fontWeight: '500',
  },
  editBadge: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(15, 23, 42, 0.65)',
    paddingVertical: 4,
    alignItems: 'center',
  },
  editBadgeText: {
    color: '#ffffff',
    fontSize: 10,
    fontWeight: '600',
  },
  body: {
    alignItems: 'center',
    marginBottom: 24,
  },
  nameText: {
    fontSize: 22,
    fontWeight: '700',
    color: '#0f172a',
    marginBottom: 4,
  },
  roleText: {
    fontSize: 15,
    color: '#64748b',
    fontWeight: '500',
  },
  footer: {
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingTop: 16,
    borderTopWidth: 1,
    borderTopColor: '#f1f5f9',
  },
  passId: {
    fontSize: 12,
    color: '#94a3b8',
    fontWeight: '600',
  },
  statusDotContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
  },
  statusDot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: '#22c55e',
  },
  statusText: {
    fontSize: 11,
    fontWeight: '700',
    color: '#16a34a',
    letterSpacing: 0.5,
  },
});

import React, { useState } from 'react';
import {
  View,
  Text,
  TextInput,
  StyleSheet,
  ScrollView,
  Pressable,
  Alert,
} from 'react-native';
import { BadgeCard } from '@/components/BadgeCard';
import { useBadgePhoto } from '@/hooks/useBadgePhoto';

export default function BadgeScreen() {
  const [name, setName] = useState('Олександр Коваль');
  const [role, setRole] = useState('Senior React Native Engineer');
  const [company, setCompany] = useState('Kostyl Tech');

  const {
    photoUri,
    loading,
    pickFromLibrary,
    takePhoto,
    deletePhoto,
  } = useBadgePhoto();

  const handleOpenPhotoOptions = () => {
    Alert.alert(
      'Зображення профілю',
      'Оберіть дію для оновлення фотографії бейджа:',
      [
        { text: 'Зробити фото (Камера)', onPress: takePhoto },
        { text: 'Обрати з галереї', onPress: pickFromLibrary },
        ...(photoUri
          ? [
              {
                text: 'Видалити фото',
                style: 'destructive' as const,
                onPress: deletePhoto,
              },
            ]
          : []),
        { text: 'Скасувати', style: 'cancel' },
      ],
    );
  };

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text style={styles.title}>Генератор Фото-Бейджа</Text>
      <Text style={styles.subtitle}>
        Створіть свій цифровий пропуск із персональним фото
      </Text>

      <View style={styles.badgeWrapper}>
        <BadgeCard
          name={name}
          role={role}
          company={company}
          photoUri={photoUri}
          loading={loading}
          onPressChangePhoto={handleOpenPhotoOptions}
        />
      </View>

      <View style={styles.form}>
        <Text style={styles.sectionTitle}>Дані співробітника</Text>

        <View style={styles.field}>
          <Text style={styles.label}>Компанія</Text>
          <TextInput
            style={styles.input}
            value={company}
            onChangeText={setCompany}
            placeholder="Назва компанії"
          />
        </View>

        <View style={styles.field}>
          <Text style={styles.label}>Повне імʼя</Text>
          <TextInput
            style={styles.input}
            value={name}
            onChangeText={setName}
            placeholder="Введіть ім'я"
          />
        </View>

        <View style={styles.field}>
          <Text style={styles.label}>Посада</Text>
          <TextInput
            style={styles.input}
            value={role}
            onChangeText={setRole}
            placeholder="Введіть посаду"
          />
        </View>

        <Pressable
          style={styles.actionButton}
          onPress={handleOpenPhotoOptions}
        >
          <Text style={styles.actionButtonText}>
            {photoUri ? '📷 Змінити фото бейджа' : '➕ Додати фото бейджа'}
          </Text>
        </Pressable>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 24,
    backgroundColor: '#f8fafc',
    alignItems: 'center',
  },
  title: {
    fontSize: 26,
    fontWeight: '800',
    color: '#0f172a',
    textAlign: 'center',
    marginTop: 12,
  },
  subtitle: {
    fontSize: 14,
    color: '#64748b',
    textAlign: 'center',
    marginTop: 4,
    marginBottom: 24,
  },
  badgeWrapper: {
    width: '100%',
    alignItems: 'center',
    marginBottom: 32,
  },
  form: {
    width: '100%',
    maxWidth: 340,
    backgroundColor: '#ffffff',
    padding: 20,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: '#e2e8f0',
    gap: 16,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: '700',
    color: '#0f172a',
  },
  field: {
    gap: 6,
  },
  label: {
    fontSize: 13,
    fontWeight: '600',
    color: '#475569',
  },
  input: {
    backgroundColor: '#f8fafc',
    borderWidth: 1,
    borderColor: '#cbd5e1',
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 10,
    fontSize: 15,
    color: '#0f172a',
  },
  actionButton: {
    backgroundColor: '#3b82f6',
    paddingVertical: 14,
    borderRadius: 10,
    alignItems: 'center',
    marginTop: 8,
  },
  actionButtonText: {
    color: '#ffffff',
    fontWeight: '700',
    fontSize: 15,
  },
});

export type PlacePhoto = {
  id: string;
  localUri: string;
  width: number;
  height: number;
  createdAt: number;
};

export type Place = {
  id: string;
  tripId: string;
  title: string;
  description?: string;
  photos: PlacePhoto[];
  createdAt: number;
};

import React from 'react';
import {
  View,
  Text,
  Image,
  ScrollView,
  Pressable,
  StyleSheet,
  Alert,
} from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import * as ImageManipulator from 'expo-image-manipulator';
import * as FileSystem from 'expo-file-system';
import type { PlacePhoto } from '@/types/trip';

type PlacePhotoGridProps = {
  photos: PlacePhoto[];
  onPhotosChange: (photos: PlacePhoto[]) => void;
  maxPhotos?: number;
};

export function PlacePhotoGrid({
  photos,
  onPhotosChange,
  maxPhotos = 5,
}: PlacePhotoGridProps) {
  const handleAddPhoto = async (source: 'camera' | 'library') => {
    if (photos.length >= maxPhotos) {
      Alert.alert('Ліміт', `Можна додати не більше ${maxPhotos} фото.`);
      return;
    }

    let pickerResult: ImagePicker.ImagePickerResult;

    if (source === 'camera') {
      const { status } = await ImagePicker.requestCameraPermissionsAsync();
      if (status !== 'granted') return;
      pickerResult = await ImagePicker.launchCameraAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        allowsEditing: true,
        quality: 0.9,
      });
    } else {
      const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
      if (status !== 'granted') return;
      pickerResult = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        allowsEditing: true,
        quality: 0.9,
      });
    }

    if (pickerResult.canceled || !pickerResult.assets[0]) return;

    const rawAsset = pickerResult.assets[0];

    // 1. Оптимізуємо фото (max 1080px за шириною, 82% якість)
    const compressed = await ImageManipulator.manipulateAsync(
      rawAsset.uri,
      [{ resize: { width: 1080 } }],
      { compress: 0.82, format: ImageManipulator.SaveFormat.JPEG },
    );

    // 2. Зберігаємо у власну постійну папку місць Nomad
    const photoId = `photo_${Date.now()}_${Math.random().toString(36).substring(7)}`;
    const targetDir = `${FileSystem.documentDirectory}nomad_photos/`;
    const targetFile = `${targetDir}${photoId}.jpg`;

    await FileSystem.makeDirectoryAsync(targetDir, { intermediates: true });
    await FileSystem.copyAsync({ from: compressed.uri, to: targetFile });

    const newPhoto: PlacePhoto = {
      id: photoId,
      localUri: targetFile,
      width: compressed.width,
      height: compressed.height,
      createdAt: Date.now(),
    };

    onPhotosChange([...photos, newPhoto]);
  };

  const handleRemovePhoto = (id: string) => {
    Alert.alert('Видалити фото?', 'Ви впевнені, що хочете видалити цей кадр?', [
      { text: 'Скасувати', style: 'cancel' },
      {
        text: 'Видалити',
        style: 'destructive',
        onPress: async () => {
          const toDelete = photos.find((p) => p.id === id);
          if (toDelete) {
            await FileSystem.deleteAsync(toDelete.localUri, { idempotent: true });
          }
          onPhotosChange(photos.filter((p) => p.id !== id));
        },
      },
    ]);
  };

  const showSourceDialog = () => {
    Alert.alert('Додати фото місця', 'Оберіть джерело:', [
      { text: '📷 Камера', onPress: () => handleAddPhoto('camera') },
      { text: '🖼️ Галерея', onPress: () => handleAddPhoto('library') },
      { text: 'Скасувати', style: 'cancel' },
    ]);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.headerTitle}>
        Фотографії місця ({photos.length}/{maxPhotos})
      </Text>

      <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.scroll}>
        {photos.map((photo) => (
          <View key={photo.id} style={styles.photoCard}>
            <Image source={{ uri: photo.localUri }} style={styles.thumbnail} />
            <Pressable
              style={styles.deleteButton}
              onPress={() => handleRemovePhoto(photo.id)}
            >
              <Text style={styles.deleteButtonText}>✕</Text>
            </Pressable>
          </View>
        ))}

        {photos.length < maxPhotos && (
          <Pressable style={styles.addButton} onPress={showSourceDialog}>
            <Text style={styles.plusIcon}>+</Text>
            <Text style={styles.addLabel}>Додати</Text>
          </Pressable>
        )}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginVertical: 12,
  },
  headerTitle: {
    fontSize: 14,
    fontWeight: '700',
    color: '#334155',
    marginBottom: 8,
  },
  scroll: {
    flexDirection: 'row',
  },
  photoCard: {
    position: 'relative',
    marginRight: 10,
    borderRadius: 12,
    overflow: 'hidden',
  },
  thumbnail: {
    width: 90,
    height: 90,
    borderRadius: 12,
  },
  deleteButton: {
    position: 'absolute',
    top: 4,
    right: 4,
    backgroundColor: 'rgba(0,0,0,0.6)',
    width: 22,
    height: 22,
    borderRadius: 11,
    justifyContent: 'center',
    alignItems: 'center',
  },
  deleteButtonText: {
    color: '#ffffff',
    fontSize: 12,
    fontWeight: 'bold',
  },
  addButton: {
    width: 90,
    height: 90,
    borderRadius: 12,
    borderWidth: 2,
    borderStyle: 'dashed',
    borderColor: '#94a3b8',
    backgroundColor: '#f8fafc',
    justifyContent: 'center',
    alignItems: 'center',
  },
  plusIcon: {
    fontSize: 24,
    color: '#64748b',
  },
  addLabel: {
    fontSize: 12,
    color: '#64748b',
    fontWeight: '500',
    marginTop: 2,
  },
});