Scrum4Me/components/shared/story-log.tsx

interface StoryLogEntry {
  id: string
  type: string
  content: string
  status: string | null
  commit_hash: string | null
  commit_message: string | null
  created_at: string
}

interface StoryLogProps {
  logs: StoryLogEntry[]
  repoUrl?: string | null
}

const TYPE_STYLES: Record<string, { bg: string; label: string; labelColor: string }> = {
  IMPLEMENTATION_PLAN: {
    bg: 'bg-info-container/50 border-info/20',
    label: 'Implementatieplan',
    labelColor: 'text-info',
  },
  TEST_RESULT: {
    bg: 'bg-surface-container border-border',
    label: 'Testresultaat',
    labelColor: 'text-foreground',
  },
  COMMIT: {
    bg: 'bg-secondary-container/30 border-secondary/20',
    label: 'Commit',
    labelColor: 'text-secondary',
  },
}

export function StoryLog({ logs, repoUrl }: StoryLogProps) {
  if (logs.length === 0) {
    return (
      <p
        data-debug-id="story-log"
        data-debug-label="StoryLog — shared/story-log.tsx"
        className="text-sm text-muted-foreground text-center py-4"
      >
        Nog geen activiteit. Gebruik de REST API om logs toe te voegen.
      </p>
    )
  }

  return (
    <div
      data-debug-id="story-log"
      data-debug-label="StoryLog — shared/story-log.tsx"
      className="space-y-3"
    >
      {logs.map(log => {
        const style = TYPE_STYLES[log.type] ?? TYPE_STYLES.IMPLEMENTATION_PLAN
        const isTestResult = log.type === 'TEST_RESULT'
        const testPassed = log.status === 'PASSED'

        return (
          <div
            key={log.id}
            className={`rounded-lg border p-3 space-y-1.5 ${
              isTestResult
                ? testPassed
                  ? 'bg-success-container/40 border-success/20'
                  : 'bg-error-container/40 border-error/20'
                : style.bg
            }`}
          >
            <div className="flex items-center justify-between">
              <span className={`text-xs font-semibold ${
                isTestResult ? (testPassed ? 'text-success' : 'text-error') : style.labelColor
              }`}>
                {style.label}
                {isTestResult && ` — ${testPassed ? 'Geslaagd' : 'Mislukt'}`}
              </span>
              <span className="text-xs text-muted-foreground">
                {new Date(log.created_at).toLocaleDateString('nl-NL', {
                  day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit',
                })}
              </span>
            </div>

            <p className="text-sm text-foreground whitespace-pre-line">{log.content}</p>

            {log.commit_hash && (
              <div className="flex items-center gap-2 mt-1">
                {repoUrl ? (
                  <a
                    href={`${repoUrl}/commit/${log.commit_hash}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-xs font-mono text-secondary hover:underline"
                  >
                    {log.commit_hash.slice(0, 7)}
                  </a>
                ) : (
                  <code className="text-xs font-mono text-secondary">
                    {log.commit_hash.slice(0, 7)}
                  </code>
                )}
                {log.commit_message && (
                  <span className="text-xs text-muted-foreground truncate">{log.commit_message}</span>
                )}
              </div>
            )}
          </div>
        )
      })}
    </div>
  )
}