owl-stream/app/sightings/ReportForm.tsx

'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>
  );
}