'use client';

import { useEffect, useState, useCallback } from 'react';
import { useRouter, useParams } from 'next/navigation';
import Link from 'next/link';
import {
  profileSectionsService,
  profileFieldsService,
  agentTypesService,
  ProfileSection,
  ProfileField,
  AgentType,
  CreateFieldDto,
  UpdateFieldDto,
  FieldType,
  FieldOption,
  RangeConfig,
  FIELD_TYPES,
  getErrorMessage,
} from '@/services';

type FieldModalType = 'create' | 'edit' | 'delete' | null;
type AssignModalType = 'assign' | null;

const REQUIRES_OPTIONS: FieldType[] = ['SELECT', 'RADIO', 'MULTI_SELECT', 'CHECKBOX_GROUP'];

export default function SectionDetailPage() {
  const router = useRouter();
  const params = useParams();
  const sectionId = params.id as string;

  const [section, setSection] = useState<ProfileSection | null>(null);
  const [fields, setFields] = useState<ProfileField[]>([]);
  const [agentTypes, setAgentTypes] = useState<AgentType[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState('');

  // Field Modal state
  const [fieldModalType, setFieldModalType] = useState<FieldModalType>(null);
  const [selectedField, setSelectedField] = useState<ProfileField | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [modalError, setModalError] = useState('');

  // Assign Modal state
  const [assignModalType, setAssignModalType] = useState<AssignModalType>(null);

  // Field Form state
  const [fieldForm, setFieldForm] = useState<CreateFieldDto>({
    sectionId: '',
    name: '',
    fieldType: 'TEXT',
    description: '',
    placeholder: '',
    defaultValue: '',
    sortOrder: 0,
    isActive: true,
    isRequired: false,
    options: [],
    rangeConfig: undefined,
  });

  // Options editor state
  const [optionInput, setOptionInput] = useState({ value: '', label: '' });

  // Assignment form state
  const [assignForm, setAssignForm] = useState({
    agentTypeId: '',
    sortOrder: 0,
    isRequired: false,
  });

  const fetchData = useCallback(async () => {
    setIsLoading(true);
    setError('');
    try {
      const [sectionData, fieldsData, agentTypesData] = await Promise.all([
        profileSectionsService.getById(sectionId),
        profileFieldsService.getAll(sectionId, true),
        agentTypesService.getAll(true),
      ]);
      setSection(sectionData);
      setFields(fieldsData);
      setAgentTypes(agentTypesData);
    } catch (err) {
      const errorMessage = getErrorMessage(err);
      setError(errorMessage);
      if (errorMessage.includes('Unauthorized')) {
        router.push('/login');
      }
    } finally {
      setIsLoading(false);
    }
  }, [sectionId, router]);

  useEffect(() => {
    if (sectionId) {
      fetchData();
    }
  }, [sectionId, fetchData]);

  // Field Modal handlers
  const openCreateFieldModal = () => {
    setFieldForm({
      sectionId,
      name: '',
      fieldType: 'TEXT',
      description: '',
      placeholder: '',
      defaultValue: '',
      sortOrder: fields.length,
      isActive: true,
      isRequired: false,
      options: [],
      rangeConfig: undefined,
    });
    setOptionInput({ value: '', label: '' });
    setModalError('');
    setFieldModalType('create');
  };

  const openEditFieldModal = (field: ProfileField) => {
    setSelectedField(field);
    setFieldForm({
      sectionId,
      name: field.name,
      fieldType: field.fieldType,
      description: field.description || '',
      placeholder: field.placeholder || '',
      defaultValue: field.defaultValue || '',
      sortOrder: field.sortOrder,
      isActive: field.isActive,
      isRequired: field.isRequired,
      options: field.options || [],
      rangeConfig: field.rangeConfig || undefined,
    });
    setOptionInput({ value: '', label: '' });
    setModalError('');
    setFieldModalType('edit');
  };

  const openDeleteFieldModal = (field: ProfileField) => {
    setSelectedField(field);
    setModalError('');
    setFieldModalType('delete');
  };

  const closeFieldModal = () => {
    setFieldModalType(null);
    setSelectedField(null);
    setModalError('');
  };

  const handleCreateField = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    setModalError('');
    try {
      await profileFieldsService.create(fieldForm);
      closeFieldModal();
      fetchData();
    } catch (err) {
      setModalError(getErrorMessage(err));
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleUpdateField = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedField) return;
    setIsSubmitting(true);
    setModalError('');
    try {
      const { sectionId: _, ...updateData } = fieldForm;
      await profileFieldsService.update(selectedField.id, updateData as UpdateFieldDto);
      closeFieldModal();
      fetchData();
    } catch (err) {
      setModalError(getErrorMessage(err));
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleDeleteField = async () => {
    if (!selectedField) return;
    setIsSubmitting(true);
    setModalError('');
    try {
      await profileFieldsService.delete(selectedField.id);
      closeFieldModal();
      fetchData();
    } catch (err) {
      setModalError(getErrorMessage(err));
    } finally {
      setIsSubmitting(false);
    }
  };

  // Options management
  const addOption = () => {
    if (!optionInput.value.trim() || !optionInput.label.trim()) return;
    setFieldForm({
      ...fieldForm,
      options: [...(fieldForm.options || []), { ...optionInput }],
    });
    setOptionInput({ value: '', label: '' });
  };

  const removeOption = (index: number) => {
    setFieldForm({
      ...fieldForm,
      options: (fieldForm.options || []).filter((_, i) => i !== index),
    });
  };

  // Range config management
  const updateRangeConfig = (key: keyof RangeConfig, value: number | string) => {
    setFieldForm({
      ...fieldForm,
      rangeConfig: {
        min: fieldForm.rangeConfig?.min || 0,
        max: fieldForm.rangeConfig?.max || 100,
        step: fieldForm.rangeConfig?.step,
        unit: fieldForm.rangeConfig?.unit,
        [key]: typeof value === 'string' ? value : Number(value),
      },
    });
  };

  // Toggle field status
  const toggleFieldStatus = async (field: ProfileField) => {
    try {
      await profileFieldsService.update(field.id, { isActive: !field.isActive });
      fetchData();
    } catch (err) {
      setError(getErrorMessage(err));
    }
  };

  // Assignment handlers
  const openAssignModal = () => {
    setAssignForm({
      agentTypeId: '',
      sortOrder: 0,
      isRequired: false,
    });
    setModalError('');
    setAssignModalType('assign');
  };

  const closeAssignModal = () => {
    setAssignModalType(null);
    setModalError('');
  };

  const handleAssign = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    setModalError('');
    try {
      await profileSectionsService.assignToAgentType(sectionId, assignForm);
      closeAssignModal();
      fetchData();
    } catch (err) {
      setModalError(getErrorMessage(err));
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleRemoveAssignment = async (agentTypeId: string) => {
    if (!confirm('Remove this section from the agent type?')) return;
    try {
      await profileSectionsService.removeFromAgentType(sectionId, agentTypeId);
      fetchData();
    } catch (err) {
      setError(getErrorMessage(err));
    }
  };

  const getFieldTypeLabel = (type: FieldType) => {
    const found = FIELD_TYPES.find((ft) => ft.value === type);
    return found?.label || type;
  };

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-12">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
      </div>
    );
  }

  if (!section) {
    return (
      <div className="text-center py-12">
        <p className="text-gray-500">Section not found</p>
        <Link href="/dashboard/profile-sections" className="mt-4 text-blue-600 hover:underline">
          Back to sections
        </Link>
      </div>
    );
  }

  // Get assigned agent types
  const assignedAgentTypeIds = section.agentTypeSections?.map((ats) => ats.agentTypeId) || [];
  const availableAgentTypes = agentTypes.filter((at) => !assignedAgentTypeIds.includes(at.id));

  return (
    <div>
      {/* Breadcrumb */}
      <div className="mb-4">
        <Link href="/dashboard/profile-sections" className="text-blue-600 hover:underline text-sm">
          &larr; Back to Profile Sections
        </Link>
      </div>

      {/* Page Header */}
      <div className="mb-6 flex justify-between items-start">
        <div>
          <div className="flex items-center">
            {section.icon && <span className="text-2xl mr-2">{section.icon}</span>}
            <h1 className="text-2xl font-bold text-gray-900">{section.name}</h1>
            {section.isGlobal && (
              <span className="ml-3 px-2 py-1 text-xs font-semibold rounded-full bg-purple-100 text-purple-800">
                Global
              </span>
            )}
          </div>
          <p className="text-gray-500 mt-1">{section.description || 'No description'}</p>
        </div>
        <div className="flex space-x-3">
          <button
            onClick={fetchData}
            className="px-4 py-2 border border-gray-300 hover:bg-gray-50 text-gray-700 text-sm font-medium rounded-lg transition-colors"
          >
            Refresh
          </button>
        </div>
      </div>

      {error && (
        <div className="mb-6 px-4 py-3 bg-red-50 border border-red-200 rounded-lg">
          <p className="text-red-700 text-sm">{error}</p>
        </div>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Fields Section */}
        <div className="lg:col-span-2">
          <div className="bg-white rounded-lg shadow">
            <div className="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
              <h2 className="text-lg font-semibold text-gray-900">Fields ({fields.length})</h2>
              <button
                onClick={openCreateFieldModal}
                className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors flex items-center"
              >
                <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
                </svg>
                Add Field
              </button>
            </div>

            <div className="divide-y divide-gray-200">
              {fields.length === 0 ? (
                <div className="text-center py-12">
                  <svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                  </svg>
                  <p className="mt-2 text-gray-500">No fields defined yet</p>
                  <button
                    onClick={openCreateFieldModal}
                    className="mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
                  >
                    Add First Field
                  </button>
                </div>
              ) : (
                fields.map((field, index) => (
                  <div key={field.id} className="px-6 py-4 hover:bg-gray-50">
                    <div className="flex justify-between items-start">
                      <div className="flex-1">
                        <div className="flex items-center">
                          <span className="text-gray-400 mr-3 text-sm">#{index + 1}</span>
                          <span className="font-medium text-gray-900">{field.name}</span>
                          {field.isRequired && (
                            <span className="ml-2 text-red-500 text-xs">*required</span>
                          )}
                        </div>
                        <div className="mt-1 flex items-center space-x-3 text-sm">
                          <span className="px-2 py-0.5 bg-gray-100 text-gray-600 rounded">
                            {getFieldTypeLabel(field.fieldType)}
                          </span>
                          <span className="text-gray-400">{field.slug}</span>
                          {field.placeholder && (
                            <span className="text-gray-400 truncate max-w-xs">
                              placeholder: {field.placeholder}
                            </span>
                          )}
                        </div>
                        {field.options && field.options.length > 0 && (
                          <div className="mt-2 flex flex-wrap gap-1">
                            {(field.options as FieldOption[]).slice(0, 5).map((opt, i) => (
                              <span key={i} className="px-2 py-0.5 bg-blue-50 text-blue-700 text-xs rounded">
                                {opt.label}
                              </span>
                            ))}
                            {field.options.length > 5 && (
                              <span className="px-2 py-0.5 bg-gray-100 text-gray-500 text-xs rounded">
                                +{field.options.length - 5} more
                              </span>
                            )}
                          </div>
                        )}
                      </div>
                      <div className="flex items-center space-x-2">
                        <button
                          onClick={() => toggleFieldStatus(field)}
                          className={`px-2 py-1 text-xs font-semibold rounded-full ${
                            field.isActive
                              ? 'bg-green-100 text-green-800'
                              : 'bg-gray-100 text-gray-800'
                          }`}
                        >
                          {field.isActive ? 'Active' : 'Inactive'}
                        </button>
                        <button
                          onClick={() => openEditFieldModal(field)}
                          className="p-1 text-gray-400 hover:text-blue-600"
                        >
                          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                          </svg>
                        </button>
                        <button
                          onClick={() => openDeleteFieldModal(field)}
                          className="p-1 text-gray-400 hover:text-red-600"
                        >
                          <svg className="w-5 h-5" 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>
                      </div>
                    </div>
                  </div>
                ))
              )}
            </div>
          </div>
        </div>

        {/* Agent Type Assignments */}
        <div className="lg:col-span-1">
          <div className="bg-white rounded-lg shadow">
            <div className="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
              <h2 className="text-lg font-semibold text-gray-900">Agent Types</h2>
              {!section.isGlobal && availableAgentTypes.length > 0 && (
                <button
                  onClick={openAssignModal}
                  className="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
                >
                  Assign
                </button>
              )}
            </div>
            <div className="p-6">
              {section.isGlobal ? (
                <div className="text-center py-4">
                  <span className="px-3 py-1.5 bg-purple-100 text-purple-800 rounded-full text-sm font-medium">
                    Available to all agent types
                  </span>
                  <p className="mt-3 text-sm text-gray-500">
                    This is a global section and appears for all agent types.
                  </p>
                </div>
              ) : section.agentTypeSections && section.agentTypeSections.length > 0 ? (
                <div className="space-y-3">
                  {section.agentTypeSections.map((ats) => {
                    const agentType = agentTypes.find((at) => at.id === ats.agentTypeId);
                    return (
                      <div
                        key={ats.id}
                        className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
                      >
                        <div>
                          <p className="font-medium text-gray-900">{agentType?.name || 'Unknown'}</p>
                          <p className="text-xs text-gray-500">
                            {ats.isRequired ? 'Required' : 'Optional'} &bull; Order: {ats.sortOrder}
                          </p>
                        </div>
                        <button
                          onClick={() => handleRemoveAssignment(ats.agentTypeId)}
                          className="p-1 text-gray-400 hover:text-red-600"
                          title="Remove assignment"
                        >
                          <svg className="w-5 h-5" 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>
              ) : (
                <div className="text-center py-4">
                  <p className="text-gray-500 text-sm">Not assigned to any agent type</p>
                  {availableAgentTypes.length > 0 && (
                    <button
                      onClick={openAssignModal}
                      className="mt-3 text-blue-600 hover:underline text-sm"
                    >
                      Assign to agent type
                    </button>
                  )}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* Field Create/Edit Modal */}
      {(fieldModalType === 'create' || fieldModalType === 'edit') && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 overflow-y-auto">
          <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 my-8">
            <div className="px-6 py-4 border-b border-gray-200">
              <h3 className="text-lg font-semibold text-gray-900">
                {fieldModalType === 'create' ? 'Create Field' : 'Edit Field'}
              </h3>
            </div>
            <form onSubmit={fieldModalType === 'create' ? handleCreateField : handleUpdateField}>
              <div className="px-6 py-4 space-y-4 max-h-[60vh] overflow-y-auto">
                {modalError && (
                  <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
                    <p className="text-red-700 text-sm">{modalError}</p>
                  </div>
                )}

                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Name <span className="text-red-500">*</span>
                    </label>
                    <input
                      type="text"
                      value={fieldForm.name}
                      onChange={(e) => setFieldForm({ ...fieldForm, name: e.target.value })}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white"
                      required
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Field Type <span className="text-red-500">*</span>
                    </label>
                    <select
                      value={fieldForm.fieldType}
                      onChange={(e) => setFieldForm({ ...fieldForm, fieldType: e.target.value as FieldType })}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white"
                    >
                      {FIELD_TYPES.map((ft) => (
                        <option key={ft.value} value={ft.value}>
                          {ft.label} - {ft.description}
                        </option>
                      ))}
                    </select>
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Description
                  </label>
                  <input
                    type="text"
                    value={fieldForm.description}
                    onChange={(e) => setFieldForm({ ...fieldForm, description: e.target.value })}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white placeholder:text-gray-500"
                    placeholder="Help text for this field"
                  />
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Placeholder
                    </label>
                    <input
                      type="text"
                      value={fieldForm.placeholder}
                      onChange={(e) => setFieldForm({ ...fieldForm, placeholder: e.target.value })}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Default Value
                    </label>
                    <input
                      type="text"
                      value={fieldForm.defaultValue}
                      onChange={(e) => setFieldForm({ ...fieldForm, defaultValue: e.target.value })}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white"
                    />
                  </div>
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Sort Order
                    </label>
                    <input
                      type="number"
                      value={fieldForm.sortOrder}
                      onChange={(e) => setFieldForm({ ...fieldForm, sortOrder: parseInt(e.target.value) || 0 })}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white"
                    />
                  </div>
                  <div className="flex items-center space-x-6 pt-6">
                    <div className="flex items-center">
                      <input
                        type="checkbox"
                        id="fieldIsActive"
                        checked={fieldForm.isActive}
                        onChange={(e) => setFieldForm({ ...fieldForm, isActive: e.target.checked })}
                        className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                      />
                      <label htmlFor="fieldIsActive" className="ml-2 text-sm text-gray-700">
                        Active
                      </label>
                    </div>
                    <div className="flex items-center">
                      <input
                        type="checkbox"
                        id="fieldIsRequired"
                        checked={fieldForm.isRequired}
                        onChange={(e) => setFieldForm({ ...fieldForm, isRequired: e.target.checked })}
                        className="rounded border-gray-300 text-red-600 focus:ring-red-500"
                      />
                      <label htmlFor="fieldIsRequired" className="ml-2 text-sm text-gray-700">
                        Required
                      </label>
                    </div>
                  </div>
                </div>

                {/* Options Editor for SELECT, RADIO, MULTI_SELECT, CHECKBOX_GROUP */}
                {REQUIRES_OPTIONS.includes(fieldForm.fieldType) && (
                  <div className="border border-gray-200 rounded-lg p-4">
                    <label className="block text-sm font-medium text-gray-700 mb-3">
                      Options
                    </label>
                    <div className="flex space-x-2 mb-3">
                      <input
                        type="text"
                        value={optionInput.value}
                        onChange={(e) => setOptionInput({ ...optionInput, value: e.target.value })}
                        placeholder="Value"
                        className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm text-gray-900 bg-white placeholder:text-gray-500"
                      />
                      <input
                        type="text"
                        value={optionInput.label}
                        onChange={(e) => setOptionInput({ ...optionInput, label: e.target.value })}
                        placeholder="Label"
                        className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm text-gray-900 bg-white placeholder:text-gray-500"
                      />
                      <button
                        type="button"
                        onClick={addOption}
                        className="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition-colors"
                      >
                        Add
                      </button>
                    </div>
                    {fieldForm.options && fieldForm.options.length > 0 && (
                      <div className="space-y-2">
                        {fieldForm.options.map((opt, index) => (
                          <div
                            key={index}
                            className="flex items-center justify-between px-3 py-2 bg-gray-50 rounded"
                          >
                            <span className="text-sm">
                              <span className="text-gray-500">{opt.value}</span>
                              <span className="mx-2">→</span>
                              <span className="font-medium">{opt.label}</span>
                            </span>
                            <button
                              type="button"
                              onClick={() => removeOption(index)}
                              className="text-red-500 hover:text-red-700"
                            >
                              <svg className="w-4 h-4" 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>
                    )}
                  </div>
                )}

                {/* Range Config for RANGE type */}
                {fieldForm.fieldType === 'RANGE' && (
                  <div className="border border-gray-200 rounded-lg p-4">
                    <label className="block text-sm font-medium text-gray-700 mb-3">
                      Range Configuration
                    </label>
                    <div className="grid grid-cols-4 gap-3">
                      <div>
                        <label className="block text-xs text-gray-500 mb-1">Min</label>
                        <input
                          type="number"
                          value={fieldForm.rangeConfig?.min || 0}
                          onChange={(e) => updateRangeConfig('min', e.target.value)}
                          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm text-gray-900 bg-white"
                        />
                      </div>
                      <div>
                        <label className="block text-xs text-gray-500 mb-1">Max</label>
                        <input
                          type="number"
                          value={fieldForm.rangeConfig?.max || 100}
                          onChange={(e) => updateRangeConfig('max', e.target.value)}
                          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm text-gray-900 bg-white"
                        />
                      </div>
                      <div>
                        <label className="block text-xs text-gray-500 mb-1">Step</label>
                        <input
                          type="number"
                          value={fieldForm.rangeConfig?.step || 1}
                          onChange={(e) => updateRangeConfig('step', e.target.value)}
                          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm text-gray-900 bg-white"
                        />
                      </div>
                      <div>
                        <label className="block text-xs text-gray-500 mb-1">Unit</label>
                        <input
                          type="text"
                          value={fieldForm.rangeConfig?.unit || ''}
                          onChange={(e) => updateRangeConfig('unit', e.target.value)}
                          placeholder="e.g., years"
                          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm text-gray-900 bg-white placeholder:text-gray-500"
                        />
                      </div>
                    </div>
                  </div>
                )}
              </div>
              <div className="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
                <button
                  type="button"
                  onClick={closeFieldModal}
                  className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  disabled={isSubmitting}
                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
                >
                  {isSubmitting ? 'Saving...' : fieldModalType === 'create' ? 'Create Field' : 'Save Changes'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Field Delete Modal */}
      {fieldModalType === 'delete' && selectedField && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
            <div className="px-6 py-4 border-b border-gray-200">
              <h3 className="text-lg font-semibold text-gray-900">Delete Field</h3>
            </div>
            <div className="px-6 py-4">
              {modalError && (
                <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg">
                  <p className="text-red-700 text-sm">{modalError}</p>
                </div>
              )}
              <p className="text-gray-600">
                Are you sure you want to delete the field <span className="font-semibold">{selectedField.name}</span>?
              </p>
            </div>
            <div className="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
              <button
                onClick={closeFieldModal}
                className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
              >
                Cancel
              </button>
              <button
                onClick={handleDeleteField}
                disabled={isSubmitting}
                className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
              >
                {isSubmitting ? 'Deleting...' : 'Delete'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Assign to Agent Type Modal */}
      {assignModalType === 'assign' && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
            <div className="px-6 py-4 border-b border-gray-200">
              <h3 className="text-lg font-semibold text-gray-900">Assign to Agent Type</h3>
            </div>
            <form onSubmit={handleAssign}>
              <div className="px-6 py-4 space-y-4">
                {modalError && (
                  <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
                    <p className="text-red-700 text-sm">{modalError}</p>
                  </div>
                )}
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Agent Type <span className="text-red-500">*</span>
                  </label>
                  <select
                    value={assignForm.agentTypeId}
                    onChange={(e) => setAssignForm({ ...assignForm, agentTypeId: e.target.value })}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white"
                    required
                  >
                    <option value="">Select agent type...</option>
                    {availableAgentTypes.map((at) => (
                      <option key={at.id} value={at.id}>
                        {at.name}
                      </option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Sort Order
                  </label>
                  <input
                    type="number"
                    value={assignForm.sortOrder}
                    onChange={(e) => setAssignForm({ ...assignForm, sortOrder: parseInt(e.target.value) || 0 })}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white"
                  />
                </div>
                <div className="flex items-center">
                  <input
                    type="checkbox"
                    id="assignIsRequired"
                    checked={assignForm.isRequired}
                    onChange={(e) => setAssignForm({ ...assignForm, isRequired: e.target.checked })}
                    className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                  />
                  <label htmlFor="assignIsRequired" className="ml-2 text-sm text-gray-700">
                    Required section for this agent type
                  </label>
                </div>
              </div>
              <div className="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
                <button
                  type="button"
                  onClick={closeAssignModal}
                  className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  disabled={isSubmitting || !assignForm.agentTypeId}
                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
                >
                  {isSubmitting ? 'Assigning...' : 'Assign'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}