Shadcn Gantt

"use client"

import { useMemo, useRef, useState } from "react"
import {
  Gantt,
  type GanttApi,
} from "@/components/reui/gantt/gantt"
import type { GanttI18nOverrides } from "@/components/reui/gantt/gantt-i18n"
import {
  GanttNav,
  GanttToolbar,
} from "@/components/reui/gantt/gantt-nav"
import type {
  GanttEvent,
  GanttInteractions,
  GanttResource,
  GanttSlotDraft,
} from "@/components/reui/gantt/gantt-types"
import { GanttView } from "@/components/reui/gantt/gantt-view"
import { addDays, startOfDay, startOfWeek, type Locale } from "date-fns"
import { ar, de, es, fr, ja } from "date-fns/locale"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import {
  RadioGroup,
  RadioGroupItem,
} from "@/components/ui/radio-group"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs"
import { RotateCcwIcon, SettingsIcon } from 'lucide-react'

/**
 * White-label task tree, tall enough that the panes scroll vertically. The
 * Launch group and "Release prep" ship UNSCHEDULED: hover their empty rows
 * and click the hint tile (or drag a range) to schedule them.
 */
const RESOURCES: GanttResource[] = [
  {
    id: "planning",
    title: "Planning",
    children: [
      { id: "brief", title: "Project brief" },
      { id: "scope", title: "Scope review" },
    ],
  },
  {
    id: "design",
    title: "Design",
    children: [
      { id: "wireframes", title: "Wireframes" },
      { id: "visual-design", title: "Visual design" },
    ],
  },
  {
    id: "build",
    title: "Build",
    children: [
      { id: "frontend", title: "Frontend" },
      { id: "backend", title: "Backend" },
      { id: "qa", title: "QA pass" },
      { id: "release-prep", title: "Release prep" },
    ],
  },
  {
    id: "launch",
    title: "Launch",
    children: [
      { id: "docs", title: "Docs" },
      { id: "marketing-site", title: "Marketing site" },
      { id: "announcement", title: "Announcement" },
    ],
  },
]

/** Leaf id -> title, for naming bars scheduled from empty rows. */
const RESOURCE_TITLES = new Map(
  RESOURCES.flatMap((group) => group.children ?? []).map((leaf) => [
    leaf.id,
    leaf.title,
  ])
)

/** Small white-label fixture built around the current week. */
function buildBars(anchor: Date): GanttEvent[] {
  const week = startOfWeek(startOfDay(anchor), { weekStartsOn: 0 })
  const day = (dayOffset: number) => addDays(week, dayOffset)
  const bar = (
    resourceId: string,
    title: string,
    startOffset: number,
    days: number,
    color: string,
    progress?: number
  ): GanttEvent => ({
    id: `bar-${resourceId}`,
    title,
    start: day(startOffset),
    end: day(startOffset + days),
    allDay: true,
    color,
    resourceId,
    progress,
  })

  return [
    bar("brief", "Project brief", -9, 3, "var(--color-blue-500)", 100),
    bar("scope", "Scope review", -6, 2, "var(--color-sky-500)", 100),
    bar("wireframes", "Wireframes", -4, 4, "var(--color-violet-500)", 80),
    bar("visual-design", "Visual design", 0, 5, "var(--color-purple-500)", 35),
    bar("frontend", "Frontend", 3, 7, "var(--color-emerald-500)", 10),
    bar("backend", "Backend", 5, 6, "var(--color-teal-500)"),
    bar("qa", "QA pass", 12, 4, "var(--color-amber-500)"),
  ]
}

/**
 * i18n presets - each language ships a date-fns `locale` (localizes the axis
 * headers, the nav title, and bar date labels; it also drives the default
 * week start, so a German timeline starts Monday) plus an `i18n` override map
 * for the static strings the locale can't reach (Today, the scale names, the
 * schedule hint). Arabic also flips the chart to right-to-left. English is the
 * built-in default, so it leaves both undefined.
 */
interface DemoLocale {
  id: string
  /** Native language name, shown in the picker. */
  label: string
  locale: Locale | undefined
  dir: "ltr" | "rtl"
  i18n: GanttI18nOverrides | undefined
}

const LOCALES: DemoLocale[] = [
  {
    id: "en",
    label: "English",
    locale: undefined,
    dir: "ltr",
    i18n: undefined,
  },
  {
    id: "de",
    label: "Deutsch",
    locale: de,
    dir: "ltr",
    i18n: {
      labels: {
        today: "Heute",
        scheduleHint: "Zum Planen klicken",
        reorder: "Neu anordnen",
        scales: {
          day: "Tag",
          week: "Woche",
          month: "Monat",
          quarter: "Quartal",
          year: "Jahr",
        },
      },
    },
  },
  {
    id: "fr",
    label: "Français",
    locale: fr,
    dir: "ltr",
    i18n: {
      labels: {
        today: "Aujourd'hui",
        scheduleHint: "Cliquer pour planifier",
        reorder: "Réorganiser",
        scales: {
          day: "Jour",
          week: "Semaine",
          month: "Mois",
          quarter: "Trimestre",
          year: "Année",
        },
      },
    },
  },
  {
    id: "es",
    label: "Español",
    locale: es,
    dir: "ltr",
    i18n: {
      labels: {
        today: "Hoy",
        scheduleHint: "Clic para programar",
        reorder: "Reordenar",
        scales: {
          day: "Día",
          week: "Semana",
          month: "Mes",
          quarter: "Trimestre",
          year: "Año",
        },
      },
    },
  },
  {
    id: "ja",
    label: "日本語",
    locale: ja,
    dir: "ltr",
    i18n: {
      labels: {
        today: "今日",
        scheduleHint: "クリックして予定を追加",
        reorder: "並べ替え",
        scales: {
          day: "日",
          week: "週",
          month: "月",
          quarter: "四半期",
          year: "年",
        },
      },
    },
  },
  {
    id: "ar",
    label: "العربية",
    locale: ar,
    dir: "rtl",
    i18n: {
      labels: {
        today: "اليوم",
        scheduleHint: "انقر لإضافة جدول",
        reorder: "إعادة ترتيب",
        scales: {
          day: "يوم",
          week: "أسبوع",
          month: "شهر",
          quarter: "ربع سنوي",
          year: "سنة",
        },
      },
    },
  },
]

/** Display time zones - all timeline math and rendering happen in the chosen
 *  zone, so switching it re-anchors every bar to that zone's calendar days. */
