// CIL[BEGIN chunk_id="SprintsPage_module_header_1784761401" type="module_header" identity="module_header" parent="none"]
// CIL[DOC-MACRO purpose="List engineering sprints with drag-sortable upcoming order and team filter"]
// CIL[DOC-RESPONSIBILITY responsibility="Fetch workbench_sprint records, filter by team, pin the active sprint, and allow drag reordering of upcoming sprints"]
// CIL[DOC-CONTEXT module="workbench.pages.work.SprintsPage" layer="frontend-page" related_files="[\"custom/apps/workbench/components/records/RecordListPage.tsx\",\"custom/apps/workbench/pages/work/SprintDetailPage.tsx\",\"custom/apps/workbench/components/work/TeamSwitcher.tsx\"]"]
// CIL[DOC-CONTRACT inputs="none" outputs="JSX page" errors="fetch/patch errors rendered inline" side_effects="calls /api/admin-data, PATCHes order on drop"]
// CIL[DOC-MICRO logic_summary="Loads sprints, filters by selected team, shows active at top, completed at bottom when toggled, and lets users drag upcoming sprints to update order" notable_decisions=["Active and completed sprints cannot be reordered; only upcoming sprints are draggable"]"]
// CIL[DOC-CONFIDENCE pass="first" score="0.9" flags="none"]
// CIL[DOC-STABILITY stability="experimental"]
// CIL[DOC-AUDIENCE audience="developer"]
import { useEffect, useMemo, useRef, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAppPath } from '@core/hooks/useAppPath'
import { apiFetch } from '@core/lib/api'
import { cn } from '@core/lib/utils'
import { Button } from '@core/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@core/components/ui/card'
import { Badge } from '@core/components/ui/badge'
import { Checkbox } from '@core/components/ui/checkbox'
import { GripVertical, Plus } from 'lucide-react'
import { useWorkbenchRole } from '../../hooks/useWorkbenchRole'
// CIL[END chunk_id="SprintsPage_module_header_1784761401"]
// CIL[BEGIN chunk_id="SprintsPage_sprintsPage_1784761401" type="function" identity="SprintsPage" parent="none"]
// CIL[DOC-MACRO description="Implementation of SprintsPage" macro="Renders and manages SprintsPage UI state"]
// CIL[DOC-CONTRACT input_spec="See module header or type signature" output_spec="JSX or value" side_effects="none"]
// CIL[DOC-STABILITY stability="experimental"]
function isActivePhase(phase?: string): boolean {
  return phase === 'active' || phase === 'current'
}

function isCompletedPhase(phase?: string): boolean {
  return phase === 'completed'
}

function formatDate(value?: string): string {
  if (!value) return '—'
  try {
    return new Date(value).toLocaleDateString()
  } catch {
    return value
  }
}

