import React, { useEffect, useMemo } from 'react';
import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Select } from '@/components/ui/Select';
import { useToast } from '@/components/ui/Toast';
import {
  useCreateAgent,
  useUpdateAgent,
  useTestRunAgent,
  useAgentToolsFull,
  useAgentSkills,
} from '@/api/automation';
import type { AgentDefinitionFull } from '@/types/automation';
import { Play, Save, X, Loader2 } from 'lucide-react';

const agentEditorSchema = z.object({
  name: z.string().min(1, 'required').max(120),
  description: z.string().max(500).default(''),
  system_prompt: z.string().default(''),
  llm_model: z.string().min(1, 'required').max(100),
  tool_ids: z.array(z.string()).default([]),
  skill_ids: z.array(z.string()).default([]),
  max_steps: z.coerce.number().int().min(1).max(100).default(20),
  max_duration_seconds: z.coerce.number().int().min(1).max(86400).default(300),
  budget_limit_usd: z.coerce.number().min(0).max(10000).default(1.0),
  temperature: z.coerce.number().min(0).max(2).default(0.3),
  max_tokens: z.coerce.number().int().min(1).max(100000).default(1000),
  trace_mode: z.enum(['standard', 'extended']).default('standard'),
  mode: z.enum(['proactive', 'reactive']).default('reactive'),
  is_active: z.boolean().default(true),
  trigger_config: z.record(z.string(), z.unknown()).default({}),
  ai_use_case_metadata: z.record(z.string(), z.unknown()).default({}),
});

type AgentEditorFormData = z.infer<typeof agentEditorSchema>;

export interface AgentEditorProps {
  agent?: AgentDefinitionFull | null;
  onSaved?: (agent: AgentDefinitionFull) => void;
  onCancel?: () => void;
}

const modeOptions = [
  { value: 'reactive', label: 'Reactive' },
  { value: 'proactive', label: 'Proactive' },
];

const traceModeOptions = [
  { value: 'standard', label: 'Standard' },
  { value: 'extended', label: 'Extended' },
];

const commonModels = [
  'ollama/deepseek-v4-flash',
  'gpt-4',
  'gpt-4-turbo',
  'gpt-3.5-turbo',
  'claude-3-opus',
  'claude-3-sonnet',
  'claude-3-haiku',
  'llama-3-70b',
  'llama-3-8b',
  'mistral-large',
  'mixtral-8x7b',
];

