'use client'

import { useSelectionStore } from '@/stores/selection-store'
import { PanelNavBar } from '@/components/shared/panel-nav-bar'
import { Badge } from '@/components/ui/badge'
import { cn } from '@/lib/utils'
import type { SprintStory } from './sprint-backlog'

const PRIORITY_COLORS: Record<number, string> = {
  1: 'bg-priority-critical/15 text-priority-critical border-priority-critical/30',
  2: 'bg-priority-high/15 text-priority-high border-priority-high/30',
  3: 'bg-priority-medium/15 text-priority-medium border-priority-medium/30',
  4: 'bg-priority-low/15 text-priority-low border-priority-low/30',
}
const PRIORITY_LABELS: Record<number, string> = { 1: 'Kritiek', 2: 'Hoog', 3: 'Gemiddeld', 4: 'Laag' }

interface PlanningLeftProps {
  stories: SprintStory[]
}

export function PlanningLeft({ stories }: PlanningLeftProps) {
  const { selectedStoryId, selectStory } = useSelectionStore()

  return (
    <div className="flex flex-col h-full">
      <PanelNavBar title="Sprint Backlog" />
      <div className="flex-1 overflow-y-auto">
        {stories.length === 0 ? (
          <p className="text-sm text-muted-foreground text-center mt-8 px-4">
            Geen stories in de Sprint.
          </p>
        ) : (
          stories.map(story => (
            <div
              key={story.id}
              onClick={() => selectStory(story.id)}
              className={cn(
                'flex items-center gap-3 px-4 py-2.5 border-b border-border cursor-pointer transition-colors hover:bg-surface-container',
                selectedStoryId === story.id && 'bg-primary-container text-primary-container-foreground'
              )}
            >
              <div className="flex-1 min-w-0">
                <p className="text-sm truncate">{story.title}</p>
                <div className="flex items-center gap-1.5 mt-0.5">
                  <Badge className={cn('text-[10px] px-1.5 py-0 border', PRIORITY_COLORS[story.priority])}>
                    {PRIORITY_LABELS[story.priority]}
                  </Badge>
                  <span className="text-xs text-muted-foreground">{story.doneCount}/{story.taskCount} klaar</span>
                </div>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  )
}