export default function SprintsPage() {
  const navigate = useNavigate()
  const appPath = useAppPath()
  const { role } = useWorkbenchRole()
  const selectedTeam = role

  const [sprints, setSprints] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [showCompleted, setShowCompleted] = useState(false)
  const [draggedId, setDraggedId] = useState<string | null>(null)
  const draggedIdRef = useRef<string | null>(null)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const preventClickRef = useRef(false)

  const load = async () => {
    setLoading(true)
    setError(null)
    try {
      const res = await apiFetch('/api/admin-data?entity=items&type_slug=workbench_sprint&limit=500')
      const json = await res.json()
      setSprints(Array.isArray(json?.data) ? json.data : [])
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to load sprints')
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    load()
  }, [])

  const filtered = useMemo(() => {
    if (selectedTeam === '*') return sprints
    return sprints.filter(s => s.data?.team === selectedTeam || s.data?.team === '*')
  }, [sprints, selectedTeam])

  const { active, future, completed } = useMemo(() => {
    const active = filtered.find(s => isActivePhase(s.data?.phase)) || null
    const completed = filtered
      .filter(s => isCompletedPhase(s.data?.phase) && (!active || s.id !== active.id))
      .sort((a, b) => String(b.data?.end_at || b.updated_at || '').localeCompare(String(a.data?.end_at || a.updated_at || '')))
    const future = filtered
      .filter(s => (!active || s.id !== active.id) && !isCompletedPhase(s.data?.phase))
      .sort((a, b) => {
        const oa = a.data?.order ?? Infinity
        const ob = b.data?.order ?? Infinity
        if (oa !== ob) return oa - ob
        return String(a.data?.start_at || a.created_at || '').localeCompare(String(b.data?.start_at || b.created_at || ''))
      })
    return { active, future, completed }
  }, [filtered])

  const handleDragStart = (id: string) => {
    preventClickRef.current = false
    draggedIdRef.current = id
    setDraggedId(id)
  }

  const handleDragEnd = () => {
    draggedIdRef.current = null
    setDraggedId(null)
  }

  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault()
  }

  const handleDrop = async (e: React.DragEvent<HTMLDivElement>, targetId: string) => {
    e.preventDefault()
    preventClickRef.current = true
    window.setTimeout(() => { preventClickRef.current = false }, 200)
    const draggedId = draggedIdRef.current
    if (!draggedId || draggedId === targetId) {
      draggedIdRef.current = null
      setDraggedId(null)
      return
    }
    const dragged = future.find(s => s.id === draggedId)
    if (!dragged) {
      draggedIdRef.current = null
      setDraggedId(null)
      return
    }
    const target = future.find(s => s.id === targetId)
    if (!target) {
      draggedIdRef.current = null
      setDraggedId(null)
      return
    }

    const rect = e.currentTarget.getBoundingClientRect()
    const before = e.clientY < rect.top + rect.height / 2
    const others = future.filter(s => s.id !== draggedId)
    const idx = others.findIndex(s => s.id === targetId)
    const insert = before ? idx : idx + 1
    const reordered = [...others]
    reordered.splice(insert === -1 ? others.length : insert, 0, dragged)

    const updates = reordered.map((s, i) => ({ id: s.id, order: i, data: s.data }))
    setSaving(true)
    setError(null)
    try {
      await Promise.all(
        updates.map(u =>
          apiFetch(`/api/admin-data?entity=items&id=${u.id}`, {
            method: 'PATCH',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ data: { ...u.data, order: u.order } }),
          })
        )
      )
      setSprints(prev =>
        prev.map(s => {
          const u = updates.find(x => x.id === s.id)
          if (!u) return s
          return { ...s, data: { ...s.data, order: u.order } }
        })
      )
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to save order')
    } finally {
      setSaving(false)
      draggedIdRef.current = null
      setDraggedId(null)
    }
  }

  const SprintRow = ({ sprint, draggable }: { sprint: any; draggable?: boolean }) => (
    <div
      data-sprint-id={sprint.id}
      draggable={draggable}
      onDragStart={() => draggable && handleDragStart(sprint.id)}
      onDragEnd={() => draggable && handleDragEnd()}
      onDragOver={draggable ? handleDragOver : undefined}
      onDrop={draggable ? e => handleDrop(e, sprint.id) : undefined}
      className={cn(
        'flex items-center gap-2 p-3 rounded-lg border border-border/60 bg-card',
        draggable && 'cursor-grab active:cursor-grabbing hover:bg-muted/30 select-none',
        draggedId === sprint.id && 'opacity-50'
      )}
      onClick={e => {
        if (preventClickRef.current) {
          e.preventDefault()
          return
        }
        navigate(appPath(`/work/${role}/prioritization/sprints/${sprint.id}`))
      }}
    >
      {draggable && <GripVertical className="h-4 w-4 text-muted-foreground" />}
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2">
          <span className="font-medium text-sm truncate">{sprint.title || 'Untitled Sprint'}</span>
          {sprint.data?.phase && <Badge variant="outline" className="text-[0.625rem]">{sprint.data.phase}</Badge>}
        </div>
        <div className="text-xs text-muted-foreground mt-0.5">
          {sprint.data?.team || '—'} · {formatDate(sprint.data?.start_at)} → {formatDate(sprint.data?.end_at)}
        </div>
      </div>
    </div>
  )

  return (
    <div className="p-4 lg:p-6 h-[calc(100vh-4rem)] flex flex-col">
      <div className="flex items-center justify-between shrink-0 mb-4">
        <div className="flex items-center gap-4">
          <h1 className="text-2xl font-bold tracking-tight">Sprints</h1>
          <div className="flex items-center gap-2">
            <Checkbox
              id="show-completed"
              checked={showCompleted}
              onCheckedChange={v => setShowCompleted(v === true)}
            />
            <label htmlFor="show-completed" className="text-sm text-muted-foreground">Show completed</label>
          </div>
        </div>
        <Button size="sm" onClick={() => navigate(appPath(`/work/${role}/prioritization/sprints/new`))}>
          <Plus className="h-4 w-4 mr-1" /> New Sprint
        </Button>
      </div>

      {error && <div className="mb-4 p-3 rounded bg-destructive/10 text-destructive text-sm">{error}</div>}

      {loading ? (
        <div className="text-sm text-muted-foreground">Loading sprints…</div>
      ) : (
        <div className="space-y-4 overflow-y-auto pr-2 pb-6">
          {active && (
            <Card>
              <CardHeader className="pb-2 px-3 pt-3">
                <CardTitle className="text-sm">Active</CardTitle>
              </CardHeader>
              <CardContent className="px-3 pb-3">
                <SprintRow sprint={active} />
              </CardContent>
            </Card>
          )}

          <Card>
            <CardHeader className="pb-2 px-3 pt-3">
              <CardTitle className="text-sm">Upcoming {saving && '· saving…'}</CardTitle>
            </CardHeader>
            <CardContent className="px-3 pb-3 space-y-2">
              {future.length === 0 ? (
                <div className="text-sm text-muted-foreground">No upcoming sprints.</div>
              ) : (
                future.map(sprint => <SprintRow key={sprint.id} sprint={sprint} draggable />)
              )}
            </CardContent>
          </Card>

          {showCompleted && (
            <Card>
              <CardHeader className="pb-2 px-3 pt-3">
                <CardTitle className="text-sm">Completed</CardTitle>
              </CardHeader>
              <CardContent className="px-3 pb-3 space-y-2">
                {completed.length === 0 ? (
                  <div className="text-sm text-muted-foreground">No completed sprints.</div>
                ) : (
                  completed.map(sprint => <SprintRow key={sprint.id} sprint={sprint} />)
                )}
              </CardContent>
            </Card>
          )}
        </div>
      )}
    </div>
  )
}
// CIL[END chunk_id="SprintsPage_sprintsPage_1784761401"]