import { useState } from "react";
import { useSQLQuery } from "@motherduck/react-sql-query";


export const REQUIRED_DATABASES = [
  { type: 'share', path: 'md:_share/animal_facts_share/d2c4fdde-badc-497b-8f61-a773fe5165e9', alias: 'animal_facts' }
];



const PALETTE = {
  mammals:    "#0777b3",
  birds:      "#bd4e35",
  fish:       "#2d7a00",
  reptiles:   "#e18727",
  amphibians: "#638CAD",
  insects:    "#8e44ad",
  other:      "#adadad",
};

const ALL = "All";

export default function AnimalFacts() {
  const [activeGroup, setActiveGroup] = useState(ALL);
  const [flipped, setFlipped] = useState({});
  const [page, setPage] = useState(0);
  const PAGE_SIZE = 10;

  const { data: factsData, isLoading: factsLoading } = useSQLQuery(`
    SELECT id, animal, emoji, fact, animal_group
    FROM animal_facts.main.animal_facts
    ORDER BY RANDOM()
  `);

  const { data: groupData, isLoading: groupLoading } = useSQLQuery(`
    SELECT animal_group, COUNT(*) AS count
    FROM animal_facts.main.animal_facts
    GROUP BY animal_group
    ORDER BY count DESC
  `);

  const FACTS = Array.isArray(factsData) ? factsData : [];
  const GROUP_COUNTS = Array.isArray(groupData) ? groupData : [];

  const groups = [ALL, ...GROUP_COUNTS.map(g => g.animal_group)];
  const filtered = activeGroup === ALL ? FACTS : FACTS.filter(f => f.animal_group === activeGroup);
  const totalPages = Math.ceil(filtered.length / PAGE_SIZE);
  const paginated = filtered.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
  const topGroup = GROUP_COUNTS[0]?.animal_group ?? "—";

  const toggle = (id) => setFlipped(prev => ({ ...prev, [id]: !prev[id] }));
  const goToPage = (p) => { setPage(p); setFlipped({}); };
  const handleGroupChange = (g) => { setActiveGroup(g); setPage(0); setFlipped({}); };

  return (
    <div style={{ background: "#f8f8f8", minHeight: "100vh", fontFamily: "sans-serif", color: "#231f20" }}>
      <div className="p-6">
        <h1 className="text-2xl font-bold mb-1">🐾 Animal Facts</h1>
        <p className="text-sm mb-6" style={{ color: "#6a6a6a" }}>Weird and wonderful facts from the animal kingdom</p>


        <div className="flex gap-2 mb-4 flex-wrap">
          {groups.map(g => (
            <button key={g} onClick={() => handleGroupChange(g)} style={{
              padding: "4px 14px", borderRadius: "999px", fontSize: "12px", fontWeight: 600,
              cursor: "pointer", border: "1.5px solid",
              borderColor: activeGroup === g ? (PALETTE[g] || "#231f20") : "#ccc",
              background: activeGroup === g ? (PALETTE[g] || "#231f20") : "white",
              color: activeGroup === g ? "white" : "#6a6a6a",
              transition: "all 0.15s",
            }}>
              {g}
            </button>
          ))}
        </div>

        {factsLoading ? (
          <div className="grid grid-cols-3 gap-4">
            {[...Array(6)].map((_, i) => <div key={i} className="bg-gray-200 animate-pulse rounded-lg" style={{ height: 110 }} />)}
          </div>
        ) : (
          <div className="grid grid-cols-3 gap-4">
            {paginated.map(f => (
              <div key={f.id} onClick={() => toggle(f.id)} style={{
                background: flipped[f.id] ? (PALETTE[f.animal_group] || "#0777b3") : "white",
                border: `1.5px solid ${PALETTE[f.animal_group] || "#ccc"}`,
                borderRadius: "10px", padding: "16px", cursor: "pointer",
                transition: "background 0.2s, color 0.2s",
                minHeight: "110px", display: "flex", flexDirection: "column",
                justifyContent: "space-between",
                color: flipped[f.id] ? "white" : "#231f20",
              }}>
                {flipped[f.id] ? (
                  <p style={{ fontSize: "13px", lineHeight: "1.5" }}>{f.fact}</p>
                ) : (
                  <>
                    <span style={{ fontSize: "32px" }}>{f.emoji}</span>
                    <div>
                      <p className="font-bold" style={{ fontSize: "14px" }}>{f.animal}</p>
                      <span style={{
                        fontSize: "11px", fontWeight: 600,
                        color: PALETTE[f.animal_group] || "#adadad",
                        background: `${PALETTE[f.animal_group] || "#adadad"}18`,
                        padding: "2px 8px", borderRadius: "999px",
                      }}>
                        {f.animal_group}
                      </span>
                    </div>
                  </>
                )}
              </div>
            ))}
          </div>
        )}
        <div className="flex gap-2 items-center justify-between mt-4">
          <p className="text-xs" style={{ color: "#aaa" }}>Click any card to reveal the fact</p>
          <div className="flex gap-2 items-center">
            <button onClick={() => goToPage(page - 1)} disabled={page === 0} style={{ padding: '4px 10px', borderRadius: '6px', border: '1.5px solid #ccc', background: page === 0 ? '#f0f0f0' : 'white', cursor: page === 0 ? 'not-allowed' : 'pointer', color: '#6a6a6a', fontSize: '12px' }}>← Prev</button>
            <span style={{ fontSize: '12px', color: '#6a6a6a' }}>Page {page + 1} of {totalPages}</span>
            <button onClick={() => goToPage(page + 1)} disabled={page >= totalPages - 1} style={{ padding: '4px 10px', borderRadius: '6px', border: '1.5px solid #ccc', background: page >= totalPages - 1 ? '#f0f0f0' : 'white', cursor: page >= totalPages - 1 ? 'not-allowed' : 'pointer', color: '#6a6a6a', fontSize: '12px' }}>Next →</button>
          </div>
        </div>
      </div>
    </div>
  );
}

Interactive animal facts explorer with flip cards, group filters, and a bar chart — 520 facts powered by the public animal_facts share.

Animal Facts

Comments