Momento/memento-note/components/structured-views/notes-structured-table.tsx

'use client'

import { useMemo, useState } from 'react'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog'
import type { Note } from '@/lib/types'
import type {
  ColumnFilter,
  ColumnSort,
  NotebookSchemaPayload,
  NotePropertyValues,
} from '@/lib/structured-views/types'
import {
  filterNotesWithProperties,
  sortNotesWithProperties,
} from '@/lib/structured-views/property-utils'
import { PropertyValueEditor } from './property-value-editor'
import { getNoteDisplayTitle } from '@/lib/note-preview'
import { useLanguage } from '@/lib/i18n'
import { formatAbsoluteDateLocalized } from '@/lib/utils/format-localized-date'
import { ChevronDown, ChevronUp, Filter, Trash2 } from 'lucide-react'

type NotesStructuredTableProps = {
  notes: Note[]
  schema: NotebookSchemaPayload
  noteValues: Record<string, NotePropertyValues>
  onOpen: (note: Note) => void
  onPropertyChange: (noteId: string, propertyId: string, value: unknown) => void
  onDeleteProperty?: (propertyId: string) => Promise<void>
}

export function NotesStructuredTable({
  notes,
  schema,
  noteValues,
  onOpen,
  onPropertyChange,
  onDeleteProperty,
}: NotesStructuredTableProps) {
  const { t, language } = useLanguage()
  const untitled = t('notes.untitled')
  const [sort, setSort] = useState<ColumnSort>({ propertyId: 'updatedAt', direction: 'desc' })
  const [filterPropId, setFilterPropId] = useState<string | null>(null)
  const [filterOp, setFilterOp] = useState<ColumnFilter['operator']>('contains')
  const [filterValue, setFilterValue] = useState('')
  const [propertyToDelete, setPropertyToDelete] = useState<{ id: string; name: string } | null>(null)
  const [deletingProperty, setDeletingProperty] = useState(false)

  const filters: ColumnFilter[] = useMemo(() => {
    if (!filterPropId) return []
    return [{ propertyId: filterPropId, operator: filterOp, value: filterValue }]
  }, [filterPropId, filterOp, filterValue])

  const displayed = useMemo(() => {
    const filtered = filterNotesWithProperties(notes, noteValues, filters, schema.properties)
    return sortNotesWithProperties(filtered, noteValues, sort, schema.properties)
  }, [notes, noteValues, filters, sort, schema.properties])

  const toggleSort = (propertyId: ColumnSort['propertyId']) => {
    setSort((prev) =>
      prev.propertyId === propertyId
        ? { propertyId, direction: prev.direction === 'asc' ? 'desc' : 'asc' }
        : { propertyId, direction: 'asc' },
    )
  }

  const SortIcon = ({ field }: { field: ColumnSort['propertyId'] }) =>
    sort.propertyId !== field ? null : sort.direction === 'asc' ? (
      <ChevronUp size={12} />
    ) : (
      <ChevronDown size={12} />
    )

  return (
    <div className="max-w-6xl mx-auto space-y-3">
      <div className="flex flex-wrap items-center gap-2 text-[11px]">
        <Filter size={14} className="text-muted-foreground" />
        <select
          value={filterPropId ?? ''}
          onChange={(e) => setFilterPropId(e.target.value || null)}
          className="rounded-lg border border-border bg-background px-2 py-1"
        >
          <option value="">{t('structuredViews.noFilter')}</option>
          <option value="title">{t('notes.tableTitle')}</option>
          {schema.properties.map((p) => (
            <option key={p.id} value={p.id}>{p.name}</option>
          ))}
        </select>
        {filterPropId && (
          <>
            <select
              value={filterOp}
              onChange={(e) => setFilterOp(e.target.value as ColumnFilter['operator'])}
              className="rounded-lg border border-border bg-background px-2 py-1"
            >
              <option value="contains">{t('structuredViews.filterContains')}</option>
              <option value="equals">{t('structuredViews.filterEquals')}</option>
              <option value="empty">{t('structuredViews.filterEmpty')}</option>
            </select>
            {filterOp !== 'empty' && (
              <input
                value={filterValue}
                onChange={(e) => setFilterValue(e.target.value)}
                className="rounded-lg border border-border bg-background px-2 py-1 min-w-[120px]"
                placeholder={t('structuredViews.filterValue')}
              />
            )}
          </>
        )}
      </div>

      <div className="overflow-x-auto border border-border/40 rounded-2xl bg-card/30 shadow-sm">
        <table className="w-full text-left border-collapse min-w-[800px]">
          <thead>
            <tr className="border-b border-border/30">
              <th
                className="px-4 py-3 text-[10px] uppercase tracking-widest font-black text-muted-foreground cursor-pointer hover:text-foreground w-[22%]"
                onClick={() => toggleSort('title')}
              >
                <span className="inline-flex items-center gap-1">
                  {t('notes.tableTitle')} <SortIcon field="title" />
                </span>
              </th>
              {schema.properties.map((p) => (
                <th
                  key={p.id}
                  className="px-4 py-3 text-[10px] uppercase tracking-widest font-black text-muted-foreground group/col"
                >
                  <span className="inline-flex items-center gap-1">
                    <button
                      type="button"
                      onClick={() => toggleSort(p.id)}
                      className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
                    >
                      {p.name} <SortIcon field={p.id} />
                    </button>
                    {onDeleteProperty && (
                      <button
                        type="button"
                        onClick={(e) => {
                          e.stopPropagation()
                          setPropertyToDelete({ id: p.id, name: p.name })
                        }}
                        className="opacity-40 group-hover/col:opacity-100 p-0.5 rounded hover:text-red-500 hover:bg-red-500/10 transition-all shrink-0"
                        title={t('structuredViews.deleteProperty')}
                        aria-label={t('structuredViews.deleteProperty')}
                      >
                        <Trash2 size={11} />
                      </button>
                    )}
                  </span>
                </th>
              ))}
              <th
                className="px-4 py-3 text-[10px] uppercase tracking-widest font-black text-muted-foreground cursor-pointer hover:text-foreground w-[12%]"
                onClick={() => toggleSort('updatedAt')}
              >
                <span className="inline-flex items-center gap-1">
                  {t('notes.tableModified')} <SortIcon field="updatedAt" />
                </span>
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-foreground/[0.03]">
            {displayed.map((note) => {
              const vals = noteValues[note.id] ?? {}
              return (
                <tr key={note.id} className="hover:bg-foreground/[0.02] transition-colors group">
                  <td className="px-4 py-2">
                    <button
                      type="button"
                      onClick={() => onOpen(note)}
                      className="font-memento-serif text-[13px] font-medium text-left truncate max-w-[220px] group-hover:text-brand-accent transition-colors"
                    >
                      {getNoteDisplayTitle(note, untitled)}
                    </button>
                  </td>
                  {schema.properties.map((p) => (
                    <td
                      key={p.id}
                      className="px-4 py-2 align-top"
                      onClick={(e) => e.stopPropagation()}
                    >
                      <div className="min-w-[100px] max-w-[180px]">
                        <PropertyValueEditor
                          property={p}
                          value={vals[p.id]}
                          compact
                          onChange={(v) => onPropertyChange(note.id, p.id, v)}
                        />
                      </div>
                    </td>
                  ))}
                  <td className="px-4 py-2 text-[11px] text-muted-foreground whitespace-nowrap">
                    {formatAbsoluteDateLocalized(new Date(note.updatedAt), language, 'MMM d, yyyy')}
                  </td>
                </tr>
              )
            })}
          </tbody>
        </table>
        {displayed.length === 0 && (
          <p className="text-center py-8 text-muted-foreground text-sm">{t('structuredViews.noMatchingNotes')}</p>
        )}
      </div>

      <AlertDialog
        open={Boolean(propertyToDelete)}
        onOpenChange={(open) => {
          if (!open) setPropertyToDelete(null)
        }}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>{t('structuredViews.deletePropertyTitle')}</AlertDialogTitle>
            <AlertDialogDescription>
              {t('structuredViews.deletePropertyConfirm', { name: propertyToDelete?.name ?? '' })}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel disabled={deletingProperty}>{t('general.cancel')}</AlertDialogCancel>
            <AlertDialogAction
              disabled={deletingProperty || !propertyToDelete}
              className="bg-red-600 hover:bg-red-700"
              onClick={async (e) => {
                e.preventDefault()
                if (!propertyToDelete || !onDeleteProperty) return
                setDeletingProperty(true)
                try {
                  await onDeleteProperty(propertyToDelete.id)
                  if (filterPropId === propertyToDelete.id) setFilterPropId(null)
                  setPropertyToDelete(null)
                } finally {
                  setDeletingProperty(false)
                }
              }}
            >
              {t('structuredViews.deleteProperty')}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}