import { useState } from 'react';
import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
import { useNotesStore } from '../../store/notes-store';
import { colors } from '../../theme';

export default function CaptureScreen() {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [saved, setSaved] = useState(false);
  const saveDraft = useNotesStore((state) => state.saveDraft);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Quick capture</Text>
      <Text style={styles.subtitle}>Create a lightweight mobile draft. Offline queue wiring comes in the next batch.</Text>
      <TextInput
        value={title}
        onChangeText={(value: string) => {
          setSaved(false);
          setTitle(value);
        }}
        placeholder="Draft title"
        placeholderTextColor="#7c8698"
        style={styles.input}
      />
      <TextInput
        value={body}
        onChangeText={(value: string) => {
          setSaved(false);
          setBody(value);
        }}
        placeholder="Capture a thought, task, or note"
        placeholderTextColor="#7c8698"
        style={[styles.input, styles.bodyInput]}
        multiline
        textAlignVertical="top"
      />
      <Pressable
        onPress={() => {
          saveDraft(title, body);
          setSaved(true);
          setTitle('');
          setBody('');
        }}
        style={styles.button}
      >
        <Text style={styles.buttonText}>Save draft</Text>
      </Pressable>
      {saved ? <Text style={styles.saved}>Draft saved locally in this scaffold step.</Text> : null}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: colors.bgCanvas,
    gap: 14,
  },
  title: {
    color: colors.textPrimary,
    fontSize: 28,
    fontWeight: '700',
  },
  subtitle: {
    color: colors.textSecondary,
    fontSize: 15,
    lineHeight: 21,
  },
  input: {
    borderWidth: 1,
    borderColor: colors.borderDefault,
    borderRadius: 12,
    paddingHorizontal: 14,
    paddingVertical: 12,
    color: colors.textPrimary,
    backgroundColor: colors.surfaceCard,
  },
  bodyInput: {
    minHeight: 180,
  },
  button: {
    backgroundColor: colors.accentPrimary,
    borderRadius: 12,
    paddingVertical: 14,
    alignItems: 'center',
  },
  buttonText: {
    color: '#EFF4FF',
    fontWeight: '700',
  },
  saved: {
    color: colors.success,
    fontSize: 14,
    fontWeight: '600',
  },
});