'use client'
import React from 'react'
import type { FeedEntry } from '@/types'

interface ActivityFeedProps {
  entries: FeedEntry[]
}

function formatDate(iso: string): string {
  try {
    return new Intl.DateTimeFormat('en', { month: 'short', day: 'numeric' }).format(new Date(iso))
  } catch {
    return iso
  }
}

export function ActivityFeed({ entries }: ActivityFeedProps) {
  if (entries.length === 0) {
    return (
      <div
        style={{
          textAlign: 'center',
          color: 'var(--fg-muted)',
          padding: 'var(--s-6)',
          fontSize: 'var(--t-body)',
        }}
      >
        No activity yet.
      </div>
    )
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-3)' }}>
      {entries.map((entry) => (
        <div
          key={entry.id}
          style={{
            background: 'var(--bg-warm)',
            borderRadius: 'var(--r-md)',
            padding: 'var(--s-4)',
            display: 'flex',
            flexDirection: 'column',
            gap: 'var(--s-2)',
          }}
        >
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <span style={{ fontWeight: 600, fontSize: 'var(--t-body)', color: 'var(--fg)' }}>
              {entry.displayName}
            </span>
            <span
              style={{
                fontSize: 'var(--t-label)',
                fontFamily: 'var(--font-mono)',
                color: 'var(--fg-subtle)',
              }}
            >
              {formatDate(entry.createdAt)}
            </span>
          </div>

          <div style={{ display: 'flex', gap: 'var(--s-4)', flexWrap: 'wrap' }}>
            <Stat label="Cycle" value={`${entry.cycle}`} />
            <Stat label="Week" value={`${entry.week}`} />
            <Stat label="Commits" value={`${entry.totalCommits}`} />
            <Stat label="Streak" value={`${entry.streakWeeks}w`} />
          </div>

          {entry.badgeKeys.length > 0 && (
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--s-1)' }}>
              {entry.badgeKeys.map((key) => (
                <span
                  key={key}
                  style={{
                    fontSize: 'var(--t-label)',
                    fontFamily: 'var(--font-mono)',
                    textTransform: 'uppercase',
                    letterSpacing: 'var(--label-ls)',
                    padding: '2px var(--s-2)',
                    borderRadius: 'var(--r-pill)',
                    background: 'var(--accent-soft)',
                    color: 'var(--teal-900)',
                  }}
                >
                  {key}
                </span>
              ))}
            </div>
          )}
        </div>
      ))}
    </div>
  )
}

function Stat({ label, value }: { label: string; value: string }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
      <span
        style={{
          fontSize: 'var(--t-label)',
          fontFamily: 'var(--font-mono)',
          textTransform: 'uppercase',
          letterSpacing: 'var(--label-ls)',
          color: 'var(--fg-subtle)',
        }}
      >
        {label}
      </span>
      <span style={{ fontSize: 'var(--t-small)', fontWeight: 600, color: 'var(--fg)' }}>
        {value}
      </span>
    </div>
  )
}
