/** Card component for displaying a workspace. */

import { Link } from "react-router-dom";
import { Icon } from "../../icon";
import { WorkspaceInstanceChips } from "./workspace-instance-chips";
import type { Workspace } from "../../../types/workspace";

export interface WorkspaceCardProps {
	workspace: Workspace;
	loading?: boolean;
	onStartTool: (workspace: Workspace) => void;
	onSync: (workspace: Workspace) => void;
	onDelete: (workspace: Workspace) => void;
}

export function WorkspaceCard({
	workspace,
	loading = false,
	onStartTool,
	onSync,
	onDelete,
}: WorkspaceCardProps) {
	const statusClass =
		workspace.status === "ready"
			? "status-ready"
			: workspace.status === "syncing"
				? "status-syncing"
				: "status-error";

	return (
		<article className={`card workspace-card ${loading ? "loading" : ""}`}>
			<div className="workspace-card-top">
				<Link
					to={`/workspaces/${workspace.id}`}
					className="workspace-title-link"
				>
					<div className="workspace-title-stack">
						<div className="workspace-title-row">
							<h4 className="workspace-name">{workspace.name}</h4>
							<span className={`status-badge ${statusClass}`}>
								{workspace.status}
							</span>
						</div>
						<span className="workspace-project-name">
							<Icon name="projects" size="sm" />
							{workspace.project_name}
						</span>
					</div>
				</Link>
			</div>

			<div className="workspace-card-body">
				<div className="workspace-meta-row">
					<span className="workspace-repo">
						<Icon name="repositories" size="sm" />
						{workspace.repo_name}
					</span>
					<span className="workspace-branch">
						<Icon name="branch" size="sm" />
						{workspace.branch}
					</span>
					{workspace.instance_count > 0 && (
						<span className="workspace-instance-count">
							{workspace.instance_count} tool
							{workspace.instance_count > 1 ? "s" : ""}
						</span>
					)}
				</div>
				<WorkspaceInstanceChips workspaceId={workspace.id} />
			</div>

			<div className="workspace-actions">
				<button
					className="btn btn-primary"
					onClick={() => onStartTool(workspace)}
					disabled={loading}
					title="Start a tool in this workspace"
				>
					<Icon name="play" size="sm" />
					Start Tool
				</button>
				<button
					className="ghost-button"
					onClick={() => onSync(workspace)}
					disabled={loading}
					title="Sync workspace"
				>
					<Icon name="refresh" size="sm" />
				</button>
				<button
					className="ghost-button danger-text"
					onClick={() => onDelete(workspace)}
					disabled={loading}
					title="Delete workspace"
				>
					<Icon name="delete" size="sm" />
				</button>
			</div>
		</article>
	);
}
