/** Workspaces list page. */

import { useState } from "react";
import { Icon } from "../components/icon";
import { useMobileViewport } from "../hooks/use-mobile-viewport";
import { useWorkspaces } from "../hooks/use-workspaces";
import { useWorkspaceActions } from "../hooks/use-workspace-actions";
import { WorkspaceCard } from "../components/features/workspace/workspace-card";
import { WorkspaceCreateForm } from "../components/features/workspace/workspace-create-form";
import { MobileDetailView } from "../components/features/mobile/mobile-detail-view";
import { MobileFAB } from "../components/features/mobile/mobile-fab";
import { ToolStarter } from "../components/features/tool/tool-starter";
import type { Workspace } from "../types/workspace";

type MobileView = "list" | "detail" | "create";

export function WorkspacesPage() {
	const isMobile = useMobileViewport();
	const [mobileView, setMobileView] = useState<MobileView>("list");
	const [selectedWorkspace, setSelectedWorkspace] = useState<Workspace | null>(
		null,
	);
	const [showCreate, setShowCreate] = useState(false);
	const [startWorkspace, setStartWorkspace] = useState<Workspace | null>(null);

	const { workspaces, loading, error, refresh } = useWorkspaces();
	const actions = useWorkspaceActions();
	const handleDelete = async (workspace: Workspace) => {
		await actions.delete(workspace, refresh);
	};

	const handleSync = async (workspace: Workspace) => {
		await actions.sync(
			workspace.project_id,
			workspace.repo_id,
			workspace,
			refresh,
		);
	};

	/* ── Mobile views ── */
	if (isMobile) {
		if (mobileView === "create") {
			return (
				<div className="mobile-page">
					<WorkspaceCreateForm
						onSubmit={async () => {
							setMobileView("list");
							await refresh();
						}}
						onCancel={() => setMobileView("list")}
					/>
				</div>
			);
		}

		if (mobileView === "detail" && selectedWorkspace) {
			const ws = selectedWorkspace;
			return (
				<MobileDetailView
					title={ws.name}
					subtitle={`${ws.project_name} / ${ws.repo_name}`}
					fields={[
						{ label: "Branch", value: ws.branch },
						{ label: "Status", value: ws.status },
						{ label: "Path", value: ws.path },
						{ label: "Instances", value: ws.instance_count },
						{ label: "Last Sync", value: ws.last_sync_at ?? "Never" },
						{ label: "Created", value: ws.created_at },
					]}
					onEdit={() => {
						setStartWorkspace(ws);
					}}
					onDelete={() => {
						void handleDelete(ws);
						setMobileView("list");
						setSelectedWorkspace(null);
					}}
					onBack={() => {
						setMobileView("list");
						setSelectedWorkspace(null);
					}}
				/>
			);
		}

		/* Mobile list view */
		return (
			<div className="mobile-page">
				<div className="mobile-page-header">
					<h1>Workspaces</h1>
					<span className="muted">
						{workspaces.length} workspace{workspaces.length !== 1 ? "s" : ""}
					</span>
				</div>

				{error && <div className="alert alert-error">{error}</div>}

				{loading && workspaces.length === 0 ? (
					<div className="loading-state">Loading workspaces...</div>
				) : (
					<div className="workspaces-grid mobile-workspaces-list">
						{workspaces.map((ws) => (
							<WorkspaceCard
								key={ws.id}
								workspace={ws}
								loading={actions.loadingId === ws.id}
								onStartTool={setStartWorkspace}
								onSync={handleSync}
								onDelete={handleDelete}
							/>
						))}
					</div>
				)}

				<MobileFAB
					onClick={() => setMobileView("create")}
					label="Create workspace"
				/>

				{startWorkspace && (
					<div
						className="modal-overlay"
						onClick={() => setStartWorkspace(null)}
					>
						<div className="modal-content" onClick={(e) => e.stopPropagation()}>
							<h3>Start Tool</h3>
							<ToolStarter
								workspace={startWorkspace}
								onStarted={() => {
									setStartWorkspace(null);
									void refresh();
								}}
								onCancel={() => setStartWorkspace(null)}
							/>
						</div>
					</div>
				)}
			</div>
		);
	}

	/* ── Desktop view ── */
	return (
		<div className="page workspaces-page">
			<header className="page-header">
				<h1>Workspaces</h1>
				<div className="header-actions">
					<button
						className="btn btn-secondary"
						onClick={refresh}
						disabled={loading}
					>
						<Icon name="refresh" size="sm" />
					</button>
					<button
						className="btn btn-primary"
						onClick={() => setShowCreate(true)}
					>
						<Icon name="add" size="sm" /> New Workspace
					</button>
				</div>
			</header>

			{error && <div className="alert alert-error">{error}</div>}

			{showCreate && (
				<WorkspaceCreateForm
					onSubmit={async () => {
						setShowCreate(false);
						await refresh();
					}}
					onCancel={() => setShowCreate(false)}
				/>
			)}

			{loading && workspaces.length === 0 ? (
				<div className="loading-state">Loading workspaces...</div>
			) : workspaces.length === 0 ? (
				<div className="empty-state">
					<p>No workspaces yet.</p>
					<button
						className="btn btn-primary"
						onClick={() => setShowCreate(true)}
					>
						<Icon name="add" size="sm" /> Create your first workspace
					</button>
				</div>
			) : (
				<div className="workspaces-grid">
					{workspaces.map((ws) => (
						<WorkspaceCard
							key={ws.id}
							workspace={ws}
							loading={actions.loadingId === ws.id}
							onStartTool={setStartWorkspace}
							onSync={handleSync}
							onDelete={handleDelete}
						/>
					))}
				</div>
			)}

			{startWorkspace && (
				<div className="modal-overlay" onClick={() => setStartWorkspace(null)}>
					<div className="modal-content" onClick={(e) => e.stopPropagation()}>
						<h3>Start Tool</h3>
						<ToolStarter
							workspace={startWorkspace}
							onStarted={() => {
								setStartWorkspace(null);
								void refresh();
							}}
							onCancel={() => setStartWorkspace(null)}
						/>
					</div>
				</div>
			)}
		</div>
	);
}
