import React, { useState } from "react"; import { callAI } from "call-ai"; import { ImgVibes } from "img-vibes"; import { useFireproof } from "use-fireproof"; export default function App() { const { database, useLiveQuery, useDocument } = useFireproof("intertidal-field-notes"); const { doc, merge, submit } = useDocument({ type: "observation", commonName: "", scientificName: "", zone: "mid", notes: "", description: "", aiSuggestion: null, createdAt: Date.now(), }); const { docs: observations } = useLiveQuery("type", { key: "observation", descending: true }); const [isLoading, setIsLoading] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false); const [dragOver, setDragOver] = useState(false); const [photoFile, setPhotoFile] = useState(null); const [photoPreview, setPhotoPreview] = useState(null); const [selectedObs, setSelectedObs] = useState(null); const [showForm, setShowForm] = useState(false); const zones = [ { value: "splash", label: "Splash Zone" }, { value: "high", label: "High Tide" }, { value: "mid", label: "Mid Tide" }, { value: "low", label: "Low Tide" }, { value: "subtidal", label: "Subtidal" }, ]; const zoneColors = { splash: "bg-[#3b82f6] text-white", high: "bg-[#06b6d4] text-white", mid: "bg-[#10b981] text-[#0f172a]", low: "bg-[#f59e0b] text-[#0f172a]", subtidal: "bg-[#8b5cf6] text-white", }; async function handleAIIdentify() { if (!doc.description.trim()) return; setIsLoading(true); try { const res = await callAI( `You are a marine biologist. A field observer describes an intertidal organism: "${doc.description}". Identify the most likely species and provide structured info.`, { schema: { properties: { commonName: { type: "string", description: "Common name of the species" }, scientificName: { type: "string", description: "Scientific name (genus species)" }, zone: { type: "string", description: "Typical intertidal zone: splash, high, mid, low, or subtidal" }, ecologyNote: { type: "string", description: "One sentence about ecology or behavior" }, confidence: { type: "string", description: "low, medium, or high" }, }, }, } ); const suggestion = JSON.parse(res); merge({ aiSuggestion: suggestion, commonName: suggestion.commonName || doc.commonName, scientificName: suggestion.scientificName || doc.scientificName, zone: zones.find((z) => z.value === suggestion.zone) ? suggestion.zone : doc.zone, }); } finally { setIsLoading(false); } } function handleDrop(e) { e.preventDefault(); setDragOver(false); const file = e.dataTransfer.files[0]; if (file && file.type.startsWith("image/")) { setPhotoFile(file); setPhotoPreview(URL.createObjectURL(file)); } } function handleFileInput(e) { const file = e.target.files[0]; if (file) { setPhotoFile(file); setPhotoPreview(URL.createObjectURL(file)); } } async function handleSubmit(e) { e.preventDefault(); if (!doc.commonName.trim()) return; setIsSubmitting(true); try { const docToSave = { ...doc, createdAt: Date.now() }; if (photoFile) { docToSave._files = { photo: photoFile }; } await database.put(docToSave); merge({ commonName: "", scientificName: "", notes: "", description: "", aiSuggestion: null, zone: "mid", createdAt: Date.now() }); setPhotoFile(null); setPhotoPreview(null); setShowForm(false); } finally { setIsSubmitting(false); } } function handleReset() { setPhotoFile(null); setPhotoPreview(null); setShowForm(false); } const Spinner = ({ light }) => ( ); const c = { bg: "bg-[#f5f3ee]", card: "bg-white border-[3px] border-[#0f172a]", shadow: "shadow-[4px_4px_0px_#0f172a]", shadowSm: "shadow-[3px_3px_0px_#0f172a]", ink: "text-[#0f172a]", muted: "text-[#6b7280]", accent: "bg-[#c0392b]", accentText: "text-white", yellow: "bg-[#f4c430]", green: "bg-[#22c55e]", blue: "bg-[#3b82f6]", input: "border-[3px] border-[#0f172a] bg-white px-3 py-2 text-[0.85rem] w-full focus:outline-none rounded-[4px]", btn: "border-[3px] border-[#0f172a] font-bold uppercase tracking-wide text-[0.75rem] px-4 py-2 rounded-[4px] cursor-pointer transition-all duration-150", btnPrimary: "bg-[#c0392b] text-white shadow-[4px_4px_0px_#0f172a] hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#0f172a] active:translate-x-0.5 active:translate-y-0.5 active:shadow-none", btnSecondary: "bg-[#f4c430] text-[#0f172a] shadow-[3px_3px_0px_#0f172a] hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[5px_5px_0px_#0f172a] active:translate-x-0.5 active:translate-y-0.5 active:shadow-none", btnGhost: "bg-white text-[#0f172a] hover:shadow-[3px_3px_0px_#0f172a] active:shadow-none", label: "text-[0.6rem] uppercase tracking-[0.15em] text-[#6b7280] font-semibold block mb-1", }; return ( <>

{/* NAV */} {/* HERO */} {!showForm && !selectedObs && (

Tide Pool
Species Log

Document what you find. Snap a photo, describe the organism, and let AI help with identification.

{observations.length}

Observations

{[...new Set(observations.map(o => o.zone))].length}

Zones Logged

{[...new Set(observations.map(o => o.commonName).filter(Boolean))].length}

Species

)} {/* LOG FORM */} {showForm && (

New Observation

{/* Photo drop */}

Photo

{ e.preventDefault(); setDragOver(true); }} onDragLeave={() => setDragOver(false)} onDrop={handleDrop} onClick={() => document.getElementById("photo-input").click()} > {photoPreview ? ( preview

) : ( <> Drop photo or tap to upload )}

{/* Description + AI */}

Describe What You See

merge({ description: e.target.value })}
                />
                <button
                  type="button"
                  className={`${c.btn} ${c.btnSecondary} mt-2 flex items-center gap-2`}
                  onClick={handleAIIdentify}
                  disabled={isLoading || !doc.description.trim()}
                >
                  {isLoading ? <><Spinner /><span>Identifying...</span></> : <>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                      <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
                    </svg>
                    AI Identify
                  </>}
                </button>
              </div>

{/* AI suggestion banner */}
              {doc.aiSuggestion && (
                <div className="border-[3px] border-[#22c55e] bg-[#22c55e]/10 rounded-[4px] p-3">
                  <div className={`${c.label} text-[#22c55e]`}>AI Suggestion — Confidence: {doc.aiSuggestion.confidence}</div>
                  <div className="font-bold text-[0.9rem]">{doc.aiSuggestion.commonName}</div>
                  <div className="mono text-[0.78rem] text-[#6b7280] italic">{doc.aiSuggestion.scientificName}</div>
                  <div className="text-[0.78rem] mt-1">{doc.aiSuggestion.ecologyNote}</div>
                </div>
              )}

{/* Fields */}
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className={c.label}>Common Name</label>
                  <input className={c.input} value={doc.commonName} onChange={(e) => merge({ commonName: e.target.value })} placeholder="e.g. Purple Sea Urchin" />
                </div>
                <div>
                  <label className={c.label}>Scientific Name</label>
                  <input className={`${c.input} mono`} value={doc.scientificName} onChange={(e) => merge({ scientificName: e.target.value })} placeholder="e.g. Strongylocentrotus" />
                </div>
              </div>

<div>
                <label className={c.label}>Intertidal Zone</label>
                <select className={c.input} value={doc.zone} onChange={(e) => merge({ zone: e.target.value })}>
                  {zones.map((z) => <option key={z.value} value={z.value}>{z.label}</option>)}
                </select>
              </div>

<div>
                <label className={c.label}>Field Notes</label>
                <textarea className={`${c.input} resize-none`} rows={2} placeholder="Behavior, abundance, substrate..." value={doc.notes} onChange={(e) => merge({ notes: e.target.value })} />
              </div>

<div className="flex gap-3 flex-wrap">
                <button type="submit" className={`${c.btn} ${c.btnPrimary} flex items-center gap-2`} disabled={isSubmitting || !doc.commonName.trim()}>
                  {isSubmitting ? <><Spinner light /><span>Saving...</span></> : "Save Observation"}
                </button>
                <button type="button" className={`${c.btn} ${c.btnGhost}`} onClick={handleReset}>Cancel</button>
              </div>
            </form>
          </div>
        )}

