/**
 * AgentTypeForm Component
 *
 * React Hook Form-based form for creating and editing agent types.
 * Features tabbed interface for organizing form sections.
 *
 * Uses reusable form utilities for:
 * - Validation error handling with toast notifications
 * - Safe API-to-form data transformation with defaults
 */

'use client';

import { useEffect, useState, useCallback, useMemo } from 'react';
import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { Checkbox } from '@/components/ui/checkbox';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { FileText, Cpu, Shield, MessageSquare, Sliders, Save, ArrowLeft, X } from 'lucide-react';
import {
  agentTypeCreateSchema,
  type AgentTypeCreateFormValues,
  AVAILABLE_MODELS,
  AVAILABLE_MCP_SERVERS,
  AGENT_TYPE_CATEGORIES,
  defaultAgentTypeValues,
  generateSlug,
} from '@/lib/validations/agentType';
import type { AgentTypeResponse } from '@/lib/api/types/agentTypes';
import { useValidationErrorHandler, deepMergeWithDefaults, isNumber } from '@/lib/forms';

interface AgentTypeFormProps {
  agentType?: AgentTypeResponse;
  onSubmit: (data: AgentTypeCreateFormValues) => void | Promise<void>;
  onCancel: () => void;
  isSubmitting?: boolean;
  className?: string;
}

// Tab navigation mapping for validation errors
const TAB_FIELD_MAPPING = {
  name: 'basic',
  slug: 'basic',
  description: 'basic',
  expertise: 'basic',
  is_active: 'basic',
  // Category and display fields
  category: 'basic',
  icon: 'basic',
  color: 'basic',
  sort_order: 'basic',
  typical_tasks: 'basic',
  collaboration_hints: 'basic',
  primary_model: 'model',
  fallback_models: 'model',
  model_params: 'model',
  mcp_servers: 'permissions',
  tool_permissions: 'permissions',
  personality_prompt: 'personality',
} as const;

/**
 * Transform API response to form values with safe defaults
 *
 * Uses deepMergeWithDefaults for most fields, with special handling
 * for model_params which needs numeric type validation.
 */
function transformAgentTypeToFormValues(
  agentType: AgentTypeResponse | undefined
): AgentTypeCreateFormValues {
  if (!agentType) return defaultAgentTypeValues;

  // model_params needs special handling for numeric validation
  const modelParams = agentType.model_params ?? {};
  const safeModelParams = {
    temperature: isNumber(modelParams.temperature) ? modelParams.temperature : 0.7,
    max_tokens: isNumber(modelParams.max_tokens) ? modelParams.max_tokens : 8192,
    top_p: isNumber(modelParams.top_p) ? modelParams.top_p : 0.95,
  };

  // Merge with defaults, then override model_params with safe version
  const merged = deepMergeWithDefaults(defaultAgentTypeValues, {
    name: agentType.name,
    slug: agentType.slug,
    description: agentType.description,
    expertise: agentType.expertise,
    personality_prompt: agentType.personality_prompt,
    primary_model: agentType.primary_model,
    fallback_models: agentType.fallback_models,
    mcp_servers: agentType.mcp_servers,
    tool_permissions: agentType.tool_permissions,
    is_active: agentType.is_active,
    // Category and display fields
    category: agentType.category,
    icon: agentType.icon,
    color: agentType.color,
    sort_order: agentType.sort_order ?? 0,
    typical_tasks: agentType.typical_tasks ?? [],
    collaboration_hints: agentType.collaboration_hints ?? [],
  });

  return {
    ...merged,
    model_params: safeModelParams,
  };
}