export function AgentEditor({ agent, onSaved, onCancel }: AgentEditorProps) {
  const { t } = useTranslation();
  const toast = useToast();
  const { data: tools = [] } = useAgentToolsFull();
  const { data: skills = [] } = useAgentSkills();
  const createAgent = useCreateAgent();
  const updateAgent = useUpdateAgent();
  const testRunAgent = useTestRunAgent();

  const defaultValues = useMemo<AgentEditorFormData>(() => {
    if (agent) {
      return {
        name: agent.name,
        description: agent.description || '',
        system_prompt: agent.system_prompt || '',
        llm_model: agent.llm_model || agent.model || '',
        tool_ids: agent.tool_ids || [],
        skill_ids: agent.skill_ids || [],
        max_steps: agent.max_steps ?? 20,
        max_duration_seconds: agent.max_duration_seconds ?? 300,
        budget_limit_usd: agent.budget_limit_usd ?? agent.budget_limit ?? 1.0,
        temperature: agent.temperature ?? 0.3,
        max_tokens: agent.max_tokens ?? 1000,
        trace_mode: (agent.trace_mode === 'extended' ? 'extended' : 'standard') as 'standard' | 'extended',
        mode: agent.mode,
        is_active: agent.is_active ?? agent.active ?? true,
        trigger_config: agent.trigger_config || {},
        ai_use_case_metadata: agent.ai_use_case_metadata || {},
      };
    }
    return {
      name: '',
      description: '',
      system_prompt: '',
      llm_model: 'ollama/deepseek-v4-flash',
      tool_ids: [],
      skill_ids: [],
      max_steps: 20,
      max_duration_seconds: 300,
      budget_limit_usd: 1.0,
      temperature: 0.3,
      max_tokens: 1000,
      trace_mode: 'standard',
      mode: 'reactive',
      is_active: true,
      trigger_config: {},
      ai_use_case_metadata: {},
    };
  }, [agent]);

  const {
    register,
    handleSubmit,
    control,
    reset,
    watch,
    setValue,
    formState: { errors, isSubmitting },
  } = useForm<AgentEditorFormData>({
    resolver: zodResolver(agentEditorSchema),
    defaultValues,
  });

  const selectedToolIds = watch('tool_ids');
  const selectedSkillIds = watch('skill_ids');

  useEffect(() => {
    reset(defaultValues);
  }, [reset, defaultValues]);

  const onSubmit = async (data: AgentEditorFormData) => {
    try {
      if (agent) {
        const updated = await updateAgent.mutateAsync({ id: agent.id, data });
        toast.success(t('agent.saved'));
        onSaved?.(updated);
      } else {
        const created = await createAgent.mutateAsync(data);
        toast.success(t('agent.created'));
        onSaved?.(created);
      }
    } catch {
      toast.error(t('agent.saveFailed'));
    }
  };

  const handleTestRun = async () => {
    if (!agent) {
      toast.warning(t('agent.saveBeforeTest'));
      return;
    }
    try {
      await testRunAgent.mutateAsync(agent.id);
      toast.success(t('agent.testRunOk'));
    } catch {
      toast.error(t('agent.testRunFailed'));
    }
  };

  const toggleArrayValue = (field: 'tool_ids' | 'skill_ids', value: string) => {
    const current = field === 'tool_ids' ? selectedToolIds : selectedSkillIds;
    const next = (current || []).includes(value)
      ? (current || []).filter((v) => v !== value)
      : [...(current || []), value];
    setValue(field, next, { shouldDirty: true, shouldValidate: true });
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6" data-testid="agent-editor">
      {/* Basic info */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <Input
          label={t('agent.name')}
          required
          error={errors.name?.message}
          placeholder="My Agent"
          {...register('name')}
        />
        <Input
          label={t('agent.description')}
          error={errors.description?.message}
          placeholder={t('agent.descriptionPlaceholder')}
          {...register('description')}
        />
      </div>

      {/* System prompt */}
      <div>
        <label htmlFor="agent-system-prompt" className="block text-sm font-medium text-secondary-700 mb-1">
          {t('agent.systemPrompt')}
        </label>
        <textarea
          id="agent-system-prompt"
          rows={5}
          className="w-full rounded-lg border border-secondary-300 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-primary-500 min-h-touch"
          placeholder="You are a helpful assistant..."
          aria-invalid={!!errors.system_prompt}
          {...register('system_prompt')}
        />
        {errors.system_prompt && (
          <p className="mt-1 text-sm text-danger-600" role="alert">{errors.system_prompt.message}</p>
        )}
      </div>

      {/* Model + mode + trace */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
          <label htmlFor="agent-llm-model" className="block text-sm font-medium text-secondary-700 mb-1">
            {t('agent.model')}
          </label>
          <input
            id="agent-llm-model"
            list="agent-model-suggestions"
            className="w-full rounded-lg border border-secondary-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 min-h-touch"
            aria-invalid={!!errors.llm_model}
            {...register('llm_model')}
          />
          <datalist id="agent-model-suggestions">
            {commonModels.map((m) => (
              <option key={m} value={m} />
            ))}
          </datalist>
          {errors.llm_model && (
            <p className="mt-1 text-sm text-danger-600" role="alert">{errors.llm_model.message}</p>
          )}
        </div>
        <Controller
          control={control}
          name="mode"
          render={({ field }) => (
            <Select
              label={t('agent.mode')}
              options={modeOptions}
              value={field.value}
              onChange={field.onChange}
            />
          )}
        />
        <Controller
          control={control}
          name="trace_mode"
          render={({ field }) => (
            <Select
              label={t('agent.traceMode')}
              options={traceModeOptions}
              value={field.value}
              onChange={field.onChange}
            />
          )}
        />
      </div>

      {/* Tools multi-select */}
      <div>
        <span className="block text-sm font-medium text-secondary-700 mb-2">{t('agent.tools')}</span>
        {tools.length === 0 ? (
          <p className="text-sm text-secondary-400 italic">{t('agent.noToolsAvailable')}</p>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-2 max-h-40 overflow-y-auto" role="group" aria-label={t('agent.tools')}>
            {tools.map((tool) => (
              <label key={tool.id || tool.name} className="flex items-center gap-2 p-2 rounded-md hover:bg-secondary-50 cursor-pointer text-sm min-h-touch">
                <input
                  type="checkbox"
                  checked={selectedToolIds.includes(tool.id || tool.name)}
                  onChange={() => toggleArrayValue('tool_ids', tool.id || tool.name)}
                  className="rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
                />
                <div>
                  <span className="font-medium text-secondary-700">{tool.name}</span>
                  {tool.description && (
                    <p className="text-xs text-secondary-400">{tool.description}</p>
                  )}
                </div>
              </label>
            ))}
          </div>
        )}
      </div>

      {/* Skills multi-select */}
      <div>
        <span className="block text-sm font-medium text-secondary-700 mb-2">{t('agent.skills')}</span>
        {skills.length === 0 ? (
          <p className="text-sm text-secondary-400 italic">{t('agent.noSkillsAvailable')}</p>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-2 max-h-40 overflow-y-auto" role="group" aria-label={t('agent.skills')}>
            {skills.map((skill) => (
              <label key={skill.name} className="flex items-center gap-2 p-2 rounded-md hover:bg-secondary-50 cursor-pointer text-sm min-h-touch">
                <input
                  type="checkbox"
                  checked={selectedSkillIds.includes(skill.name)}
                  onChange={() => toggleArrayValue('skill_ids', skill.name)}
                  className="rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
                />
                <div>
                  <span className="font-medium text-secondary-700">{skill.name}</span>
                  {skill.description && (
                    <p className="text-xs text-secondary-400">{skill.description}</p>
                  )}
                </div>
              </label>
            ))}
          </div>
        )}
      </div>

      {/* Limits */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <Input
          type="number"
          label={t('agent.maxSteps')}
          error={errors.max_steps?.message}
          {...register('max_steps')}
        />
        <Input
          type="number"
          label={`${t('agent.maxDuration')} (s)`}
          error={errors.max_duration_seconds?.message}
          {...register('max_duration_seconds')}
        />
        <Input
          type="number"
          step="0.01"
          label={`${t('agent.budgetLimit')} ($)`}
          error={errors.budget_limit_usd?.message}
          {...register('budget_limit_usd')}
        />
        <Input
          type="number"
          step="0.1"
          label={t('agent.temperature')}
          error={errors.temperature?.message}
          {...register('temperature')}
        />
      </div>

      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
        <Input
          type="number"
          label={t('agent.maxTokens')}
          error={errors.max_tokens?.message}
          {...register('max_tokens')}
        />
        <Input
          type="number"
          label={t('agent.maxExecutions')}
          defaultValue={10}
          disabled
        />
      </div>

      {/* Active toggle */}
      <label className="flex items-center gap-2 text-sm min-h-touch">
        <input
          type="checkbox"
          className="rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
          {...register('is_active')}
        />
        {t('agent.active')}
      </label>

      {/* Buttons */}
      <div className="flex justify-end gap-3 pt-4 border-t border-secondary-200">
        {agent && (
          <Button
            type="button"
            variant="secondary"
            onClick={handleTestRun}
            isLoading={testRunAgent.isPending}
            icon={<Play className="w-4 h-4" />}
          >
            {t('agent.testRun')}
          </Button>
        )}
        {onCancel && (
          <Button type="button" variant="ghost" onClick={onCancel} icon={<X className="w-4 h-4" />}>
            {t('common.cancel')}
          </Button>
        )}
        <Button type="submit" isLoading={isSubmitting} icon={<Save className="w-4 h-4" />}>
          {agent ? t('common.save') : t('common.create')}
        </Button>
      </div>
    </form>
  );
}