Table

'use client'

import * as React from 'react'
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFoot,
  TableHead,
  TableHeaderCell,
  TableRow,
  type TableSort,
} from '@fairgarden-private/design/components/Table'

interface Trail {
  name: string
  region: string
  length: number
  gain: number | null
}

const trails: readonly Trail[] = [
  { name: 'Cedar Loop', region: 'North Ridge', length: 4.2, gain: 120 },
  { name: 'Heron Marsh Boardwalk', region: 'Lowlands', length: 1.6, gain: 0 },
  { name: 'Old Quarry Climb', region: 'North Ridge', length: 7.9, gain: 410 },
  { name: 'Meadow Link', region: 'Valley', length: 3.1, gain: null },
  { name: 'Prairie Overlook', region: 'Valley', length: 5.4, gain: 180 },
]

const number = new Intl.NumberFormat('en-US', { minimumFractionDigits: 1, maximumFractionDigits: 1 })

type Column = 'name' | 'length'

/** Records stack below 768 px of the table; the name and length headers sort. */
export function TableRecords() {
  const [sort, setSort] = React.useState<{ column: Column; direction: TableSort }>({
    column: 'name',
    direction: 'ascending',
  })

  const rows = [...trails].sort((a, b) => {
    const order =
      sort.column === 'name' ? a.name.localeCompare(b.name) : a.length - b.length
    return sort.direction === 'descending' ? -order : order
  })

  const sortBy = (column: Column) => () =>
    setSort((current) => ({
      column,
      direction:
        current.column === column && current.direction === 'ascending'
          ? 'descending'
          : 'ascending',
    }))

  const stateOf = (column: Column): TableSort =>
    sort.column === column ? sort.direction : 'none'

  const total = trails.reduce((sum, trail) => sum + trail.length, 0)

  return (
    <Table
      notes={
        <>
          <p>Source: Trail stewardship survey, spring 2026.</p>
          <p>— No measurement yet.</p>
        </>
      }
    >
      <TableCaption label="Table 1" note="Lengths in kilometres; elevation gain in metres.">
        Trails by length
      </TableCaption>
      <TableHead>
        <TableRow>
          <TableHeaderCell sort={stateOf('name')} onSort={sortBy('name')}>
            Trail
          </TableHeaderCell>
          <TableHeaderCell>Region</TableHeaderCell>
          <TableHeaderCell numeric sort={stateOf('length')} onSort={sortBy('length')}>
            Length (km)
          </TableHeaderCell>
          <TableHeaderCell numeric>Gain (m)</TableHeaderCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {rows.map((trail) => (
          <TableRow key={trail.name}>
            <TableHeaderCell>{trail.name}</TableHeaderCell>
            <TableCell>{trail.region}</TableCell>
            <TableCell numeric>{number.format(trail.length)}</TableCell>
            <TableCell numeric>{trail.gain == null ? '—' : trail.gain}</TableCell>
          </TableRow>
        ))}
      </TableBody>
      <TableFoot>
        <TableRow>
          <TableHeaderCell colSpan={2}>Total</TableHeaderCell>
          <TableCell numeric>{number.format(total)}</TableCell>
          <TableCell numeric>—</TableCell>
        </TableRow>
      </TableFoot>
    </Table>
  )
}

'use client'

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeaderCell,
  TableRow,
} from '@fairgarden-private/design/components/Table'

const counts = [
  ['January', 412, 38],
  ['February', 388, 35],
  ['March', 540, 44],
  ['April', 716, 61],
  ['May', 902, 73],
  ['June', 874, 70],
  ['July', 655, 58],
  ['August', 610, 54],
  ['September', 781, 66],
  ['October', 693, 59],
  ['November', 470, 41],
  ['December', 395, 36],
] as const

const number = new Intl.NumberFormat('en-US')

/**
 * Twelve body rows switch to the five-row cadence: dotted rules between
 * rows, a solid rule after every fifth. One row is selected (the row bar);
 * one is inactive, with a word.
 */
export function TableCadence() {
  return (
    <Table strategy="fit">
      <TableCaption label="Table 2" note="Counts from the weekly marsh walk.">
        Birds counted per month, 2025
      </TableCaption>
      <TableHead>
        <TableRow>
          <TableHeaderCell>Month</TableHeaderCell>
          <TableHeaderCell numeric>Birds</TableHeaderCell>
          <TableHeaderCell numeric>Species</TableHeaderCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {counts.map(([month, birds, species]) => (
          <TableRow key={month} selected={month === 'May'} inactive={month === 'December'}>
            <TableHeaderCell>{month === 'December' ? 'December (partial)' : month}</TableHeaderCell>
            <TableCell numeric>{number.format(birds)}</TableCell>
            <TableCell numeric>{species}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

'use client'

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeaderCell,
  TableRow,
} from '@fairgarden-private/design/components/Table'

const allergens = ['Gluten', 'Dairy', 'Egg', 'Soy', 'Peanut', 'Tree nut', 'Sesame'] as const

/** ● contains, ○ may contain, empty: does not contain. */
const menu: ReadonlyArray<readonly [string, ReadonlyArray<'●' | '○' | ''>]> = [
  ['Garden burger', ['●', '', '○', '●', '', '', '●']],
  ['Harvest bowl', ['', '', '', '●', '', '○', '●']],
  ['Field greens', ['', '●', '', '', '', '●', '']],
  ['Oat crumble', ['●', '●', '●', '', '○', '●', '']],
]

/** A matrix: the full grid, the first column pinned while the rest scrolls. */
export function TableMatrix() {
  return (
    <Table
      strategy="scroll"
      grid
      scrollCue="Scroll for more allergens →"
      notes={<p>● Contains. ○ May contain traces. An empty cell: does not contain.</p>}
    >
      <TableCaption label="Table 3">Allergens by dish</TableCaption>
      <TableHead>
        <TableRow>
          <TableHeaderCell>Dish</TableHeaderCell>
          {allergens.map((allergen) => (
            <TableHeaderCell key={allergen}>{allergen}</TableHeaderCell>
          ))}
        </TableRow>
      </TableHead>
      <TableBody>
        {menu.map(([dish, marks]) => (
          <TableRow key={dish}>
            <TableHeaderCell>{dish}</TableHeaderCell>
            {marks.map((mark, index) => (
              <TableCell key={allergens[index]}>{mark}</TableCell>
            ))}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}