Gantt

import { useState } from 'react'
import { Gantt, type GanttItem } from '@otfdashkit/ui'

const CHART_COLORS = [
  'hsl(var(--chart-1))',
  'hsl(var(--chart-2))',
  'hsl(var(--chart-3))',
  'hsl(var(--chart-4))',
  'hsl(var(--chart-5))',
] as const

function addDaysLocal(d: Date, days: number): Date {
  const next = new Date(d)
  next.setDate(next.getDate() + days)
  next.setHours(0, 0, 0, 0)
  return next
}

function today(): Date {
  const d = new Date()
  d.setHours(0, 0, 0, 0)
  return d
}

const defaultBaseItems: GanttItem[] = (() => {
  const t = today()
  const start = addDaysLocal(t, -3)
  return [
    {
      id: 't1',
      title: 'Kickoff & discovery',
      start: addDaysLocal(start, 0),
      end: addDaysLocal(start, 3),
      progress: 100,
      color: CHART_COLORS[0],
    },
    {
      id: 't2',
      title: 'User research interviews',
      start: addDaysLocal(start, 2),
      end: addDaysLocal(start, 7),
      progress: 80,
      color: CHART_COLORS[1],
    },
    {
      id: 't3',
      title: 'Wireframes',
      start: addDaysLocal(start, 6),
      end: addDaysLocal(start, 11),
      progress: 60,
      color: CHART_COLORS[2],
    },
    {
      id: 't4',
      title: 'Visual design pass',
      start: addDaysLocal(start, 10),
      end: addDaysLocal(start, 16),
      progress: 30,
      color: CHART_COLORS[3],
    },
    {
      id: 't5',
      title: 'Backend scaffolding',
      start: addDaysLocal(start, 5),
      end: addDaysLocal(start, 14),
      progress: 50,
      color: CHART_COLORS[4],
    },
    {
      id: 't6',
      title: 'Frontend integration',
      start: addDaysLocal(start, 14),
      end: addDaysLocal(start, 22),
      progress: 10,
      color: CHART_COLORS[0],
    },
    {
      id: 't7',
      title: 'QA + bugfix sprint',
      start: addDaysLocal(start, 21),
      end: addDaysLocal(start, 27),
      progress: 0,
      color: CHART_COLORS[1],
    },
    {
      id: 't8',
      title: 'Launch readiness',
      start: addDaysLocal(start, 26),
      end: addDaysLocal(start, 30),
      progress: 0,
      color: CHART_COLORS[2],
    },
  ]
})()

export function Example() {
  const t = today()
  const [items, setItems] = useState<GanttItem[]>(defaultBaseItems)
  return (
    <Gantt
      items={items}
      scale="days"
      startDate={addDaysLocal(t, -7)}
      endDate={addDaysLocal(t, 35)}
      onItemMove={(id, newStart, newEnd) =>
        setItems((prev) =>
          prev.map((i) =>
            i.id === id ? { ...i, start: newStart, end: newEnd } : i
          )
        )
      }
      onItemResize={(id, newEnd) =>
        setItems((prev) =>
          prev.map((i) => (i.id === id ? { ...i, end: newEnd } : i))
        )
      }
      onItemClick={(item) => console.log('clicked', item.id)}
    />
  )
}