import React, { useState } from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  ScrollView,
  StyleSheet,
} from 'react-native';

export default function App() {
  const [form, setForm] = useState({
    adSoyad: '',
    tc: '',
    dogumTarihi: '',
    bulgular: '',
    tedavi: '',
  });

  const set = (key, val) => {
    setForm((prev) => ({ ...prev, [key]: val }));
  };

  //console.log(form);

  return (
    <View style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.title}>Sonuç Kayıt Formu</Text>
        <Text style={s.subtitle}>Hasta tetkik ve tanı bilgileri</Text>
        
        <Text style={s.section}>HASTA BİLGİLERİ</Text>
        
        <Text style={s.label}>Ad Soyad</Text>
        <TextInput
          style={s.input}
          placeholder="Mecit Çağan"
          placeholderTextColor="#94a3b8"
          value={form.adSoyad}
          onChangeText={(v) => set('adSoyad', v)} // 'adsoyad' hatası düzeltildi
        />
        
        <Text style={s.label}>TC Kimlik No</Text>
        <TextInput
          style={s.input}
          placeholder="12345678901"
          placeholderTextColor="#94a3b8"
          keyboardType="numeric"
          maxLength={11}
          value={form.tc}
          onChangeText={(v) => set('tc', v)}
        />
        
        <Text style={s.label}>Doğum Tarihi</Text>
        <TextInput
          style={s.input}
          placeholder="GG/AA/YYYY"
          placeholderTextColor="#94a3b8"
          value={form.dogumTarihi}
          onChangeText={(v) => set('dogumTarihi', v)}
        />
        
        <Text style={s.section}>SONUÇ NOTLARI</Text>
        
        <Text style={s.label}>Bulgular</Text>
        <TextInput
          style={[s.input, s.textarea]}
          placeholder="Muayene bulguları..."
          placeholderTextColor="#94a3b8"
          multiline
          numberOfLines={4}
          value={form.bulgular}
          onChangeText={(v) => set('bulgular', v)}
        />
        
        <Text style={s.label}>Tedavi / Reçete</Text>
        <TextInput
          style={[s.input, s.textarea]}
          placeholder="Önerilen Tedavi"
          placeholderTextColor="#94a3b8"
          multiline
          numberOfLines={3}
          value={form.tedavi}
          onChangeText={(v) => set('tedavi', v)}
        />
        
        <View style={s.row}>
          <TouchableOpacity
            style={[s.btn, s.btnSecondary]}
            onPress={() =>
              setForm({
                adSoyad: '',
                tc: '',
                dogumTarihi: '',
                bulgular: '',
                tedavi: '',
              })
            }>
            <Text style={s.btnSecondaryText}>Temizle</Text>
          </TouchableOpacity>
          
          <TouchableOpacity style={s.btn} onPress={() => console.log(form)}>
            <Text style={s.btnText}>Kaydet</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </View>
  );
}

const s = StyleSheet.create({
  safe: {
    flex: 1,
    backgroundColor: '#f8fafc',
  },
  scroll: {
    padding: 24,
    paddingBottom: 40,
  },
  title: {
    fontSize: 26,
    fontWeight: '700',
    color: '#0f172a', 
    marginBottom: 4,
  },
  subtitle: {
    fontSize: 15,
    color: '#64748b',
    marginBottom: 28,
  },
  section: {
    fontSize: 13,
    fontWeight: '700',
    color: '#0284c7', 
    marginTop: 12,
    marginBottom: 16,
    letterSpacing: 1,
  },
  label: {
    fontSize: 14,
    fontWeight: '600',
    color: '#334155',
    marginBottom: 6,
  },
  input: {
    backgroundColor: '#ffffff',
    borderWidth: 1,
    borderColor: '#e2e8f0',
    borderRadius: 10,
    paddingHorizontal: 16,
    paddingVertical: 12,
    fontSize: 15,
    color: '#0f172a',
    marginBottom: 18,
  },
  textarea: {
    height: 100,
    textAlignVertical: 'top', 
    paddingTop: 12,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 16,
    gap: 12, 
  },
  btn: {
    flex: 1,
    backgroundColor: '#0284c7',
    paddingVertical: 14,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
  btnText: {
    color: '#ffffff',
    fontSize: 16,
    fontWeight: '600',
  },
  btnSecondary: {
    backgroundColor: '#ffffff',
    borderWidth: 1,
    borderColor: '#cbd5e1',
  },
  btnSecondaryText: {
    color: '#64748b',
    fontSize: 16,
    fontWeight: '600',
  },
});