import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { colors, fonts, spacing, borderRadius } from '../utils/theme';

function getStrength(password) {
  if (!password) return { level: 0, label: '', color: 'transparent' };

  let score = 0;
  if (password.length >= 6) score++;
  if (password.length >= 10) score++;
  if (/[A-Z]/.test(password)) score++;
  if (/[0-9]/.test(password)) score++;
  if (/[^A-Za-z0-9]/.test(password)) score++;

  if (score <= 1) return { level: 1, label: 'Weak', color: colors.error, hint: 'Try adding numbers or symbols' };
  if (score <= 2) return { level: 2, label: 'Fair', color: colors.warning, hint: 'Getting there — add uppercase or symbols' };
  if (score <= 3) return { level: 3, label: 'Good', color: colors.accent, hint: 'Nice — almost strong' };
  return { level: 4, label: 'Strong', color: colors.success, hint: 'Great password!' };
}

export default function PasswordStrength({ password }) {
  const { level, label, color, hint } = getStrength(password);

  if (!password) return null;

  return (
    <View style={styles.container}>
      {/* Bars */}
      <View style={styles.barRow}>
        {[1, 2, 3, 4].map((i) => (
          <View
            key={i}
            style={[
              styles.bar,
              { backgroundColor: i <= level ? color : colors.border },
            ]}
          />
        ))}
      </View>

      {/* Label + hint */}
      <View style={styles.textRow}>
        <Text style={[styles.label, { color }]}>{label}</Text>
        <Text style={styles.hint}>{hint}</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginTop: -spacing.sm,
    marginBottom: spacing.md,
  },
  barRow: {
    flexDirection: 'row',
    gap: 4,
    marginBottom: spacing.xs,
  },
  bar: {
    flex: 1,
    height: 4,
    borderRadius: 2,
  },
  textRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  label: {
    fontSize: fonts.sizes.xs,
    fontWeight: fonts.weights.bold,
  },
  hint: {
    fontSize: fonts.sizes.xs,
    color: colors.textMuted,
  },
});
