'use client';

import { Activity } from 'lucide-react';

import { Card, CardContent } from '@/components/ui/card';
import { pickAppText } from '@/lib/i18n/core';
import { useAppI18n } from '@/lib/i18n/provider';
import type { TaskTimelineCard as TaskTimelineCardView } from '@/types';

import { TaskTimelineCard, type TaskResultAcceptance } from './TaskTimelineCard';

type Props = {
  cards: TaskTimelineCardView[];
  isLive: boolean;
  resultAcceptance?: TaskResultAcceptance;
  reviewTargetId?: string;
};

export function TaskTimeline({ cards, isLive, resultAcceptance, reviewTargetId }: Props) {
  const { locale } = useAppI18n();

  return (
    <section className="space-y-3">
      <div className="flex items-center justify-between gap-3">
        <h2 className="text-base font-semibold">{pickAppText(locale, '时间线', 'Timeline')}</h2>
        {isLive ? (
          <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
            <span className="relative flex h-2 w-2">
              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-75" />
              <span className="relative inline-flex h-2 w-2 rounded-full bg-primary" />
            </span>
            <Activity className="h-3.5 w-3.5" />
            {pickAppText(locale, '实时更新', 'Live')}
          </div>
        ) : null}
      </div>

      {cards.length === 0 ? (
        <Card className="rounded-md border-dashed">
          <CardContent className="p-6 text-sm text-muted-foreground">
            {pickAppText(locale, 'Beaver 正在准备第一步。', 'Beaver is preparing the first step.')}
          </CardContent>
        </Card>
      ) : (
        <div className="space-y-3">
          {cards.map((card) => (
            <TaskTimelineCard key={card.id} card={card} resultAcceptance={resultAcceptance} reviewTargetId={reviewTargetId} />
          ))}
        </div>
      )}
    </section>
  );
}