"use client";

import { AlertCircle, CheckCircle2, Clock, Play, Terminal } from "lucide-react";
import {
	type TerminalLineType,
	useSFWorkspaceState,
} from "@/lib/sf-workspace-store";
import { cn } from "@/lib/utils";

function EventIcon({ type }: { type: TerminalLineType }) {
	const baseClass = "h-4 w-4";
	switch (type) {
		case "system":
			return <Clock className={cn(baseClass, "text-info")} />;
		case "success":
			return <CheckCircle2 className={cn(baseClass, "text-success")} />;
		case "error":
			return <AlertCircle className={cn(baseClass, "text-destructive")} />;
		case "output":
			return <Terminal className={cn(baseClass, "text-foreground")} />;
		case "input":
			return <Play className={cn(baseClass, "text-warning")} />;
		default:
			return <Clock className={cn(baseClass, "text-muted-foreground")} />;
	}
}

export function ActivityView() {
	const workspace = useSFWorkspaceState();
	const terminalLines = workspace.terminalLines ?? [];

	// Show most recent events first
	const reversedLines = [...terminalLines].reverse();

	return (
		<div className="flex h-full flex-col overflow-hidden">
			<div className="border-b border-border px-6 py-3">
				<h1 className="text-lg font-semibold">Activity Log</h1>
				<p className="text-sm text-muted-foreground">
					Execution history and git operations
				</p>
			</div>

			<div className="flex-1 overflow-y-auto">
				{reversedLines.length === 0 ? (
					<div className="py-8 text-center text-sm text-muted-foreground">
						No activity yet. Events will appear here once the workspace is
						active.
					</div>
				) : (
					<div className="relative px-6 py-4">
						{/* Timeline line */}
						<div className="absolute left-10 top-6 bottom-6 w-px bg-border" />

						<div className="space-y-4">
							{reversedLines.map((line) => (
								<div key={line.id} className="relative flex gap-4">
									{/* Timeline dot */}
									<div className="relative z-10 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border border-border bg-card">
										<EventIcon type={line.type} />
									</div>

									{/* Content */}
									<div className="flex-1 pt-0.5">
										<div className="flex items-start justify-between gap-4">
											<div>
												<p className="text-sm font-medium">{line.content}</p>
											</div>
											<span className="flex-shrink-0 font-mono text-xs text-muted-foreground">
												{line.timestamp}
											</span>
										</div>
									</div>
								</div>
							))}
						</div>
					</div>
				)}
			</div>
		</div>
	);
}
