import { Card, CardContent, CardHeader, CardTitle } from '@core/components/ui/card'
import { Badge } from '@core/components/ui/badge'

const TYPE_LABELS: Record<string, string> = {
  workbench_idea: 'Idea',
  workbench_discovery: 'Discovery',
  workbench_initiative: 'Initiative',
  workbench_epic: 'Epic',
  workbench_sprint: 'Sprint',
  workbench_work_item: 'Work item',
}

function TypeLabel({ slug }: { slug?: string }) {
  const label = (slug && TYPE_LABELS[slug]) || slug?.replace(/^workbench_/, '') || 'Record'
  return <Badge variant="secondary" className="text-[10px] uppercase tracking-wide">{label}</Badge>
}

function LineRow({ item }: { item: any }) {
  return (
    <div className="flex items-start gap-2 py-1.5 border-b last:border-0 border-border/50">
      <TypeLabel slug={item.type_slug} />
      <div className="flex-1 min-w-0 text-sm">
        <div className="font-medium truncate">{item.title || 'Untitled'}</div>
        <div className="text-xs text-muted-foreground truncate">{item.status || '—'} · {item.description?.slice(0, 60) || ''}{item.description?.length > 60 ? '…' : ''}</div>
      </div>
    </div>
  )
}

export function OriginChain({ item }: { item: any }) {
  const parents = item?.parents || []
  const children = item?.children || []

  if (!parents.length && !children.length) {
    return null
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-base">Origin & context</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {parents.length > 0 && (
          <div>
            <div className="text-xs text-muted-foreground mb-1">Parents</div>
            <div className="divide-y divide-border/50 rounded border border-border/50 px-2">
              {parents.map((p: any, idx: number) => (
                <LineRow key={p.id || idx} item={p} />
              ))}
            </div>
          </div>
        )}
        {children.length > 0 && (
          <div>
            <div className="text-xs text-muted-foreground mb-1">Children ({children.length})</div>
            <div className="divide-y divide-border/50 rounded border border-border/50 px-2">
              {children.slice(0, 20).map((c: any, idx: number) => (
                <LineRow key={c.id || idx} item={c} />
              ))}
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  )
}