const TIME_ZONES: Array<{ id: string; label: string; value?: string }> = [
  { id: "local", label: "Browser" },
  { id: "ny", label: "New York", value: "America/New_York" },
  { id: "london", label: "London", value: "Europe/London" },
  { id: "tokyo", label: "Tokyo", value: "Asia/Tokyo" },
  { id: "kolkata", label: "Kolkata", value: "Asia/Kolkata" },
]

/** Every toggle's default; the Reset button returns the demo here. */
const SETTINGS_DEFAULTS = {
  rowCheckboxes: true,
  summaryBars: true,
  zoomControl: true,
  offscreenIndicators: true,
  infiniteScroll: true,
  nowIndicator: true,
  offDays: false,
  dragCreate: true,
  displayScheduleHint: true,
  barLabel: "inside" as "inside" | "outside" | "auto",
  timelineLines: "vertical" as "vertical" | "both" | "none",
  interactions: { drag: true, resize: true, selectSlot: true },
  localeId: "en",
  timeZoneId: "local",
}

/** One labeled switch row inside a settings tab. */
function SettingSwitch({
  id,
  label,
  checked,
  onCheckedChange,
}: {
  id: string
  label: string
  checked: boolean
  onCheckedChange: (value: boolean) => void
}) {
  return (
    <div className="flex items-center justify-between gap-4 py-1">
      <Label htmlFor={id} className="font-normal">
        {label}
      </Label>
      <Switch id={id} checked={checked} onCheckedChange={onCheckedChange} />
    </div>
  )
}

/** One labeled radio row inside a settings tab. */
function SettingRadio({
  id,
  value,
  label,
}: {
  id: string
  value: string
  label: string
}) {
  return (
    <div className="flex items-center gap-2 py-0.5">
      <RadioGroupItem value={value} id={id} />
      <Label htmlFor={id} className="font-normal">
        {label}
      </Label>
    </div>
  )
}

