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

const ROUTINES = {
  AM: [
    { step: 'Cleanser', note: 'Gentle gel', icon: '🧴' },
    { step: 'Vitamin C', note: '10% serum', icon: '🍊' },
    { step: 'Moisturizer', note: 'Lightweight', icon: '💧' },
    { step: 'SPF 50', note: 'Always', icon: '☀️' },
  ],
  PM: [
    { step: 'Cleanser', note: 'Oil + gel', icon: '🧼' },
    { step: 'Retinol', note: '0.3%', icon: '🌙' },
    { step: 'Night cream', note: 'Rich', icon: '🌿' },
  ],
};

export default function App() {
  const [tab, setTab] = useState('AM');
  const [done, setDone] = useState<Record<string, boolean>>({});
  const list = ROUTINES[tab];
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>YOUR ROUTINE</Text>
        <View style={s.tabs}>
          {['AM', 'PM'].map((t) => (
            <Pressable key={t} onPress={() => setTab(t)} style={[s.tab, tab === t && s.tabOn]}>
              <Text style={[s.tabText, tab === t && s.tabTextOn]}>{t === 'AM' ? '☀️ Morning' : '🌙 Evening'}</Text>
            </Pressable>
          ))}
        </View>
        {list.map((r, i) => {
          const key = tab + i;
          const on = done[key];
          return (
            <Pressable key={key} onPress={() => setDone((d) => ({ ...d, [key]: !d[key] }))} style={s.row}>
              <View style={s.num}><Text style={s.numT}>{i + 1}</Text></View>
              <Text style={s.rowIcon}>{r.icon}</Text>
              <View style={{ flex: 1 }}>
                <Text style={[s.step, on && s.stepDone]}>{r.step}</Text>
                <Text style={s.note}>{r.note}</Text>
              </View>
              <View style={[s.check, on && s.checkOn]}>{on ? <Text style={s.checkM}>✓</Text> : null}</View>
            </Pressable>
          );
        })}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#140E11' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#F5A3B8', fontSize: 12, fontWeight: '700', letterSpacing: 2, marginBottom: 16 },
  tabs: { flexDirection: 'row', backgroundColor: '#1E141A', borderRadius: 16, padding: 5, marginBottom: 22 },
  tab: { flex: 1, paddingVertical: 12, borderRadius: 12, alignItems: 'center' },
  tabOn: { backgroundColor: '#F5A3B8' },
  tabText: { color: '#B98DA0', fontSize: 15, fontWeight: '700' },
  tabTextOn: { color: '#2A1620' },
  row: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#1A1117', borderRadius: 16, padding: 16, marginBottom: 12 },
  num: { width: 26, height: 26, borderRadius: 13, backgroundColor: '#2A1B24', alignItems: 'center', justifyContent: 'center', marginRight: 12 },
  numT: { color: '#F5A3B8', fontSize: 13, fontWeight: '800' },
  rowIcon: { fontSize: 24, marginRight: 14 },
  step: { color: '#F3E2E8', fontSize: 17, fontWeight: '600' },
  stepDone: { color: '#7A6670', textDecorationLine: 'line-through' },
  note: { color: '#A6889A', fontSize: 13, marginTop: 2 },
  check: { width: 28, height: 28, borderRadius: 14, borderWidth: 2, borderColor: '#3A2A34', alignItems: 'center', justifyContent: 'center' },
  checkOn: { backgroundColor: '#F5A3B8', borderColor: '#F5A3B8' },
  checkM: { color: '#2A1620', fontWeight: '900' },
});