import React, { useState } from "react";
import { motion } from "framer-motion";
import { ArrowLeft, Save, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Toast, ToastContainer } from "@/components/ui/toast";
import { api, type Agent } from "@/lib/api";
import { cn } from "@/lib/utils";
import MDEditor from "@uiw/react-md-editor";
import { AGENT_ICONS, type AgentIconName } from "./CCAgents";
import { AgentSandboxSettings } from "./AgentSandboxSettings";

interface CreateAgentProps {
  /**
   * Optional agent to edit (if provided, component is in edit mode)
   */
  agent?: Agent;
  /**
   * Callback to go back to the agents list
   */
  onBack: () => void;
  /**
   * Callback when agent is created/updated
   */
  onAgentCreated: () => void;
  /**
   * Optional className for styling
   */
  className?: string;
}

/**
 * CreateAgent component for creating or editing a CC agent
 * 
 * @example
 * <CreateAgent onBack={() => setView('list')} onAgentCreated={handleCreated} />
 */
export const CreateAgent: React.FC<CreateAgentProps> = ({
  agent,
  onBack,
  onAgentCreated,
  className,
}) => {
  const [name, setName] = useState(agent?.name || "");
  const [selectedIcon, setSelectedIcon] = useState<AgentIconName>((agent?.icon as AgentIconName) || "bot");
  const [systemPrompt, setSystemPrompt] = useState(agent?.system_prompt || "");
  const [defaultTask, setDefaultTask] = useState(agent?.default_task || "");
  const [model, setModel] = useState(agent?.model || "sonnet");
  const [sandboxEnabled, setSandboxEnabled] = useState(agent?.sandbox_enabled ?? true);
  const [enableFileRead, setEnableFileRead] = useState(agent?.enable_file_read ?? true);
  const [enableFileWrite, setEnableFileWrite] = useState(agent?.enable_file_write ?? true);
  const [enableNetwork, setEnableNetwork] = useState(agent?.enable_network ?? false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [toast, setToast] = useState<{ message: string; type: "success" | "error" } | null>(null);

  const isEditMode = !!agent;

  const handleSave = async () => {
    if (!name.trim()) {
      setError("Agent name is required");
      return;
    }

    if (!systemPrompt.trim()) {
      setError("System prompt is required");
      return;
    }

    try {
      setSaving(true);
      setError(null);
      
      if (isEditMode && agent.id) {
        await api.updateAgent(
          agent.id, 
          name, 
          selectedIcon, 
          systemPrompt, 
          defaultTask || undefined, 
          model,
          sandboxEnabled,
          enableFileRead,
          enableFileWrite,
          enableNetwork
        );
      } else {
        await api.createAgent(
          name, 
          selectedIcon, 
          systemPrompt, 
          defaultTask || undefined, 
          model,
          sandboxEnabled,
          enableFileRead,
          enableFileWrite,
          enableNetwork
        );
      }
      
      onAgentCreated();
    } catch (err) {
      console.error("Failed to save agent:", err);
      setError(isEditMode ? "Failed to update agent" : "Failed to create agent");
      setToast({ 
        message: isEditMode ? "Failed to update agent" : "Failed to create agent", 
        type: "error" 
      });
    } finally {
      setSaving(false);
    }
  };

  const handleBack = () => {
    if ((name !== (agent?.name || "") || 
         selectedIcon !== (agent?.icon || "bot") || 
         systemPrompt !== (agent?.system_prompt || "") ||
         defaultTask !== (agent?.default_task || "") ||
         model !== (agent?.model || "sonnet") ||
         sandboxEnabled !== (agent?.sandbox_enabled ?? true) ||
         enableFileRead !== (agent?.enable_file_read ?? true) ||
         enableFileWrite !== (agent?.enable_file_write ?? true) ||
         enableNetwork !== (agent?.enable_network ?? false)) && 
        !confirm("You have unsaved changes. Are you sure you want to leave?")) {
      return;
    }
    onBack();
  };

  return (
    <div className={cn("flex flex-col h-full bg-background", className)}>
      <div className="w-full max-w-5xl mx-auto flex flex-col h-full">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3 }}
          className="flex items-center justify-between p-4 border-b border-border"
        >
          <div className="flex items-center space-x-3">
            <Button
              variant="ghost"
              size="icon"
              onClick={handleBack}
              className="h-8 w-8"
            >
              <ArrowLeft className="h-4 w-4" />
            </Button>
            <div>
              <h2 className="text-lg font-semibold">
                {isEditMode ? "Edit CC Agent" : "Create CC Agent"}
              </h2>
              <p className="text-xs text-muted-foreground">
                {isEditMode ? "Update your Claude Code agent" : "Create a new Claude Code agent"}
              </p>
            </div>
          </div>
          
          <Button
            onClick={handleSave}
            disabled={saving || !name.trim() || !systemPrompt.trim()}
            size="sm"
          >
            {saving ? (
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            ) : (
              <Save className="mr-2 h-4 w-4" />
            )}
            {saving ? "Saving..." : "Save"}
          </Button>
        </motion.div>
        
        {/* Error display */}
        {error && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            className="mx-4 mt-4 rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-xs text-destructive"
          >
            {error}
          </motion.div>
        )}
        
        {/* Form */}
        <div className="flex-1 p-4 overflow-y-auto">
          <div className="space-y-6">
            {/* Agent Name */}
            <div className="space-y-2">
              <Label htmlFor="agent-name">Agent Name</Label>
              <Input
                id="agent-name"
                type="text"
                placeholder="e.g., Code Reviewer, Test Generator"
                value={name}
                onChange={(e) => setName(e.target.value)}
                className="max-w-md"
              />
            </div>

            {/* Icon Picker */}
            <div className="space-y-2">
              <Label>Icon</Label>
              <div className="grid grid-cols-3 sm:grid-cols-5 md:grid-cols-9 gap-2 max-w-2xl">
                {(Object.keys(AGENT_ICONS) as AgentIconName[]).map((iconName) => {
                  const Icon = AGENT_ICONS[iconName];
                  return (
                    <button
                      key={iconName}
                      type="button"
                      onClick={() => setSelectedIcon(iconName)}
                      className={cn(
                        "p-3 rounded-lg border-2 transition-all hover:scale-105",
                        "flex items-center justify-center",
                        selectedIcon === iconName
                          ? "border-primary bg-primary/10"
                          : "border-border hover:border-primary/50"
                      )}
                    >
                      <Icon className="h-6 w-6" />
                    </button>
                  );
                })}
              </div>
            </div>

            {/* Model Selection */}
            <div className="space-y-2">
              <Label>Model</Label>
              <div className="flex flex-col sm:flex-row gap-3">
                <button
                  type="button"
                  onClick={() => setModel("sonnet")}
                  className={cn(
                    "flex-1 px-4 py-2.5 rounded-full border-2 font-medium transition-all",
                    "hover:scale-[1.02] active:scale-[0.98]",
                    model === "sonnet" 
                      ? "border-primary bg-primary text-primary-foreground shadow-lg" 
                      : "border-muted-foreground/30 hover:border-muted-foreground/50"
                  )}
                >
                  <div className="flex items-center justify-center gap-2.5">
                    <div className={cn(
                      "w-4 h-4 rounded-full border-2 flex items-center justify-center flex-shrink-0",
                      model === "sonnet" ? "border-primary-foreground" : "border-current"
                    )}>
                      {model === "sonnet" && (
                        <div className="w-2 h-2 rounded-full bg-primary-foreground" />
                      )}
                    </div>
                    <div className="text-left">
                      <div className="text-sm font-semibold">Claude 4 Sonnet</div>
                      <div className="text-xs opacity-80">Faster, efficient for most tasks</div>
                    </div>
                  </div>
                </button>
                
                <button
                  type="button"
                  onClick={() => setModel("opus")}
                  className={cn(
                    "flex-1 px-4 py-2.5 rounded-full border-2 font-medium transition-all",
                    "hover:scale-[1.02] active:scale-[0.98]",
                    model === "opus" 
                      ? "border-primary bg-primary text-primary-foreground shadow-lg" 
                      : "border-muted-foreground/30 hover:border-muted-foreground/50"
                  )}
                >
                  <div className="flex items-center justify-center gap-2.5">
                    <div className={cn(
                      "w-4 h-4 rounded-full border-2 flex items-center justify-center flex-shrink-0",
                      model === "opus" ? "border-primary-foreground" : "border-current"
                    )}>
                      {model === "opus" && (
                        <div className="w-2 h-2 rounded-full bg-primary-foreground" />
                      )}
                    </div>
                    <div className="text-left">
                      <div className="text-sm font-semibold">Claude 4 Opus</div>
                      <div className="text-xs opacity-80">More capable, better for complex tasks</div>
                    </div>
                  </div>
                </button>
              </div>
            </div>

            {/* Default Task */}
            <div className="space-y-2">
              <Label htmlFor="default-task">Default Task (Optional)</Label>
              <Input
                id="default-task"
                type="text"
                placeholder="e.g., Review this code for security issues"
                value={defaultTask}
                onChange={(e) => setDefaultTask(e.target.value)}
                className="max-w-md"
              />
              <p className="text-xs text-muted-foreground">
                This will be used as the default task placeholder when executing the agent
              </p>
            </div>

            {/* Sandbox Settings */}
            <AgentSandboxSettings
              agent={{
                id: agent?.id,
                name,
                icon: selectedIcon,
                system_prompt: systemPrompt,
                default_task: defaultTask || undefined,
                model,
                sandbox_enabled: sandboxEnabled,
                enable_file_read: enableFileRead,
                enable_file_write: enableFileWrite,
                enable_network: enableNetwork,
                created_at: agent?.created_at || "",
                updated_at: agent?.updated_at || ""
              }}
              onUpdate={(updates) => {
                if ('sandbox_enabled' in updates) setSandboxEnabled(updates.sandbox_enabled!);
                if ('enable_file_read' in updates) setEnableFileRead(updates.enable_file_read!);
                if ('enable_file_write' in updates) setEnableFileWrite(updates.enable_file_write!);
                if ('enable_network' in updates) setEnableNetwork(updates.enable_network!);
              }}
            />

            {/* System Prompt Editor */}
            <div className="space-y-2">
              <Label>System Prompt</Label>
              <p className="text-xs text-muted-foreground mb-2">
                Define the behavior and capabilities of your CC Agent
              </p>
              <div className="rounded-lg border border-border overflow-hidden shadow-sm" data-color-mode="dark">
                <MDEditor
                  value={systemPrompt}
                  onChange={(val) => setSystemPrompt(val || "")}
                  preview="edit"
                  height={400}
                  visibleDragbar={false}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      
      {/* Toast Notification */}
      <ToastContainer>
        {toast && (
          <Toast
            message={toast.message}
            type={toast.type}
            onDismiss={() => setToast(null)}
          />
        )}
      </ToastContainer>
    </div>
  );
};