petal/web/src/components/DocList/DocListItem.tsx

import { useState } from 'react'
import type { DocSummary, Tag, TagColor } from '../../api/client'
import { TagChip } from './TagChip'
import { TagPicker } from './TagPicker'
import { usePack } from '../../i18n'

interface Props {
  doc: DocSummary
  active: boolean
  roster: Tag[]
  onSelect: () => void
  onDelete: () => void
  onDuplicate: () => void
  onToggleTag: (docId: string, tag: Tag) => void
  onCreateTag: (docId: string, name: string, color: TagColor) => void
}

// One row in the sidebar: title + word count, its tag chips, a tag affordance and
// a delete affordance on hover, and a rose wash when it's the open document.
export function DocListItem({
  doc,
  active,
  roster,
  onSelect,
  onDelete,
  onDuplicate,
  onToggleTag,
  onCreateTag,
}: Props) {
  const [picking, setPicking] = useState(false)
  const t = usePack()
  const assignedIds = new Set(doc.tags.map((t) => t.id))

  return (
    <div
      onClick={onSelect}
      className="group relative flex cursor-pointer flex-col gap-1 px-3 py-2.5"
      style={{
        borderRadius: 'var(--radius-card)',
        background: active ? 'var(--color-surface)' : 'transparent',
        boxShadow: active ? 'var(--shadow-soft)' : 'none',
      }}
    >
      <div className="flex items-center gap-2">
        <div className="min-w-0 flex-1">
          <div
            className="truncate text-sm font-semibold"
            style={{ color: active ? 'var(--color-plum)' : 'var(--color-muted)' }}
          >
            {doc.title || 'Untitled'}
          </div>
          <div className="text-xs" style={{ color: 'var(--color-muted)' }}>
            {doc.word_count} {doc.word_count === 1 ? 'word' : 'words'}
          </div>
        </div>

        {/* Tag + delete affordances: always reachable on touch (no hover), fade in
            on hover for the pointer experience. */}
        <button
          type="button"
          aria-label="Tag document"
          title="Tags"
          onClick={(e) => {
            e.stopPropagation()
            setPicking((v) => !v)
          }}
          className="petal-row-action flex h-7 w-7 shrink-0 items-center justify-center text-sm"
          style={{ borderRadius: 'var(--radius-pill)', color: 'var(--color-muted)' }}
        >
          🏷️
        </button>
        <button
          type="button"
          aria-label="Duplicate document"
          title={t.docs.duplicate}
          onClick={(e) => {
            e.stopPropagation()
            onDuplicate()
          }}
          className="petal-row-action flex h-7 w-7 shrink-0 items-center justify-center text-sm"
          style={{ borderRadius: 'var(--radius-pill)', color: 'var(--color-muted)' }}
        >
          ⧉
        </button>
        <button
          type="button"
          aria-label="Delete document"
          onClick={(e) => {
            e.stopPropagation()
            onDelete()
          }}
          className="petal-row-action flex h-7 w-7 shrink-0 items-center justify-center text-base"
          style={{ borderRadius: 'var(--radius-pill)', color: 'var(--color-muted)' }}
        >
          ×
        </button>

        {picking && (
          <TagPicker
            roster={roster}
            assignedIds={assignedIds}
            onToggle={(t) => onToggleTag(doc.id, t)}
            onCreate={(name, color) => onCreateTag(doc.id, name, color)}
            onClose={() => setPicking(false)}
          />
        )}
      </div>

      {doc.tags.length > 0 && (
        <div className="flex flex-wrap gap-1">
          {doc.tags.map((t) => (
            <TagChip key={t.id} tag={t} onRemove={() => onToggleTag(doc.id, t)} />
          ))}
        </div>
      )}
    </div>
  )
}