import { useState } from 'react';
import { Terminal, ChevronUp, ChevronDown } from 'lucide-react';
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { useAutoScroll } from '@/hooks/useAutoScroll';
import { cn } from "@/lib/utils";

interface LogEntry {
    taskId: string;
    log: string;
}

interface RealtimeLogsProps {
    logs: LogEntry[];
    className?: string;
}

export function RealtimeLogs({ logs, className }: RealtimeLogsProps) {
    const [isExpanded, setIsExpanded] = useState(false);
    const logsViewportRef = useAutoScroll(logs.length);

    const toggleExpand = () => {
        setIsExpanded(!isExpanded);
    };

    return (
        <Card className={cn("flex flex-col shadow-sm transition-all duration-300 ease-in-out border-l-4 border-l-primary py-0 gap-0", className, isExpanded ? "h-[300px]" : "h-8")}>
            <div 
                className="flex items-center justify-between px-2 py-1 cursor-pointer hover:bg-muted/50 transition-colors h-8 shrink-0"
                onClick={toggleExpand}
            >
                <div className="flex items-center gap-2 overflow-hidden flex-1">
                    <Terminal className="h-3 w-3 text-muted-foreground shrink-0" />
                    <span className="text-[10px] font-medium text-muted-foreground whitespace-nowrap shrink-0 mr-2">Real-time Logs</span>
                    
                    {/* Preview last log when collapsed */}
                    {!isExpanded && logs.length > 0 && (
                        <div className="flex-1 flex items-center gap-2 overflow-hidden text-[10px] font-mono text-muted-foreground/80">
                            <span className="text-blue-500 shrink-0">[{logs[logs.length - 1].taskId}]</span>
                            <span className="truncate">{logs[logs.length - 1].log}</span>
                        </div>
                    )}
                     {!isExpanded && logs.length === 0 && (
                        <span className="text-[10px] italic text-muted-foreground/50">Waiting for logs...</span>
                    )}
                </div>
                
                <Button variant="ghost" size="icon" className="h-4 w-4 text-muted-foreground hover:text-foreground shrink-0 ml-2">
                    {isExpanded ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
                </Button>
            </div>

            {/* Expanded Content */}
            <div 
                className={cn(
                    "flex-1 bg-muted/10 border-t transition-all duration-300 overflow-hidden",
                    isExpanded ? "opacity-100 visible flex flex-col" : "opacity-0 invisible h-0"
                )}
            >
                 <div ref={logsViewportRef} className="flex-1 min-h-0 overflow-y-auto p-3 font-mono text-[10px] leading-relaxed">
                    <div className="space-y-1">
                        {logs.length === 0 && <span className="text-muted-foreground italic">Waiting for logs...</span>}
                        {logs.map((entry, i) => (
                            <div key={i} className="break-all flex gap-2">
                                <span className="text-blue-500 font-semibold shrink-0 opacity-80">[{entry.taskId}]</span>
                                <span className="text-foreground/90">{entry.log}</span>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </Card>
    );
}

