"use client";

import {
	Activity,
	CheckCircle2,
	Circle,
	Clock,
	DollarSign,
	GitBranch,
	Play,
	TrendingDown,
	Zap,
} from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import {
	ActivityCardSkeleton,
	CurrentSliceCardSkeleton,
} from "@/components/sf/loading-skeletons";
import { ProjectWelcome } from "@/components/sf/project-welcome";
import { ScopeBadge } from "@/components/sf/scope-badge";
import { Skeleton } from "@/components/ui/skeleton";
import { authFetch } from "@/lib/auth";
import {
	buildProjectUrl,
	buildPromptCommand,
	formatCost,
	formatDuration,
	formatTokens,
	getCurrentBranch,
	getCurrentScopeLabel,
	getCurrentSlice,
	getLiveAutoDashboard,
	getLiveWorkspaceIndex,
	type TerminalLineType,
	useSFWorkspaceActions,
	useSFWorkspaceState,
	type WorkspaceTerminalLine,
} from "@/lib/sf-workspace-store";
import { cn } from "@/lib/utils";
import type { ProjectTotals } from "@/lib/visualizer-types";
import { executeWorkflowActionInPowerMode } from "@/lib/workflow-action-execution";
import { deriveWorkflowAction } from "@/lib/workflow-actions";
import { getTaskStatus, type ItemStatus } from "@/lib/workspace-status";

/** Interpolate progress bar color from red (0%) through yellow (50%) to green (100%) using oklch. */
function getProgressColor(percent: number): string {
	const p = Math.max(0, Math.min(100, percent));
	// Hue: 25 (red) → 85 (yellow) at 50% → 145 (green) at 100%
	const hue = 25 + (p / 100) * 120;
	return `oklch(0.65 0.16 ${hue.toFixed(1)})`;
}

interface MetricCardProps {
	label: string;
	value: string | null;
	subtext?: string | null;
	icon: React.ReactNode;
}

function MetricCard({ label, value, subtext, icon }: MetricCardProps) {
	return (
		<div className="rounded-md border border-border bg-card p-4">
			<div className="flex items-start justify-between gap-3">
				<div className="min-w-0">
					<p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
						{label}
					</p>
					{value === null ? (
						<>
							<Skeleton className="mt-2 h-7 w-20" />
							<Skeleton className="mt-1.5 h-3 w-16" />
						</>
					) : (
						<>
							<p className="mt-1 truncate text-2xl font-semibold tracking-tight">
								{value}
							</p>
							{subtext && (
								<p className="mt-0.5 truncate text-xs text-muted-foreground">
									{subtext}
								</p>
							)}
						</>
					)}
				</div>
				<div className="shrink-0 rounded-md bg-accent p-2 text-muted-foreground">
					{icon}
				</div>
			</div>
		</div>
	);
}

function taskStatusIcon(status: ItemStatus) {
	switch (status) {
		case "done":
			return <CheckCircle2 className="h-4 w-4 text-muted-foreground" />;
		case "in-progress":
			return <Play className="h-4 w-4 text-foreground" />;
		case "pending":
			return <Circle className="h-4 w-4 text-muted-foreground" />;
	}
}

function activityDotColor(type: TerminalLineType): string {
	switch (type) {
		case "success":
			return "bg-success";
		case "error":
			return "bg-destructive";
		default:
			return "bg-foreground/50";
	}
}

interface DashboardProps {
	onSwitchView?: (view: string) => void;
	onExpandTerminal?: () => void;
}

