import { Clock } from 'lucide-react'
import { useNavigate } from 'react-router-dom'
import { ActivityItem } from './ActivityItem'
import type { SidebarActiveSession, SidebarRecentSession } from '@/api/sidebar'

interface SidebarActivityFeedProps {
  activeSessions: SidebarActiveSession[]
  recentCompletions: SidebarRecentSession[]
  totalActive: number
}

export function SidebarActivityFeed({
  activeSessions,
  recentCompletions,
  totalActive,
}: SidebarActivityFeedProps) {
  const navigate = useNavigate()
  const hasActivity = activeSessions.length > 0 || recentCompletions.length > 0

  return (
    <div className="px-3 pb-1">
      {/* Header */}
      <div className="flex items-center gap-1.5 px-2.5 py-1 mb-0.5">
        <Clock size={10} style={{ color: '#34d399' }} />
        <span className="font-label text-[0.5625rem] uppercase tracking-[0.12em] text-[#5a6170]">
          Activity
        </span>
      </div>

      {!hasActivity ? (
        <p className="px-2.5 py-2 text-xs text-muted-foreground">
          No activity today
        </p>
      ) : (
        <div className="space-y-0.5">
          {/* Active sessions */}
          {activeSessions.map((session) => (
            <ActivityItem
              key={session.session_id}
              sessionId={session.session_id}
              treeName={session.tree_name}
              treeId={session.tree_id}
              treeType={session.tree_type}
              status="active"
              ticketNumber={session.ticket_number || session.psa_ticket_id}
            />
          ))}

          {/* Overflow link */}
          {totalActive > 5 && (
            <button
              onClick={() => navigate('/sessions')}
              className="w-full px-2.5 py-1 text-left text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
            >
              View all in Sessions →
            </button>
          )}

          {/* Divider between active and recent */}
          {activeSessions.length > 0 && recentCompletions.length > 0 && (
            <div className="mx-2.5 my-1" style={{ height: '1px', background: 'rgba(255,255,255,0.03)' }} />
          )}

          {/* Recent completions */}
          {recentCompletions.map((session) => (
            <ActivityItem
              key={session.session_id}
              sessionId={session.session_id}
              treeName={session.tree_name}
              treeId={session.tree_id}
              treeType={session.tree_type}
              status="recent"
              timestamp={session.completed_at}
            />
          ))}
        </div>
      )}
    </div>
  )
}