import React, { useState } from 'react';
import { View, ScrollView, TextInput } from 'react-native';
import { RouteProp, useRoute } from '@react-navigation/native';
import { useTheme } from '@theme';
import { getStyles } from './leadNotes.styles';
import { LeadsStackParamList } from '../../navigation/leadsStack';
import { ActionButton } from '@components';

type LeadNotesRouteProp = RouteProp<LeadsStackParamList, 'leadNotes'>;

export const LeadNotesScreen = () => {
  const route = useRoute<LeadNotesRouteProp>();
  const { theme: colors } = useTheme();
  const styles = getStyles(colors);

  const leadId = route.params?.leadId;
  const [note, setNote] = useState('');

  const handleSave = () => {
    console.log('Saving note:', note);
    // TODO: Implement save logic
  };

  return (
    <View style={styles.container}>
      <ScrollView 
        style={styles.scrollView} 
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={false}
      >
        <TextInput
          style={styles.noteInput}
          value={note}
          onChangeText={setNote}
          placeholder="Write your note here..."
          placeholderTextColor={colors.textMuted}
          multiline
          textAlignVertical="top"
        />

        <ActionButton
          label="Add Note"
          onPress={handleSave}
          variant="primary"
        />
      </ScrollView>
    </View>
  );
};