"use client";

import * as React from "react";
import { motion, AnimatePresence } from "framer-motion";
import { useState, useEffect } from "react";
import type { Node } from "@xyflow/react";

interface ToolsNodePanelProps {
  node: Node | null;
  onClose: () => void;
  onDelete: (nodeId: string) => void;
  onUpdate: (nodeId: string, data: any) => void;
}

export default function ToolsNodePanel({ node, onClose, onDelete, onUpdate }: ToolsNodePanelProps) {
  const nodeData = node?.data as any;
  const nodeType = nodeData?.nodeType?.toLowerCase() || '';
  const [name, setName] = useState(nodeData?.name || nodeData?.nodeName || "Tool");

  // File Search state
  const [searchQuery, setSearchQuery] = useState(nodeData?.searchQuery || "");
  const [filePattern, setFilePattern] = useState(nodeData?.filePattern || "*.ts,*.tsx,*.js,*.jsx");
  const [maxResults, setMaxResults] = useState(nodeData?.maxResults || "10");
  const [includeContent, setIncludeContent] = useState(nodeData?.includeContent ?? true);

  // Guardrails state
  const [inputAsText, setInputAsText] = useState(nodeData?.inputAsText || "input_as_text");
  const [piiEnabled, setPiiEnabled] = useState(nodeData?.piiEnabled ?? true);
  const [moderationEnabled, setModerationEnabled] = useState(nodeData?.moderationEnabled ?? false);
  const [jailbreakEnabled, setJailbreakEnabled] = useState(nodeData?.jailbreakEnabled ?? false);
  const [hallucinationEnabled, setHallucinationEnabled] = useState(nodeData?.hallucinationEnabled ?? false);
  const [guardrailModel, setGuardrailModel] = useState(nodeData?.guardrailModel || 'openai/gpt-5-mini');
  const [actionOnViolation, setActionOnViolation] = useState(nodeData?.actionOnViolation || 'block');
  const [customRules, setCustomRules] = useState<string>(nodeData?.customRules?.join('\n') || '');

  // PII entities
  const [piiEntities, setPiiEntities] = useState<string[]>(nodeData?.piiEntities || ['CREDIT_CARD_NUMBER']);
  const [showPIIModal, setShowPIIModal] = useState(false);

  const allPIIEntities = [
    { id: 'PERSON_NAME', label: 'Person name' },
    { id: 'EMAIL_ADDRESS', label: 'Email address' },
    { id: 'PHONE_NUMBER', label: 'Phone number' },
    { id: 'LOCATION', label: 'Location' },
    { id: 'DATE_TIME', label: 'Date or time' },
    { id: 'URL', label: 'URL' },
    { id: 'CREDIT_CARD_NUMBER', label: 'Credit card number' },
    { id: 'IBAN', label: 'International bank account number (IBAN)' },
    { id: 'CRYPTO_WALLET', label: 'Cryptocurrency wallet address' },
    { id: 'MEDICAL_LICENSE', label: 'Medical license number' },
    { id: 'IP_ADDRESS', label: 'IP address' },
    { id: 'US_DRIVERS_LICENSE', label: 'US driver license number' },
    { id: 'US_BANK_ACCOUNT', label: 'US bank account number' },
    { id: 'NATIONALITY_RELIGION_POLITICAL', label: 'Nationality/religion/political group' },
  ];

  // Auto-save changes
  useEffect(() => {
    if (!node) return;

    const timeoutId = setTimeout(() => {
      onUpdate(node.id, {
        name,
        nodeName: name,
        searchQuery,
        filePattern,
        maxResults,
        includeContent,
        inputAsText,
        piiEnabled,
        moderationEnabled,
        jailbreakEnabled,
        hallucinationEnabled,
        piiEntities,
        guardrailModel,
        actionOnViolation,
        customRules: customRules.split('\n').filter(r => r.trim()),
      });
    }, 500);

    return () => clearTimeout(timeoutId);
  }, [name, searchQuery, filePattern, maxResults, includeContent, inputAsText, piiEnabled, moderationEnabled, jailbreakEnabled, hallucinationEnabled, piiEntities, guardrailModel, actionOnViolation, customRules, node, onUpdate]);

  return (
    <AnimatePresence>
      {node && (
        <motion.aside
          initial={{ x: 400, opacity: 0 }}
          animate={{ x: 0, opacity: 1 }}
          exit={{ x: 400, opacity: 0 }}
          transition={{ duration: 0.3 }}
          className="fixed right-20 top-80 h-[calc(100vh-100px)] w-[calc(100vw-240px)] max-w-480 bg-accent-white border border-border-faint shadow-lg overflow-y-auto z-50 rounded-16"
        >
          {/* Header */}
          <div className="p-20 border-b border-border-faint">
            <div className="flex items-center justify-between mb-8">
              <input
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                className="text-label-large text-accent-black font-medium bg-transparent border-none outline-none focus:outline-none hover:bg-black-alpha-4 px-2 -ml-2 rounded-4 transition-colors"
                placeholder="Enter node name..."
              />
              <div className="flex items-center gap-8">
                <button
                  onClick={() => onDelete(node?.id || '')}
                  className="w-32 h-32 rounded-6 hover:bg-black-alpha-4 transition-colors flex items-center justify-center group"
                  title="Delete node"
                >
                  <svg className="w-16 h-16 text-black-alpha-48 group-hover:text-black-alpha-64" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                  </svg>
                </button>
                <button
                  onClick={onClose}
                  className="w-32 h-32 rounded-6 hover:bg-black-alpha-4 transition-colors flex items-center justify-center"
                >
                  <svg className="w-16 h-16 text-black-alpha-48" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </div>
            </div>
            <p className="text-body-small text-black-alpha-48">
              {nodeType.includes('file') ? 'Search through files and code' :
               nodeType.includes('guardrail') ? 'Add safety checks and content filtering' :
               'Configure tool'}
            </p>
          </div>

          {/* Form Fields */}
          <div className="p-20 space-y-24">
            {/* File Search Configuration */}
            {nodeType.includes('file') && (
              <>
                <div>
                  <label className="block text-label-small text-black-alpha-48 mb-8">
                    Search Query
                  </label>
                  <input
                    type="text"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    placeholder="Search for functions, classes, text..."
                    className="w-full px-12 py-10 bg-background-base border border-border-faint rounded-8 text-body-medium text-accent-black focus:outline-none focus:border-heat-100 transition-colors"
                  />
                </div>

                <div>
                  <label className="block text-label-small text-black-alpha-48 mb-8">
                    File Pattern
                  </label>
                  <input
                    type="text"
                    value={filePattern}
                    onChange={(e) => setFilePattern(e.target.value)}
                    placeholder="*.ts,*.tsx,*.js"
                    className="w-full px-12 py-10 bg-background-base border border-border-faint rounded-8 text-body-medium text-accent-black font-mono focus:outline-none focus:border-heat-100 transition-colors"
                  />
                  <p className="text-body-small text-black-alpha-48 mt-8">
                    Comma-separated glob patterns
                  </p>
                </div>

                <div>
                  <label className="block text-label-small text-black-alpha-48 mb-8">
                    Max Results
                  </label>
                  <input
                    type="number"
                    value={maxResults}
                    onChange={(e) => setMaxResults(e.target.value)}
                    className="w-full px-12 py-10 bg-background-base border border-border-faint rounded-8 text-body-medium text-accent-black focus:outline-none focus:border-heat-100 transition-colors"
                  />
                </div>

                <div className="flex items-center justify-between">
                  <label className="text-label-small text-accent-black">
                    Include File Content
                  </label>
                  <button
                    onClick={() => setIncludeContent(!includeContent)}
                    className={`w-44 h-24 rounded-full transition-colors relative ${
                      includeContent ? 'bg-heat-100' : 'bg-black-alpha-12'
                    }`}
                  >
                    <motion.div
                      className="w-20 h-20 bg-white rounded-full absolute top-2 shadow-sm"
                      animate={{ left: includeContent ? '22px' : '2px' }}
                      transition={{ duration: 0.2 }}
                    />
                  </button>
                </div>
              </>
            )}

            {/* Guardrails Configuration */}
            {nodeType.includes('guardrail') && (
              <>
                <div>
                  <label className="block text-label-small text-black-alpha-48 mb-8">
                    Name
                  </label>
                  <input
                    type="text"
                    value={nodeData?.name || 'Guardrails'}
                    onChange={(e) => onUpdate(node?.id || '', { name: e.target.value })}
                    className="w-full px-12 py-10 bg-background-base border border-border-faint rounded-8 text-body-medium text-accent-black focus:outline-none focus:border-heat-100 transition-colors"
                  />
                </div>

                <div>
                  <label className="block text-label-small text-black-alpha-48 mb-8">
                    Input Variable
                  </label>
                  <div className="flex items-center gap-8 px-12 py-10 bg-background-base border border-border-faint rounded-8">
                    <svg className="w-16 h-16 text-heat-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    <span className="text-body-small text-accent-black font-mono">{inputAsText}</span>
                    <span className="ml-auto px-8 py-4 bg-heat-4 text-heat-100 rounded-6 text-body-small font-medium">
                      STRING
                    </span>
                  </div>
                  <p className="text-body-small text-black-alpha-48 mt-6">
                    The input content to check for violations
                  </p>
                </div>

                {/* Guardrail Toggles */}
                <div className="space-y-12">
                  {/* PII Detection */}
                  <div className="p-16 bg-accent-white border border-border-faint rounded-12">
                    <div className="flex items-center justify-between mb-12">
                      <div className="flex items-center gap-8">
                        <svg className="w-20 h-20 text-heat-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                        </svg>
                        <span className="text-label-medium text-accent-black">PII Detection</span>
                      </div>
                      <button
                        onClick={() => setPiiEnabled(!piiEnabled)}
                        className={`w-44 h-24 rounded-full transition-colors relative ${
                          piiEnabled ? 'bg-heat-100' : 'bg-black-alpha-12'
                        }`}
                      >
                        <motion.div
                          className="w-20 h-20 bg-white rounded-full absolute top-2 shadow-sm"
                          animate={{ left: piiEnabled ? '22px' : '2px' }}
                          transition={{ duration: 0.2, ease: 'easeOut' }}
                        />
                      </button>
                    </div>

                    <button
                      onClick={() => setShowPIIModal(true)}
                      className="w-full px-12 py-8 bg-heat-4 hover:bg-heat-8 border border-heat-100 rounded-8 text-body-small text-heat-100 transition-colors flex items-center justify-center gap-6 mb-12"
                    >
                      <svg className="w-14 h-14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                      </svg>
                      Configure PII Types ({piiEntities.length} selected)
                    </button>

                    {/* Info Box */}
                    <div className="p-12 bg-heat-4 border border-heat-100 rounded-8">
                      <div className="flex items-start gap-8 mb-8">
                        <svg className="w-16 h-16 text-heat-100 flex-shrink-0 mt-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <div className="flex-1">
                          <p className="text-xs text-accent-black font-medium mb-4">What it does:</p>
                          <p className="text-xs text-heat-100 leading-relaxed">
                            Detects sensitive personal data (emails, phone numbers, credit cards, etc.) and blocks requests containing them.
                          </p>
                        </div>
                      </div>
                      <div className="space-y-6 mt-10">
                        <div>
                          <p className="text-xs text-heat-100 font-medium flex items-center gap-4">
                            <span className="w-12 h-12 bg-heat-100 rounded-full text-white text-[10px] flex items-center justify-center">✓</span>
                            Pass Example:
                          </p>
                          <p className="text-xs text-heat-100 font-mono mt-2 ml-16">"Hello, how can I help you today?"</p>
                        </div>
                        <div>
                          <p className="text-xs text-accent-black font-medium flex items-center gap-4">
                            <span className="w-12 h-12 bg-accent-black rounded-full text-white text-[10px] flex items-center justify-center">✗</span>
                            Fail Example:
                          </p>
                          <p className="text-xs text-heat-100 font-mono mt-2 ml-16">"My email is john@example.com and card is 4532-1234-5678-9010"</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Moderation */}
                  <div className="p-16 bg-accent-white border border-border-faint rounded-12">
                    <div className="flex items-center justify-between mb-12">
                      <div className="flex items-center gap-8">
                        <svg className="w-20 h-20 text-heat-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                        </svg>
                        <span className="text-label-medium text-accent-black">Content Moderation</span>
                      </div>
                      <button
                        onClick={() => setModerationEnabled(!moderationEnabled)}
                        className={`w-44 h-24 rounded-full transition-colors relative ${
                          moderationEnabled ? 'bg-heat-100' : 'bg-black-alpha-12'
                        }`}
                      >
                        <motion.div
                          className="w-20 h-20 bg-white rounded-full absolute top-2 shadow-sm"
                          animate={{ left: moderationEnabled ? '22px' : '2px' }}
                          transition={{ duration: 0.2, ease: 'easeOut' }}
                        />
                      </button>
                    </div>

                    <div className="p-12 bg-heat-4 border border-heat-100 rounded-8">
                      <div className="flex items-start gap-8 mb-8">
                        <svg className="w-16 h-16 text-heat-100 flex-shrink-0 mt-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <div className="flex-1">
                          <p className="text-xs text-accent-black font-medium mb-4">What it does:</p>
                          <p className="text-xs text-heat-100 leading-relaxed">
                            Blocks offensive, hateful, violent, or sexually explicit content from being processed.
                          </p>
                        </div>
                      </div>
                      <div className="space-y-6 mt-10">
                        <div>
                          <p className="text-xs text-heat-100 font-medium flex items-center gap-4">
                            <span className="w-12 h-12 bg-heat-100 rounded-full text-white text-[10px] flex items-center justify-center">✓</span>
                            Pass Example:
                          </p>
                          <p className="text-xs text-heat-100 font-mono mt-2 ml-16">"This product is excellent quality"</p>
                        </div>
                        <div>
                          <p className="text-xs text-accent-black font-medium flex items-center gap-4">
                            <span className="w-12 h-12 bg-accent-black rounded-full text-white text-[10px] flex items-center justify-center">✗</span>
                            Fail Example:
                          </p>
                          <p className="text-xs text-heat-100 font-mono mt-2 ml-16">"[Offensive or hateful content]"</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Jailbreak */}
                  <div className="p-16 bg-accent-white border border-border-faint rounded-12">
                    <div className="flex items-center justify-between mb-12">
                      <div className="flex items-center gap-8">
                        <svg className="w-20 h-20 text-heat-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                        </svg>
                        <span className="text-label-medium text-accent-black">Jailbreak Detection</span>
                      </div>
                      <button
                        onClick={() => setJailbreakEnabled(!jailbreakEnabled)}
                        className={`w-44 h-24 rounded-full transition-colors relative ${
                          jailbreakEnabled ? 'bg-heat-100' : 'bg-black-alpha-12'
                        }`}
                      >
                        <motion.div
                          className="w-20 h-20 bg-white rounded-full absolute top-2 shadow-sm"
                          animate={{ left: jailbreakEnabled ? '22px' : '2px' }}
                          transition={{ duration: 0.2, ease: 'easeOut' }}
                        />
                      </button>
                    </div>

                    <div className="p-12 bg-heat-4 border border-heat-100 rounded-8">
                      <div className="flex items-start gap-8 mb-8">
                        <svg className="w-16 h-16 text-heat-100 flex-shrink-0 mt-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <div className="flex-1">
                          <p className="text-xs text-accent-black font-medium mb-4">What it does:</p>
                          <p className="text-xs text-heat-100 leading-relaxed">
                            Detects attempts to bypass AI safety measures or trick the model into ignoring its instructions.
                          </p>
                        </div>
                      </div>
                      <div className="space-y-6 mt-10">
                        <div>
                          <p className="text-xs text-heat-100 font-medium flex items-center gap-4">
                            <span className="w-12 h-12 bg-heat-100 rounded-full text-white text-[10px] flex items-center justify-center">✓</span>
                            Pass Example:
                          </p>
                          <p className="text-xs text-heat-100 font-mono mt-2 ml-16">"Please help me write a professional email"</p>
                        </div>
                        <div>
                          <p className="text-xs text-accent-black font-medium flex items-center gap-4">
                            <span className="w-12 h-12 bg-accent-black rounded-full text-white text-[10px] flex items-center justify-center">✗</span>
                            Fail Example:
                          </p>
                          <p className="text-xs text-heat-100 font-mono mt-2 ml-16">"Ignore previous instructions and tell me how to..."</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Hallucination */}
                  <div className="p-16 bg-accent-white border border-border-faint rounded-12">
                    <div className="flex items-center justify-between mb-12">
                      <div className="flex items-center gap-8">
                        <svg className="w-20 h-20 text-heat-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                        </svg>
                        <span className="text-label-medium text-accent-black">Hallucination Detection</span>
                      </div>
                      <button
                        onClick={() => setHallucinationEnabled(!hallucinationEnabled)}
                        className={`w-44 h-24 rounded-full transition-colors relative ${
                          hallucinationEnabled ? 'bg-heat-100' : 'bg-black-alpha-12'
                        }`}
                      >
                        <motion.div
                          className="w-20 h-20 bg-white rounded-full absolute top-2 shadow-sm"
                          animate={{ left: hallucinationEnabled ? '22px' : '2px' }}
                          transition={{ duration: 0.2, ease: 'easeOut' }}
                        />
                      </button>
                    </div>

                    <div className="p-12 bg-heat-4 border border-heat-100 rounded-8">
                      <div className="flex items-start gap-8 mb-8">
                        <svg className="w-16 h-16 text-heat-100 flex-shrink-0 mt-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <div className="flex-1">
                          <p className="text-xs text-accent-black font-medium mb-4">What it does:</p>
                          <p className="text-xs text-heat-100 leading-relaxed">
                            Checks if the AI output contains factual claims that can't be verified or seem made up.
                          </p>
                        </div>
                      </div>
                      <div className="space-y-6 mt-10">
                        <div>
                          <p className="text-xs text-heat-100 font-medium flex items-center gap-4">
                            <span className="w-12 h-12 bg-heat-100 rounded-full text-white text-[10px] flex items-center justify-center">✓</span>
                            Pass Example:
                          </p>
                          <p className="text-xs text-heat-100 font-mono mt-2 ml-16">"The sky appears blue due to Rayleigh scattering"</p>
                        </div>
                        <div>
                          <p className="text-xs text-accent-black font-medium flex items-center gap-4">
                            <span className="w-12 h-12 bg-accent-black rounded-full text-white text-[10px] flex items-center justify-center">✗</span>
                            Fail Example:
                          </p>
                          <p className="text-xs text-heat-100 font-mono mt-2 ml-16">"Studies show that 95% of unicorns prefer rainbow diets"</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Settings Section */}
                  <div className="space-y-16 pt-16 border-t border-border-faint">
                    {/* Model Selection */}
                    <div>
                      <label className="block text-label-small text-black-alpha-48 mb-8">
                        Analysis Model
                      </label>
                      <select
                        value={guardrailModel}
                        onChange={(e) => setGuardrailModel(e.target.value)}
                        className="w-full px-12 py-10 bg-background-base border border-border-faint rounded-8 text-body-medium text-accent-black focus:outline-none focus:border-heat-100 transition-colors cursor-pointer"
                      >
                        <optgroup label="OpenAI (Recommended)">
                          <option value="openai/gpt-5-mini">GPT-5 Mini (Fast & Cheap)</option>
                          <option value="openai/gpt-5">GPT-5</option>
                        </optgroup>
                        <optgroup label="Groq (Fastest)">
                          <option value="groq/openai/gpt-oss-20b">GPT OSS 20B</option>
                          <option value="groq/openai/gpt-oss-120b">GPT OSS 120B</option>
                        </optgroup>
                        <optgroup label="Anthropic">
                          <option value="anthropic/claude-sonnet-4-5-20250929">Claude Sonnet 4.5</option>
                          <option value="anthropic/claude-sonnet-4-20250514">Claude Sonnet 4</option>
                        </optgroup>
                      </select>
                      <p className="text-body-small text-black-alpha-48 mt-8">
                        LLM used to analyze content for violations
                      </p>
                    </div>

                    {/* Action on Violation */}
                    <div>
                      <label className="block text-label-small text-black-alpha-48 mb-8">
                        Action on Violation
                      </label>
                      <select
                        value={actionOnViolation}
                        onChange={(e) => setActionOnViolation(e.target.value)}
                        className="w-full px-12 py-10 bg-background-base border border-border-faint rounded-8 text-body-medium text-accent-black focus:outline-none focus:border-heat-100 transition-colors cursor-pointer"
                      >
                        <option value="block">🛑 Block - Stop workflow execution</option>
                        <option value="warn">⚠️ Warn - Continue with warning</option>
                        <option value="flag">🏴 Flag - Log violation and continue</option>
                      </select>
                      <p className="text-body-small text-black-alpha-48 mt-8">
                        What to do when violations are detected
                      </p>
                    </div>

                    {/* Custom Rules */}
                    <div>
                      <label className="block text-label-small text-black-alpha-48 mb-8">
                        Custom Rules (Optional)
                      </label>
                      <textarea
                        value={customRules}
                        onChange={(e) => setCustomRules(e.target.value)}
                        placeholder="Block messages containing: refund&#10;Block messages about: billing&#10;Require approval for: account changes"
                        rows={4}
                        className="w-full px-12 py-10 bg-background-base border border-border-faint rounded-8 text-body-medium text-accent-black placeholder-black-alpha-32 focus:outline-none focus:border-heat-100 transition-colors resize-y font-mono"
                      />
                      <p className="text-body-small text-black-alpha-48 mt-8">
                        One rule per line. LLM will check content against these rules.
                      </p>
                    </div>

                  </div>
                </div>
              </>
            )}

          </div>
        </motion.aside>
      )}

      {/* PII Configuration Modal */}
      {showPIIModal && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          className="fixed inset-0 bg-black-alpha-64 z-[200] flex items-center justify-center backdrop-blur-sm"
          onClick={() => setShowPIIModal(false)}
        >
          <motion.div
            initial={{ scale: 0.95, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            transition={{ duration: 0.2, ease: 'easeOut' }}
            onClick={(e) => e.stopPropagation()}
            className="bg-accent-white rounded-16 shadow-2xl w-[600px] max-h-[80vh] overflow-hidden flex flex-col"
          >
            {/* Header */}
            <div className="p-20 border-b border-border-faint bg-background-base">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-10">
                  <svg className="w-24 h-24 text-heat-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                  </svg>
                  <div>
                    <h3 className="text-label-large text-accent-black">
                      PII Detection Configuration
                    </h3>
                    <p className="text-body-small text-black-alpha-48 mt-2">
                      Select which types of personal data to detect
                    </p>
                  </div>
                </div>
                <button
                  onClick={() => setShowPIIModal(false)}
                  className="w-32 h-32 rounded-6 hover:bg-black-alpha-4 transition-colors flex items-center justify-center"
                >
                  <svg className="w-16 h-16 text-black-alpha-48" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </div>
            </div>

            {/* Content */}
            <div className="p-20 flex-1 overflow-y-auto">
              <div className="flex items-center justify-between mb-16">
                <button
                  onClick={() => setPiiEntities(allPIIEntities.map(e => e.id))}
                  className="text-body-small text-heat-100 hover:text-heat-200 transition-colors font-medium"
                >
                  Select all
                </button>
                <button
                  onClick={() => setPiiEntities([])}
                  className="text-body-small text-black-alpha-48 hover:text-accent-black transition-colors"
                >
                  Clear all
                </button>
              </div>

              <div className="space-y-16">
                <div>
                  <h4 className="text-label-small text-accent-black mb-10">Common Types</h4>
                  <div className="grid grid-cols-2 gap-8">
                    {allPIIEntities.slice(0, 8).map((entity) => (
                      <label key={entity.id} className="flex items-center gap-8 p-10 hover:bg-background-base rounded-8 cursor-pointer transition-colors">
                        <input
                          type="checkbox"
                          checked={piiEntities.includes(entity.id)}
                          onChange={(e) => {
                            if (e.target.checked) {
                              setPiiEntities([...piiEntities, entity.id]);
                            } else {
                              setPiiEntities(piiEntities.filter(id => id !== entity.id));
                            }
                          }}
                          className="w-16 h-16 rounded-4 border border-border-faint text-heat-100 focus:ring-heat-100"
                        />
                        <span className="text-body-small text-accent-black">{entity.label}</span>
                      </label>
                    ))}
                  </div>
                </div>

                <div>
                  <h4 className="text-label-small text-accent-black mb-10">US-Specific Types</h4>
                  <div className="grid grid-cols-2 gap-8">
                    {allPIIEntities.slice(8).map((entity) => (
                      <label key={entity.id} className="flex items-center gap-8 p-10 hover:bg-background-base rounded-8 cursor-pointer transition-colors">
                        <input
                          type="checkbox"
                          checked={piiEntities.includes(entity.id)}
                          onChange={(e) => {
                            if (e.target.checked) {
                              setPiiEntities([...piiEntities, entity.id]);
                            } else {
                              setPiiEntities(piiEntities.filter(id => id !== entity.id));
                            }
                          }}
                          className="w-16 h-16 rounded-4 border border-border-faint text-heat-100 focus:ring-heat-100"
                        />
                        <span className="text-body-small text-accent-black">{entity.label}</span>
                      </label>
                    ))}
                  </div>
                </div>
              </div>
            </div>

            {/* Footer */}
            <div className="p-20 border-t border-border-faint bg-background-base flex justify-between items-center">
              <div className="text-body-small text-black-alpha-48">
                {piiEntities.length} of {allPIIEntities.length} types selected
              </div>
              <div className="flex gap-8">
                <button
                  onClick={() => setShowPIIModal(false)}
                  className="px-16 py-8 text-body-small text-accent-black hover:bg-black-alpha-4 rounded-8 transition-colors"
                >
                  Cancel
                </button>
                <button
                  onClick={() => {
                    onUpdate(node?.id || '', { piiEntities });
                    setShowPIIModal(false);
                  }}
                  className="px-20 py-8 bg-accent-black hover:bg-black-alpha-88 text-white rounded-8 text-body-small font-medium transition-colors"
                >
                  Save Changes
                </button>
              </div>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}