import { useHumanInTheLoop } from "@copilotkit/react-core";

useHumanInTheLoop({
  name: "hookName",           // Unique identifier
  description: "...",         // LLM uses this to decide when to call
  parameters: [               // Input schema
    { name: "param", type: "string", description: "..." }
  ],
  render: ({ args, respond }) => (
    // React component for user interaction
    <Component onComplete={(result) => respond(result)} />
  )
});

useHumanInTheLoop({
  name: "approveAction",
  description: "Request user approval before executing sensitive or irreversible actions",
  parameters: [
    { name: "action", type: "string", description: "Description of the action to approve" },
    { name: "risk_level", type: "string", description: "Risk assessment: low, medium, high" },
    { name: "details", type: "object", description: "Additional action details" }
  ],
  render: ({ args, respond }) => (
    <ApprovalDialog
      action={args.action}
      risk={args.risk_level}
      details={args.details}
      onApprove={() => respond({ approved: true, timestamp: new Date() })}
      onReject={(reason) => respond({ approved: false, reason })}
    />
  )
});

interface ApprovalDialogProps {
  action: string;
  risk: 'low' | 'medium' | 'high';
  details?: Record<string, any>;
  onApprove: () => void;
  onReject: (reason?: string) => void;
}

function ApprovalDialog({ action, risk, details, onApprove, onReject }: ApprovalDialogProps) {
  const [reason, setReason] = useState('');

  const riskColors = {
    low: 'bg-green-100 border-green-500',
    medium: 'bg-yellow-100 border-yellow-500',
    high: 'bg-red-100 border-red-500'
  };

  return (
    <div className={`p-4 rounded-lg border-2 ${riskColors[risk]}`}>
      <h3 className="text-lg font-semibold mb-2">Approval Required</h3>
      <p className="mb-4">{action}</p>

      {details && (
        <pre className="bg-gray-100 p-2 rounded mb-4 text-sm">
          {JSON.stringify(details, null, 2)}
        </pre>
      )}

      <div className="flex gap-2">
        <button
          onClick={onApprove}
          className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
        >
          Approve
        </button>
        <button
          onClick={() => onReject(reason)}
          className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
        >
          Reject
        </button>
      </div>

      <input
        type="text"
        placeholder="Rejection reason (optional)"
        value={reason}
        onChange={(e) => setReason(e.target.value)}
        className="mt-2 w-full p-2 border rounded"
      />
    </div>
  );
}

useHumanInTheLoop({
  name: "collectUserInput",
  description: "Collect structured information from the user via a form",
  parameters: [
    {
      name: "fields",
      type: "array",
      description: "Form fields to display",
      items: {
        type: "object",
        properties: {
          name: { type: "string" },
          label: { type: "string" },
          type: { type: "string", enum: ["text", "email", "number", "textarea", "select"] },
          required: { type: "boolean" },
          options: { type: "array", items: { type: "string" } }
        }
      }
    },
    { name: "title", type: "string", description: "Form title" }
  ],
  render: ({ args, respond }) => (
    <DynamicForm
      title={args.title}
      fields={args.fields}
      onSubmit={(data) => respond({ success: true, data })}
      onCancel={() => respond({ success: false, cancelled: true })}
    />
  )
});

interface Field {
  name: string;
  label: string;
  type: 'text' | 'email' | 'number' | 'textarea' | 'select';
  required?: boolean;
  options?: string[];
  placeholder?: string;
}

interface DynamicFormProps {
  title: string;
  fields: Field[];
  onSubmit: (data: Record<string, any>) => void;
  onCancel: () => void;
}

