open-safetylog-ehs/src/pages/Actions.tsx

import { Link, useOutletContext, useSearchParams } from 'react-router-dom'
import { hasRole } from '../../shared/enums.ts'
import { OverdueBadge } from '../components/Badges'
import { ActionStatusControl } from '../components/incident/ActionsSection'
import { Page } from '../components/Page'
import { PageIntro } from '../components/PageIntro'
import { Empty, ErrorMessage, Loading } from '../components/QueryState'
import { panel } from '../components/styles'
import { useI18n } from '../i18n'
import { useActions, useUpdateAction, type Me } from '../lib/queries'

const filters = [
  { value: 'open', label: 'filterOpen' },
  { value: 'overdue', label: 'filterOverdue' },
  { value: 'done', label: 'filterDone' },
  { value: 'all', label: 'filterAll' },
] as const

const tab = (active: boolean) => `rounded-[5px] px-3 py-1.5 text-2xs font-semibold ${active ? 'bg-forest-950 text-white' : 'text-muted hover:bg-white hover:text-ink'}`

export function Actions() {
  const me = useOutletContext<Me>()
  const { t, formatDay } = useI18n()
  const [params, setParams] = useSearchParams()
  const canSeeAll = hasRole(me.user.role, 'supervisor')
  const scope = canSeeAll && params.get('scope') === 'all' ? 'all' : 'mine'
  const filter = filters.find((f) => f.value === params.get('filter'))?.value ?? 'open'
  const actions = useActions(scope, filter)
  const update = useUpdateAction()

  const set = (key: string, value: string) => {
    const next = new URLSearchParams(params)
    next.set(key, value)
    setParams(next, { replace: true })
  }

  return (
    <Page>
      <PageIntro
        eyebrow={t.actions.eyebrow}
        title={scope === 'mine' ? t.actions.mine : t.actions.all}
        copy={scope === 'mine' ? t.actions.mineCopy : t.actions.allCopy}
      />
      <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
        <div className="flex gap-1 rounded-md bg-line-soft p-1" role="tablist" aria-label="Filter actions">
          {filters.map((f) => (
            <button key={f.value} type="button" role="tab" aria-selected={filter === f.value} className={tab(filter === f.value)} onClick={() => set('filter', f.value)}>
              {t.actions[f.label]}
            </button>
          ))}
        </div>
        {canSeeAll && (
          <div className="flex gap-1 rounded-md bg-line-soft p-1" role="tablist" aria-label="Whose actions">
            <button type="button" role="tab" aria-selected={scope === 'mine'} className={tab(scope === 'mine')} onClick={() => set('scope', 'mine')}>
              {t.actions.assignedToMe}
            </button>
            <button type="button" role="tab" aria-selected={scope === 'all'} className={tab(scope === 'all')} onClick={() => set('scope', 'all')}>
              {t.actions.everyone}
            </button>
          </div>
        )}
      </div>
      <section className={panel}>
        <ErrorMessage error={actions.error ?? update.error} className="m-4" />
        {actions.isPending ? (
          <Loading />
        ) : !actions.data?.length ? (
          <Empty>{filter === 'open' ? t.actions.nothingOpen : t.actions.none}</Empty>
        ) : (
          <ul className="divide-y divide-line-soft">
            {actions.data.map((action) => (
              <li key={action.id} className="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-4 sm:px-6">
                <div className="min-w-[240px] flex-1">
                  <p className="text-xs font-semibold text-ink">{action.title}</p>
                  <p className="mt-1 text-3xs text-muted">
                    <Link to={`/incidents/${action.incident.number}`} className="font-mono text-coral hover:underline">
                      {action.incident.reference}
                    </Link>{' '}
                    {action.incident.title}
                    {scope === 'all' && ` · ${action.assignee?.name ?? t.actions.unassigned}`}
                  </p>
                </div>
                <div className="flex items-center gap-3 text-2xs text-body">
                  {action.overdue && <OverdueBadge label={t.actions.overdue} />}
                  <span className="w-[100px] text-right">{action.dueDate ? t.actions.due(formatDay(action.dueDate)) : t.actions.noDueDate}</span>
                  <ActionStatusControl action={action} disabled={update.isPending} onChange={(status) => update.mutate({ id: action.id, status })} />
                </div>
              </li>
            ))}
          </ul>
        )}
      </section>
    </Page>
  )
}