{/* DETAIL VIEW */}
        {selectedObs && (
          <div className={`${c.card} ${c.shadow} mb-8 rounded-[4px] overflow-hidden`}>
            <div className="bg-[#0f172a] px-5 py-3 flex items-center justify-between">
              <h2 className="text-white font-bold uppercase tracking-tight text-[0.9rem]">{selectedObs.commonName}</h2>
              <button className="text-white text-[0.75rem] uppercase font-bold tracking-wide" onClick={() => setSelectedObs(null)}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
              </button>
            </div>
            <div className="p-5 space-y-4">
              {selectedObs._files?.photo && (
                <img src={URL.createObjectURL(selectedObs._files.photo)} alt={selectedObs.commonName} className="w-full max-h-64 object-cover border-[3px] border-[#0f172a] rounded-[4px]" />
              )}
              <div className="flex flex-wrap gap-2 items-center">
                <span className={`border-[2px] border-[#0f172a] rounded-[4px] px-2 py-0.5 text-[0.72rem] font-bold uppercase ${zoneColors[selectedObs.zone] || "bg-gray-100"}`}>{selectedObs.zone}</span>
                <span className="mono text-[0.78rem] text-[#6b7280] italic">{selectedObs.scientificName}</span>
              </div>
              {selectedObs.notes && <p className="text-[0.85rem]">{selectedObs.notes}</p>}
              {selectedObs.description && <p className={`${c.muted} text-[0.78rem] border-l-4 border-[#3b82f6] pl-3`}>{selectedObs.description}</p>}
              {selectedObs.aiSuggestion && (
                <div className="border-[2px] border-[#22c55e] bg-[#22c55e]/10 rounded-[4px] p-3 text-[0.78rem]">
                  <div className={`${c.label} text-[#22c55e]`}>AI Note</div>
                  {selectedObs.aiSuggestion.ecologyNote}
                </div>
              )}
              <div className={`${c.label} mt-2`}>{new Date(selectedObs.createdAt).toLocaleString()}</div>
            </div>
          </div>
        )}

