"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { AgentPresetPanelDark } from "./AgentPresetPanelDark";
import { AgentWorkflowPanelDark, type AgentWorkflowInputs } from "./AgentWorkflowPanelDark";
import { AgentGenerationWorkspaceDark } from "./AgentGenerationWorkspaceDark";
import {
  createEmptyAgentWorkflowMaterialSelections,
  normalizeAgentWorkflowMaterialSelections,
} from "@/lib/agents/workflow-material-config";
import { buildAgentWorkflowComposerContext } from "@/lib/agents/workflow-composer";
import type {
  AgentWorkflowMaterialSelections,
  AgentWorkflowStepKey,
} from "@/types/agent";

interface AgentPageDarkProps {
  projectId: string;
  initialStage?: "preset" | "workflow" | "generate";
  initialPresetId?: string | null;
  workflowConfig?: any;
}

export function AgentPageDark({
  projectId,
  initialStage = "preset",
  initialPresetId = null,
  workflowConfig,
}: AgentPageDarkProps) {
  const [stage, setStage] = useState<"preset" | "workflow" | "generate">(initialStage);
  const [selectedPresetId, setSelectedPresetId] = useState<string | null>(initialPresetId);
  
  // Workflow state
  const [workflowInputs, setWorkflowInputs] = useState<AgentWorkflowInputs>({
    primarySku: "",
    secondarySku: "",
    brand: "",
    store: "",
    officialSecondCategory: "",
    officialThirdCategory: "",
    thirdCategory: "",
    fourthCategory: "",
    fifthCategory: "",
    priceBand: "",
  });
  const [workflowMaterials, setWorkflowMaterials] = useState<AgentWorkflowMaterialSelections>(
    createEmptyAgentWorkflowMaterialSelections()
  );
  const [workflowSelections, setWorkflowSelections] = useState<
    Partial<Record<AgentWorkflowStepKey, string>>
  >({});

  // Handle preset selection
  const handleSelectPreset = (presetId: string | null) => {
    setSelectedPresetId(presetId);
    if (presetId) {
      setStage("generate");
    }
  };

  // Build workflow context
  const workflowContext = buildAgentWorkflowComposerContext({
    config: workflowConfig,
    inputs: workflowInputs,
    materials: workflowMaterials,
    selections: workflowSelections,
  });

  return (
    <div className="bg-black min-h-screen">
      <AnimatePresence mode="wait">
        {stage === "preset" && (
          <motion.div
            key="preset"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0, x: -100 }}
            transition={{ duration: 0.3 }}
          >
            <AgentPresetPanelDark
              selectedPresetId={selectedPresetId}
              onSelectPreset={handleSelectPreset}
            />
          </motion.div>
        )}

        {stage === "workflow" && (
          <motion.div
            key="workflow"
            initial={{ opacity: 0, x: 100 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -100 }}
            transition={{ duration: 0.3 }}
          >
            <AgentWorkflowPanelDark
              config={workflowConfig}
              inputs={workflowInputs}
              onInputsChange={setWorkflowInputs}
              materials={workflowMaterials}
              onMaterialsChange={setWorkflowMaterials}
              selections={workflowSelections}
              onSelectionsChange={setWorkflowSelections}
              onNextStep={() => setStage("preset")}
              onSkipStep={() => setStage("preset")}
            />
          </motion.div>
        )}

        {stage === "generate" && (
          <motion.div
            key="generate"
            initial={{ opacity: 0, x: 100 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -100 }}
            transition={{ duration: 0.3 }}
          >
            <AgentGenerationWorkspaceDark
              chatId={`canvas-${projectId}`}
              projectId={projectId}
              selectedAgentPresetId={selectedPresetId}
              workflowContext={workflowContext}
              onBack={() => setStage("preset")}
            />
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}