import { ROUTES } from '@/constants/Routes';
import { useI18n } from '@/hooks/useI18n';
import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

type BasicInfoTabProps = {
  healthData: {
    bmi: string;
    height: string;
    weight: string;
    waist: string;
  };
};

export function BasicInfoTab({ healthData }: BasicInfoTabProps) {
  const { t } = useI18n();
  const router = useRouter();

  const handleHeightWeightPress = () => {
    router.push(ROUTES.PROFILE_EDIT);
  };

  const handleWaistPress = () => {
    router.push('/circumference-detail');
  };

  return (
    <View style={styles.card}>
      <Text style={styles.cardTitle}>{t('health.tabs.healthProfile.basicInfoCard.title')}</Text>
      <View style={styles.metricsGrid}>
        {/* BMI - Highlighted */}
        <View style={styles.metricItemMain}>
          <Text style={styles.metricLabelMain}>{t('health.tabs.healthProfile.basicInfoCard.bmi')}</Text>
          <Text style={styles.metricValueMain}>
            {healthData.bmi === '--' ? t('health.tabs.healthProfile.basicInfoCard.noData') : healthData.bmi}
          </Text>
        </View>

        {/* Height - Clickable */}
        <TouchableOpacity 
          style={styles.metricItem}
          onPress={handleHeightWeightPress}
          activeOpacity={0.7}
        >
          <View style={styles.metricHeaderSmall}>
            <Text style={styles.metricValue}>{healthData.height}</Text>
            <Ionicons name="chevron-forward" size={12} color="#9CA3AF" />
          </View>
          <Text style={styles.metricLabel}>
            {t('health.tabs.healthProfile.basicInfoCard.height')}/{t('health.tabs.healthProfile.basicInfoCard.heightUnit')}
          </Text>
        </TouchableOpacity>

        {/* Weight - Clickable */}
        <TouchableOpacity 
          style={styles.metricItem}
          onPress={handleHeightWeightPress}
          activeOpacity={0.7}
        >
          <View style={styles.metricHeaderSmall}>
            <Text style={styles.metricValue}>{healthData.weight}</Text>
            <Ionicons name="chevron-forward" size={12} color="#9CA3AF" />
          </View>
          <Text style={styles.metricLabel}>
            {t('health.tabs.healthProfile.basicInfoCard.weight')}/{t('health.tabs.healthProfile.basicInfoCard.weightUnit')}
          </Text>
        </TouchableOpacity>

        {/* Waist - Clickable */}
        <TouchableOpacity 
          style={styles.metricItem}
          onPress={handleWaistPress}
          activeOpacity={0.7}
        >
          <View style={styles.metricHeaderSmall}>
            <Text style={styles.metricValue}>{healthData.waist}</Text>
            <Ionicons name="chevron-forward" size={12} color="#9CA3AF" />
          </View>
          <Text style={styles.metricLabel}>
            {t('health.tabs.healthProfile.basicInfoCard.waist')}/{t('health.tabs.healthProfile.basicInfoCard.waistUnit')}
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#FFFFFF',
    borderRadius: 20,
    padding: 20,
    marginBottom: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.03,
    shadowRadius: 6,
    elevation: 1,
  },
  cardTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#1F2937',
    marginBottom: 16,
    fontFamily: 'AliBold',
  },
  metricsGrid: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  metricItemMain: {
    flex: 1.5,
    backgroundColor: '#F5F3FF',
    borderRadius: 12,
    padding: 12,
    marginRight: 12,
    alignItems: 'center',
  },
  metricHeader: {
    flexDirection: 'row',
    gap: 2,
    marginBottom: 8,
  },
  metricLabelMain: {
    fontSize: 14,
    color: '#5B4CFF',
    fontWeight: 'bold',
    marginBottom: 4,
    fontFamily: 'AliBold',
  },
  metricValueMain: {
    fontSize: 16,
    color: '#5B4CFF',
    fontFamily: 'AliRegular',
  },
  metricItem: {
    flex: 1,
    alignItems: 'center',
  },
  metricHeaderSmall: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 8,
    gap: 2,
  },
  metricLabel: {
    fontSize: 11,
    color: '#6B7280',
    marginBottom: 4,
    fontFamily: 'AliRegular',
  },
  metricValue: {
    fontSize: 14,
    color: '#1F2937',
    fontWeight: '600',
    fontFamily: 'AliBold',
  },
});