{/* OBSERVATION LIST */}
        {!showForm && !selectedObs && (
          <div className={`${c.card} ${c.shadow} rounded-[4px] overflow-hidden`}>
            <div className="bg-[#0f172a] px-5 py-3">
              <h2 className="text-white font-bold uppercase tracking-tight text-[0.85rem]">Observation Log</h2>
            </div>
            {observations.length === 0 ? (
              <div className="p-10 text-center">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#6b7280" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="mx-auto mb-3">
                  <circle cx="11" cy="11" r="8" /><path d="M8 11a3 3 0 0 1 6 0" /><line x1="11" y1="14" x2="11" y2="14" strokeWidth="3" />
                </svg>
                <p className={`${c.muted} text-[0.85rem]`}>No observations yet. Tap <strong>+ Log Species</strong> to start.</p>
              </div>
            ) : (
              <table className="w-full">
                <thead>
                  <tr className="border-b-[2px] border-[#0f172a]">
                    <th className={`${c.label} px-4 py-2 text-left`}>Species</th>
                    <th className={`${c.label} px-4 py-2 text-left hidden sm:table-cell`}>Scientific</th>
                    <th className={`${c.label} px-4 py-2 text-left`}>Zone</th>
                    <th className={`${c.label} px-4 py-2 text-left hidden sm:table-cell`}>Date</th>
                  </tr>
                </thead>
                <tbody>
                  {observations.map((obs) => (
                    <tr
                      key={obs._id}
                      className="border-b border-[#e5e7eb] cursor-pointer hover:bg-[#f4c430] transition-colors duration-100"
                      onClick={() => setSelectedObs(obs)}
                    >
                      <td className="px-4 py-3 font-semibold text-[0.82rem]">{obs.commonName}</td>
                      <td className="px-4 py-3 mono text-[0.75rem] text-[#6b7280] italic hidden sm:table-cell">{obs.scientificName}</td>
                      <td className="px-4 py-3">
                        <span className={`border-[2px] border-[#0f172a] rounded-[4px] px-2 py-0.5 text-[0.65rem] font-bold uppercase ${zoneColors[obs.zone] || "bg-gray-100"}`}>
                          {obs.zone}
                        </span>
                      </td>
                      <td className="px-4 py-3 mono text-[0.72rem] text-[#6b7280] hidden sm:table-cell">{new Date(obs.createdAt).toLocaleDateString()}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        )}
      </div>
    </>
  );
}</article></body></html>

Tide PoolSpecies Log

Tide PoolSpecies Log

New Observation

Tide Pool
Species Log

Tide Pool
Species Log