import { useCallback, useState } from "react";
import { Button, SafeAreaView, StyleSheet, Text, View, findNodeHandle } from "react-native";
import { File, Paths } from "expo-file-system";
import { Camera, Map, WeatherRuntime, createParticleWeatherStyle } from "@navsea/maplibre-particle-rn";

const metadata = (generation: number, validTime: number) => JSON.stringify({ schema: "maplibre-particle-field/v1", fieldId: `consumer-smoke-${generation}`, fieldType: "WIND", displayDomain: "GLOBAL", generation, validTime, dataVersion: generation, bounds: { west: -180, south: -85, east: 180, north: 85 }, grid: { width: 2, height: 2 }, vector: { layout: "interleaved-uv", encoding: "float32-le", noData: -9999 }, payload: { byteLength: 32 } });

function writeFixture() {
  const bytes = new Uint8Array(32); const view = new DataView(bytes.buffer);
  for (let offset = 0; offset < bytes.byteLength; offset += 8) { view.setFloat32(offset, 5, true); view.setFloat32(offset + 4, 1, true); }
  const file = new File(Paths.cache, "navsea-particle-consumer-smoke.f32"); file.write(bytes); return file.uri;
}

export default function App() {
  const [tag, setTag] = useState<number | null>(null); const [state, setState] = useState("STYLE_LOADING");
  const onStyle = useCallback(async (event: unknown) => {
    const value = findNodeHandle((event as { target?: unknown }).target as never); if (value == null) return;
    try { await WeatherRuntime.attach(value); setTag(value); setState("WAITING_FOR_FIELDS"); } catch (error) { setState(String(error)); }
  }, []);
  const submit = useCallback(async () => {
    if (tag == null) return;
    try { await WeatherRuntime.clearWindFields(tag); const payload = writeFixture(); const t0 = await WeatherRuntime.submitWindField(tag, metadata(1, 1786060800000), payload); const t1 = await WeatherRuntime.submitWindField(tag, metadata(2, 1786082400000), payload); const runtime = await WeatherRuntime.getState(tag); setState(`T0 ${t0} / T1 ${t1} / ${runtime.state}`); } catch (error) { setState(String(error)); }
  }, [tag]);
  return <SafeAreaView style={styles.root}><View style={styles.map}><Map mapStyle={createParticleWeatherStyle()} onDidFinishLoadingStyle={onStyle}><Camera initialViewState={{ center: [135, 32], zoom: 3.9 }} /></Map></View><View style={styles.controls}><Text>Package smoke: {state}</Text><Button title="Submit canonical fixture" onPress={() => void submit()} /></View></SafeAreaView>;
}
const styles = StyleSheet.create({ root: { flex: 1 }, map: { flex: 1 }, controls: { padding: 12, backgroundColor: "white" } });