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