import { Icon } from "../../icon";
import { WorkspaceCreateForm } from "../workspace/workspace-create-form";
import type { ProjectWithRepos, WorkspaceSummary } from "../../../types";

interface Props {
	project: ProjectWithRepos;
	expanded: boolean;
	deleteConfirm: boolean;
	workspaceLoading: string | null;
	showCreateForm: string | null;
	/** Mobile detail mode: shows back button instead of chevron toggle. */
	showBackButton?: boolean;
	onToggle?: () => void;
	onBack?: () => void;
	onEdit: () => void;
	onDelete: () => void;
	onConfirmDelete: () => void;
	onCancelDelete: () => void;
	onCreateWorkspace: (repoId: string) => void;
	onWorkspaceAction: (
		repoId: string,
		workspace: WorkspaceSummary,
		action: "sync" | "delete",
	) => void;
	onAddRepository?: () => void;
	onCancelCreate: () => void;
	onCreated: () => void;
}

export const ProjectCard = ({
	project,
	expanded,
	deleteConfirm,
	workspaceLoading,
	showCreateForm,
	showBackButton = false,
	onToggle,
	onBack,
	onEdit,
	onDelete,
	onConfirmDelete,
	onCancelDelete,
	onCreateWorkspace,
	onWorkspaceAction,
	onAddRepository,
	onCancelCreate,
	onCreated,
}: Props) => {
	return (
		<article className="card project-card">
			<div className="project-info-row">
				{showBackButton ? (
					<button
						className="mobile-detail-back"
						onClick={onBack}
						type="button"
						aria-label="Go back"
					>
						<Icon name="arrow-left" size="md" />
					</button>
				) : (
					<button
						className="project-toggle"
						onClick={onToggle}
						type="button"
						aria-expanded={expanded}
					>
						<Icon
							name={expanded ? "chevron-down" : "chevron-right"}
							size="sm"
						/>
					</button>
				)}
				<div>
					<h3>{project.name}</h3>
					{project.description && (
						<p className="muted project-description">{project.description}</p>
					)}
				</div>
				{!showBackButton && project.repositories?.length > 0 && (
					<span className="repo-count">
						{project.repositories.length} repo
						{project.repositories.length > 1 ? "s" : ""}
					</span>
				)}
				<div className="project-actions">
					<button className="ghost-button" onClick={onEdit} type="button">
						<Icon name="edit" size="sm" /> Edit
					</button>
					{deleteConfirm ? (
						<div className="delete-confirm">
							<span>Are you sure?</span>
							<button
								className="danger-button"
								onClick={onConfirmDelete}
								type="button"
							>
								<Icon name="delete" size="sm" /> Delete
							</button>
							<button
								className="ghost-button"
								onClick={onCancelDelete}
								type="button"
							>
								<Icon name="cancel" size="sm" /> Cancel
							</button>
						</div>
					) : (
						<button
							className="ghost-button danger-text"
							onClick={onDelete}
							type="button"
						>
							<Icon name="delete" size="sm" /> Delete
						</button>
					)}
				</div>
			</div>

			{expanded && (
				<div className="project-detail">
					{(project.repositories || []).length === 0 ? (
						<p className="muted">No repositories yet.</p>
					) : (
						<div className="repo-list">
							{(project.repositories || []).map((repo) => (
								<div key={repo.id} className="repo-block">
									<div className="repo-header">
										<h4>{repo.name}</h4>
										<button
											className="btn btn-sm btn-primary"
											onClick={() => onCreateWorkspace(repo.id)}
											type="button"
										>
											<Icon name="add" size="sm" /> New Workspace
										</button>
									</div>
									{showCreateForm === repo.id && (
										<WorkspaceCreateForm
											defaultProjectId={project.id}
											defaultRepoId={repo.id}
											onSubmit={onCreated}
											onCancel={onCancelCreate}
										/>
									)}
									{repo.workspaces.length === 0 ? (
										<p className="muted">No workspaces.</p>
									) : (
										<div className="workspace-grid">
											{repo.workspaces.map((ws) => (
												<div
													key={ws.id}
													className={`workspace-chip ${ws.status}`}
												>
													<a href={`/workspaces/${ws.id}`}>{ws.name}</a>
													<span className="ws-branch">
														<Icon name="branch" size="sm" /> {ws.branch}
													</span>
													{ws.instance_count > 0 && (
														<span className="ws-instances">
															{ws.instance_count} tool
															{ws.instance_count > 1 ? "s" : ""}
														</span>
													)}
													<div className="ws-actions">
														<button
															type="button"
															disabled={workspaceLoading === ws.id}
															onClick={() =>
																onWorkspaceAction(repo.id, ws, "sync")
															}
														>
															<Icon name="refresh" size="sm" />
														</button>
														<button
															type="button"
															className="danger-text"
															disabled={workspaceLoading === ws.id}
															onClick={() =>
																onWorkspaceAction(repo.id, ws, "delete")
															}
														>
															<Icon name="delete" size="sm" />
														</button>
													</div>
												</div>
											))}
										</div>
									)}
								</div>
							))}
						</div>
					)}
					{onAddRepository && (
						<div className="project-add-repo">
							<button
								className="primary-button"
								onClick={onAddRepository}
								type="button"
							>
								<Icon name="add" size="sm" /> Add Repository
							</button>
						</div>
					)}
				</div>
			)}
		</article>
	);
};
