import { SectionList, StyleSheet, Text } from "react-native";
import TaskRow from "../components/TaskRow";
import { todayTasks } from "../lib/store";
import { C } from "../lib/theme";
import { useStore } from "../lib/useStore";

export default function Today() {
  const store = useStore();
  const { overdue, today } = todayTasks(store);
  const sections = [
    ...(overdue.length ? [{ title: "Overdue", data: overdue, color: C.danger }] : []),
    { title: "Today", data: today, color: C.text },
  ];

  return (
    <SectionList
      style={{ flex: 1, backgroundColor: C.bg }}
      sections={sections}
      keyExtractor={(t) => t.id}
      renderItem={({ item }) => <TaskRow task={item} showStatus />}
      renderSectionHeader={({ section }) => (
        <Text style={[s.header, { color: section.color }]}>{section.title}</Text>
      )}
      ListEmptyComponent={<Text style={s.empty}>Nothing due. Clear runway.</Text>}
      contentContainerStyle={{ paddingBottom: 32 }}
      stickySectionHeadersEnabled={false}
    />
  );
}

const s = StyleSheet.create({
  header: { fontSize: 15, fontWeight: "700", paddingHorizontal: 16, paddingTop: 18, paddingBottom: 6 },
  empty: { color: C.muted, textAlign: "center", marginTop: 48, fontSize: 15 },
});
