import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Video, Mic2, Sparkles, Workflow } from "lucide-react";
import { formatDate } from "@/lib/utils";
import { type AdminMeetingDetail } from "@/lib/api/admin.api";
import { PipelineCard, TimelineRow } from "./MeetingDetailSubComponents";

interface ProcessingTabProps {
  meeting: AdminMeetingDetail;
}

export function ProcessingTab({ meeting }: ProcessingTabProps) {
  return (
    <div className="space-y-4">
      <div className="grid gap-4 md:grid-cols-3">
        <PipelineCard icon={Video} label="Recording" value={meeting.processing.recording} />
        <PipelineCard icon={Mic2} label="Transcript" value={meeting.processing.transcript} />
        <PipelineCard icon={Sparkles} label="Summary" value={meeting.processing.summary} />
      </div>
      <Card>
        <CardHeader className="pb-3 border-b border-gray-100 dark:border-gray-800">
          <CardTitle className="flex items-center gap-2 text-base">
            <Workflow className="h-4 w-4 text-red-500" />
            Webhook events
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3 max-h-[600px] overflow-y-auto pr-2 custom-scrollbar pt-4">
          {meeting.processing.webhooks.length > 0 ? (
            meeting.processing.webhooks.map((webhook) => (
              <TimelineRow
                key={`${webhook.event}-${webhook.time}`}
                title={webhook.event}
                meta={formatDate(webhook.time)}
                status={webhook.status}
              />
            ))
          ) : (
            <p className="text-sm text-gray-500 dark:text-gray-400 italic py-4 text-center">No webhook events recorded.</p>
          )}
        </CardContent>
      </Card>
    </div>
  );
}