/** Workspace detail page — primary work surface. */

import { useState } from "react";
import { useParams } from "react-router-dom";
import { useWorkspaces } from "../hooks/use-workspaces";
import { useMobileViewport } from "../hooks/use-mobile-viewport";
import { WorkspaceDetailHeader } from "../components/features/workspace/workspace-detail-header";
import {
	WorkspaceMobileTabBar,
	WorkspaceTabBar,
	type WorkspaceTab,
} from "../components/features/workspace/workspace-tab-bar";
import { WorkspaceFilePanel } from "../components/features/workspace/workspace-file-panel";
import { WorkspaceGitPanel } from "../components/features/workspace/workspace-git-panel";
import { WorkspaceToolsPanel } from "../components/features/workspace/workspace-tools-panel";
import { WorkspaceSettingsPanel } from "../components/features/workspace/workspace-settings-panel";

export function WorkspaceDetailPage() {
	const { workspaceId } = useParams<{ workspaceId: string }>();
	const [activeTab, setActiveTab] = useState<WorkspaceTab>("files");
	const isMobile = useMobileViewport();

	const { workspaces, loading: wsLoading } = useWorkspaces();
	const workspace = workspaces.find((w) => w.id === workspaceId);

	if (wsLoading) {
		return <div className="loading-state">Loading workspace...</div>;
	}

	if (!workspace) {
		return (
			<div className="empty-state">
				<h2>Workspace not found</h2>
				<p>The workspace you are looking for does not exist.</p>
			</div>
		);
	}

	return (
		<div className={`workspace-detail ${isMobile ? "mobile" : ""}`}>
			<WorkspaceDetailHeader workspace={workspace} />
			<WorkspaceTabBar active={activeTab} onChange={setActiveTab} />
			<div className="workspace-content">
				{activeTab === "files" && (
					<WorkspaceFilePanel workspaceId={workspace.id} />
				)}
				{activeTab === "git" && (
					<WorkspaceGitPanel workspaceId={workspace.id} />
				)}
				{activeTab === "tools" && (
					<WorkspaceToolsPanel workspace={workspace} />
				)}
				{activeTab === "settings" && (
					<WorkspaceSettingsPanel workspace={workspace} />
				)}
			</div>
			{isMobile && (
				<WorkspaceMobileTabBar active={activeTab} onChange={setActiveTab} />
			)}
		</div>
	);
}