import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAuth, useProject } from '@/hooks'
import {
  projectService,
  relationshipService,
  userService,
  RelationshipType,
  ProjectMember,
  Role,
} from '@/services'

type TabType = 'project' | 'members' | 'relationships'

export default function AdminPage() {
  const { user } = useAuth()
  const { currentProject, setCurrentProject } = useProject()
  const navigate = useNavigate()

  // Tab state
  const [activeTab, setActiveTab] = useState<TabType>('project')

  // Project settings state
  const [projectName, setProjectName] = useState('')
  const [projectDesc, setProjectDesc] = useState('')
  const [projectLoading, setProjectLoading] = useState(false)
  const [projectError, setProjectError] = useState<string | null>(null)
  const [projectSuccess, setProjectSuccess] = useState<string | null>(null)

  // Members state
  const [members, setMembers] = useState<ProjectMember[]>([])
  const [roles, setRoles] = useState<Role[]>([])
  const [membersLoading, setMembersLoading] = useState(true)
  const [membersError, setMembersError] = useState<string | null>(null)
  const [updatingMember, setUpdatingMember] = useState<number | null>(null)

  // Relationship types state
  const [relationshipTypes, setRelationshipTypes] = useState<RelationshipType[]>([])
  const [relTypesLoading, setRelTypesLoading] = useState(true)
  const [relTypesError, setRelTypesError] = useState<string | null>(null)

  // Modal states
  const [showCreateRelTypeModal, setShowCreateRelTypeModal] = useState(false)
  const [showEditRelTypeModal, setShowEditRelTypeModal] = useState(false)
  const [showDeleteConfirmModal, setShowDeleteConfirmModal] = useState(false)
  const [selectedRelType, setSelectedRelType] = useState<RelationshipType | null>(null)

  // Relationship type form state
  const [relTypeName, setRelTypeName] = useState('')
  const [relTypeDesc, setRelTypeDesc] = useState('')
  const [relTypeInverse, setRelTypeInverse] = useState('')
  const [relTypeFormLoading, setRelTypeFormLoading] = useState(false)
  const [relTypeFormError, setRelTypeFormError] = useState<string | null>(null)

  // Check if user is admin
  const isAdmin = user?.role_id === 3

  // Redirect if not admin
  useEffect(() => {
    if (!isAdmin) {
      navigate('/dashboard')
    }
  }, [isAdmin, navigate])

  // Initialize project form
  useEffect(() => {
    if (currentProject) {
      setProjectName(currentProject.project_name)
      setProjectDesc(currentProject.project_desc || '')
    }
  }, [currentProject])

  // Fetch members and roles
  useEffect(() => {
    const fetchMembersAndRoles = async () => {
      if (!currentProject) return

      try {
        setMembersLoading(true)
        setMembersError(null)

        const [fetchedMembers, fetchedRoles] = await Promise.all([
          userService.getProjectMembers(currentProject.id),
          userService.getRoles(),
        ])

        setMembers(fetchedMembers)
        setRoles(fetchedRoles)
      } catch (err) {
        console.error('Failed to fetch members:', err)
        setMembersError('Failed to load project members')
      } finally {
        setMembersLoading(false)
      }
    }

    fetchMembersAndRoles()
  }, [currentProject])

  // Fetch relationship types
  useEffect(() => {
    const fetchRelTypes = async () => {
      if (!currentProject) return

      try {
        setRelTypesLoading(true)
        setRelTypesError(null)

        const fetchedTypes = await relationshipService.getRelationshipTypes(currentProject.id)
        setRelationshipTypes(fetchedTypes)
      } catch (err) {
        console.error('Failed to fetch relationship types:', err)
        setRelTypesError('Failed to load relationship types')
      } finally {
        setRelTypesLoading(false)
      }
    }

    fetchRelTypes()
  }, [currentProject])

  // Handle project update
  const handleProjectUpdate = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!currentProject) return

    try {
      setProjectLoading(true)
      setProjectError(null)
      setProjectSuccess(null)

      const updatedProject = await projectService.updateProject(currentProject.id, {
        project_name: projectName.trim(),
        project_desc: projectDesc.trim() || undefined,
      })

      setCurrentProject(updatedProject)
      setProjectSuccess('Project updated successfully!')
      setTimeout(() => setProjectSuccess(null), 3000)
    } catch (err) {
      console.error('Failed to update project:', err)
      setProjectError('Failed to update project')
    } finally {
      setProjectLoading(false)
    }
  }

  // Handle member role update
  const handleRoleUpdate = async (memberId: number, newRoleId: number) => {
    if (!currentProject) return

    // Prevent self-demotion
    if (memberId === user?.db_user_id && newRoleId !== 3) {
      setMembersError('You cannot demote yourself. Ask another admin to change your role.')
      setTimeout(() => setMembersError(null), 5000)
      return
    }

    try {
      setUpdatingMember(memberId)
      setMembersError(null)

      const updatedMember = await userService.updateMemberRole(
        currentProject.id,
        memberId,
        newRoleId
      )

      setMembers((prev) =>
        prev.map((m) => (m.id === memberId ? updatedMember : m))
      )
    } catch (err: any) {
      console.error('Failed to update member role:', err)
      setMembersError(err.message || 'Failed to update member role')
      setTimeout(() => setMembersError(null), 5000)
    } finally {
      setUpdatingMember(null)
    }
  }

  // Handle create relationship type
  const handleCreateRelType = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!currentProject) return

    try {
      setRelTypeFormLoading(true)
      setRelTypeFormError(null)

      const newType = await relationshipService.createRelationshipType(currentProject.id, {
        type_name: relTypeName.trim(),
        type_description: relTypeDesc.trim() || null,
        inverse_type_name: relTypeInverse.trim() || null,
      })

      setRelationshipTypes((prev) => [...prev, newType])
      setShowCreateRelTypeModal(false)
      resetRelTypeForm()
    } catch (err: any) {
      console.error('Failed to create relationship type:', err)
      setRelTypeFormError(err.message || 'Failed to create relationship type')
    } finally {
      setRelTypeFormLoading(false)
    }
  }

  // Handle update relationship type
  const handleUpdateRelType = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!currentProject || !selectedRelType) return

    try {
      setRelTypeFormLoading(true)
      setRelTypeFormError(null)

      const updatedType = await relationshipService.updateRelationshipType(
        currentProject.id,
        selectedRelType.id,
        {
          type_name: relTypeName.trim() || null,
          type_description: relTypeDesc.trim() || null,
          inverse_type_name: relTypeInverse.trim() || null,
        }
      )

      setRelationshipTypes((prev) =>
        prev.map((t) => (t.id === selectedRelType.id ? updatedType : t))
      )
      setShowEditRelTypeModal(false)
      setSelectedRelType(null)
      resetRelTypeForm()
    } catch (err: any) {
      console.error('Failed to update relationship type:', err)
      setRelTypeFormError(err.message || 'Failed to update relationship type')
    } finally {
      setRelTypeFormLoading(false)
    }
  }

  // Handle delete relationship type
  const handleDeleteRelType = async () => {
    if (!currentProject || !selectedRelType) return

    try {
      setRelTypeFormLoading(true)
      setRelTypeFormError(null)

      await relationshipService.deleteRelationshipType(currentProject.id, selectedRelType.id)

      setRelationshipTypes((prev) => prev.filter((t) => t.id !== selectedRelType.id))
      setShowDeleteConfirmModal(false)
      setSelectedRelType(null)
    } catch (err: any) {
      console.error('Failed to delete relationship type:', err)
      setRelTypeFormError(err.message || 'Failed to delete relationship type')
    } finally {
      setRelTypeFormLoading(false)
    }
  }

  // Reset relationship type form
  const resetRelTypeForm = () => {
    setRelTypeName('')
    setRelTypeDesc('')
    setRelTypeInverse('')
    setRelTypeFormError(null)
  }

  // Open edit modal
  const openEditModal = (relType: RelationshipType) => {
    setSelectedRelType(relType)
    setRelTypeName(relType.type_name)
    setRelTypeDesc(relType.type_description || '')
    setRelTypeInverse(relType.inverse_type_name || '')
    setRelTypeFormError(null)
    setShowEditRelTypeModal(true)
  }

  // Open delete modal
  const openDeleteModal = (relType: RelationshipType) => {
    setSelectedRelType(relType)
    setRelTypeFormError(null)
    setShowDeleteConfirmModal(true)
  }

  if (!isAdmin) {
    return null
  }

  if (!currentProject) {
    return (
      <div className="min-h-screen bg-white flex items-center justify-center">
        <div className="text-center">
          <h2 className="text-xl font-semibold text-gray-700 mb-2">No Project Selected</h2>
          <p className="text-gray-500 mb-4">Please select a project from the dashboard first.</p>
          <button
            onClick={() => navigate('/dashboard')}
            className="px-4 py-2 bg-teal-600 text-white rounded hover:bg-teal-700"
          >
            Go to Dashboard
          </button>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-white">
      {/* Header */}
      <header className="py-6 text-center border-b border-gray-200">
        <h1 className="text-3xl font-semibold text-teal-700">Admin Panel</h1>
        <p className="text-gray-500 mt-1">
          Managing: <span className="font-medium">{currentProject.project_name}</span>
        </p>
      </header>

      {/* Navigation */}
      <div className="border-b border-gray-200">
        <div className="max-w-4xl mx-auto px-8">
          <nav className="flex gap-8">
            <button
              onClick={() => setActiveTab('project')}
              className={`py-4 px-2 border-b-2 font-medium text-sm transition-colors ${
                activeTab === 'project'
                  ? 'border-teal-600 text-teal-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700'
              }`}
            >
              Project Settings
            </button>
            <button
              onClick={() => setActiveTab('members')}
              className={`py-4 px-2 border-b-2 font-medium text-sm transition-colors ${
                activeTab === 'members'
                  ? 'border-teal-600 text-teal-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700'
              }`}
            >
              Member Roles
            </button>
            <button
              onClick={() => setActiveTab('relationships')}
              className={`py-4 px-2 border-b-2 font-medium text-sm transition-colors ${
                activeTab === 'relationships'
                  ? 'border-teal-600 text-teal-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700'
              }`}
            >
              Relationship Types
            </button>
          </nav>
        </div>
      </div>

      {/* Back Button */}
      <div className="max-w-4xl mx-auto px-8 pt-6">
        <button
          onClick={() => navigate('/dashboard')}
          className="flex items-center gap-2 text-gray-600 hover:text-gray-800"
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
          </svg>
          Back to Dashboard
        </button>
      </div>

      {/* Content */}
      <div className="max-w-4xl mx-auto px-8 py-8">
        {/* Project Settings Tab */}
        {activeTab === 'project' && (
          <div className="bg-white border border-gray-200 rounded-lg p-6">
            <h2 className="text-xl font-semibold text-gray-800 mb-6">Project Settings</h2>

            <form onSubmit={handleProjectUpdate} className="space-y-6">
              {projectError && (
                <div className="p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm">
                  {projectError}
                </div>
              )}

              {projectSuccess && (
                <div className="p-3 bg-green-100 border border-green-400 text-green-700 rounded text-sm">
                  {projectSuccess}
                </div>
              )}

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Project Name <span className="text-red-500">*</span>
                </label>
                <input
                  type="text"
                  value={projectName}
                  onChange={(e) => setProjectName(e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-teal-500"
                  required
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Description
                </label>
                <textarea
                  value={projectDesc}
                  onChange={(e) => setProjectDesc(e.target.value)}
                  rows={4}
                  className="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 resize-none"
                />
              </div>

              <div className="flex justify-end">
                <button
                  type="submit"
                  disabled={projectLoading}
                  className="px-4 py-2 bg-teal-600 text-white rounded text-sm font-medium hover:bg-teal-700 disabled:opacity-50"
                >
                  {projectLoading ? 'Saving...' : 'Save Changes'}
                </button>
              </div>
            </form>
          </div>
        )}

        {/* Members Tab */}
        {activeTab === 'members' && (
          <div className="bg-white border border-gray-200 rounded-lg p-6">
            <h2 className="text-xl font-semibold text-gray-800 mb-6">Member Roles</h2>

            {membersError && (
              <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm">
                {membersError}
              </div>
            )}

            {membersLoading ? (
              <div className="text-center py-8 text-gray-500">Loading members...</div>
            ) : members.length === 0 ? (
              <div className="text-center py-8 text-gray-500">No members found</div>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="border-b border-gray-200">
                      <th className="text-left py-3 px-4 font-medium text-gray-700">User</th>
                      <th className="text-left py-3 px-4 font-medium text-gray-700">Role</th>
                      <th className="text-left py-3 px-4 font-medium text-gray-700">Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    {members.map((member) => {
                      const isCurrentUser = member.id === user?.db_user_id

                      return (
                        <tr key={member.id} className="border-b border-gray-100">
                          <td className="py-3 px-4">
                            <div className="flex items-center gap-2">
                              <span className="text-sm text-gray-900">{member.sub}</span>
                              {isCurrentUser && (
                                <span className="text-xs bg-teal-100 text-teal-700 px-2 py-0.5 rounded">
                                  You
                                </span>
                              )}
                            </div>
                          </td>
                          <td className="py-3 px-4">
                            <span
                              className={`text-xs px-2 py-1 rounded ${
                                member.role_name === 'admin'
                                  ? 'bg-purple-100 text-purple-700'
                                  : member.role_name === 'auditor'
                                  ? 'bg-blue-100 text-blue-700'
                                  : 'bg-gray-100 text-gray-700'
                              }`}
                            >
                              {member.role_display_name}
                            </span>
                          </td>
                          <td className="py-3 px-4">
                            <select
                              value={member.role_id}
                              onChange={(e) => handleRoleUpdate(member.id, parseInt(e.target.value))}
                              disabled={updatingMember === member.id || (isCurrentUser && member.role_id === 3)}
                              className={`px-3 py-1.5 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 ${
                                isCurrentUser && member.role_id === 3 ? 'bg-gray-100 cursor-not-allowed' : ''
                              }`}
                              title={isCurrentUser && member.role_id === 3 ? 'You cannot demote yourself' : ''}
                            >
                              {roles.map((role) => (
                                <option key={role.id} value={role.id}>
                                  {role.display_name}
                                </option>
                              ))}
                            </select>
                            {updatingMember === member.id && (
                              <span className="ml-2 text-xs text-gray-500">Saving...</span>
                            )}
                          </td>
                        </tr>
                      )
                    })}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        )}

        {/* Relationship Types Tab */}
        {activeTab === 'relationships' && (
          <div className="bg-white border border-gray-200 rounded-lg p-6">
            <div className="flex items-center justify-between mb-6">
              <h2 className="text-xl font-semibold text-gray-800">Relationship Types</h2>
              <button
                onClick={() => {
                  resetRelTypeForm()
                  setShowCreateRelTypeModal(true)
                }}
                className="px-4 py-2 bg-teal-600 text-white rounded text-sm font-medium hover:bg-teal-700"
              >
                + Add Type
              </button>
            </div>

            {relTypesError && (
              <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm">
                {relTypesError}
              </div>
            )}

            {relTypesLoading ? (
              <div className="text-center py-8 text-gray-500">Loading relationship types...</div>
            ) : relationshipTypes.length === 0 ? (
              <div className="text-center py-8 text-gray-500">
                No relationship types defined yet. Create one to link requirements.
              </div>
            ) : (
              <div className="space-y-3">
                {relationshipTypes.map((relType) => (
                  <div
                    key={relType.id}
                    className="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50"
                  >
                    <div>
                      <div className="font-medium text-gray-900">{relType.type_name}</div>
                      {relType.inverse_type_name && (
                        <div className="text-sm text-gray-500">
                          Inverse: {relType.inverse_type_name}
                        </div>
                      )}
                      {relType.type_description && (
                        <div className="text-sm text-gray-400 mt-1">{relType.type_description}</div>
                      )}
                    </div>
                    <div className="flex items-center gap-2">
                      <button
                        onClick={() => openEditModal(relType)}
                        className="px-3 py-1.5 border border-gray-300 rounded text-sm text-gray-700 hover:bg-gray-100"
                      >
                        Edit
                      </button>
                      <button
                        onClick={() => openDeleteModal(relType)}
                        className="px-3 py-1.5 border border-red-300 rounded text-sm text-red-600 hover:bg-red-50"
                      >
                        Delete
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}
      </div>

      {/* Create Relationship Type Modal */}
      {showCreateRelTypeModal && (
        <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 w-full max-w-md mx-4">
            <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
              <h2 className="text-xl font-semibold text-gray-800">Create Relationship Type</h2>
              <button
                onClick={() => {
                  setShowCreateRelTypeModal(false)
                  resetRelTypeForm()
                }}
                className="text-gray-400 hover:text-gray-600"
              >
                <svg className="w-6 h-6" 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>

            <form onSubmit={handleCreateRelType}>
              <div className="px-6 py-4 space-y-4">
                {relTypeFormError && (
                  <div className="p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm">
                    {relTypeFormError}
                  </div>
                )}

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Type Name <span className="text-red-500">*</span>
                  </label>
                  <input
                    type="text"
                    value={relTypeName}
                    onChange={(e) => setRelTypeName(e.target.value)}
                    placeholder="e.g., Depends On"
                    className="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-teal-500"
                    required
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Inverse Name
                  </label>
                  <input
                    type="text"
                    value={relTypeInverse}
                    onChange={(e) => setRelTypeInverse(e.target.value)}
                    placeholder="e.g., Depended By"
                    className="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-teal-500"
                  />
                  <p className="text-xs text-gray-500 mt-1">
                    Optional. The name shown when viewing from the target requirement.
                  </p>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Description
                  </label>
                  <textarea
                    value={relTypeDesc}
                    onChange={(e) => setRelTypeDesc(e.target.value)}
                    rows={2}
                    className="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 resize-none"
                  />
                </div>
              </div>

              <div className="flex justify-end gap-3 px-6 py-4 border-t border-gray-200 bg-gray-50 rounded-b-lg">
                <button
                  type="button"
                  onClick={() => {
                    setShowCreateRelTypeModal(false)
                    resetRelTypeForm()
                  }}
                  className="px-4 py-2 border border-gray-400 rounded text-sm font-medium text-gray-700 hover:bg-gray-100"
                  disabled={relTypeFormLoading}
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="px-4 py-2 bg-teal-600 text-white rounded text-sm font-medium hover:bg-teal-700 disabled:opacity-50"
                  disabled={relTypeFormLoading}
                >
                  {relTypeFormLoading ? 'Creating...' : 'Create'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Edit Relationship Type Modal */}
      {showEditRelTypeModal && selectedRelType && (
        <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 w-full max-w-md mx-4">
            <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
              <h2 className="text-xl font-semibold text-gray-800">Edit Relationship Type</h2>
              <button
                onClick={() => {
                  setShowEditRelTypeModal(false)
                  setSelectedRelType(null)
                  resetRelTypeForm()
                }}
                className="text-gray-400 hover:text-gray-600"
              >
                <svg className="w-6 h-6" 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>

            <form onSubmit={handleUpdateRelType}>
              <div className="px-6 py-4 space-y-4">
                {relTypeFormError && (
                  <div className="p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm">
                    {relTypeFormError}
                  </div>
                )}

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Type Name <span className="text-red-500">*</span>
                  </label>
                  <input
                    type="text"
                    value={relTypeName}
                    onChange={(e) => setRelTypeName(e.target.value)}
                    className="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-teal-500"
                    required
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Inverse Name
                  </label>
                  <input
                    type="text"
                    value={relTypeInverse}
                    onChange={(e) => setRelTypeInverse(e.target.value)}
                    className="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-teal-500"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Description
                  </label>
                  <textarea
                    value={relTypeDesc}
                    onChange={(e) => setRelTypeDesc(e.target.value)}
                    rows={2}
                    className="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 resize-none"
                  />
                </div>
              </div>

              <div className="flex justify-end gap-3 px-6 py-4 border-t border-gray-200 bg-gray-50 rounded-b-lg">
                <button
                  type="button"
                  onClick={() => {
                    setShowEditRelTypeModal(false)
                    setSelectedRelType(null)
                    resetRelTypeForm()
                  }}
                  className="px-4 py-2 border border-gray-400 rounded text-sm font-medium text-gray-700 hover:bg-gray-100"
                  disabled={relTypeFormLoading}
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="px-4 py-2 bg-teal-600 text-white rounded text-sm font-medium hover:bg-teal-700 disabled:opacity-50"
                  disabled={relTypeFormLoading}
                >
                  {relTypeFormLoading ? 'Saving...' : 'Save Changes'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Delete Confirmation Modal */}
      {showDeleteConfirmModal && selectedRelType && (
        <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 w-full max-w-md mx-4">
            <div className="px-6 py-4 border-b border-gray-200">
              <h2 className="text-xl font-semibold text-gray-800">Delete Relationship Type</h2>
            </div>

            <div className="px-6 py-4">
              {relTypeFormError && (
                <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm">
                  {relTypeFormError}
                </div>
              )}

              <p className="text-gray-700">
                Are you sure you want to delete the relationship type{' '}
                <span className="font-semibold">"{selectedRelType.type_name}"</span>?
              </p>
              <p className="text-sm text-red-600 mt-2">
                ⚠️ This will also delete all requirement links using this type.
              </p>
            </div>

            <div className="flex justify-end gap-3 px-6 py-4 border-t border-gray-200 bg-gray-50 rounded-b-lg">
              <button
                onClick={() => {
                  setShowDeleteConfirmModal(false)
                  setSelectedRelType(null)
                  setRelTypeFormError(null)
                }}
                className="px-4 py-2 border border-gray-400 rounded text-sm font-medium text-gray-700 hover:bg-gray-100"
                disabled={relTypeFormLoading}
              >
                Cancel
              </button>
              <button
                onClick={handleDeleteRelType}
                className="px-4 py-2 bg-red-600 text-white rounded text-sm font-medium hover:bg-red-700 disabled:opacity-50"
                disabled={relTypeFormLoading}
              >
                {relTypeFormLoading ? 'Deleting...' : 'Delete'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}