'use client';
import React, { useState } from 'react';
import { Send, MapPin, Loader2 } from 'lucide-react';
const SPECIES_OPTIONS = [
'Burrowing Owl',
'Gopher Tortoise',
'Roseate Spoonbill',
'Florida Scrub-Jay',
'Manatee',
'Red-shouldered Hawk',
'Osprey',
'Great Blue Heron',
'Other',
];
export default function ReportForm() {
const [species, setSpecies] = useState('');
const [description, setDescription] = useState('');
const [lat, setLat] = useState('');
const [lng, setLng] = useState('');
const [locating, setLocating] = useState(false);
const [submitted, setSubmitted] = useState(false);
const [error, setError] = useState('');
const getLocation = () => {
if (!navigator.geolocation) { setError('Geolocation not supported'); return; }
setLocating(true);
navigator.geolocation.getCurrentPosition(
(pos) => {
setLat(pos.coords.latitude.toFixed(6));
setLng(pos.coords.longitude.toFixed(6));
setLocating(false);
},
() => { setError('Could not get location'); setLocating(false); }
);
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!species || !lat || !lng) { setError('Species and location are required'); return; }
setError('');
try {
const res = await fetch(
`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'}/api/sightings`,
{
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
species,
description,
gps_lat: parseFloat(lat),
gps_lng: parseFloat(lng),
}),
}
);
if (!res.ok) throw new Error('Failed to submit');
setSubmitted(true);
} catch {
setError('Submission failed — you may need to log in first');
}
};
if (submitted) {
return (
✅
Sighting Reported!
Thank you! An admin will verify your report.
);
}
return (