export function Dashboard({ onSwitchView }: DashboardProps = {}) {
	const state = useSFWorkspaceState();
	const { sendCommand } = useSFWorkspaceActions();
	const boot = state.boot;
	const workspace = getLiveWorkspaceIndex(state);
	const auto = getLiveAutoDashboard(state);
	const bridge = boot?.bridge ?? null;
	const freshness = state.live.freshness;
	const projectCwd = boot?.project.cwd;

	// ── Project-level totals from visualizer API ──
	// Provides fallback metrics when auto-mode is not active (#2709).
	// Same polling pattern as status-bar.tsx.
	const [projectTotals, setProjectTotals] = useState<ProjectTotals | null>(
		null,
	);

	const fetchProjectTotals = useCallback(async () => {
		try {
			const resp = await authFetch(
				buildProjectUrl("/api/visualizer", projectCwd),
			);
			if (!resp.ok) return;
			const json = await resp.json();
			if (json.totals) setProjectTotals(json.totals);
		} catch {
			// Silently ignore — dashboard metrics are non-critical
		}
	}, [projectCwd]);

	useEffect(() => {
		const timeout = window.setTimeout(() => {
			void fetchProjectTotals();
		}, 0);
		const interval = window.setInterval(() => {
			void fetchProjectTotals();
		}, 30_000);
		return () => {
			window.clearTimeout(timeout);
			window.clearInterval(interval);
		};
	}, [fetchProjectTotals]);

	const elapsed = projectTotals?.duration ?? auto?.elapsed ?? 0;
	const totalCost = projectTotals?.cost ?? auto?.totalCost ?? 0;
	const totalTokens = projectTotals?.tokens.total ?? auto?.totalTokens ?? 0;
	const rtkSavings = auto?.rtkSavings ?? null;
	const rtkEnabled = auto?.rtkEnabled === true;

	const currentSlice = getCurrentSlice(workspace);
	const doneTasks = currentSlice?.tasks.filter((t) => t.done).length ?? 0;
	const totalTasks = currentSlice?.tasks.length ?? 0;
	const progressPercent =
		totalTasks > 0 ? Math.round((doneTasks / totalTasks) * 100) : 0;

	const scopeLabel = getCurrentScopeLabel(workspace);
	const branch = getCurrentBranch(workspace);
	const isAutoActive = auto?.active ?? false;
	const currentUnitLabel = auto?.currentUnit?.id ?? scopeLabel;
	const currentUnitFreshness = freshness.auto.stale
		? "stale"
		: freshness.auto.status;

	const workflowAction = deriveWorkflowAction({
		phase: workspace?.active.phase ?? "pre-planning",
		autoActive: auto?.active ?? false,
		autoPaused: auto?.paused ?? false,
		onboardingLocked: boot?.onboarding.locked ?? false,
		commandInFlight: state.commandInFlight,
		bootStatus: state.bootStatus,
		hasMilestones: (workspace?.milestones.length ?? 0) > 0,
		projectDetectionKind: boot?.projectDetection?.kind ?? null,
	});

	const handleWorkflowAction = (command: string) => {
		executeWorkflowActionInPowerMode({
			dispatch: () => sendCommand(buildPromptCommand(command, bridge)),
		});
	};

	const _handlePrimaryAction = () => {
		if (!workflowAction.primary) return;
		handleWorkflowAction(workflowAction.primary.command);
	};

	const recentLines: WorkspaceTerminalLine[] = (
		state.terminalLines ?? []
	).slice(-6);
	const isConnecting =
		state.bootStatus === "idle" || state.bootStatus === "loading";

	const rtkValue = isConnecting
		? null
		: formatTokens(rtkSavings?.savedTokens ?? 0);
	const rtkSubtext = isConnecting
		? null
		: rtkSavings && rtkSavings.commands > 0
			? `${Math.round(rtkSavings.savingsPct)}% saved • ${rtkSavings.commands} cmd${rtkSavings.commands === 1 ? "" : "s"}`
			: "Waiting for shell usage";

	// ─── Project Welcome Gate ───────────────────────────────────────────
	// Show welcome screen for projects that aren't initialized with SF yet
	const detection = boot?.projectDetection;
	const showWelcome =
		!isConnecting &&
		detection &&
		detection.kind !== "active-sf" &&
		detection.kind !== "empty-sf";

	if (showWelcome) {
		return (
			<div className="flex h-full flex-col overflow-hidden">
				<ProjectWelcome
					detection={detection}
					onCommand={(cmd) => handleWorkflowAction(cmd)}
					onSwitchView={(view) => onSwitchView?.(view)}
					disabled={!!state.commandInFlight || boot?.onboarding.locked}
				/>
			</div>
		);
	}

	return (
		<div className="flex h-full flex-col overflow-hidden">
			<div className="flex items-center justify-between border-b border-border px-3 py-2 md:px-6 md:py-3">
				<div className="flex items-center gap-2 min-w-0">
					<h1 className="text-base md:text-lg font-semibold shrink-0">
						Dashboard
					</h1>
					{!isConnecting && scopeLabel && (
						<>
							<span className="hidden sm:inline text-lg font-thin text-muted-foreground select-none">
								/
							</span>
							<span className="hidden sm:inline">
								<ScopeBadge label={scopeLabel} size="sm" />
							</span>
						</>
					)}
					{isConnecting && <Skeleton className="h-4 w-40" />}
				</div>
				<div
					className="flex items-center gap-2 md:gap-3"
					data-testid="dashboard-action-bar"
				>
					{isConnecting ? <Skeleton className="h-8 w-40 rounded-md" /> : null}
					{!isConnecting && (
						<div className="flex items-center gap-2 rounded-md border border-border bg-card px-3 py-1.5 text-sm">
							<span
								className={cn(
									"h-2 w-2 rounded-full",
									isAutoActive
										? "animate-pulse bg-success"
										: "bg-muted-foreground/50",
								)}
							/>
							<span className="font-medium">
								{isAutoActive ? "Auto Mode Active" : "Auto Mode Inactive"}
							</span>
						</div>
					)}
					{!isConnecting && branch && (
						<div className="flex items-center gap-2 text-sm text-muted-foreground">
							<GitBranch className="h-4 w-4" />
							<span className="font-mono">{branch}</span>
						</div>
					)}
				</div>
			</div>

			<div className="flex-1 overflow-y-auto p-3 md:p-6">
				<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5">
					<div
						className="rounded-md border border-border bg-card p-4"
						data-testid="dashboard-current-unit"
					>
						<div className="flex items-start justify-between gap-3">
							<div className="min-w-0">
								<p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
									Current Unit
								</p>
								{isConnecting ? (
									<>
										<Skeleton className="mt-2 h-7 w-20" />
										<Skeleton className="mt-1.5 h-3 w-16" />
									</>
								) : (
									<>
										<div className="mt-2">
											<ScopeBadge label={currentUnitLabel} />
										</div>
										<p
											className="mt-1.5 text-xs text-muted-foreground"
											data-testid="dashboard-current-unit-freshness"
										>
											Auto freshness: {currentUnitFreshness}
										</p>
									</>
								)}
							</div>
							<div className="shrink-0 rounded-md bg-accent p-2 text-muted-foreground">
								<Activity className="h-5 w-5" />
							</div>
						</div>
					</div>
					<MetricCard
						label="Elapsed Time"
						value={isConnecting ? null : formatDuration(elapsed)}
						icon={<Clock className="h-5 w-5" />}
					/>
					<MetricCard
						label="Total Cost"
						value={isConnecting ? null : formatCost(totalCost)}
						icon={<DollarSign className="h-5 w-5" />}
					/>
					<MetricCard
						label="Tokens Used"
						value={isConnecting ? null : formatTokens(totalTokens)}
						icon={<Zap className="h-5 w-5" />}
					/>
					{rtkEnabled && (
						<MetricCard
							label="RTK Saved"
							value={rtkValue}
							subtext={rtkSubtext}
							icon={<TrendingDown className="h-5 w-5" />}
						/>
					)}
				</div>

				<div className="mt-6">
					{/* Current Slice */}
					{isConnecting ? (
						<CurrentSliceCardSkeleton />
					) : (
						<div className="flex flex-col rounded-md border border-border bg-card">
							{/* Header */}
							<div className="border-b border-border px-4 py-3">
								<div className="flex items-center justify-between gap-3">
									<div className="min-w-0">
										<h2 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
											Current Slice
										</h2>
										{currentSlice ? (
											<p className="mt-0.5 truncate text-sm font-medium text-foreground">
												{currentSlice.id} — {currentSlice.title}
											</p>
										) : (
											<p className="mt-0.5 text-sm text-muted-foreground">
												No active slice
											</p>
										)}
									</div>
									{currentSlice && totalTasks > 0 && (
										<div className="shrink-0 text-right">
											<span className="text-2xl font-bold tabular-nums leading-none">
												{progressPercent}
											</span>
											<span className="text-xs text-muted-foreground">%</span>
										</div>
									)}
								</div>
								{currentSlice && totalTasks > 0 && (
									<div className="mt-3">
										<div className="h-1 w-full overflow-hidden rounded-full bg-accent">
											<div
												className="h-full rounded-full transition-all duration-500"
												style={{
													width: `${progressPercent}%`,
													backgroundColor: getProgressColor(progressPercent),
												}}
											/>
										</div>
										<p className="mt-1.5 text-xs text-muted-foreground">
											{doneTasks} of {totalTasks} tasks complete
										</p>
									</div>
								)}
							</div>
							{/* Task list */}
							<div className="flex-1 p-3">
								{currentSlice && currentSlice.tasks.length > 0 ? (
									<div className="space-y-0.5">
										{currentSlice.tasks.map((task) => {
											const status = getTaskStatus(
												workspace!.active.milestoneId!,
												currentSlice.id,
												task,
												workspace!.active,
											);
											return (
												<div
													key={task.id}
													className={cn(
														"flex items-center gap-2.5 rounded px-2 py-1.5 transition-colors",
														status === "in-progress" && "bg-accent",
													)}
												>
													{taskStatusIcon(status)}
													<span
														className={cn(
															"min-w-0 flex-1 truncate text-xs",
															status === "done" &&
																"text-muted-foreground line-through decoration-muted-foreground/40",
															status === "pending" && "text-muted-foreground",
															status === "in-progress" &&
																"font-medium text-foreground",
														)}
													>
														<span className="font-mono text-muted-foreground">
															{task.id}
														</span>
														<span className="mx-1.5 text-border">·</span>
														{task.title}
													</span>
													{status === "in-progress" && (
														<span className="shrink-0 rounded-sm bg-foreground/10 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
															active
														</span>
													)}
												</div>
											);
										})}
									</div>
								) : (
									<p className="px-2 py-2 text-xs text-muted-foreground">
										No active slice or no tasks defined yet.
									</p>
								)}
							</div>
						</div>
					)}
				</div>

				{isConnecting ? (
					<div className="mt-6">
						<ActivityCardSkeleton />
					</div>
				) : (
					<div className="mt-6 rounded-md border border-border bg-card">
						<div className="border-b border-border px-4 py-3">
							<h2 className="text-sm font-semibold">Recent Activity</h2>
						</div>
						{recentLines.length > 0 ? (
							<div className="divide-y divide-border">
								{recentLines.map((line) => (
									<div
										key={line.id}
										className="flex items-center gap-3 px-4 py-2.5"
									>
										<span className="w-16 flex-shrink-0 font-mono text-xs text-muted-foreground">
											{line.timestamp}
										</span>
										<span
											className={cn(
												"h-1.5 w-1.5 flex-shrink-0 rounded-full",
												activityDotColor(line.type),
											)}
										/>
										<span className="truncate text-sm">{line.content}</span>
									</div>
								))}
							</div>
						) : (
							<div className="px-4 py-4 text-sm text-muted-foreground">
								No activity yet.
							</div>
						)}
					</div>
				)}
			</div>
		</div>
	);
}
