import { useRouter } from "expo-router";
import { Pressable, StyleSheet, Text, View } from "react-native";
import TaskRow from "../components/TaskRow";
import { haptic } from "../lib/haptics";
import { tasksByStatus, todayTasks } from "../lib/store";
import { C } from "../lib/theme";
import { useStore } from "../lib/useStore";

const MENU = [
  { icon: "📅", label: "Today", href: "/today" },
  { icon: "▶️", label: "Next", href: "/list/next" },
  { icon: "⏳", label: "Waiting", href: "/list/waiting" },
  { icon: "💭", label: "Someday", href: "/list/someday" },
  { icon: "📁", label: "Projects", href: "/projects" },
] as const;

export default function Home() {
  const router = useRouter();
  const store = useStore();
  const next = tasksByStatus(store, "next");
  const { overdue } = todayTasks(store);

  return (
    <View style={s.screen}>
      <View style={{ flex: 1 }}>
        <Text style={s.sectionTitle}>Next up</Text>
        {next.slice(0, 3).map((t) => (
          <TaskRow key={t.id} task={t} />
        ))}
        {next.length === 0 && <Text style={s.empty}>Nothing next. Tap ＋ to add.</Text>}
        {next.length > 3 && (
          <Pressable onPress={() => router.push("/list/next")}>
            <Text style={s.viewAll}>all next actions ({next.length}) →</Text>
          </Pressable>
        )}
        {overdue.length > 0 && (
          <Pressable onPress={() => router.push("/today")}>
            <Text style={s.overdue}>{overdue.length} overdue →</Text>
          </Pressable>
        )}
        {store.offline && (
          <Text style={s.offline}>
            offline{store.pending > 0 ? ` — ${store.pending} change${store.pending === 1 ? "" : "s"} queued` : ""}
          </Text>
        )}
        {store.syncError && <Text style={s.error}>{store.syncError}</Text>}
      </View>
      <View style={s.menu}>
        {MENU.map((m) => (
          <Pressable key={m.label} style={s.menuItem} onPress={() => router.push(m.href)}>
            <Text style={s.menuIcon}>{m.icon}</Text>
            <Text style={s.menuLabel}>{m.label}</Text>
          </Pressable>
        ))}
      </View>
      <Pressable
        style={s.fab}
        onPress={() => {
          haptic.tap();
          router.push("/add");
        }}
      >
        <Text style={s.fabText}>＋</Text>
      </Pressable>
    </View>
  );
}

const s = StyleSheet.create({
  screen: { flex: 1, backgroundColor: C.bg },
  sectionTitle: {
    color: C.muted,
    fontSize: 13,
    textTransform: "uppercase",
    letterSpacing: 1,
    paddingHorizontal: 16,
    paddingTop: 18,
    paddingBottom: 6,
  },
  empty: { color: C.muted, textAlign: "center", marginTop: 48, fontSize: 15 },
  viewAll: { color: C.muted, fontSize: 14, padding: 16 },
  overdue: { color: C.danger, fontSize: 14, paddingHorizontal: 16, paddingBottom: 8 },
  error: { color: C.danger, paddingHorizontal: 16, paddingTop: 8 },
  offline: { color: C.muted, fontSize: 13, paddingHorizontal: 16, paddingTop: 8 },
  menu: {
    flexDirection: "row",
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: C.border,
    paddingTop: 10,
    paddingBottom: 18,
    backgroundColor: C.bg,
  },
  menuItem: { flex: 1, alignItems: "center", gap: 3 },
  menuIcon: { fontSize: 20 },
  menuLabel: { color: C.muted, fontSize: 11 },
  fab: {
    position: "absolute",
    right: 20,
    bottom: 92,
    width: 58,
    height: 58,
    borderRadius: 29,
    backgroundColor: C.accent,
    alignItems: "center",
    justifyContent: "center",
    elevation: 6,
    shadowColor: "#000",
    shadowOpacity: 0.35,
    shadowRadius: 8,
    shadowOffset: { width: 0, height: 4 },
  },
  fabText: { color: "#FFFFFF", fontSize: 28, lineHeight: 32, fontWeight: "600" },
});
