// Home screen — the reactive end-to-end loop, on a phone.
//
// The SAME hooks as the web frontend: `useSubscription('notes.list')` streams
// the server-side query; `useMutation('notes.create')` writes it. When the
// mutation lands, the server pushes a delta and this list re-renders — no
// refetch, no polling.
//
// Both come from `../lib/api`, which binds them ONCE to the api's generated
// procedure map — so the tag autocompletes, a typo is a compile error, and the
// row type is inferred rather than declared here.
import { useState } from 'react'
import { Link } from 'expo-router'
import { FlatList, Pressable, Text, TextInput, View } from 'react-native'

import { useMutation, useSubscription } from '../lib/api'

// The dev AuthMiddleware resolves the tenant from the `x-tenant` header,
// defaulting to 'acme'. `notes.create` guards that the submitted tenantId
// matches the caller's (a typed TenantMismatch otherwise).
const TENANT = 'acme'

export default function Home() {
  // No row `interface` and no `<T>`: the shape comes from `notes.list`'s own
  // output schema, including the client's `optimistic` marker.
  const notes = useSubscription('notes.list')
  const createNote = useMutation('notes.create')
  const [title, setTitle] = useState('')

  return (
    <View style={{ flex: 1, padding: 16, gap: 12 }}>
      <View style={{ flexDirection: 'row', gap: 8 }}>
        <TextInput
          value={title}
          onChangeText={setTitle}
          placeholder="New note…"
          style={{ flex: 1, borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 10 }}
        />
        <Pressable
          onPress={() => {
            if (title.trim().length === 0) return
            // Auto-optimistic: the list updates instantly, reconciles on ack.
            // `tenantId` and `body` are REQUIRED by `notes.create`'s input
            // schema — the old hand-written `useMutation<{ title: string }>`
            // annotation hid that, so this call decoded-failed at runtime.
            createNote.mutate({ tenantId: TENANT, title: title.trim(), body: '' })
            setTitle('')
          }}
          style={{ backgroundColor: '#2563eb', borderRadius: 8, paddingHorizontal: 16, justifyContent: 'center' }}
        >
          <Text style={{ color: 'white', fontWeight: '600' }}>Add</Text>
        </Pressable>
      </View>

      <FlatList
        data={notes.data ?? []}
        keyExtractor={(n) => n.id}
        ListEmptyComponent={<Text style={{ color: '#666' }}>No notes yet — add one above.</Text>}
        renderItem={({ item }) => (
          <Link href={`/orders/${item.id}` as never} asChild>
            <Pressable style={{ paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: '#eee' }}>
              <Text style={{ fontSize: 16 }}>{item.title}</Text>
            </Pressable>
          </Link>
        )}
      />

      <Link href="/settings" style={{ color: '#2563eb', textAlign: 'center', paddingTop: 8 }}>
        Settings & sync status
      </Link>
    </View>
  )
}