'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;
  showHeader?: boolean;
};

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

  return (
    <section className="space-y-3">
      {showHeader ? (
        <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>
      ) : null}

      {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>
  );
}
