"use client";

import { Clock } from "lucide-react";

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { useT } from "@/lib/i18n";
import { ROLE_LABELS, type Role } from "@/lib/auth";
import type { OrderEvent } from "@/lib/order/types";
import { SectionHeader } from "./section-header";

interface TimelineSectionProps {
  events: OrderEvent[];
  timelineRef?: React.RefObject<HTMLDivElement | null>;
}

const EVENT_TYPE_STYLES: Record<OrderEvent["type"], string> = {
  order_created: "bg-blue-500",
  stage_change: "bg-primary",
  driver_assigned: "bg-cyan-500",
  item_updated: "bg-amber-500",
  payment_updated: "bg-green-500",
  note_updated: "bg-muted-foreground",
  driver_pickup: "bg-violet-500",
  driver_on_the_way: "bg-violet-600",
  driver_arrived: "bg-violet-700",
  driver_delivered: "bg-green-600",
};

function formatEventTime(iso: string): string {
  return new Date(iso).toLocaleTimeString("en-GB", {
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
  });
}

function parseActor(actor: string): { role: string; name: string } {
  const [role, ...rest] = actor.split(":");
  return { role, name: rest.join(":") };
}

export function TimelineSection({ events, timelineRef }: TimelineSectionProps) {
  const t = useT();
  const sorted = [...events].sort((a, b) => new Date(b.at).getTime() - new Date(a.at).getTime());

  return (
    <Collapsible defaultOpen>
      <CollapsibleTrigger className="w-full">
        <SectionHeader icon={Clock} label={`${t.sec_timeline} (${events.length})`} />
      </CollapsibleTrigger>
      <CollapsibleContent>
        <div ref={timelineRef} className="px-3 py-2">
          {sorted.length === 0 ? (
            <p className="text-[12px] text-muted-foreground italic">No events yet</p>
          ) : (
            <ol className="relative border-l border-muted ml-2 space-y-3">
              {sorted.map((event, i) => {
                const { role, name } = parseActor(event.actor);
                const dotColor = EVENT_TYPE_STYLES[event.type] ?? "bg-muted-foreground";
                return (
                  <li key={`${event.at}-${i}`} className="pl-4">
                    <span
                      className={`absolute -left-1 mt-1 size-2 rounded-full ${dotColor}`}
                      style={{ top: "auto" }}
                    />
                    <div className="text-[12px]">
                      <div className="flex items-center gap-2">
                        <span className="font-medium">{event.label}</span>
                      </div>
                      <div className="mt-0.5 flex gap-2 text-muted-foreground text-[11px]">
                        <span>{name}</span>
                        <span>·</span>
                        <span>{ROLE_LABELS[role as Role] ?? role}</span>
                        <span>·</span>
                        <span>{formatEventTime(event.at)}</span>
                      </div>
                    </div>
                  </li>
                );
              })}
            </ol>
          )}
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}