export function AgentTypeForm({
  agentType,
  onSubmit,
  onCancel,
  isSubmitting = false,
  className,
}: AgentTypeFormProps) {
  const isEditing = !!agentType;
  const [activeTab, setActiveTab] = useState('basic');
  const [expertiseInput, setExpertiseInput] = useState('');
  const [typicalTaskInput, setTypicalTaskInput] = useState('');
  const [collaborationHintInput, setCollaborationHintInput] = useState('');

  // Memoize initial values transformation
  const initialValues = useMemo(() => transformAgentTypeToFormValues(agentType), [agentType]);

  // Always use create schema for validation - editing requires all fields too
  const form = useForm<AgentTypeCreateFormValues>({
    resolver: zodResolver(agentTypeCreateSchema),
    defaultValues: initialValues,
  });

  const {
    register,
    control,
    handleSubmit,
    watch,
    setValue,
    formState: { errors },
  } = form;

  // Use the reusable validation error handler hook
  const { onValidationError } = useValidationErrorHandler<AgentTypeCreateFormValues>({
    tabMapping: TAB_FIELD_MAPPING,
    setActiveTab,
  });

  const watchName = watch('name');
  /* istanbul ignore next -- defensive fallback, expertise always has default */
  const watchExpertise = watch('expertise') || [];
  /* istanbul ignore next -- defensive fallback, mcp_servers always has default */
  const watchMcpServers = watch('mcp_servers') || [];
  /* istanbul ignore next -- defensive fallback, typical_tasks always has default */
  const watchTypicalTasks = watch('typical_tasks') || [];
  /* istanbul ignore next -- defensive fallback, collaboration_hints always has default */
  const watchCollaborationHints = watch('collaboration_hints') || [];

  // Reset form when agentType changes (e.g., switching to edit mode)
  useEffect(() => {
    if (agentType) {
      form.reset(initialValues);
    }
  }, [agentType?.id, form, initialValues]);

  // Auto-generate slug from name for new agent types
  useEffect(() => {
    if (!isEditing && watchName) {
      const slug = generateSlug(watchName);
      setValue('slug', slug, { shouldValidate: true });
    }
  }, [watchName, isEditing, setValue]);

  const handleAddExpertise = () => {
    if (expertiseInput.trim()) {
      const newExpertise = expertiseInput.trim().toLowerCase();
      if (!watchExpertise.includes(newExpertise)) {
        setValue('expertise', [...watchExpertise, newExpertise]);
      }
      setExpertiseInput('');
    }
  };

  const handleRemoveExpertise = (skill: string) => {
    setValue(
      'expertise',
      watchExpertise.filter((e) => e !== skill)
    );
  };

  /* istanbul ignore next -- Radix UI checkbox handlers can't be tested in JSDOM */
  const handleMcpServerToggle = (serverId: string, checked: boolean) => {
    if (checked) {
      setValue('mcp_servers', [...watchMcpServers, serverId]);
    } else {
      setValue(
        'mcp_servers',
        watchMcpServers.filter((s) => s !== serverId)
      );
    }
  };

  const handleAddTypicalTask = () => {
    if (typicalTaskInput.trim()) {
      const newTask = typicalTaskInput.trim();
      if (!watchTypicalTasks.includes(newTask)) {
        setValue('typical_tasks', [...watchTypicalTasks, newTask]);
      }
      setTypicalTaskInput('');
    }
  };

  const handleRemoveTypicalTask = (task: string) => {
    setValue(
      'typical_tasks',
      watchTypicalTasks.filter((t) => t !== task)
    );
  };

  const handleAddCollaborationHint = () => {
    if (collaborationHintInput.trim()) {
      const newHint = collaborationHintInput.trim().toLowerCase();
      if (!watchCollaborationHints.includes(newHint)) {
        setValue('collaboration_hints', [...watchCollaborationHints, newHint]);
      }
      setCollaborationHintInput('');
    }
  };

  const handleRemoveCollaborationHint = (hint: string) => {
    setValue(
      'collaboration_hints',
      watchCollaborationHints.filter((h) => h !== hint)
    );
  };

  // Handle form submission with validation
  const onFormSubmit = useCallback(
    (e: React.FormEvent<HTMLFormElement>) => {
      return handleSubmit(onSubmit, onValidationError)(e);
    },
    [handleSubmit, onSubmit, onValidationError]
  );

  return (
    <form onSubmit={onFormSubmit} className={className}>
      {/* Header */}
      <div className="mb-6 flex items-center gap-4">
        <Button type="button" variant="ghost" size="icon" onClick={onCancel}>
          <ArrowLeft className="h-4 w-4" />
          <span className="sr-only">Go back</span>
        </Button>
        <div className="flex-1">
          <h1 className="text-3xl font-bold">
            {isEditing ? 'Edit Agent Type' : 'Create Agent Type'}
          </h1>
          <p className="text-muted-foreground">
            {isEditing ? 'Modify agent type configuration' : 'Define a new agent type template'}
          </p>
        </div>
        <div className="flex gap-2">
          <Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>
            Cancel
          </Button>
          <Button type="submit" disabled={isSubmitting}>
            <Save className="mr-2 h-4 w-4" />
            {isSubmitting ? 'Saving...' : isEditing ? 'Save Changes' : 'Create'}
          </Button>
        </div>
      </div>

      {/* Tabbed Form */}
      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="basic">
            <FileText className="mr-2 h-4 w-4" />
            Basic Info
          </TabsTrigger>
          <TabsTrigger value="model">
            <Cpu className="mr-2 h-4 w-4" />
            Model
          </TabsTrigger>
          <TabsTrigger value="permissions">
            <Shield className="mr-2 h-4 w-4" />
            Permissions
          </TabsTrigger>
          <TabsTrigger value="personality">
            <MessageSquare className="mr-2 h-4 w-4" />
            Personality
          </TabsTrigger>
        </TabsList>

        {/* Basic Info Tab */}
        <TabsContent value="basic" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Basic Information</CardTitle>
              <CardDescription>
                Define the agent type name, description, and expertise areas
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="name">
                    Name <span className="text-destructive">*</span>
                  </Label>
                  <Input
                    id="name"
                    placeholder="e.g., Software Architect"
                    {...register('name')}
                    aria-invalid={!!errors.name}
                    aria-describedby={errors.name ? 'name-error' : undefined}
                  />
                  {errors.name && (
                    <p id="name-error" className="text-sm text-destructive" role="alert">
                      {errors.name.message}
                    </p>
                  )}
                </div>
                <div className="space-y-2">
                  <Label htmlFor="slug">
                    Slug <span className="text-destructive">*</span>
                  </Label>
                  <Input
                    id="slug"
                    placeholder="e.g., software-architect"
                    {...register('slug')}
                    aria-invalid={!!errors.slug}
                    aria-describedby={errors.slug ? 'slug-error' : undefined}
                  />
                  {errors.slug && (
                    <p id="slug-error" className="text-sm text-destructive" role="alert">
                      {errors.slug.message}
                    </p>
                  )}
                  <p className="text-xs text-muted-foreground">
                    URL-friendly identifier (auto-generated from name)
                  </p>
                </div>
              </div>

              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="status">Status</Label>
                  <Controller
                    name="is_active"
                    control={control}
                    render={({ field }) => (
                      <Select
                        value={field.value ? 'active' : 'inactive'}
                        onValueChange={
                          /* istanbul ignore next -- Radix Select handlers can't be tested in JSDOM */
                          (val) => field.onChange(val === 'active')
                        }
                      >
                        <SelectTrigger id="status">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="active">Active</SelectItem>
                          <SelectItem value="inactive">Inactive / Draft</SelectItem>
                        </SelectContent>
                      </Select>
                    )}
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="description">Description</Label>
                <Textarea
                  id="description"
                  placeholder="Describe what this agent type does..."
                  rows={3}
                  {...register('description')}
                  aria-invalid={!!errors.description}
                  aria-describedby={errors.description ? 'description-error' : undefined}
                />
                {errors.description && (
                  <p id="description-error" className="text-sm text-destructive" role="alert">
                    {errors.description.message}
                  </p>
                )}
              </div>

              <div className="space-y-2">
                <Label>Expertise Areas</Label>
                <p className="text-sm text-muted-foreground">Add skills and areas of expertise</p>
                <div className="flex gap-2">
                  <Input
                    placeholder="e.g., System Design"
                    value={expertiseInput}
                    onChange={(e) => setExpertiseInput(e.target.value)}
                    onKeyDown={(e) => {
                      if (e.key === 'Enter') {
                        e.preventDefault();
                        handleAddExpertise();
                      }
                    }}
                  />
                  <Button type="button" variant="outline" onClick={handleAddExpertise}>
                    Add
                  </Button>
                </div>
                <div className="flex flex-wrap gap-2 pt-2">
                  {watchExpertise.map((skill) => (
                    <Badge key={skill} variant="secondary" className="gap-1">
                      {skill}
                      <button
                        type="button"
                        className="ml-1 rounded-full hover:bg-muted"
                        onClick={() => handleRemoveExpertise(skill)}
                        aria-label={`Remove ${skill}`}
                      >
                        <X className="h-3 w-3" />
                      </button>
                    </Badge>
                  ))}
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Category & Display Card */}
          <Card>
            <CardHeader>
              <CardTitle>Category & Display</CardTitle>
              <CardDescription>
                Organize and customize how this agent type appears in the UI
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="category">Category</Label>
                  <Controller
                    name="category"
                    control={control}
                    render={({ field }) => (
                      <Select
                        value={field.value ?? ''}
                        onValueChange={(val) => field.onChange(val || null)}
                      >
                        <SelectTrigger id="category">
                          <SelectValue placeholder="Select category" />
                        </SelectTrigger>
                        <SelectContent>
                          {AGENT_TYPE_CATEGORIES.map((cat) => (
                            <SelectItem key={cat.value} value={cat.value}>
                              {cat.label}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    )}
                  />
                  <p className="text-xs text-muted-foreground">
                    Group agents by their primary role
                  </p>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="sort_order">Sort Order</Label>
                  <Input
                    id="sort_order"
                    type="number"
                    min={0}
                    max={1000}
                    {...register('sort_order', { valueAsNumber: true })}
                    aria-invalid={!!errors.sort_order}
                  />
                  {errors.sort_order && (
                    <p className="text-sm text-destructive" role="alert">
                      {errors.sort_order.message}
                    </p>
                  )}
                  <p className="text-xs text-muted-foreground">Display order within category</p>
                </div>
              </div>

              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="icon">Icon</Label>
                  <Input
                    id="icon"
                    placeholder="e.g., git-branch"
                    {...register('icon')}
                    aria-invalid={!!errors.icon}
                  />
                  {errors.icon && (
                    <p className="text-sm text-destructive" role="alert">
                      {errors.icon.message}
                    </p>
                  )}
                  <p className="text-xs text-muted-foreground">Lucide icon name for UI display</p>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="color">Color</Label>
                  <div className="flex gap-2">
                    <Input
                      id="color"
                      placeholder="#3B82F6"
                      {...register('color')}
                      aria-invalid={!!errors.color}
                      className="flex-1"
                    />
                    <Controller
                      name="color"
                      control={control}
                      render={({ field }) => (
                        <input
                          type="color"
                          value={field.value ?? '#3B82F6'}
                          onChange={(e) => field.onChange(e.target.value)}
                          className="h-9 w-9 cursor-pointer rounded border"
                        />
                      )}
                    />
                  </div>
                  {errors.color && (
                    <p className="text-sm text-destructive" role="alert">
                      {errors.color.message}
                    </p>
                  )}
                  <p className="text-xs text-muted-foreground">Hex color for visual distinction</p>
                </div>
              </div>

              <Separator />

              <div className="space-y-2">
                <Label>Typical Tasks</Label>
                <p className="text-sm text-muted-foreground">Tasks this agent type excels at</p>
                <div className="flex gap-2">
                  <Input
                    placeholder="e.g., Design system architecture"
                    value={typicalTaskInput}
                    onChange={(e) => setTypicalTaskInput(e.target.value)}
                    onKeyDown={(e) => {
                      if (e.key === 'Enter') {
                        e.preventDefault();
                        handleAddTypicalTask();
                      }
                    }}
                  />
                  <Button type="button" variant="outline" onClick={handleAddTypicalTask}>
                    Add
                  </Button>
                </div>
                <div className="flex flex-wrap gap-2 pt-2">
                  {watchTypicalTasks.map((task) => (
                    <Badge key={task} variant="secondary" className="gap-1">
                      {task}
                      <button
                        type="button"
                        className="ml-1 rounded-full hover:bg-muted"
                        onClick={() => handleRemoveTypicalTask(task)}
                        aria-label={`Remove ${task}`}
                      >
                        <X className="h-3 w-3" />
                      </button>
                    </Badge>
                  ))}
                </div>
              </div>

              <div className="space-y-2">
                <Label>Collaboration Hints</Label>
                <p className="text-sm text-muted-foreground">
                  Agent slugs that work well with this type
                </p>
                <div className="flex gap-2">
                  <Input
                    placeholder="e.g., backend-engineer"
                    value={collaborationHintInput}
                    onChange={(e) => setCollaborationHintInput(e.target.value)}
                    onKeyDown={(e) => {
                      if (e.key === 'Enter') {
                        e.preventDefault();
                        handleAddCollaborationHint();
                      }
                    }}
                  />
                  <Button type="button" variant="outline" onClick={handleAddCollaborationHint}>
                    Add
                  </Button>
                </div>
                <div className="flex flex-wrap gap-2 pt-2">
                  {watchCollaborationHints.map((hint) => (
                    <Badge key={hint} variant="outline" className="gap-1">
                      {hint}
                      <button
                        type="button"
                        className="ml-1 rounded-full hover:bg-muted"
                        onClick={() => handleRemoveCollaborationHint(hint)}
                        aria-label={`Remove ${hint}`}
                      >
                        <X className="h-3 w-3" />
                      </button>
                    </Badge>
                  ))}
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Model Configuration Tab */}
        <TabsContent value="model" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Model Selection</CardTitle>
              <CardDescription>Choose the AI models that power this agent type</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="primary_model">
                    Primary Model <span className="text-destructive">*</span>
                  </Label>
                  <Controller
                    name="primary_model"
                    control={control}
                    render={({ field }) => (
                      <Select value={field.value} onValueChange={field.onChange}>
                        <SelectTrigger id="primary_model">
                          <SelectValue placeholder="Select model" />
                        </SelectTrigger>
                        <SelectContent>
                          {AVAILABLE_MODELS.map((model) => (
                            <SelectItem key={model.value} value={model.value}>
                              {model.label}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    )}
                  />
                  {errors.primary_model && (
                    <p className="text-sm text-destructive" role="alert">
                      {errors.primary_model.message}
                    </p>
                  )}
                  <p className="text-xs text-muted-foreground">Main model used for this agent</p>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="fallback_model">Fallover Model</Label>
                  <Controller
                    name="fallback_models"
                    control={control}
                    render={({ field }) => (
                      <Select
                        value={field.value?.[0] || ''}
                        onValueChange={
                          /* istanbul ignore next -- Radix Select handlers can't be tested in JSDOM */
                          (val) => field.onChange([val])
                        }
                      >
                        <SelectTrigger id="fallback_model">
                          <SelectValue placeholder="Select model" />
                        </SelectTrigger>
                        <SelectContent>
                          {AVAILABLE_MODELS.map((model) => (
                            <SelectItem key={model.value} value={model.value}>
                              {model.label}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    )}
                  />
                  <p className="text-xs text-muted-foreground">
                    Backup model if primary is unavailable
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Sliders className="h-5 w-5" />
                Model Parameters
              </CardTitle>
              <CardDescription>Fine-tune the model behavior</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid gap-6 md:grid-cols-3">
                <div className="space-y-2">
                  <Label htmlFor="temperature">Temperature</Label>
                  <Controller
                    name="model_params.temperature"
                    control={control}
                    render={({ field }) => (
                      <Input
                        id="temperature"
                        type="number"
                        step="0.1"
                        min="0"
                        max="2"
                        value={field.value ?? 0.7}
                        onChange={(e) => field.onChange(parseFloat(e.target.value))}
                      />
                    )}
                  />
                  <p className="text-xs text-muted-foreground">0 = deterministic, 2 = creative</p>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="max_tokens">Max Tokens</Label>
                  <Controller
                    name="model_params.max_tokens"
                    control={control}
                    render={({ field }) => (
                      <Input
                        id="max_tokens"
                        type="number"
                        step="1024"
                        min="1024"
                        max="128000"
                        value={field.value ?? 8192}
                        onChange={(e) => field.onChange(parseInt(e.target.value, 10))}
                      />
                    )}
                  />
                  <p className="text-xs text-muted-foreground">Maximum response length</p>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="top_p">Top P</Label>
                  <Controller
                    name="model_params.top_p"
                    control={control}
                    render={({ field }) => (
                      <Input
                        id="top_p"
                        type="number"
                        step="0.05"
                        min="0"
                        max="1"
                        value={field.value ?? 0.95}
                        onChange={(e) => field.onChange(parseFloat(e.target.value))}
                      />
                    )}
                  />
                  <p className="text-xs text-muted-foreground">Nucleus sampling threshold</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* MCP Permissions Tab */}
        <TabsContent value="permissions" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>MCP Server Permissions</CardTitle>
              <CardDescription>Configure which MCP servers this agent can access</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {AVAILABLE_MCP_SERVERS.map((server) => (
                <div key={server.id} className="rounded-lg border p-4">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <Checkbox
                        id={`mcp-${server.id}`}
                        checked={watchMcpServers.includes(server.id)}
                        onCheckedChange={
                          /* istanbul ignore next -- Radix Checkbox handlers can't be tested in JSDOM */
                          (checked) => handleMcpServerToggle(server.id, checked === true)
                        }
                      />
                      <div>
                        <Label htmlFor={`mcp-${server.id}`} className="font-medium">
                          {server.name}
                        </Label>
                        <p className="text-sm text-muted-foreground">{server.description}</p>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>
        </TabsContent>

        {/* Personality Prompt Tab */}
        <TabsContent value="personality" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Personality Prompt</CardTitle>
              <CardDescription>
                Define the agent&apos;s personality, behavior, and communication style. This prompt
                shapes how the agent approaches tasks and interacts.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <Textarea
                  id="personality_prompt"
                  placeholder="You are a..."
                  rows={15}
                  className="font-mono text-sm"
                  {...register('personality_prompt')}
                  aria-invalid={!!errors.personality_prompt}
                  aria-describedby={
                    errors.personality_prompt ? 'personality_prompt-error' : undefined
                  }
                />
                {errors.personality_prompt && (
                  <p
                    id="personality_prompt-error"
                    className="text-sm text-destructive"
                    role="alert"
                  >
                    {errors.personality_prompt.message}
                  </p>
                )}
                <div className="flex items-center gap-4 text-sm text-muted-foreground">
                  <span>Character count: {watch('personality_prompt')?.length || 0}</span>
                  <Separator orientation="vertical" className="h-4" />
                  <span className="text-xs">
                    Tip: Be specific about expertise, communication style, and decision-making
                    approach
                  </span>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </form>
  );
}