function DynamicForm({ title, fields, onSubmit, onCancel }: DynamicFormProps) {
  const [formData, setFormData] = useState<Record<string, any>>({});
  const [errors, setErrors] = useState<Record<string, string>>({});

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    // Validate required fields
    const newErrors: Record<string, string> = {};
    fields.forEach(field => {
      if (field.required && !formData[field.name]) {
        newErrors[field.name] = `${field.label} is required`;
      }
    });

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

    onSubmit(formData);
  };

  const renderField = (field: Field) => {
    const commonProps = {
      id: field.name,
      name: field.name,
      value: formData[field.name] || '',
      onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) =>
        setFormData({ ...formData, [field.name]: e.target.value }),
      className: `w-full p-2 border rounded ${errors[field.name] ? 'border-red-500' : ''}`,
      placeholder: field.placeholder
    };

    switch (field.type) {
      case 'textarea':
        return <textarea {...commonProps} rows={4} />;
      case 'select':
        return (
          <select {...commonProps}>
            <option value="">Select...</option>
            {field.options?.map(opt => (
              <option key={opt} value={opt}>{opt}</option>
            ))}
          </select>
        );
      default:
        return <input type={field.type} {...commonProps} />;
    }
  };

  return (
    <form onSubmit={handleSubmit} className="p-4 bg-white rounded-lg shadow">
      <h3 className="text-lg font-semibold mb-4">{title}</h3>

      {fields.map(field => (
        <div key={field.name} className="mb-4">
          <label htmlFor={field.name} className="block mb-1 font-medium">
            {field.label} {field.required && <span className="text-red-500">*</span>}
          </label>
          {renderField(field)}
          {errors[field.name] && (
            <p className="text-red-500 text-sm mt-1">{errors[field.name]}</p>
          )}
        </div>
      ))}

      <div className="flex gap-2">
        <button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded">
          Submit
        </button>
        <button type="button" onClick={onCancel} className="px-4 py-2 bg-gray-300 rounded">
          Cancel
        </button>
      </div>
    </form>
  );
}

useHumanInTheLoop({
  name: "selectOption",
  description: "Present multiple options for the user to choose from",
  parameters: [
    { name: "question", type: "string", description: "Question or prompt" },
    {
      name: "options",
      type: "array",
      description: "Available options",
      items: {
        type: "object",
        properties: {
          id: { type: "string" },
          label: { type: "string" },
          description: { type: "string" },
          icon: { type: "string" }
        }
      }
    },
    { name: "multiSelect", type: "boolean", description: "Allow multiple selections" }
  ],
  render: ({ args, respond }) => (
    <OptionSelector
      question={args.question}
      options={args.options}
      multiSelect={args.multiSelect}
      onSelect={(selected) => respond({ selected })}
    />
  )
});

interface Option {
  id: string;
  label: string;
  description?: string;
  icon?: string;
}

interface OptionSelectorProps {
  question: string;
  options: Option[];
  multiSelect?: boolean;
  onSelect: (selected: string | string[]) => void;
}

function OptionSelector({ question, options, multiSelect, onSelect }: OptionSelectorProps) {
  const [selected, setSelected] = useState<string[]>([]);

  const toggleOption = (id: string) => {
    if (multiSelect) {
      setSelected(prev =>
        prev.includes(id)
          ? prev.filter(x => x !== id)
          : [...prev, id]
      );
    } else {
      setSelected([id]);
    }
  };

  const handleConfirm = () => {
    onSelect(multiSelect ? selected : selected[0]);
  };

  return (
    <div className="p-4 bg-white rounded-lg shadow">
      <h3 className="text-lg font-semibold mb-4">{question}</h3>

      <div className="space-y-2">
        {options.map(option => (
          <button
            key={option.id}
            onClick={() => toggleOption(option.id)}
            className={`w-full p-3 text-left rounded border-2 transition-colors ${
              selected.includes(option.id)
                ? 'border-blue-500 bg-blue-50'
                : 'border-gray-200 hover:border-gray-300'
            }`}
          >
            <div className="flex items-center gap-3">
              {option.icon && <span className="text-2xl">{option.icon}</span>}
              <div>
                <div className="font-medium">{option.label}</div>
                {option.description && (
                  <div className="text-sm text-gray-500">{option.description}</div>
                )}
              </div>
            </div>
          </button>
        ))}
      </div>

      <button
        onClick={handleConfirm}
        disabled={selected.length === 0}
        className="mt-4 px-4 py-2 bg-blue-600 text-white rounded disabled:opacity-50"
      >
        Confirm Selection
      </button>
    </div>
  );
}

useHumanInTheLoop({
  name: "confirmProgress",
  description: "Show progress and confirm continuation",
  parameters: [
    { name: "currentStep", type: "number" },
    { name: "totalSteps", type: "number" },
    { name: "completedItems", type: "array" },
    { name: "nextAction", type: "string" }
  ],
  render: ({ args, respond }) => (
    <ProgressConfirmation
      current={args.currentStep}
      total={args.totalSteps}
      completed={args.completedItems}
      next={args.nextAction}
      onContinue={() => respond({ continue: true })}
      onPause={() => respond({ continue: false, paused: true })}
      onCancel={() => respond({ continue: false, cancelled: true })}
    />
  )
});

orchestrator = LlmAgent(
    name="orchestrator",
    instruction="""
    When performing sensitive actions, use the approveAction tool first.
    When you need user input, use collectUserInput with appropriate fields.
    When presenting choices, use selectOption with clear descriptions.
    Always confirm before irreversible operations.
    """
)