import { StyleSheet, Platform, Dimensions } from 'react-native';
import { typography } from '@theme';

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

export const getStyles = (colors: any) =>
  StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: colors.background,
    },

    // ---------- Map ----------
    map: {
      flex: 1,
    },

    // ---------- Locate me FAB ----------
    locateButton: {
      position: 'absolute',
      right: 16,
      bottom: Platform.OS === 'ios' ? 310 : 290,
      width: 48,
      height: 48,
      borderRadius: 24,
      backgroundColor: '#FFFFFF',
      alignItems: 'center',
      justifyContent: 'center',
      ...Platform.select({
        ios: {
          shadowColor: '#000',
          shadowOffset: { width: 0, height: 3 },
          shadowOpacity: 0.15,
          shadowRadius: 6,
        },
        android: { elevation: 5 },
      }),
    },
    locateIcon: {
      fontSize: 22,
    },

    // ---------- Bottom sheet ----------
    bottomSheet: {
      position: 'absolute',
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: colors.background,
      borderTopLeftRadius: 24,
      borderTopRightRadius: 24,
      paddingHorizontal: 20,
      paddingBottom: Platform.OS === 'ios' ? 34 : 20,
      ...Platform.select({
        ios: {
          shadowColor: '#000',
          shadowOffset: { width: 0, height: -4 },
          shadowOpacity: 0.1,
          shadowRadius: 12,
        },
        android: { elevation: 12 },
      }),
    },
    sheetHandle: {
      alignSelf: 'center',
      width: 40,
      height: 4,
      borderRadius: 2,
      backgroundColor: colors.border,
      marginTop: 10,
      marginBottom: 16,
    },

    // ---------- Location card ----------
    card: {
      backgroundColor: colors.cardBg,
      borderRadius: 16,
      padding: 16,
      marginBottom: 16,
      borderWidth: 1,
      borderColor: colors.border,
    },
    cardHeader: {
      flexDirection: 'row',
      alignItems: 'center',
      marginBottom: 8,
    },
    cardIcon: {
      fontSize: 18,
      marginRight: 8,
    },
    cardTitle: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.semibold,
      color: colors.textSecondary,
    },
    cardAddress: {
      fontSize: typography.fontSize.md,
      fontWeight: typography.fontWeight.semibold,
      color: colors.text,
      lineHeight: 22,
      marginBottom: 8,
    },
    changeLink: {
      alignSelf: 'flex-end',
    },
    changeText: {
      fontSize: typography.fontSize.sm,
      color: colors.primary,
      fontWeight: typography.fontWeight.semibold,
    },

    // ---------- Buttons ----------
    confirmButton: {
      borderRadius: 14,
      marginBottom: 8,
    },
    manualButton: {
      alignItems: 'center',
      paddingVertical: 14,
    },
    manualButtonText: {
      fontSize: typography.fontSize.sm,
      color: colors.primary,
      fontWeight: typography.fontWeight.semibold,
    },
  });