/** One labeled select row - the language and time-zone pickers. */
function SettingSelect({
  id,
  label,
  value,
  options,
  onValueChange,
}: {
  id: string
  label: string
  value: string
  options: Array<{ value: string; label: string }>
  onValueChange: (value: string) => void
}) {
  return (
    <div className="flex items-center justify-between gap-4 py-1">
      <Label htmlFor={id} className="font-normal">
        {label}
      </Label>
      <Select value={value} onValueChange={onValueChange}>
        <SelectTrigger id={id} size="sm" className="w-36">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {options.map((option) => (
            <SelectItem key={option.value} value={option.value}>
              {option.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  )
}

interface SettingsMenuProps {
  rowCheckboxes: boolean
  onRowCheckboxesChange: (value: boolean) => void
  summaryBars: boolean
  onSummaryBarsChange: (value: boolean) => void
  zoomControl: boolean
  onZoomControlChange: (value: boolean) => void
  offscreenIndicators: boolean
  onOffscreenIndicatorsChange: (value: boolean) => void
  infiniteScroll: boolean
  onInfiniteScrollChange: (value: boolean) => void
  nowIndicator: boolean
  onNowIndicatorChange: (value: boolean) => void
  offDays: boolean
  onOffDaysChange: (value: boolean) => void
  dragCreate: boolean
  onDragCreateChange: (value: boolean) => void
  displayScheduleHint: boolean
  onDisplayScheduleHintChange: (value: boolean) => void
  barLabel: "inside" | "outside" | "auto"
  onBarLabelChange: (value: "inside" | "outside" | "auto") => void
  timelineLines: "vertical" | "both" | "none"
  onTimelineLinesChange: (value: "vertical" | "both" | "none") => void
  interactions: GanttInteractions
  onInteractionsChange: (value: GanttInteractions) => void
  localeId: string
  onLocaleChange: (value: string) => void
  timeZoneId: string
  onTimeZoneChange: (value: string) => void
  onReset: () => void
}

function SettingsMenu({
  rowCheckboxes,
  onRowCheckboxesChange,
  summaryBars,
  onSummaryBarsChange,
  zoomControl,
  onZoomControlChange,
  offscreenIndicators,
  onOffscreenIndicatorsChange,
  infiniteScroll,
  onInfiniteScrollChange,
  nowIndicator,
  onNowIndicatorChange,
  offDays,
  onOffDaysChange,
  dragCreate,
  onDragCreateChange,
  displayScheduleHint,
  onDisplayScheduleHintChange,
  barLabel,
  onBarLabelChange,
  timelineLines,
  onTimelineLinesChange,
  interactions,
  onInteractionsChange,
  localeId,
  onLocaleChange,
  timeZoneId,
  onTimeZoneChange,
  onReset,
}: SettingsMenuProps) {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" size="sm">
          <SettingsIcon  className="size-4" aria-hidden="true" />
          Settings
        </Button>
      </PopoverTrigger>
      <PopoverContent align="end" className="w-80 p-0">
        {/* Tabs keep every group one screen tall - no menu scrolling */}
        <Tabs defaultValue="display">
          <div className="border-b p-2">
            <TabsList className="grid w-full grid-cols-4">
              <TabsTrigger value="display">Display</TabsTrigger>
              <TabsTrigger value="behavior">Behavior</TabsTrigger>
              <TabsTrigger value="style">Style</TabsTrigger>
              <TabsTrigger value="region">Region</TabsTrigger>
            </TabsList>
          </div>
          <TabsContent value="display" className="space-y-0.5 p-3">
            <SettingSwitch
              id="gantt1-row-checkboxes"
              label="Row checkboxes"
              checked={rowCheckboxes}
              onCheckedChange={onRowCheckboxesChange}
            />
            <SettingSwitch
              id="gantt1-summary-bars"
              label="Summary bars"
              checked={summaryBars}
              onCheckedChange={onSummaryBarsChange}
            />
            <SettingSwitch
              id="gantt1-zoom-control"
              label="Zoom control"
              checked={zoomControl}
              onCheckedChange={onZoomControlChange}
            />
            <SettingSwitch
              id="gantt1-offscreen-chips"
              label="Off-screen chips"
              checked={offscreenIndicators}
              onCheckedChange={onOffscreenIndicatorsChange}
            />
            <SettingSwitch
              id="gantt1-infinite-scroll"
              label="Infinite scroll"
              checked={infiniteScroll}
              onCheckedChange={onInfiniteScrollChange}
            />
            <SettingSwitch
              id="gantt1-now-indicator"
              label="Now indicator"
              checked={nowIndicator}
              onCheckedChange={onNowIndicatorChange}
            />
            <SettingSwitch
              id="gantt1-off-days"
              label="Mark off days"
              checked={offDays}
              onCheckedChange={onOffDaysChange}
            />
          </TabsContent>
          <TabsContent value="behavior" className="space-y-0.5 p-3">
            <SettingSwitch
              id="gantt1-drag"
              label="Drag to move"
              checked={interactions.drag}
              onCheckedChange={(checked) =>
                onInteractionsChange({ ...interactions, drag: checked })
              }
            />
            <SettingSwitch
              id="gantt1-resize"
              label="Resize"
              checked={interactions.resize}
              onCheckedChange={(checked) =>
                onInteractionsChange({ ...interactions, resize: checked })
              }
            />
            <SettingSwitch
              id="gantt1-select-slot"
              label="Select slot"
              checked={interactions.selectSlot}
              onCheckedChange={(checked) =>
                onInteractionsChange({ ...interactions, selectSlot: checked })
              }
            />
            <SettingSwitch
              id="gantt1-drag-create"
              label="Drag to create"
              checked={dragCreate}
              onCheckedChange={onDragCreateChange}
            />
            <SettingSwitch
              id="gantt1-schedule-hint"
              label="Schedule hint"
              checked={displayScheduleHint}
              onCheckedChange={onDisplayScheduleHintChange}
            />
          </TabsContent>
          <TabsContent value="style" className="space-y-4 p-3">
            <div className="space-y-1.5">
              <div className="text-muted-foreground text-xs font-medium">
                Bar label
              </div>
              <RadioGroup
                value={barLabel}
                onValueChange={(value) =>
                  onBarLabelChange(value as "inside" | "outside" | "auto")
                }
              >
                <SettingRadio
                  id="gantt1-label-inside"
                  value="inside"
                  label="Inside"
                />
                <SettingRadio
                  id="gantt1-label-outside"
                  value="outside"
                  label="Outside"
                />
                <SettingRadio
                  id="gantt1-label-auto"
                  value="auto"
                  label="Auto"
                />
              </RadioGroup>
            </div>
            <div className="space-y-1.5">
              <div className="text-muted-foreground text-xs font-medium">
                Grid lines
              </div>
              <RadioGroup
                value={timelineLines}
                onValueChange={(value) =>
                  onTimelineLinesChange(value as "vertical" | "both" | "none")
                }
              >
                <SettingRadio
                  id="gantt1-lines-vertical"
                  value="vertical"
                  label="Vertical"
                />
                <SettingRadio
                  id="gantt1-lines-both"
                  value="both"
                  label="Both"
                />
                <SettingRadio
                  id="gantt1-lines-none"
                  value="none"
                  label="None"
                />
              </RadioGroup>
            </div>
          </TabsContent>
          <TabsContent value="region" className="space-y-2 p-3">
            <SettingSelect
              id="gantt1-language"
              label="Language"
              value={localeId}
              options={LOCALES.map((entry) => ({
                value: entry.id,
                label: entry.label,
              }))}
              onValueChange={onLocaleChange}
            />
            <SettingSelect
              id="gantt1-timezone"
              label="Time zone"
              value={timeZoneId}
              options={TIME_ZONES.map((entry) => ({
                value: entry.id,
                label: entry.label,
              }))}
              onValueChange={onTimeZoneChange}
            />
            <p className="text-muted-foreground text-xs leading-relaxed">
              Language switches the date-fns locale, the scale names, and the
              week start. Time zone re-anchors every bar. Arabic also flips the
              chart to right-to-left.
            </p>
          </TabsContent>
        </Tabs>
        <div className="border-t p-2">
          <Button
            variant="outline"
            size="sm"
            className="w-full"
            onClick={onReset}
          >
            <RotateCcwIcon  className="size-3.5" aria-hidden="true" />
            Reset to defaults
          </Button>
        </div>
      </PopoverContent>
    </Popover>
  )
}

export function Pattern() {
  const bars = useMemo(() => buildBars(new Date()), [])
  const apiRef = useRef<GanttApi | null>(null)
  const [rowCheckboxes, setRowCheckboxes] = useState(
    SETTINGS_DEFAULTS.rowCheckboxes
  )
  const [summaryBars, setSummaryBars] = useState(SETTINGS_DEFAULTS.summaryBars)
  const [zoomControl, setZoomControl] = useState(SETTINGS_DEFAULTS.zoomControl)
  const [offscreenIndicators, setOffscreenIndicators] = useState(
    SETTINGS_DEFAULTS.offscreenIndicators
  )
  const [infiniteScroll, setInfiniteScroll] = useState(
    SETTINGS_DEFAULTS.infiniteScroll
  )
  const [nowIndicator, setNowIndicator] = useState(
    SETTINGS_DEFAULTS.nowIndicator
  )
  const [offDays, setOffDays] = useState(SETTINGS_DEFAULTS.offDays)
  const [dragCreate, setDragCreate] = useState(SETTINGS_DEFAULTS.dragCreate)
  const [displayScheduleHint, setDisplayScheduleHint] = useState(
    SETTINGS_DEFAULTS.displayScheduleHint
  )
  const [barLabel, setBarLabel] = useState<"inside" | "outside" | "auto">(
    SETTINGS_DEFAULTS.barLabel
  )
  const [timelineLines, setTimelineLines] = useState<
    "vertical" | "both" | "none"
  >(SETTINGS_DEFAULTS.timelineLines)
  const [interactions, setInteractions] = useState<GanttInteractions>(
    SETTINGS_DEFAULTS.interactions
  )
  const [localeId, setLocaleId] = useState(SETTINGS_DEFAULTS.localeId)
  const [timeZoneId, setTimeZoneId] = useState(SETTINGS_DEFAULTS.timeZoneId)

  const activeLocale =
    LOCALES.find((entry) => entry.id === localeId) ?? LOCALES[0]
  const activeTimeZone =
    TIME_ZONES.find((entry) => entry.id === timeZoneId) ?? TIME_ZONES[0]

  const resetSettings = () => {
    setRowCheckboxes(SETTINGS_DEFAULTS.rowCheckboxes)
    setSummaryBars(SETTINGS_DEFAULTS.summaryBars)
    setZoomControl(SETTINGS_DEFAULTS.zoomControl)
    setOffscreenIndicators(SETTINGS_DEFAULTS.offscreenIndicators)
    setInfiniteScroll(SETTINGS_DEFAULTS.infiniteScroll)
    setNowIndicator(SETTINGS_DEFAULTS.nowIndicator)
    setOffDays(SETTINGS_DEFAULTS.offDays)
    setDragCreate(SETTINGS_DEFAULTS.dragCreate)
    setDisplayScheduleHint(SETTINGS_DEFAULTS.displayScheduleHint)
    setBarLabel(SETTINGS_DEFAULTS.barLabel)
    setTimelineLines(SETTINGS_DEFAULTS.timelineLines)
    setInteractions(SETTINGS_DEFAULTS.interactions)
    setLocaleId(SETTINGS_DEFAULTS.localeId)
    setTimeZoneId(SETTINGS_DEFAULTS.timeZoneId)
  }

  // Unscheduled rows accept ONE schedule: the hint tile (or a drag-create
  // range) proposes a slot, and the handler turns it into a real bar.
  const canSelectSlot = (slot: GanttSlotDraft) =>
    !!slot.resourceId &&
    !(apiRef.current?.getEvents() ?? []).some(
      (event) => event.resourceId === slot.resourceId
    )
  const handleSelectSlot = (slot: GanttSlotDraft) => {
    const api = apiRef.current
    if (!api || !slot.resourceId) return
    api.addEvent({
      id: `scheduled-${slot.resourceId}`,
      title: RESOURCE_TITLES.get(slot.resourceId) ?? "New schedule",
      start: slot.start,
      end: slot.end,
      allDay: true,
      color: "var(--color-indigo-500)",
      resourceId: slot.resourceId,
    })
  }

  return (
    <div className="w-full p-4" dir={activeLocale.dir}>
      <Card className="w-full py-0">
        <CardContent className="p-0">
          <Gantt
            defaultEvents={bars}
            resources={RESOURCES}
            defaultScale="month"
            apiRef={apiRef}
            locale={activeLocale.locale}
            i18n={activeLocale.i18n}
            timeZone={activeTimeZone.value}
            treePanel={{ width: 200 }}
            rowCheckboxes={rowCheckboxes}
            summaryBars={summaryBars}
            zoomControl={zoomControl}
            offscreenIndicators={offscreenIndicators}
            infiniteScroll={infiniteScroll}
            nowIndicator={nowIndicator}
            offDays={offDays}
            dragCreate={dragCreate}
            displayScheduleHint={displayScheduleHint}
            barLabel={barLabel}
            timelineLines={timelineLines}
            interactions={interactions}
            onInteractionsChange={setInteractions}
            canSelectSlot={canSelectSlot}
            onSelectSlot={handleSelectSlot}
            className="h-[520px] w-full"
          >
            {/* one bordered header row, same look as the plain GanttNav:
                the row owns the border and end padding so the toolbar never
                sits glued to the edge */}
            <div className="flex flex-wrap items-center gap-2 border-b pe-3">
              <GanttNav className="min-w-0 flex-1 border-b-0" />
              <GanttToolbar>
                <SettingsMenu
                  rowCheckboxes={rowCheckboxes}
                  onRowCheckboxesChange={setRowCheckboxes}
                  summaryBars={summaryBars}
                  onSummaryBarsChange={setSummaryBars}
                  zoomControl={zoomControl}
                  onZoomControlChange={setZoomControl}
                  offscreenIndicators={offscreenIndicators}
                  onOffscreenIndicatorsChange={setOffscreenIndicators}
                  infiniteScroll={infiniteScroll}
                  onInfiniteScrollChange={setInfiniteScroll}
                  nowIndicator={nowIndicator}
                  onNowIndicatorChange={setNowIndicator}
                  offDays={offDays}
                  onOffDaysChange={setOffDays}
                  dragCreate={dragCreate}
                  onDragCreateChange={setDragCreate}
                  displayScheduleHint={displayScheduleHint}
                  onDisplayScheduleHintChange={setDisplayScheduleHint}
                  barLabel={barLabel}
                  onBarLabelChange={setBarLabel}
                  timelineLines={timelineLines}
                  onTimelineLinesChange={setTimelineLines}
                  interactions={interactions}
                  onInteractionsChange={setInteractions}
                  localeId={localeId}
                  onLocaleChange={setLocaleId}
                  timeZoneId={timeZoneId}
                  onTimeZoneChange={setTimeZoneId}
                  onReset={resetSettings}
                />
              </GanttToolbar>
            </div>
            <GanttView />
          </Gantt>
        </CardContent>
      </Card>
    </div>
  )
}

"use client"

import { useMemo, useRef, useState } from "react"
import {
  Gantt,
  type GanttApi,
} from "@/components/reui/gantt/gantt"
import {
  GanttNav,
  GanttToolbar,
} from "@/components/reui/gantt/gantt-nav"
import type {
  GanttEvent,
  GanttResource,
} from "@/components/reui/gantt/gantt-types"
import { GanttView } from "@/components/reui/gantt/gantt-view"
import { addDays, startOfDay, startOfWeek } from "date-fns"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { PlusIcon } from 'lucide-react'

/**
 * Yearly roadmap: each workstream is a swimlane group and its multi-month
 * initiatives are the bars. The Backlog group ships with empty rows - the
 * toolbar button schedules the next one onto the timeline.
 */
const RESOURCES: GanttResource[] = [
  {
    id: "platform",
    title: "Platform",
    children: [
      { id: "auth-revamp", title: "Auth Revamp" },
      { id: "api-v2", title: "API v2" },
    ],
  },
  {
    id: "growth",
    title: "Growth",
    children: [
      { id: "onboarding", title: "Onboarding Flow" },
      { id: "referrals", title: "Referral Program" },
    ],
  },
  {
    id: "design-system",
    title: "Design System",
    children: [
      { id: "tokens", title: "Design Tokens" },
      { id: "components", title: "Component Library" },
    ],
  },
  {
    id: "backlog",
    title: "Backlog",
    children: [
      { id: "search", title: "Search Revamp" },
      { id: "billing", title: "Billing v2" },
      { id: "mobile", title: "Mobile App" },
    ],
  },
]

/** Backlog initiatives, scheduled one per click in this order. */
const BACKLOG: Array<{ id: string; title: string; color: string }> = [
  { id: "search", title: "Search Revamp", color: "var(--color-rose-500)" },
  { id: "billing", title: "Billing v2", color: "var(--color-amber-500)" },
  { id: "mobile", title: "Mobile App", color: "var(--color-cyan-500)" },
]

/** Roadmap fixture - initiatives span months so the quarter axis has something
 *  to show, and offsets straddle today so both past and future are visible. */
function buildBars(anchor: Date): GanttEvent[] {
  const week = startOfWeek(startOfDay(anchor), { weekStartsOn: 0 })
  const day = (dayOffset: number) => addDays(week, dayOffset)
  const bar = (
    resourceId: string,
    title: string,
    startOffset: number,
    days: number,
    color: string,
    progress?: number
  ): GanttEvent => ({
    id: `bar-${resourceId}`,
    title,
    start: day(startOffset),
    end: day(startOffset + days),
    allDay: true,
    color,
    resourceId,
    progress,
  })

  return [
    bar("auth-revamp", "Auth Revamp", -30, 60, "var(--color-blue-500)", 100),
    bar("api-v2", "API v2", 20, 90, "var(--color-sky-500)", 30),
    bar(
      "onboarding",
      "Onboarding Flow",
      -20,
      60,
      "var(--color-emerald-500)",
      80
    ),
    bar("referrals", "Referral Program", 50, 90, "var(--color-teal-500)", 0),
    bar("tokens", "Design Tokens", -60, 70, "var(--color-violet-500)", 100),
    bar(
      "components",
      "Component Library",
      0,
      120,
      "var(--color-purple-500)",
      45
    ),
  ]
}

export function Pattern() {
  const bars = useMemo(() => buildBars(new Date()), [])
  const apiRef = useRef<GanttApi | null>(null)
  // How many backlog initiatives have been scheduled so far.
  const [scheduled, setScheduled] = useState(0)

  // Schedule the next unscheduled backlog initiative onto its (empty) row.
  // The "next" one is derived from the live events, not a captured counter,
  // so it stays correct even if the button is clicked in quick succession.
  const addInitiative = () => {
    const api = apiRef.current
    if (!api) return
    const scheduledIds = new Set(api.getEvents().map((event) => event.id))
    const index = BACKLOG.findIndex(
      (item) => !scheduledIds.has(`bar-${item.id}`)
    )
    if (index === -1) return
    const item = BACKLOG[index]
    const week = startOfWeek(startOfDay(new Date()), { weekStartsOn: 0 })
    // Land the scheduled bars in the near-future part of the current quarter so
    // each one is visible the moment it drops onto its row.
    const start = addDays(week, 12 + index * 20)
    api.addEvent({
      id: `bar-${item.id}`,
      title: item.title,
      start,
      end: addDays(start, 24),
      allDay: true,
      color: item.color,
      resourceId: item.id,
    })
    setScheduled((count) => count + 1)
  }

  return (
    <div className="w-full p-4">
      <Card className="w-full py-0">
        <CardContent className="p-0">
          <Gantt
            defaultEvents={bars}
            resources={RESOURCES}
            defaultScale="quarter"
            apiRef={apiRef}
            treePanel={{ width: 200 }}
            className="h-[480px] w-full"
          >
            <div className="flex flex-wrap items-center gap-2 border-b pe-3">
              <GanttNav className="min-w-0 flex-1 border-b-0" />
              <GanttToolbar>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={addInitiative}
                  disabled={scheduled >= BACKLOG.length}
                >
                  <PlusIcon  className="size-4" aria-hidden="true" />
                  Add to roadmap
                </Button>
              </GanttToolbar>
            </div>
            {/* Parent workstream rows carry no bars - summaryBars rolls up the
                child initiatives into one envelope on the group row. */}
            <GanttView />
          </Gantt>
        </CardContent>
      </Card>
    </div>
  )
}

"use client"

import { useMemo, useRef } from "react"
import {
  Gantt,
  type GanttApi,
} from "@/components/reui/gantt/gantt"
import {
  GanttNav,
  GanttToolbar,
} from "@/components/reui/gantt/gantt-nav"
import type {
  GanttEvent,
  GanttResource,
} from "@/components/reui/gantt/gantt-types"
import { GanttView } from "@/components/reui/gantt/gantt-view"
import { addDays, startOfDay, startOfWeek } from "date-fns"

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { PlusIcon } from 'lucide-react'

/**
 * People-centric capacity board: rows are teammates grouped by squad, and
 * each teammate's bars are the week's assignments. The toolbar drops a fresh
 * assignment onto the next teammate, so a person can hold several at once.
 */
const RESOURCES: GanttResource[] = [
  {
    id: "product-squad",
    title: "Product Squad",
    children: [
      { id: "ada", title: "Ada Lovelace" },
      { id: "alan", title: "Alan Turing" },
    ],
  },
  {
    id: "design-squad",
    title: "Design Squad",
    children: [
      { id: "grace", title: "Grace Hopper" },
      { id: "linus", title: "Linus Torvalds" },
    ],
  },
]

/** Avatar photo + initials keyed by person id - GanttResource carries no
 *  custom fields, so per-row presentation data lives in a lookup of your own.
 *  The initials show while the image loads or if it fails. */
const resourceMeta: Record<string, { initials: string; avatar: string }> = {
  ada: {
    initials: "AL",
    avatar: "https://randomuser.me/api/portraits/women/44.jpg",
  },
  alan: {
    initials: "AT",
    avatar: "https://randomuser.me/api/portraits/men/32.jpg",
  },
  grace: {
    initials: "GH",
    avatar: "https://randomuser.me/api/portraits/women/68.jpg",
  },
  linus: {
    initials: "LT",
    avatar: "https://randomuser.me/api/portraits/men/54.jpg",
  },
}

/** Teammates the new assignments cycle through, and a small pool to name and
 *  color them from. */
const PEOPLE = ["ada", "alan", "grace", "linus"]
const TASK_POOL = [
  { title: "Bug triage", color: "var(--color-amber-500)" },
  { title: "Code review", color: "var(--color-rose-500)" },
  { title: "Spec draft", color: "var(--color-teal-500)" },
  { title: "Pairing", color: "var(--color-indigo-500)" },
]

/** This-week assignments per teammate - day-precise bars for a capacity read
 *  (progress omitted; occupancy, not percent-done, is the point here). */
function buildBars(anchor: Date): GanttEvent[] {
  const week = startOfWeek(startOfDay(anchor), { weekStartsOn: 0 })
  const day = (dayOffset: number) => addDays(week, dayOffset)
  const bar = (
    resourceId: string,
    title: string,
    startOffset: number,
    days: number,
    color: string
  ): GanttEvent => ({
    id: `bar-${resourceId}`,
    title,
    start: day(startOffset),
    end: day(startOffset + days),
    allDay: true,
    color,
    resourceId,
  })

  return [
    bar("ada", "Checkout API", -1, 3, "var(--color-blue-500)"),
    bar("alan", "Search Indexing", 0, 3, "var(--color-sky-500)"),
    bar("grace", "Dashboard Redesign", 1, 3, "var(--color-violet-500)"),
    bar("linus", "Infra Migration", -2, 3, "var(--color-purple-500)"),
  ]
}

export function Pattern() {
  const bars = useMemo(() => buildBars(new Date()), [])
  const apiRef = useRef<GanttApi | null>(null)
  // A ref (not state) counts the adds, so it advances synchronously and stays
  // correct even when the button is clicked several times in a row.
  const addedRef = useRef(0)

  // Add a 2-day assignment to the next teammate in rotation. Successive adds
  // to the same person overlap and stack into extra lanes on that row.
  const addAssignment = () => {
    const api = apiRef.current
    if (!api) return
    const n = addedRef.current++
    const person = PEOPLE[n % PEOPLE.length]
    const task = TASK_POOL[n % TASK_POOL.length]
    const week = startOfWeek(startOfDay(new Date()), { weekStartsOn: 0 })
    const start = addDays(week, (n % 5) + 1)
    api.addEvent({
      id: `bar-extra-${n}`,
      title: task.title,
      start,
      end: addDays(start, 2),
      allDay: true,
      color: task.color,
      resourceId: person,
    })
  }

  return (
    <div className="w-full p-4">
      <Card className="w-full py-0">
        <CardContent className="p-0">
          <Gantt
            defaultEvents={bars}
            resources={RESOURCES}
            defaultScale="week"
            apiRef={apiRef}
            // Weekends shaded so booked working-day capacity is obvious.
            offDays={true}
            treePanel={{ width: 220 }}
            // People rows get an avatar label; group (squad) rows return
            // undefined to keep the default plain-title label.
            renderResourceLabel={({ resource, isGroup }) => {
              if (isGroup) return undefined
              const person = resourceMeta[resource.id]
              return (
                <span className="flex min-w-0 items-center gap-2">
                  <Avatar className="size-5">
                    <AvatarImage src={person?.avatar} alt={resource.title} />
                    <AvatarFallback className="text-[10px]">
                      {person?.initials ?? resource.title.charAt(0)}
                    </AvatarFallback>
                  </Avatar>
                  <span className="truncate">{resource.title}</span>
                </span>
              )
            }}
            className="h-[440px] w-full"
          >
            <div className="flex flex-wrap items-center gap-2 border-b pe-3">
              <GanttNav className="min-w-0 flex-1 border-b-0" />
              <GanttToolbar>
                <Button variant="outline" size="sm" onClick={addAssignment}>
                  <PlusIcon  className="size-4" aria-hidden="true" />
                  Add assignment
                </Button>
              </GanttToolbar>
            </div>
            <GanttView />
          </Gantt>
        </CardContent>
      </Card>
    </div>
  )
}

"use client"

import { useMemo, useRef, useState } from "react"
import { Badge, type BadgeProps } from "@/components/reui/badge"
import {
  Gantt,
  type GanttApi,
  type GanttColumn,
} from "@/components/reui/gantt/gantt"
import {
  GanttNav,
  GanttToolbar,
} from "@/components/reui/gantt/gantt-nav"
import type {
  GanttEvent,
  GanttResource,
} from "@/components/reui/gantt/gantt-types"
import { GanttView } from "@/components/reui/gantt/gantt-view"
import { addDays, startOfDay, startOfWeek } from "date-fns"

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { PlusIcon } from 'lucide-react'

type TaskMeta = { owner: string; status: string }

/** Owner headshots keyed by name. Missing entries (e.g. "Unassigned") fall
 *  back to initials, and the initials also show while the photo loads. */
const OWNER_AVATARS: Record<string, string> = {
  "Ada Lovelace": "https://randomuser.me/api/portraits/women/44.jpg",
  "Grace Hopper": "https://randomuser.me/api/portraits/women/68.jpg",
  "Alan Turing": "https://randomuser.me/api/portraits/men/32.jpg",
  "Linus Torvalds": "https://randomuser.me/api/portraits/men/54.jpg",
  "Katherine Johnson": "https://randomuser.me/api/portraits/women/90.jpg",
  "Margaret Hamilton": "https://randomuser.me/api/portraits/women/12.jpg",
}

/** First + last initial from an owner name, used as the avatar fallback -
 *  "Ada Lovelace" reads "AL", "Unassigned" reads "UN". */
function ownerInitials(name: string) {
  const parts = name.trim().split(/\s+/).filter(Boolean)
  if (parts.length === 0) return "?"
  if (parts.length === 1) return parts[0]!.slice(0, 2).toUpperCase()
  return (parts[0]![0]! + parts[parts.length - 1]![0]!).toUpperCase()
}

/** Status label -> ReUI badge light variant (green done, amber in progress,
 *  neutral not started). */
const STATUS_VARIANT: Record<string, BadgeProps["variant"]> = {
  Done: "success-light",
  "In progress": "warning-light",
  "Not started": "secondary",
}

/**
 * Status report: the left tree panel doubles as a task table with Owner and
 * Status columns beside each phase, every bar carries a progress fill, and the
 * timeline is drag-locked. New tasks are appended as rows from the toolbar.
 */
const INITIAL_RESOURCES: GanttResource[] = [
  {
    id: "planning",
    title: "Planning",
    children: [
      { id: "requirements", title: "Requirements" },
      { id: "design-phase", title: "Design" },
    ],
  },
  {
    id: "build",
    title: "Build",
    children: [
      { id: "frontend", title: "Frontend" },
      { id: "backend", title: "Backend" },
    ],
  },
  {
    id: "launch",
    title: "Launch",
    children: [
      { id: "qa", title: "QA & Testing" },
      { id: "rollout", title: "Rollout" },
    ],
  },
]

/** Owner + status per task, keyed by resource.id - GanttResource has no room
 *  for custom fields, so the extra column data lives in a lookup of your own. */
const INITIAL_META: Record<string, TaskMeta> = {
  requirements: { owner: "Ada Lovelace", status: "Done" },
  "design-phase": { owner: "Grace Hopper", status: "Done" },
  frontend: { owner: "Alan Turing", status: "In progress" },
  backend: { owner: "Linus Torvalds", status: "In progress" },
  qa: { owner: "Katherine Johnson", status: "Not started" },
  rollout: { owner: "Margaret Hamilton", status: "Not started" },
}

/** Status-report fixture - progress descends from finished planning to
 *  not-started launch, and the phases straddle today so the now-line falls
 *  mid-plan. Kept inside a month so every phase reads at a glance. */
function buildBars(anchor: Date): GanttEvent[] {
  const week = startOfWeek(startOfDay(anchor), { weekStartsOn: 0 })
  const day = (dayOffset: number) => addDays(week, dayOffset)
  const bar = (
    resourceId: string,
    title: string,
    startOffset: number,
    days: number,
    color: string,
    progress?: number
  ): GanttEvent => ({
    id: `bar-${resourceId}`,
    title,
    start: day(startOffset),
    end: day(startOffset + days),
    allDay: true,
    color,
    resourceId,
    progress,
  })

  return [
    bar("requirements", "Requirements", -10, 8, "var(--color-blue-500)", 100),
    bar("design-phase", "Design", -8, 8, "var(--color-sky-500)", 100),
    bar("frontend", "Frontend", -2, 10, "var(--color-violet-500)", 60),
    bar("backend", "Backend", 0, 10, "var(--color-purple-500)", 45),
    bar("qa", "QA & Testing", 8, 8, "var(--color-amber-500)", 0),
    bar("rollout", "Rollout", 14, 5, "var(--color-emerald-500)", 0),
  ]
}

export function Pattern() {
  const bars = useMemo(() => buildBars(new Date()), [])
  const apiRef = useRef<GanttApi | null>(null)
  const [resources, setResources] = useState<GanttResource[]>(INITIAL_RESOURCES)
  const [meta, setMeta] = useState<Record<string, TaskMeta>>(INITIAL_META)
  // A ref (not state) numbers each appended task, so ids stay unique even when
  // the button is clicked several times before a re-render.
  const addedRef = useRef(0)

  // Extra tree-panel columns after the pinned name column. Built from meta so
  // appended rows pick up their Owner and Status; group rows return null.
  const columns = useMemo<GanttColumn[]>(
    () => [
      {
        id: "owner",
        title: "Owner",
        width: 130,
        align: "start",
        render: ({ resource, isGroup }) => {
          if (isGroup) return null
          const owner = meta[resource.id]?.owner
          if (!owner) return null
          return (
            <span className="flex min-w-0 items-center gap-2">
              <Avatar className="size-5 shrink-0">
                <AvatarImage src={OWNER_AVATARS[owner]} alt={owner} />
                <AvatarFallback className="text-[10px]">
                  {ownerInitials(owner)}
                </AvatarFallback>
              </Avatar>
              <span className="truncate">{owner}</span>
            </span>
          )
        },
      },
      {
        id: "status",
        title: "Status",
        width: 100,
        align: "start",
        render: ({ resource, isGroup }) => {
          if (isGroup) return null
          const status = meta[resource.id]?.status
          return status ? (
            <Badge variant={STATUS_VARIANT[status] ?? "secondary"} size="sm">
              {status}
            </Badge>
          ) : null
        },
      },
    ],
    [meta]
  )

  // Append a new task as its own row under the Launch phase, register its
  // Owner/Status, and drop a not-started bar on its row.
  const addTask = () => {
    const api = apiRef.current
    if (!api) return
    const n = ++addedRef.current
    const id = `task-${n}`
    setResources((prev) =>
      prev.map((group) =>
        group.id === "launch"
          ? {
              ...group,
              children: [
                ...(group.children ?? []),
                { id, title: `New task ${n}` },
              ],
            }
          : group
      )
    )
    setMeta((prev) => ({
      ...prev,
      [id]: { owner: "Unassigned", status: "Not started" },
    }))
    const week = startOfWeek(startOfDay(new Date()), { weekStartsOn: 0 })
    const start = addDays(week, (n % 6) - 2)
    api.addEvent({
      id: `bar-${id}`,
      title: `New task ${n}`,
      start,
      end: addDays(start, 5),
      allDay: true,
      color: "var(--color-slate-400)",
      resourceId: id,
      progress: 0,
    })
  }

  return (
    <div className="w-full p-4">
      <Card className="w-full py-0">
        <CardContent className="p-0">
          <Gantt
            defaultEvents={bars}
            resources={resources}
            defaultScale="month"
            apiRef={apiRef}
            // Read-only timeline: drag, resize and slot-select are off so the
            // plan can't be shifted by dragging; rows are added via the toolbar.
            defaultInteractions={{
              drag: false,
              resize: false,
              selectSlot: false,
            }}
            columns={columns}
            // Wider tree with a tighter name column so the Owner avatar,
            // owner name and Status all fit alongside the task names.
            treePanel={{ width: 400, nameColumnWidth: 150 }}
            className="h-[500px] w-full"
          >
            <div className="flex flex-wrap items-center gap-2 border-b pe-3">
              <GanttNav className="min-w-0 flex-1 border-b-0" />
              <GanttToolbar>
                <Button variant="outline" size="sm" onClick={addTask}>
                  <PlusIcon  className="size-4" aria-hidden="true" />
                  Add task
                </Button>
              </GanttToolbar>
            </div>
            <GanttView />
          </Gantt>
        </CardContent>
      </Card>
    </div>
  )
}

"use client"

import { useMemo } from "react"
import { Gantt } from "@/components/reui/gantt/gantt"
import { GanttNav } from "@/components/reui/gantt/gantt-nav"
import type {
  GanttEvent,
  GanttResource,
} from "@/components/reui/gantt/gantt-types"
import { GanttView } from "@/components/reui/gantt/gantt-view"
import { addDays, startOfDay, startOfWeek } from "date-fns"

import { Card, CardContent } from "@/components/ui/card"

/** Two-level white-label delivery tree; bars attach to leaf rows by id. A
 * NODE can carry its own plan too: the Implementation group ghosts a band
 * for the window the whole phase was booked into. */
function buildResources(anchor: Date): GanttResource[] {
  const week = startOfWeek(startOfDay(anchor), { weekStartsOn: 0 })
  const day = (dayOffset: number) => addDays(week, dayOffset)
  return [
    {
      id: "discovery",
      title: "Discovery",
      children: [
        { id: "kickoff", title: "Kickoff workshop" },
        { id: "requirements", title: "Requirements" },
      ],
    },
    {
      id: "implementation",
      title: "Implementation",
      baselineStart: day(-3),
      baselineEnd: day(6),
      children: [
        { id: "integration", title: "API integration" },
        { id: "migration", title: "Data migration" },
        { id: "hardening", title: "Security hardening" },
      ],
    },
    {
      id: "launch",
      title: "Launch",
      children: [{ id: "handover", title: "Handover" }],
    },
  ]
}

/** Leaf titles for bar labels, resolved from the tree by id. */
function leafTitles(resources: GanttResource[]): Map<string, string> {
  return new Map(
    resources
      .flatMap((group) => group.children ?? [])
      .map((leaf) => [leaf.id, leaf.title])
  )
}

/** As-built fixture around the current week: frozen plan vs actual dates. */
function buildBars(anchor: Date, titles: Map<string, string>): GanttEvent[] {
  const week = startOfWeek(startOfDay(anchor), { weekStartsOn: 0 })
  const day = (dayOffset: number) => addDays(week, dayOffset)
  // The baseline pair is the plan as it was frozen; start/end is what really
  // happened. Equal baseline instants (plannedDays 0) mark a planned
  // milestone, drawn as a diamond instead of a ghost bar.
  const bar = (
    resourceId: string,
    startOffset: number,
    days: number,
    plannedOffset: number,
    plannedDays: number,
    color: string,
    progress?: number
  ): GanttEvent => ({
    id: `bar-${resourceId}`,
    title: titles.get(resourceId) ?? resourceId,
    start: day(startOffset),
    end: day(startOffset + days),
    baselineStart: day(plannedOffset),
    baselineEnd: day(plannedOffset + plannedDays),
    allDay: true,
    color,
    resourceId,
    progress,
  })

  return [
    // delivered exactly to plan
    bar("kickoff", -9, 2, -9, 2, "var(--color-blue-500)", 100),
    // ran a day over its planned window
    bar("requirements", -7, 4, -7, 3, "var(--color-sky-500)", 100),
    // started a day late and carried the slip through
    bar("integration", -2, 5, -3, 5, "var(--color-violet-500)", 60),
    // tracking a day ahead of plan
    bar("migration", 1, 3, 1, 4, "var(--color-emerald-500)", 30),
    // slipped on both ends
    bar("hardening", 4, 4, 3, 3, "var(--color-teal-500)", 0),
    // planned milestone (diamond) vs the day the handover actually took
    bar("handover", 9, 1, 8, 0, "var(--color-amber-500)"),
  ]
}

export function Pattern() {
  const resources = useMemo(() => buildResources(new Date()), [])
  const bars = useMemo(
    () => buildBars(new Date(), leafTitles(resources)),
    [resources]
  )

  return (
    <div className="w-full p-4">
      <Card className="w-full py-0">
        <CardContent className="p-0">
          {/* baselineBars is on by default: any event carrying baselineStart
              and baselineEnd ghosts its planned window behind the bar, and
              dragging a bar re-times the actual dates while the plan holds
              still. Bars expose data-baseline-variance="early|late|on-time"
              for consumer styling, and the tooltip names the planned range. */}
          <Gantt
            defaultEvents={bars}
            resources={resources}
            defaultScale="month"
            scheduleMode="single"
            treePanel={{ width: 240 }}
            className="h-[480px] w-full"
          >
            <GanttNav />
            <GanttView />
          </Gantt>
        </CardContent>
      </Card>
    </div>
  )
}

"use client"

import { useMemo } from "react"
import { Gantt } from "@/components/reui/gantt/gantt"
import { GanttNav } from "@/components/reui/gantt/gantt-nav"
import type {
  GanttEvent,
  GanttResource,
} from "@/components/reui/gantt/gantt-types"
import { GanttView } from "@/components/reui/gantt/gantt-view"
import { addDays, startOfDay, startOfWeek } from "date-fns"

import { Card, CardContent } from "@/components/ui/card"

/** Two-level white-label rollout tree; bars attach to leaf rows by id. */
const RESOURCES: GanttResource[] = [
  {
    id: "build",
    title: "Build",
    children: [
      { id: "kickoff", title: "Kickoff" },
      { id: "api", title: "API work" },
      { id: "frontend", title: "Frontend" },
      { id: "qa", title: "QA pass" },
    ],
  },
  {
    id: "rollout",
    title: "Rollout",
    children: [
      { id: "staging", title: "Staging deploy" },
      { id: "signoff", title: "Sign-off" },
      { id: "live", title: "Go live" },
    ],
  },
]

/** Leaf titles for bar labels, resolved from the tree by id. */
const RESOURCE_TITLES = new Map(
  RESOURCES.flatMap((group) => group.children ?? []).map((leaf) => [
    leaf.id,
    leaf.title,
  ])
)

/** Chained fixture around the current week: FS arrows plus a milestone gate. */
function buildBars(anchor: Date): GanttEvent[] {
  const week = startOfWeek(startOfDay(anchor), { weekStartsOn: 0 })
  const day = (dayOffset: number) => addDays(week, dayOffset)
  // `dependencies` names PREDECESSOR ids: each arrow runs from that bar's
  // end into this one's start. A zero-length event (days 0) is a MILESTONE
  // and renders as a diamond instead of a bar.
  const bar = (
    resourceId: string,
    startOffset: number,
    days: number,
    color: string,
    dependencies?: string[],
    progress?: number
  ): GanttEvent => ({
    id: `bar-${resourceId}`,
    title: RESOURCE_TITLES.get(resourceId) ?? resourceId,
    start: day(startOffset),
    end: day(startOffset + days),
    allDay: true,
    color,
    resourceId,
    dependencies,
    progress,
  })

  return [
    bar("kickoff", -9, 2, "var(--color-blue-500)", undefined, 100),
    bar("api", -7, 5, "var(--color-sky-500)", ["bar-kickoff"], 80),
    bar("frontend", -4, 5, "var(--color-violet-500)", ["bar-kickoff"], 55),
    // waits on BOTH build tracks, so two arrows land on its start
    bar("qa", 2, 3, "var(--color-purple-500)", ["bar-api", "bar-frontend"], 10),
    bar("staging", 5, 2, "var(--color-emerald-500)", ["bar-qa"]),
    // the gate: a diamond with an arrow in from staging and one out to launch
    bar("signoff", 8, 0, "var(--color-amber-500)", ["bar-staging"]),
    bar("live", 9, 1, "var(--color-teal-500)", ["bar-signoff"]),
  ]
}

export function Pattern() {
  const bars = useMemo(() => buildBars(new Date()), [])

  return (
    <div className="w-full p-4">
      <Card className="w-full py-0">
        <CardContent className="p-0">
          {/* dependencyLines is on by default: any event naming
              `dependencies` gets a finish-to-start arrow from each
              predecessor, drawn under the bars and skipped when either end
              is on a hidden row. Dragging a bar re-anchors its arrows on
              release; the milestone diamond moves like any bar but has no
              resize edges. */}
          <Gantt
            defaultEvents={bars}
            resources={RESOURCES}
            defaultScale="month"
            scheduleMode="single"
            treePanel={{ width: 240 }}
            className="h-[480px] w-full"
          >
            <GanttNav />
            <GanttView />
          </Gantt>
        </CardContent>
      </Card>
    </div>
  )
}