import React, { useEffect, useState } from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';
import { useTheme } from '../services/ThemeContext';
import ModalShell from './ModalShell';

const RenameMediaModal = ({ visible, initialName, onClose, onSave, saving }) => {
  const { theme } = useTheme();
  const [name, setName] = useState(initialName || '');

  useEffect(() => {
    if (visible) setName(initialName || '');
  }, [visible, initialName]);

  const submit = () => {
    const trimmed = (name || '').trim();
    if (!trimmed || saving) return;
    onSave?.(trimmed);
  };

  return (
    <ModalShell visible={visible} onClose={onClose} cardStyle={{ backgroundColor: theme.card }}>
      <Text style={[styles.title, { color: theme.text }]}>Rename media</Text>
      <Text style={[styles.hint, { color: theme.textSecondary }]}> 
        This updates the name shown in your library and keeps it after refresh.
      </Text>
      <TextInput
        style={[
          styles.input,
          { color: theme.text, borderColor: theme.border, backgroundColor: theme.background },
        ]}
        value={name}
        onChangeText={setName}
        placeholder="Enter a new name"
        placeholderTextColor={theme.textTertiary}
        onSubmitEditing={submit}
        editable={!saving}
      />
      <View style={styles.row}>
        <TouchableOpacity
          style={[styles.secondary, { borderColor: theme.border }]}
          onPress={onClose}
          disabled={saving}
        >
          <Text style={{ color: theme.textSecondary }}>Cancel</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[styles.primary, { backgroundColor: theme.primary, opacity: saving ? 0.6 : 1 }]}
          onPress={submit}
          disabled={saving || !name.trim()}
        >
          <Text style={styles.primaryText}>{saving ? 'Saving…' : 'Save'}</Text>
        </TouchableOpacity>
      </View>
    </ModalShell>
  );
};

const styles = StyleSheet.create({
  title: { fontSize: 18, fontWeight: '700', marginBottom: 4 },
  hint: { fontSize: 13, marginBottom: 12 },
  input: {
    borderWidth: 1,
    borderRadius: 10,
    paddingHorizontal: 12,
    paddingVertical: 10,
    fontSize: 15,
    marginBottom: 14,
  },
  row: { flexDirection: 'row', gap: 10, justifyContent: 'flex-end' },
  secondary: {
    borderWidth: 1,
    borderRadius: 10,
    paddingHorizontal: 14,
    paddingVertical: 10,
  },
  primary: {
    borderRadius: 10,
    paddingHorizontal: 16,
    paddingVertical: 10,
  },
  primaryText: { color: '#fff', fontWeight: '700' },
});

export default RenameMediaModal;