import { Fragment } from 'react';
import { ChevronDown } from 'lucide-react';
import { useFormatPrefs, formatDate } from '@/lib/date';
import { Badge } from '@/components/ui/badge';
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbList,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { ProjectTimeline, type TimelineEvent } from './ProjectTimeline';

export interface ProjectGroup {
  projectId: string | null;
  projectName: string;
  projectStatus: string;
  breadcrumb: string[];
  events: TimelineEvent[];
  startDate: Date;
  endDate: Date;
}

export function ProjectTimelineBox({
  group,
  open,
  onOpenChange,
  onToggleComplete,
  onDelete,
  onEdit,
  onDuplicate,
  onMove,
}: {
  group: ProjectGroup;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  onToggleComplete?: (id: string, current: number) => void;
  onDelete?: (id: string) => void;
  onEdit?: (event: TimelineEvent) => void;
  onDuplicate?: (event: TimelineEvent) => void;
  onMove?: (id: string, date: number, endDate: number | null) => void;
}) {
  const prefs = useFormatPrefs();
  const dates = group.events.flatMap((e) => e.endDate ? [e.date, e.endDate] : [e.date]);
  const minDate = Math.min(...dates);
  const maxDate = Math.max(...dates);

  return (
    <Collapsible open={open} onOpenChange={onOpenChange} defaultOpen>
      <div className="border rounded-lg overflow-hidden">
        <CollapsibleTrigger asChild>
          <button
            type="button"
            className="w-full flex items-center justify-between px-5 pt-5 pb-3 text-left hover:bg-muted/40 transition-colors data-[state=closed]:pb-5"
          >
            <div className="flex items-center gap-2 min-w-0">
              <ChevronDown className="size-4 text-muted-foreground shrink-0 transition-transform duration-200 [[data-state=closed]_&]:-rotate-90" />
              <div className="flex flex-col gap-0.5 min-w-0">
                {group.breadcrumb.length > 0 ? (
                  <Breadcrumb>
                    <BreadcrumbList>
                      {group.breadcrumb.map((segment, i) => (
                        <Fragment key={i}>
                          {i > 0 && <BreadcrumbSeparator />}
                          <BreadcrumbItem>
                            <span className="text-muted-foreground text-xs">{segment}</span>
                          </BreadcrumbItem>
                        </Fragment>
                      ))}
                      <BreadcrumbSeparator />
                      <BreadcrumbItem>
                        <span className="text-foreground text-xs font-medium">{group.projectName}</span>
                      </BreadcrumbItem>
                    </BreadcrumbList>
                  </Breadcrumb>
                ) : (
                  <h3 className="text-base font-semibold">{group.projectName}</h3>
                )}
              </div>
            </div>
            <div className="flex items-center gap-2 shrink-0 ml-4">
              <span className="text-xs text-muted-foreground">
                {formatDate(minDate, prefs).toUpperCase()} — {formatDate(maxDate, prefs).toUpperCase()}
              </span>
              {group.projectStatus === 'archived' && (
                <Badge variant="outline" className="text-[10px]">Archived</Badge>
              )}
            </div>
          </button>
        </CollapsibleTrigger>

        <CollapsibleContent className="px-5 pb-5">
          <ProjectTimeline
            events={group.events}
            startDate={group.startDate}
            endDate={group.endDate}
            onToggleComplete={onToggleComplete}
            onDelete={onDelete}
            onEdit={onEdit}
            onDuplicate={onDuplicate}
            onMove={onMove}
          />
        </CollapsibleContent>
      </div>
    </Collapsible>
  );
}
