From 857f5a239636a7be4f4bc1d74e35f05564179afd Mon Sep 17 00:00:00 2001
From: BizzleBot <bizzlebot@bizzle.lol>
Date: Thu, 19 Feb 2026 18:11:37 +0000
Subject: [PATCH] Add sightings page + report form, fix stream API mapping, add
 nav link

---
 app/components/Navbar.tsx    |   1 +
 app/sightings/ReportForm.tsx | 156 +++++++++++++++++++++++++++++++++++
 app/sightings/page.tsx       |  98 ++++++++++++++++++++++
 lib/api.ts                   |  13 +++
 4 files changed, 268 insertions(+)
 create mode 100644 app/sightings/ReportForm.tsx
 create mode 100644 app/sightings/page.tsx

diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index 10723c6..705b47c 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -7,6 +7,7 @@ import { Menu, X, Eye, Tv2, TreePine, Heart, Calendar, Info } from 'lucide-react
 const links = [
   { href: '/streams', label: 'Live Cams', icon: Tv2 },
   { href: '/wildlife', label: 'Wildlife', icon: TreePine },
+  { href: '/sightings', label: 'Sightings', icon: Eye },
   { href: '/events', label: 'Events', icon: Calendar },
   { href: '/donate', label: 'Donate', icon: Heart },
   { href: '/about', label: 'About', icon: Info },
diff --git a/app/sightings/ReportForm.tsx b/app/sightings/ReportForm.tsx
new file mode 100644
index 0000000..8ebe006
--- /dev/null
+++ b/app/sightings/ReportForm.tsx
@@ -0,0 +1,156 @@
+'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 (
+      <div className="bg-emerald-500/10 border border-emerald-500/20 rounded-2xl p-8 text-center space-y-3">
+        <div className="text-4xl">✅</div>
+        <h3 className="text-xl font-bold text-emerald-400">Sighting Reported!</h3>
+        <p className="text-stone-400 text-sm">Thank you! An admin will verify your report.</p>
+        <button
+          onClick={() => { setSubmitted(false); setSpecies(''); setDescription(''); }}
+          className="text-sm text-teal font-bold hover:underline"
+        >
+          Report another sighting
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="bg-surfaceGreen border border-white/5 rounded-2xl p-6 space-y-5">
+      <h2 className="text-xl font-bold text-white">Report a Sighting</h2>
+
+      {error && (
+        <div className="text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-lg px-4 py-2">
+          {error}
+        </div>
+      )}
+
+      {/* Species */}
+      <div className="space-y-2">
+        <label className="text-sm font-semibold text-stone-300">Species *</label>
+        <select
+          value={species}
+          onChange={(e) => setSpecies(e.target.value)}
+          className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 text-sm text-white focus:outline-none focus:border-teal/50"
+        >
+          <option value="">Select species...</option>
+          {SPECIES_OPTIONS.map((s) => <option key={s} value={s}>{s}</option>)}
+        </select>
+      </div>
+
+      {/* Location */}
+      <div className="space-y-2">
+        <label className="text-sm font-semibold text-stone-300">Location *</label>
+        <div className="flex gap-3">
+          <input
+            type="number"
+            step="any"
+            value={lat}
+            onChange={(e) => setLat(e.target.value)}
+            placeholder="Latitude"
+            className="flex-1 bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 text-sm text-white placeholder:text-stone-600 focus:outline-none focus:border-teal/50"
+          />
+          <input
+            type="number"
+            step="any"
+            value={lng}
+            onChange={(e) => setLng(e.target.value)}
+            placeholder="Longitude"
+            className="flex-1 bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 text-sm text-white placeholder:text-stone-600 focus:outline-none focus:border-teal/50"
+          />
+          <button
+            type="button"
+            onClick={getLocation}
+            disabled={locating}
+            className="px-4 py-2.5 rounded-lg bg-teal/10 border border-teal/20 text-teal text-sm font-bold hover:bg-teal/20 transition-all flex items-center gap-1.5"
+          >
+            {locating ? <Loader2 size={14} className="animate-spin" /> : <MapPin size={14} />}
+            {locating ? 'Finding...' : 'Use GPS'}
+          </button>
+        </div>
+      </div>
+
+      {/* Description */}
+      <div className="space-y-2">
+        <label className="text-sm font-semibold text-stone-300">Notes</label>
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="What did you observe? Behavior, number of animals, habitat..."
+          rows={3}
+          className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 text-sm text-white placeholder:text-stone-600 focus:outline-none focus:border-teal/50 resize-none"
+        />
+      </div>
+
+      <button
+        type="submit"
+        className="w-full py-3 rounded-xl bg-teal hover:bg-tealLight text-white font-bold text-sm flex items-center justify-center gap-2 transition-all active:scale-[0.98]"
+      >
+        <Send size={16} /> Submit Sighting
+      </button>
+    </form>
+  );
+}
diff --git a/app/sightings/page.tsx b/app/sightings/page.tsx
new file mode 100644
index 0000000..a588fdc
--- /dev/null
+++ b/app/sightings/page.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { Eye, MapPin, CheckCircle, Clock } from 'lucide-react';
+import { api, Sighting } from '@/lib/api';
+import { format } from 'date-fns';
+import type { Metadata } from 'next';
+import ReportForm from './ReportForm';
+
+export const metadata: Metadata = {
+  title: 'Wildlife Sightings',
+  description: 'Browse recent wildlife sightings and report your own in Cape Coral.',
+};
+
+const SPECIES_EMOJI: Record<string, string> = {
+  'Burrowing Owl': '🦉',
+  'Gopher Tortoise': '🐢',
+  'Roseate Spoonbill': '🦩',
+  'Scrub-Jay': '🐦',
+  'Manatee': '🐋',
+};
+
+async function getSightings(): Promise<Sighting[]> {
+  try { return await api.getSightings(); }
+  catch { return []; }
+}
+
+export default async function SightingsPage() {
+  const sightings = await getSightings();
+
+  return (
+    <div className="max-w-5xl mx-auto px-6 py-16 space-y-14">
+      <header className="space-y-4">
+        <div className="flex items-center gap-2 text-teal text-sm font-bold uppercase tracking-widest">
+          <Eye size={16} /> Community Science
+        </div>
+        <h1 className="text-4xl font-black text-white">Wildlife Sightings</h1>
+        <p className="text-stone-400 text-lg max-w-2xl leading-relaxed">
+          Help us track Cape Coral's wildlife. Report what you see — every sighting helps conservation efforts.
+        </p>
+      </header>
+
+      {/* Report Form */}
+      <ReportForm />
+
+      {/* Recent Sightings */}
+      <section className="space-y-6">
+        <h2 className="text-2xl font-bold text-white">Recent Sightings</h2>
+        {sightings.length === 0 ? (
+          <div className="flex flex-col items-center py-16 gap-4 text-stone-500">
+            <Eye size={48} className="text-stone-600" />
+            <p className="text-lg font-semibold">No sightings yet</p>
+            <p className="text-sm">Be the first to report a wildlife sighting!</p>
+          </div>
+        ) : (
+          <div className="grid gap-4">
+            {sightings.map((s) => (
+              <div key={s.id} className="bg-surfaceGreen border border-white/5 rounded-2xl p-5 hover:border-teal/20 transition-all flex gap-5">
+                {/* Species icon */}
+                <div className="shrink-0 w-14 h-14 rounded-xl bg-teal/10 border border-teal/20 flex items-center justify-center text-2xl">
+                  {SPECIES_EMOJI[s.species] || '🦎'}
+                </div>
+
+                <div className="flex-1 space-y-2">
+                  <div className="flex items-start justify-between gap-4">
+                    <div>
+                      <h3 className="font-bold text-white text-lg">{s.species}</h3>
+                      <p className="text-sm text-stone-400 flex items-center gap-1.5">
+                        <MapPin size={12} />
+                        {s.gps_lat.toFixed(4)}°N, {Math.abs(s.gps_lng).toFixed(4)}°W
+                      </p>
+                    </div>
+                    {s.verified ? (
+                      <span className="flex items-center gap-1 text-xs font-bold text-emerald-400 bg-emerald-500/10 px-2.5 py-1 rounded-full">
+                        <CheckCircle size={12} /> Verified
+                      </span>
+                    ) : (
+                      <span className="flex items-center gap-1 text-xs font-bold text-amber-400 bg-amber-500/10 px-2.5 py-1 rounded-full">
+                        <Clock size={12} /> Pending
+                      </span>
+                    )}
+                  </div>
+
+                  {s.description && (
+                    <p className="text-sm text-stone-400 leading-relaxed">{s.description}</p>
+                  )}
+
+                  <div className="flex items-center gap-4 text-xs text-stone-500">
+                    {s.reporter && <span>Reported by {s.reporter.name}</span>}
+                    <span>{format(new Date(s.created_at), 'MMM d, yyyy')}</span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
diff --git a/lib/api.ts b/lib/api.ts
index 07d80da..7af0369 100644
--- a/lib/api.ts
+++ b/lib/api.ts
@@ -60,6 +60,18 @@ export interface Event {
   capacity?: number;
 }
 
+export interface Sighting {
+  id: string;
+  species: string;
+  gps_lat: number;
+  gps_lng: number;
+  photo_url?: string;
+  description: string;
+  verified: boolean;
+  created_at: string;
+  reporter?: { id: string; name: string };
+}
+
 export interface Burrow {
   id: string;
   lat: number;
@@ -81,4 +93,5 @@ export const api = {
       body: JSON.stringify({ email }),
     }),
   getBurrows: () => apiFetch<Burrow[]>('/api/burrows'),
+  getSightings: () => apiFetch<Sighting[]>('/api/sightings'),
 };