import React, { useEffect, useState } from 'react'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { fetchProducts, renameProduct, type Category, type Product } from './products'

type ProductSearch = { category: Category; page: number }
const rawSearch: unknown = { category: 'books', page: 1 }
const search = rawSearch as ProductSearch // TODO: runtime validation is missing

export default function App(){
 const queryClient=useQueryClient()
 const [selectedProductId,setSelectedProductId]=useState<number|null>(null)
 const query=useQuery({ queryKey:['products'], queryFn:()=>fetchProducts(search.category,search.page) }) // TODO: incomplete identity
 const [rows,setRows]=useState<Product[]>(query.data ?? []) // TODO: independent copy of server data
 useEffect(()=>{ if(query.data) setRows(query.data) },[query.data])
 const mutation=useMutation({ mutationFn:({id,name}:{id:number;name:string})=>renameProduct(id,name), onSuccess:async()=>{ await queryClient.invalidateQueries({queryKey:['product']}) } }) // TODO: wrong family
 return <main>
  <h1>Products</h1>
  <p data-testid="route-state">{search.category}:{search.page}</p>
  <ul>{rows.map(p=><li key={p.id}><button onClick={()=>setSelectedProductId(p.id)}>{p.name}</button></li>)}</ul>
  {selectedProductId!==null && <section role="dialog"><button onClick={()=>setSelectedProductId(null)}>Close</button><button onClick={()=>mutation.mutate({id:selectedProductId,name:'Renamed'})}>Rename remote product</button></section>}
 </main>
}