import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { FileText, Search } from "lucide-react";
import { cn, getInitials } from "@/lib/utils";
import { getSpeakerColor } from "../components/admin-detail-constants";
import { type AdminMeetingDetail } from "@/lib/api/admin.api";

interface TranscriptTabProps {
  meeting: AdminMeetingDetail;
  searchTerm: string;
  setSearchTerm: (term: string) => void;
  filteredTranscript: Array<{ timestamp: string; speaker: string; text: string }>;
  uniqueSpeakers: string[];
}

export function TranscriptTab({
  meeting,
  searchTerm,
  setSearchTerm,
  filteredTranscript,
  uniqueSpeakers,
}: TranscriptTabProps) {
  return (
    <Card>
      <CardHeader className="pb-3 border-b border-gray-100 dark:border-gray-800">
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
          <CardTitle className="flex items-center gap-2 text-base">
            <FileText className="h-4 w-4 text-red-500" />
            Transcript Preview
          </CardTitle>
          <div className="relative max-w-sm w-full">
            <span className="absolute inset-y-0 left-3 flex items-center text-gray-400">
              <Search className="h-4 w-4" />
            </span>
            <input
              type="text"
              placeholder="Search transcript..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full rounded-md border border-gray-200 bg-white py-1.5 pl-9 pr-4 text-sm text-gray-900 placeholder-gray-400 focus:border-red-500 focus:outline-none dark:border-gray-800 dark:bg-gray-950 dark:text-gray-100 dark:focus:border-red-500"
            />
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-4 max-h-[600px] overflow-y-auto pr-2 custom-scrollbar pt-4">
        {filteredTranscript.length > 0 ? (
          filteredTranscript.map((line, idx) => {
            const colors = getSpeakerColor(line.speaker, uniqueSpeakers);
            return (
              <div
                key={`${line.timestamp}-${line.speaker}-${idx}`}
                className={cn(
                  "group flex items-start gap-3 rounded-lg border p-4 transition-all duration-200 hover:shadow-sm",
                  colors.bg,
                  colors.border
                )}
              >
                <div
                  className={cn(
                    "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-semibold shadow-sm border",
                    colors.text,
                    colors.bg,
                    colors.border
                  )}
                >
                  {getInitials(line.speaker)}
                </div>
                <div className="min-w-0 flex-1 space-y-1">
                  <div className="flex items-center justify-between gap-2">
                    <span className={cn("text-xs font-bold", colors.text)}>{line.speaker}</span>
                    <span className="font-mono text-[10px] text-gray-400 bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded">
                      {line.timestamp}
                    </span>
                  </div>
                  <p className="text-sm leading-6 text-gray-800 dark:text-gray-200">{line.text}</p>
                </div>
              </div>
            );
          })
        ) : (
          <div className="flex flex-col items-center justify-center py-12 text-center text-gray-500">
            <p className="text-sm font-medium">No matches found</p>
            <p className="text-xs text-gray-400 mt-1">Try searching for a different word or phrase.</p>
          </div>
        )}
      </CardContent>
    </Card>
  );
}