"use client";

import { motion } from "framer-motion";
import { AlertCircle, Bot, Brain, CheckCircle, Zap } from "lucide-react";
import { useEffect, useState } from "react";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select";
import { useLLMConfigs, useLLMPreferences } from "@/hooks/use-llm-configs";

const ROLE_DESCRIPTIONS = {
	long_context: {
		icon: Brain,
		title: "Long Context LLM",
		description: "Handles complex tasks requiring extensive context understanding and reasoning",
		color: "bg-blue-100 text-blue-800 border-blue-200",
		examples: "Document analysis, research synthesis, complex Q&A",
	},
	fast: {
		icon: Zap,
		title: "Fast LLM",
		description: "Optimized for quick responses and real-time interactions",
		color: "bg-green-100 text-green-800 border-green-200",
		examples: "Quick searches, simple questions, instant responses",
	},
	strategic: {
		icon: Bot,
		title: "Strategic LLM",
		description: "Advanced reasoning for planning and strategic decision making",
		color: "bg-purple-100 text-purple-800 border-purple-200",
		examples: "Planning workflows, strategic analysis, complex problem solving",
	},
};

interface AssignRolesStepProps {
	onPreferencesUpdated?: () => Promise<void>;
}

export function AssignRolesStep({ onPreferencesUpdated }: AssignRolesStepProps) {
	const { llmConfigs } = useLLMConfigs();
	const { preferences, updatePreferences } = useLLMPreferences();

	const [assignments, setAssignments] = useState({
		long_context_llm_id: preferences.long_context_llm_id || "",
		fast_llm_id: preferences.fast_llm_id || "",
		strategic_llm_id: preferences.strategic_llm_id || "",
	});

	useEffect(() => {
		setAssignments({
			long_context_llm_id: preferences.long_context_llm_id || "",
			fast_llm_id: preferences.fast_llm_id || "",
			strategic_llm_id: preferences.strategic_llm_id || "",
		});
	}, [preferences]);

	const handleRoleAssignment = async (role: string, configId: string) => {
		const newAssignments = {
			...assignments,
			[role]: configId === "" ? "" : parseInt(configId),
		};

		setAssignments(newAssignments);

		// Auto-save if this assignment completes all roles
		const hasAllAssignments =
			newAssignments.long_context_llm_id &&
			newAssignments.fast_llm_id &&
			newAssignments.strategic_llm_id;

		if (hasAllAssignments) {
			const numericAssignments = {
				long_context_llm_id:
					typeof newAssignments.long_context_llm_id === "string"
						? parseInt(newAssignments.long_context_llm_id)
						: newAssignments.long_context_llm_id,
				fast_llm_id:
					typeof newAssignments.fast_llm_id === "string"
						? parseInt(newAssignments.fast_llm_id)
						: newAssignments.fast_llm_id,
				strategic_llm_id:
					typeof newAssignments.strategic_llm_id === "string"
						? parseInt(newAssignments.strategic_llm_id)
						: newAssignments.strategic_llm_id,
			};

			const success = await updatePreferences(numericAssignments);

			// Refresh parent preferences state
			if (success && onPreferencesUpdated) {
				await onPreferencesUpdated();
			}
		}
	};

	const isAssignmentComplete =
		assignments.long_context_llm_id && assignments.fast_llm_id && assignments.strategic_llm_id;

	if (llmConfigs.length === 0) {
		return (
			<div className="flex flex-col items-center justify-center py-12">
				<AlertCircle className="w-16 h-16 text-muted-foreground mb-4" />
				<h3 className="text-lg font-semibold mb-2">No LLM Configurations Found</h3>
				<p className="text-muted-foreground text-center">
					Please add at least one LLM provider in the previous step before assigning roles.
				</p>
			</div>
		);
	}

	return (
		<div className="space-y-6">
			{/* Info Alert */}
			<Alert>
				<AlertCircle className="h-4 w-4" />
				<AlertDescription>
					Assign your LLM configurations to specific roles. Each role serves different purposes in
					your workflow.
				</AlertDescription>
			</Alert>

			{/* Role Assignment Cards */}
			<div className="grid gap-6">
				{Object.entries(ROLE_DESCRIPTIONS).map(([key, role]) => {
					const IconComponent = role.icon;
					const currentAssignment = assignments[`${key}_llm_id` as keyof typeof assignments];
					const assignedConfig = llmConfigs.find((config) => config.id === currentAssignment);

					return (
						<motion.div
							key={key}
							initial={{ opacity: 0, y: 10 }}
							animate={{ opacity: 1, y: 0 }}
							transition={{ delay: Object.keys(ROLE_DESCRIPTIONS).indexOf(key) * 0.1 }}
						>
							<Card
								className={`border-l-4 ${currentAssignment ? "border-l-primary" : "border-l-muted"}`}
							>
								<CardHeader className="pb-3">
									<div className="flex items-center justify-between">
										<div className="flex items-center gap-3">
											<div className={`p-2 rounded-lg ${role.color}`}>
												<IconComponent className="w-5 h-5" />
											</div>
											<div>
												<CardTitle className="text-lg">{role.title}</CardTitle>
												<CardDescription className="mt-1">{role.description}</CardDescription>
											</div>
										</div>
										{currentAssignment && <CheckCircle className="w-5 h-5 text-green-500" />}
									</div>
								</CardHeader>
								<CardContent className="space-y-4">
									<div className="text-sm text-muted-foreground">
										<strong>Use cases:</strong> {role.examples}
									</div>

									<div className="space-y-2">
										<Label className="text-sm font-medium">Assign LLM Configuration:</Label>
										<Select
											value={currentAssignment?.toString() || ""}
											onValueChange={(value) => handleRoleAssignment(`${key}_llm_id`, value)}
										>
											<SelectTrigger>
												<SelectValue placeholder="Select an LLM configuration" />
											</SelectTrigger>
											<SelectContent>
												{llmConfigs
													.filter((config) => config.id && config.id.toString().trim() !== "")
													.map((config) => (
														<SelectItem key={config.id} value={config.id.toString()}>
															<div className="flex items-center gap-2">
																<Badge variant="outline" className="text-xs">
																	{config.provider}
																</Badge>
																<span>{config.name}</span>
																<span className="text-muted-foreground">({config.model_name})</span>
															</div>
														</SelectItem>
													))}
											</SelectContent>
										</Select>
									</div>

									{assignedConfig && (
										<div className="mt-3 p-3 bg-muted/50 rounded-lg">
											<div className="flex items-center gap-2 text-sm">
												<Bot className="w-4 h-4" />
												<span className="font-medium">Assigned:</span>
												<Badge variant="secondary">{assignedConfig.provider}</Badge>
												<span>{assignedConfig.name}</span>
											</div>
											<div className="text-xs text-muted-foreground mt-1">
												Model: {assignedConfig.model_name}
											</div>
										</div>
									)}
								</CardContent>
							</Card>
						</motion.div>
					);
				})}
			</div>

			{/* Status Indicator */}
			{isAssignmentComplete && (
				<div className="flex justify-center pt-4">
					<div className="flex items-center gap-2 px-4 py-2 bg-green-50 text-green-700 rounded-lg border border-green-200">
						<CheckCircle className="w-4 h-4" />
						<span className="text-sm font-medium">All roles assigned and saved!</span>
					</div>
				</div>
			)}

			{/* Progress Indicator */}
			<div className="flex justify-center">
				<div className="flex items-center gap-2 text-sm text-muted-foreground">
					<span>Progress:</span>
					<div className="flex gap-1">
						{Object.keys(ROLE_DESCRIPTIONS).map((key, _index) => (
							<div
								key={key}
								className={`w-2 h-2 rounded-full ${
									assignments[`${key}_llm_id` as keyof typeof assignments]
										? "bg-primary"
										: "bg-muted"
								}`}
							/>
						))}
					</div>
					<span>
						{Object.values(assignments).filter(Boolean).length} of{" "}
						{Object.keys(ROLE_DESCRIPTIONS).length} roles assigned
					</span>
				</div>
			</div>
		</div>
	);
}