import { useEffect, useState, useRef, type ReactNode } from 'react';
import { useParams, Link } from 'react-router-dom';
import { clsx } from 'clsx';
import {
  getApplicationById,
  getConfig,
  getRelatedObjects,
  refreshApplication,
  RelatedObject,
} from '../services/api';
import { StatusBadge, BusinessImportanceBadge } from './ApplicationList';
import { EffortDisplay } from './EffortDisplay';
import { useEffortCalculation, getEffectiveFte } from '../hooks/useEffortCalculation';
import { useAuthStore } from '../stores/authStore';
import type { ApplicationDetails, ReferenceValue } from '../types';

// Related objects configuration
interface RelatedObjectConfig {
  objectType: string;
  title: string;
  icon: React.ReactNode;
  attributes: string[];
  columns: { key: string; label: string; isName?: boolean }[];
  colorScheme: 'blue' | 'green' | 'orange' | 'purple' | 'cyan';
}

const RELATED_OBJECTS_CONFIG: RelatedObjectConfig[] = [
  {
    objectType: 'Server',
    title: 'Servers',
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
      </svg>
    ),
    attributes: ['Name', 'Status', 'State'],
    columns: [
      { key: 'Name', label: 'Naam', isName: true },
      { key: 'Status', label: 'Status' },
      { key: 'State', label: 'State' },
    ],
    colorScheme: 'blue',
  },
  {
    objectType: 'AzureSubscription',
    title: 'Azure Subscriptions',
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
      </svg>
    ),
    attributes: ['Name', 'Status'],
    columns: [
      { key: 'Name', label: 'Naam', isName: true },
      { key: 'Status', label: 'Status' },
    ],
    colorScheme: 'cyan',
  },
  {
    objectType: 'Certificate',
    title: 'Certificaten',
    icon: (
      <svg className="w-5 h-5" 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>
    ),
    attributes: ['Name', 'Status', 'Expiry Date', 'Autorenew', 'Requester', 'Certificate Owner', 'IT Operations Team', 'Application Management'],
    columns: [
      { key: 'Name', label: 'Naam', isName: true },
      { key: 'Status', label: 'Status' },
      { key: 'Expiry Date', label: 'Vervaldatum' },
      { key: 'Autorenew', label: 'Auto-renew' },
      { key: 'Certificate Owner', label: 'Eigenaar' },
    ],
    colorScheme: 'orange',
  },
  {
    objectType: 'Connection',
    title: 'Connecties',
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
      </svg>
    ),
    attributes: ['Name', 'Source', 'Target', 'Type', 'Protocol'],
    columns: [
      { key: 'Name', label: 'Naam', isName: true },
      { key: 'Source', label: 'Bron' },
      { key: 'Target', label: 'Doel' },
      { key: 'Type', label: 'Type' },
      { key: 'Protocol', label: 'Protocol' },
    ],
    colorScheme: 'purple',
  },
];

const COLOR_SCHEMES = {
  blue: {
    header: 'bg-blue-50',
    icon: 'text-blue-600',
    badge: 'bg-blue-100 text-blue-700',
    border: 'border-blue-200',
  },
  green: {
    header: 'bg-green-50',
    icon: 'text-green-600',
    badge: 'bg-green-100 text-green-700',
    border: 'border-green-200',
  },
  orange: {
    header: 'bg-orange-50',
    icon: 'text-orange-600',
    badge: 'bg-orange-100 text-orange-700',
    border: 'border-orange-200',
  },
  purple: {
    header: 'bg-purple-50',
    icon: 'text-purple-600',
    badge: 'bg-purple-100 text-purple-700',
    border: 'border-purple-200',
  },
  cyan: {
    header: 'bg-cyan-50',
    icon: 'text-cyan-600',
    badge: 'bg-cyan-100 text-cyan-700',
    border: 'border-cyan-200',
  },
};

export default function ApplicationInfo() {
  const { id } = useParams<{ id: string }>();

  const [application, setApplication] = useState<ApplicationDetails | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [jiraHost, setJiraHost] = useState<string>('');
  const [refreshing, setRefreshing] = useState(false);
  const [refreshMessage, setRefreshMessage] = useState<string | null>(null);
  
  // Use centralized effort calculation hook
  const { calculatedFte, breakdown: effortBreakdown } = useEffortCalculation({
    application,
  });

  // Related objects state
  const [relatedObjects, setRelatedObjects] = useState<Map<string, { objects: RelatedObject[]; loading: boolean; error: string | null }>>(new Map());
  const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set()); // Default collapsed
  const [supplierExpanded, setSupplierExpanded] = useState(true); // Leverancier(s) block expanded by default
  const [contactsExpanded, setContactsExpanded] = useState(true); // Contactpersonen block expanded by default
  const [basisInfoExpanded, setBasisInfoExpanded] = useState(true); // Basis informatie block expanded by default
  const [governanceExpanded, setGovernanceExpanded] = useState(true); // Governance & Management block expanded by default
  const [classificationExpanded, setClassificationExpanded] = useState(false); // Classificatie block collapsed by default

  useEffect(() => {
    async function fetchData() {
      if (!id) return;

      setLoading(true);
      setError(null);

      try {
        const [app, config] = await Promise.all([
          getApplicationById(id),
          getConfig(),
        ]);

        setApplication(app);
        setJiraHost(config.jiraHost);
        // Note: Effort calculation is handled automatically by useEffortCalculation hook
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to load application');
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, [id]);

  // Set page title
  useEffect(() => {
    const appName = useAuthStore.getState().config?.appName || 'CMDB Insight';
    if (application) {
      document.title = `${application.name} | ${appName}`;
    }
    return () => {
      document.title = appName;
    };
  }, [application]);

  // Fetch related objects when application is loaded
  useEffect(() => {
    if (!id || !application) return;

    // Initialize loading state for all object types
    const initialState = new Map<string, { objects: RelatedObject[]; loading: boolean; error: string | null }>();
    RELATED_OBJECTS_CONFIG.forEach(config => {
      initialState.set(config.objectType, { objects: [], loading: true, error: null });
    });
    setRelatedObjects(initialState);

    // Fetch each object type in parallel
    RELATED_OBJECTS_CONFIG.forEach(async (config) => {
      try {
        const result = await getRelatedObjects(id, config.objectType, config.attributes);
        setRelatedObjects(prev => {
          const newMap = new Map(prev);
          newMap.set(config.objectType, { objects: result?.objects || [], loading: false, error: null });
          return newMap;
        });
      } catch (err) {
        setRelatedObjects(prev => {
          const newMap = new Map(prev);
          newMap.set(config.objectType, { 
            objects: [], 
            loading: false, 
            error: err instanceof Error ? err.message : 'Failed to load' 
          });
          return newMap;
        });
      }
    });
  }, [id, application]);

  const toggleSection = (objectType: string) => {
    setExpandedSections(prev => {
      const newSet = new Set(prev);
      if (newSet.has(objectType)) {
        newSet.delete(objectType);
      } else {
        newSet.add(objectType);
      }
      return newSet;
    });
  };

  const handleBasisInfoToggle = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
    setBasisInfoExpanded(prev => !prev);
  };

  const handleGovernanceToggle = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
    setGovernanceExpanded(prev => !prev);
  };

  const handleRefresh = async () => {
    if (!id || refreshing) return;
    
    setRefreshing(true);
    setRefreshMessage(null);
    
    try {
      await refreshApplication(id);
      setRefreshMessage('Applicatie succesvol gesynchroniseerd vanuit Jira');
      
      // Reload the application data after a short delay to show the success message
      setTimeout(async () => {
        try {
          const refreshedApp = await getApplicationById(id);
          setApplication(refreshedApp);
          // Clear success message after 3 seconds
          setTimeout(() => {
            setRefreshMessage(null);
          }, 3000);
        } catch (err) {
          setRefreshMessage('Applicatie gesynchroniseerd, maar herladen mislukt. Ververs de pagina.');
          // Clear error message after 5 seconds
          setTimeout(() => {
            setRefreshMessage(null);
          }, 5000);
        }
      }, 1000);
    } catch (err) {
      setRefreshMessage(err instanceof Error ? err.message : 'Synchronisatie mislukt');
      // Clear error message after 5 seconds
      setTimeout(() => {
        setRefreshMessage(null);
      }, 5000);
    } finally {
      setRefreshing(false);
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-slate-50 flex items-center justify-center">
        <div className="text-center">
          <div className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl mb-6 shadow-xl shadow-blue-500/20">
            <svg className="animate-spin h-10 w-10 text-white" fill="none" viewBox="0 0 24 24">
              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
            </svg>
          </div>
          <h3 className="text-lg font-semibold text-gray-900 mb-2">Applicatie laden...</h3>
          <p className="text-sm text-gray-600">Gegevens worden opgehaald uit de CMDB</p>
        </div>
      </div>
    );
  }

  if (error || !application) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-slate-50 flex items-center justify-center px-4">
        <div className="max-w-2xl w-full">
          <div className="bg-red-50 border-l-4 border-red-500 rounded-xl p-6 shadow-lg">
            <div className="flex items-start gap-4">
              <div className="flex-shrink-0">
                <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
                  <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
              </div>
              <div className="flex-1">
                <h3 className="text-lg font-semibold text-red-900 mb-2">Fout bij laden</h3>
                <p className="text-sm text-red-700 leading-relaxed">{error || 'Application not found'}</p>
                <Link
                  to="/application/overview"
                  className="inline-flex items-center gap-2 mt-4 text-sm font-medium text-red-700 hover:text-red-900"
                >
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                  </svg>
                  Terug naar overzicht
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-slate-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="space-y-6">
          {/* Back navigation */}
          <div className="flex items-center">
            <Link
              to="/application/overview"
              className="inline-flex items-center gap-2 px-4 py-2 text-gray-600 hover:text-gray-900 font-medium transition-all rounded-lg hover:bg-white/50 group"
            >
              <svg
                className="w-5 h-5 transition-transform group-hover:-translate-x-1"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M15 19l-7-7 7-7"
                />
              </svg>
              Terug naar overzicht
            </Link>
          </div>

          {/* Header with application name and quick actions */}
          <div className="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
            {/* Header gradient */}
            <div className="bg-gradient-to-r from-blue-600 via-blue-500 to-indigo-600 px-6 lg:px-8 py-6">
              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-3 mb-2 flex-wrap">
                    <div className="flex items-center gap-3 flex-wrap">
                      <h1 className="text-2xl lg:text-3xl font-bold text-white break-words">{application.name}</h1>
                      {application.hostingType && (
                        <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-100 text-blue-700 border border-blue-200">
                          {application.hostingType.name}
                          {application.hostingType.objectId && jiraHost && (
                            <Tooltip text="Openen in Jira Assets">
                              <a
                                href={`${jiraHost}/secure/insight/assets/ICMT-${application.hostingType.objectId}`}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="inline-flex items-center justify-center text-blue-600 hover:text-blue-800 transition-colors"
                                onClick={(e) => e.stopPropagation()}
                              >
                                <ExternalLinkIcon className="w-3.5 h-3.5" />
                              </a>
                            </Tooltip>
                          )}
                        </span>
                      )}
                    </div>
                    {/* Quick action buttons */}
                    <div className="flex flex-wrap gap-2">
                      {application.technischeArchitectuur && application.technischeArchitectuur.trim() !== '' && (
                        <Tooltip text="Open het TA document">
                          <a
                            href={`${application.technischeArchitectuur}${application.technischeArchitectuur.includes('?') ? '&' : '?'}csf=1&web=1`}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="inline-flex items-center justify-center w-10 h-10 bg-white hover:bg-gray-50 text-blue-600 rounded-lg transition-all shadow-sm hover:shadow-md"
                          >
                            <svg className="w-5 h-5" 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>
                          </a>
                        </Tooltip>
                      )}
                      {application.confluenceSpace && application.confluenceSpace.trim() !== '' && (
                        <Tooltip text="Openen in Confluence">
                          <a
                            href={application.confluenceSpace}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="inline-flex items-center justify-center w-10 h-10 bg-white hover:bg-gray-50 text-blue-600 rounded-lg transition-all shadow-sm hover:shadow-md"
                          >
                            <svg className="w-5 h-5" viewBox="0 0 75 75" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M54.3,44.6c-11.6-5.6-15-6.4-19.8-6.4s-10.6,2.4-15,9.1l-.7,1.1c-.6.9-.7,1.2-.7,1.6s.2.7.9,1.2l7.3,4.6c.4.3.7.4,1,.4s.7-.2,1-.8l1.2-1.8c1.8-2.8,3.4-3.7,5.5-3.7s4,.5,6.6,1.8l7.7,3.6c.8.4,1.6.2,2-.7l3.6-8c.4-.9.1-1.5-.8-1.9ZM20.5,30.5c11.6,5.6,15,6.4,19.8,6.4s10.6-2.4,15-9.1l.7-1.1c.6-.9.7-1.2.7-1.6s-.2-.7-.9-1.2l-7.3-4.6c-.4-.3-.7-.4-1-.4s-.7.2-1,.8l-1.2,1.8c-1.8,2.8-3.4,3.7-5.5,3.7s-4-.5-6.6-1.8l-7.7-3.6c-.8-.4-1.6-.2-2,.7l-3.6,8c-.4.9-.1,1.5.8,1.9Z" fill="currentColor"/>
                            </svg>
                          </a>
                        </Tooltip>
                      )}
                      {jiraHost && application.key && (
                        <Tooltip text="Openen in Jira Assets">
                          <a
                            href={`${jiraHost}/secure/insight/assets/${application.key}`}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="inline-flex items-center justify-center w-10 h-10 bg-white hover:bg-gray-50 text-blue-600 rounded-lg transition-all shadow-sm hover:shadow-md"
                          >
                            <ExternalLinkIcon className="w-5 h-5" />
                          </a>
                        </Tooltip>
                      )}
                      <Tooltip text="Synchroniseer applicatie vanuit Jira">
                        <button
                          onClick={handleRefresh}
                          disabled={refreshing}
                          className="inline-flex items-center justify-center w-10 h-10 bg-white hover:bg-gray-50 text-blue-600 rounded-lg transition-all shadow-sm hover:shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
                        >
                          {refreshing ? (
                            <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                            </svg>
                          ) : (
                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                            </svg>
                          )}
                        </button>
                      </Tooltip>
                    </div>
                  </div>
                </div>
                
                {/* Status badge on the right */}
                <div className="flex-shrink-0">
                  <StatusBadge status={application.status} variant="header" />
                </div>
              </div>
            </div>
            
            {/* Refresh message */}
            {refreshMessage && (
              <div className={`px-6 lg:px-8 py-3 border-b ${
                refreshMessage.includes('succesvol') || refreshMessage.includes('gesynchroniseerd')
                  ? 'bg-green-50 border-green-200'
                  : 'bg-yellow-50 border-yellow-200'
              }`}>
                <div className="flex items-center gap-2 text-sm">
                  {refreshMessage.includes('succesvol') || refreshMessage.includes('gesynchroniseerd') ? (
                    <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  ) : (
                    <svg className="w-5 h-5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  )}
                  <span className={
                    refreshMessage.includes('succesvol') || refreshMessage.includes('gesynchroniseerd')
                      ? 'text-green-800'
                      : 'text-yellow-800'
                  }>
                    {refreshMessage}
                  </span>
                </div>
              </div>
            )}
            
            {/* Reference warning - only show if reference is truly empty */}
            {(() => {
              const refValue = application.reference;
              
              // Helper function to check if a string is truly empty (handles all edge cases)
              const isStringEmpty = (str: unknown): boolean => {
                if (str === null || str === undefined) {
                  return true;
                }
                if (typeof str !== 'string') {
                  // If it's not a string, we can't determine if it's empty, so assume it's not empty
                  return false;
                }
                // Check for empty string
                if (str === '') {
                  return true;
                }
                // Trim and check - this handles spaces, tabs, newlines, etc.
                const trimmed = str.trim();
                if (trimmed === '') {
                  return true;
                }
                // Check for whitespace-only strings using regex (handles Unicode whitespace too)
                if (/^\s*$/.test(str)) {
                  return true;
                }
                // Check for strings that only contain zero-width characters
                if (trimmed.replace(/[\u200B-\u200D\uFEFF]/g, '') === '') {
                  return true;
                }
                // Has meaningful content
                return false;
              };
              
              const isEmpty = isStringEmpty(refValue);
              
              return isEmpty;
            })() && (
              <div className="px-6 lg:px-8 py-4 border-t border-yellow-200 bg-yellow-50">
                <div className="flex items-start gap-3">
                  <svg className="w-5 h-5 text-yellow-600 mt-0.5 flex-shrink-0" 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>
                  <div className="flex-1">
                    <p className="text-sm font-medium text-yellow-800">Deze Application Component is (nog) niet toegevoegd in Enterprise Architect</p>
                  </div>
                </div>
              </div>
            )}
            
            {/* Description */}
            <div className="px-6 lg:px-8 py-6 border-t border-gray-200 bg-gradient-to-br from-gray-50 to-white">
              {application.description && (
                <div className="flex items-start gap-3 mb-4">
                  <svg className="w-5 h-5 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h7" />
                  </svg>
                  <p className="text-gray-700 leading-relaxed">{application.description}</p>
                </div>
              )}
              {/* Application Functions pills/tags below description */}
              {application.applicationFunctions && application.applicationFunctions.length > 0 && (
                <div className="flex flex-wrap gap-2 mt-4">
                  {application.applicationFunctions.map((func, index) => (
                    <div
                      key={func.objectId || index}
                      className={clsx(
                        'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold shadow-sm transition-all',
                        index === 0 
                          ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-lg shadow-blue-500/30 hover:shadow-xl hover:shadow-blue-500/40' 
                          : 'bg-gray-100 text-gray-700 hover:bg-gray-200 border border-gray-200'
                      )}
                    >
                      {index === 0 && (
                        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                      )}
                      <span>{func.name}</span>
                      {func.objectId && jiraHost && (
                        <Tooltip text="Openen in Jira Assets">
                          <a
                            href={`${jiraHost}/secure/insight/assets/ICMT-${func.objectId}`}
                            target="_blank"
                            rel="noopener noreferrer"
                            className={clsx(
                              'inline-flex items-center justify-center transition-colors',
                              index === 0 
                                ? 'text-white/80 hover:text-white' 
                                : 'text-gray-500 hover:text-blue-600'
                            )}
                            onClick={(e) => e.stopPropagation()}
                          >
                            <ExternalLinkIcon className="w-3 h-3" />
                          </a>
                        </Tooltip>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>

          {/* Basis informatie and Governance & Management side by side */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
            {/* Basis informatie */}
            <div key="basis-info" className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden transition-all hover:shadow-md">
              <button
                type="button"
                onClick={handleBasisInfoToggle}
                className="w-full px-6 py-5 flex items-center justify-between bg-gradient-to-r from-gray-50 to-gray-100/50 hover:from-gray-100 hover:to-gray-200/50 transition-all group cursor-pointer"
              >
                <div className="flex items-center gap-3">
                  <svg className="w-5 h-5 text-gray-600 group-hover:text-gray-900 transition-colors" 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>
                  <h3 className="text-lg font-semibold text-gray-900 group-hover:text-gray-950 transition-colors">Basis informatie</h3>
                </div>
                <svg
                  className={`w-5 h-5 text-gray-500 group-hover:text-gray-700 transition-all duration-200 ${basisInfoExpanded ? 'transform rotate-180' : ''}`}
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>
              {basisInfoExpanded && (
                <div className="border-t border-gray-200 animate-in slide-in-from-top-2 duration-200">
                  <div className="p-6 space-y-5">
                <InfoRow label="Search Reference" value={application.searchReference} />
                <InfoRow label="Organisatie" value={application.organisation} />
                <div>
                  <label className="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Business Importance</label>
                  <div className="mt-1">
                    <BusinessImportanceBadge importance={application.businessImportance} />
                  </div>
                </div>
                <div>
                  <label className="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Business Impact Analyse</label>
                  <div className="flex items-center gap-2">
                    {application.businessImpactAnalyse?.name ? (
                      <>
                        <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-100 text-blue-700 border border-blue-200">
                          {application.businessImpactAnalyse.name}
                        </span>
                        {/* Info icon with description tooltip - shown when description exists */}
                        {(application.businessImpactAnalyse?.description || application.businessImpactAnalyse?.indicators) && (
                          <span className="inline-flex items-center">
                            <InfoIcon description={application.businessImpactAnalyse.description || application.businessImpactAnalyse.indicators || undefined} />
                          </span>
                        )}
                        {/* External link to Jira Assets - shown when objectId exists */}
                        {application.businessImpactAnalyse.objectId && jiraHost && (
                          <Tooltip text="Openen in Jira Assets">
                            <a
                              href={`${jiraHost}/secure/insight/assets/ICMT-${application.businessImpactAnalyse.objectId}`}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="inline-flex items-center justify-center text-gray-400 hover:text-blue-600 transition-colors"
                              onClick={(e) => e.stopPropagation()}
                            >
                              <ExternalLinkIcon className="w-4 h-4" />
                            </a>
                          </Tooltip>
                        )}
                      </>
                    ) : (
                      <>
                        <span className="text-gray-400 italic">Niet ingevuld</span>
                        {/* Info icon with description tooltip - shown when description exists */}
                        {(application.businessImpactAnalyse?.description || application.businessImpactAnalyse?.indicators) && (
                          <span className="inline-flex items-center">
                            <InfoIcon description={application.businessImpactAnalyse.description || application.businessImpactAnalyse.indicators || undefined} />
                          </span>
                        )}
                      </>
                    )}
                  </div>
                  {application.businessImpactAnalyse?.indicators && (
                    <p className="text-sm text-gray-600 mt-2 leading-relaxed">{application.businessImpactAnalyse.indicators}</p>
                  )}
                </div>
                {application.dataCompletenessPercentage !== undefined && (
                  <div>
                    <label className="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Data Completeness</label>
                    <div className="flex items-center gap-4">
                      <div className="flex-1 min-w-[120px]">
                        <div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden shadow-inner">
                          <div
                            className={`h-3 rounded-full transition-all shadow-sm ${
                              application.dataCompletenessPercentage >= 80
                                ? 'bg-gradient-to-r from-green-500 to-green-600'
                                : application.dataCompletenessPercentage >= 60
                                ? 'bg-gradient-to-r from-yellow-500 to-yellow-600'
                                : 'bg-gradient-to-r from-red-500 to-red-600'
                            }`}
                            style={{ width: `${application.dataCompletenessPercentage}%` }}
                          />
                        </div>
                      </div>
                      <span className={`text-base font-bold min-w-[60px] ${
                        application.dataCompletenessPercentage >= 80
                          ? 'text-green-700'
                          : application.dataCompletenessPercentage >= 60
                          ? 'text-yellow-700'
                          : 'text-red-700'
                      }`}>
                        {application.dataCompletenessPercentage.toFixed(1)}%
                      </span>
                    </div>
                  </div>
                )}
                  </div>
                </div>
              )}
            </div>

            {/* Governance & Management */}
            <div key="governance" className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden transition-all hover:shadow-md">
              <button
                type="button"
                onClick={handleGovernanceToggle}
                className="w-full px-6 py-5 flex items-center justify-between bg-gradient-to-r from-purple-50 to-pink-50/50 hover:from-purple-100 hover:to-pink-100/50 transition-all group cursor-pointer"
              >
                <div className="flex items-center gap-3">
                  <svg className="w-5 h-5 text-purple-600 group-hover:text-purple-700 transition-colors" 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>
                  <h3 className="text-lg font-semibold text-gray-900 group-hover:text-gray-950 transition-colors">Governance & Management</h3>
                </div>
                <svg
                  className={`w-5 h-5 text-gray-500 group-hover:text-gray-700 transition-all duration-200 ${governanceExpanded ? 'transform rotate-180' : ''}`}
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>
              {governanceExpanded && (
                <div className="border-t border-gray-200 animate-in slide-in-from-top-2 duration-200">
                  <div className="p-6 space-y-5">
                <InfoRow 
                  label="ICT Governance Model" 
                  referenceValue={application.governanceModel}
                  infoDescription={application.governanceModel?.remarks || application.governanceModel?.description || undefined}
                  jiraHost={jiraHost}
                />
                <InfoRow 
                  label="Application Management - Application Type" 
                  referenceValue={application.applicationType}
                  infoDescription={application.applicationType?.description || undefined}
                  jiraHost={jiraHost}
                />
                <InfoRow 
                  label="Application Management - Hosting" 
                  referenceValue={application.applicationManagementHosting}
                  infoDescription={application.applicationManagementHosting?.description || undefined}
                  jiraHost={jiraHost}
                />
                <InfoRow 
                  label="Application Management - TAM" 
                  referenceValue={application.applicationManagementTAM}
                  infoDescription={application.applicationManagementTAM?.description || undefined}
                  jiraHost={jiraHost}
                />
                <InfoRow
                  label="Application Management - Team"
                  value={(() => {
                    const teamName = application.applicationTeam?.name;
                    const subteamName = application.applicationSubteam?.name;
                    if (teamName) {
                      return subteamName ? `${teamName} (${subteamName})` : teamName;
                    }
                    return subteamName || undefined;
                  })()}
                  referenceValue={application.applicationTeam || application.applicationSubteam}
                  jiraHost={jiraHost}
                />
                  </div>
                </div>
              )}
            </div>
          </div>

          {/* Contacts & Leverancier(s) blocks side by side */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
            {/* Contacts */}
            <div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
              <button
                type="button"
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  setContactsExpanded(!contactsExpanded);
                }}
                className="w-full px-6 py-5 flex items-center justify-between bg-gradient-to-r from-green-50 to-emerald-50/50 hover:opacity-90 transition-all group"
              >
                <div className="flex items-center gap-3">
                  <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                  </svg>
                  <h3 className="text-lg font-semibold text-gray-900">Contactpersonen</h3>
                </div>
                <svg
                  className={`w-5 h-5 text-gray-500 transition-transform ${contactsExpanded && 'transform rotate-180'}`}
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>
              {contactsExpanded && (
                <div className="border-t border-gray-100">
                  <div className="p-6 space-y-5">
                    <InfoRow label="Business Owner" value={application.businessOwner} />
                    <InfoRow label="System Owner" value={application.systemOwner} />
                    <InfoRow label="Functional Application Management" value={application.functionalApplicationManagement} />
                    <InfoRow
                      label="Technical Application Management"
                      value={(() => {
                        const mainValue = application.technicalApplicationManagement;
                        const primary = application.technicalApplicationManagementPrimary?.trim();
                        const secondary = application.technicalApplicationManagementSecondary?.trim();
                        const parts = [];
                        if (primary) parts.push(primary);
                        if (secondary) parts.push(secondary);
                        if (mainValue) {
                          return parts.length > 0 ? `${mainValue} (${parts.join(', ')})` : mainValue;
                        }
                        return parts.length > 0 ? `(${parts.join(', ')})` : undefined;
                      })()}
                    />
                  </div>
                </div>
              )}
            </div>

            {/* Leverancier(s) block */}
            <div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
              <button
                type="button"
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  setSupplierExpanded(!supplierExpanded);
                }}
                className="w-full px-6 py-5 flex items-center justify-between bg-gradient-to-r from-orange-50 to-amber-50/50 hover:opacity-90 transition-all group"
              >
                <div className="flex items-center gap-3">
                  <svg className="w-5 h-5 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                  </svg>
                  <h3 className="text-lg font-semibold text-gray-900">Leverancier(s)</h3>
                </div>
                <svg
                  className={`w-5 h-5 text-gray-500 transition-transform ${supplierExpanded && 'transform rotate-180'}`}
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>
              {supplierExpanded && (
                <div className="border-t border-gray-100">
                  <div className="p-6 space-y-5">
                    <InfoRow label="Supplier Product" value={application.supplierProduct} />
                    <InfoRow label="Supplier Technical" referenceValue={application.supplierTechnical} jiraHost={jiraHost} />
                    <InfoRow label="Supplier Implementation" referenceValue={application.supplierImplementation} jiraHost={jiraHost} />
                    <InfoRow label="Supplier Consultancy" referenceValue={application.supplierConsultancy} jiraHost={jiraHost} />
                  </div>
                </div>
              )}
            </div>
          </div>

          {/* Classification section */}
          <div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
            <button
              type="button"
              onClick={(e) => {
                e.preventDefault();
                e.stopPropagation();
                setClassificationExpanded(!classificationExpanded);
              }}
              className="w-full px-6 py-5 flex items-center justify-between bg-gradient-to-r from-indigo-50 to-blue-50/50 hover:opacity-90 transition-all group"
            >
              <div className="flex items-center gap-3">
                <svg className="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                </svg>
                <h3 className="text-lg font-semibold text-gray-900">Classificatie</h3>
              </div>
              <svg
                className={`w-5 h-5 text-gray-500 transition-transform ${classificationExpanded && 'transform rotate-180'}`}
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
              </svg>
            </button>
            {classificationExpanded && (
              <div className="border-t border-gray-100">
                <div className="p-6">
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <InfoRow 
                      label="Dynamics Factor" 
                      referenceValue={application.dynamicsFactor}
                      infoDescription={application.dynamicsFactor?.summary || application.dynamicsFactor?.description || undefined}
                      jiraHost={jiraHost} 
                    />
                    <InfoRow 
                      label="Complexity Factor" 
                      referenceValue={application.complexityFactor}
                      infoDescription={application.complexityFactor?.summary || application.complexityFactor?.description || undefined}
                      jiraHost={jiraHost} 
                    />
                    <InfoRow label="Number of Users" referenceValue={application.numberOfUsers} jiraHost={jiraHost} />
                  </div>
                  
                  {/* FTE - Benodigde inspanning applicatiemanagement */}
                  <div className="mt-8 pt-6 border-t-2 border-gray-200 bg-gradient-to-br from-blue-50/50 to-indigo-50/50 rounded-xl p-6">
                    <div className="flex items-center gap-2 mb-4">
                      <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
                        <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                        </svg>
                      </div>
                      <label className="block text-sm font-semibold text-gray-900">
                        Benodigde inspanning applicatiemanagement
                      </label>
                    </div>
                    <div className="w-full border-2 border-blue-200 rounded-xl px-4 py-3 bg-white shadow-sm">
                      <EffortDisplay
                        effectiveFte={getEffectiveFte(calculatedFte, application.overrideFTE, application.requiredEffortApplicationManagement)}
                        calculatedFte={calculatedFte ?? application.requiredEffortApplicationManagement ?? null}
                        overrideFte={application.overrideFTE ?? null}
                        breakdown={effortBreakdown}
                        isPreview={false}
                        showDetails={true}
                        showOverrideInput={false}
                      />
                    </div>
                    <p className="mt-3 text-xs text-gray-600 leading-relaxed">
                      Automatisch berekend op basis van Regiemodel, Application Type, Business Impact Analyse en Hosting (v25)
                    </p>
                  </div>
                </div>
              </div>
            )}
          </div>

          {/* Related Objects Sections */}
          <div style={{ marginTop: '2.5rem' }} className="space-y-4">
            <div className="flex items-center gap-3 mb-4">
              <div className="inline-flex items-center justify-center w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl shadow-lg">
                <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
                </svg>
              </div>
              <h2 className="text-xl font-bold text-gray-900">Gerelateerde objecten</h2>
            </div>
            
            {RELATED_OBJECTS_CONFIG.map((config) => {
          const data = relatedObjects.get(config.objectType);
          const isExpanded = expandedSections.has(config.objectType);
          const colors = COLOR_SCHEMES[config.colorScheme];
          const objects = data?.objects || [];
          const count = objects.length;
          const isLoading = data?.loading ?? true;

          return (
            <div key={config.objectType} className={clsx('bg-white rounded-2xl shadow-sm border overflow-hidden transition-all hover:shadow-md', colors.border)}>
              {/* Header - clickable to expand/collapse */}
              <button
                onClick={() => toggleSection(config.objectType)}
                className={clsx(
                  'w-full px-6 py-5 flex items-center justify-between',
                  colors.header,
                  'hover:opacity-90 transition-all group'
                )}
              >
                <div className="flex items-center gap-3">
                  <span className={colors.icon}>{config.icon}</span>
                  <h3 className="text-lg font-medium text-gray-900">{config.title}</h3>
                  {isLoading ? (
                    <div className="animate-spin rounded-full h-4 w-4 border-2 border-gray-300 border-t-gray-600" />
                  ) : (
                    <span className={clsx('px-2 py-0.5 rounded-full text-xs font-medium', colors.badge)}>
                      {count}
                    </span>
                  )}
                </div>
                <svg
                  className={clsx(
                    'w-5 h-5 text-gray-500 transition-transform',
                    isExpanded && 'transform rotate-180'
                  )}
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>

              {/* Content */}
              {isExpanded && (
                <div className="border-t border-gray-100">
                  {isLoading ? (
                    <div className="p-8 text-center">
                      <div className="inline-flex items-center justify-center w-12 h-12 bg-blue-100 rounded-full mb-3">
                        <svg className="animate-spin h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24">
                          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                        </svg>
                      </div>
                      <p className="text-gray-600 text-sm font-medium">Laden...</p>
                    </div>
                  ) : data?.error ? (
                    <div className="p-6 text-center">
                      <div className="inline-flex items-center justify-center w-12 h-12 bg-red-100 rounded-full mb-3">
                        <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                      </div>
                      <p className="text-red-600 text-sm font-medium">{data.error}</p>
                    </div>
                  ) : count === 0 ? (
                    <div className="p-8 text-center">
                      <div className="inline-flex items-center justify-center w-12 h-12 bg-gray-100 rounded-full mb-3">
                        <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
                        </svg>
                      </div>
                      <p className="text-sm font-medium text-gray-500">Geen {config.title.toLowerCase()} gevonden</p>
                      <p className="text-xs text-gray-400 mt-1">Er zijn geen gerelateerde {config.title.toLowerCase()} gekoppeld aan deze applicatie</p>
                    </div>
                  ) : (
                    <div className="overflow-x-auto">
                      <table className="w-full">
                        <thead className="bg-gradient-to-r from-gray-50 to-gray-100/50">
                          <tr>
                            {config.columns.map((col) => (
                              <th
                                key={col.key}
                                className="px-6 py-4 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider border-b border-gray-200"
                              >
                                {col.label}
                              </th>
                            ))}
                          </tr>
                        </thead>
                        <tbody className="divide-y divide-gray-100 bg-white">
                          {objects.map((obj) => (
                            <tr key={obj.id} className="hover:bg-blue-50/50 transition-colors">
                              {config.columns.map((col) => (
                                <td key={col.key} className="px-6 py-4 text-sm text-gray-900">
                                  {col.isName && jiraHost ? (
                                    <a
                                      href={`${jiraHost}/secure/insight/assets/${obj.key}`}
                                      target="_blank"
                                      rel="noopener noreferrer"
                                      className="text-blue-600 hover:text-blue-800 hover:underline inline-flex items-center gap-1.5 font-medium group"
                                    >
                                      {obj.attributes[col.key] || obj.name || '-'}
                                      <svg className="w-4 h-4 transition-transform group-hover:translate-x-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                                      </svg>
                                    </a>
                                  ) : (
                                    <span className="text-gray-700">{obj.attributes[col.key] || <span className="text-gray-400 italic">-</span>}</span>
                                  )}
                                </td>
                              ))}
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  )}
                </div>
              )}
            </div>
          );
        })}
          </div>

          {/* Call to action */}
          <div className="bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-2xl shadow-sm overflow-hidden">
            <div className="p-6">
              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div>
                  <h3 className="text-lg font-semibold text-blue-900">Classificatie aanpassen?</h3>
                  <p className="text-blue-700 text-sm mt-1">
                    Bewerk applicatiefuncties, classificatie en regiemodel met AI-ondersteuning.
                  </p>
                </div>
                <Link
                  to={`/application/${id}/edit`}
                  className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white rounded-xl transition-all font-semibold whitespace-nowrap shadow-lg shadow-blue-500/30 hover:shadow-xl hover:shadow-blue-500/40"
                >
                  <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>
                  Bewerken
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Helper component for tooltip with fixed positioning to escape overflow-hidden containers
// Uses the same beautiful styling as the Team-indeling popup
function Tooltip({ children, text }: { children: ReactNode; text: string }) {
  const [isVisible, setIsVisible] = useState(false);
  const [position, setPosition] = useState({ top: 0, left: 0 });
  const wrapperRef = useRef<HTMLDivElement>(null);
  const tooltipRef = useRef<HTMLDivElement>(null);

  const updatePosition = () => {
    if (wrapperRef.current && tooltipRef.current) {
      const rect = wrapperRef.current.getBoundingClientRect();
      const tooltipRect = tooltipRef.current.getBoundingClientRect();
      
      // Calculate centered horizontal position (50% from left edge of trigger)
      let left = rect.left + rect.width / 2;
      
      // Keep tooltip within viewport bounds
      const padding = 16;
      const tooltipWidth = 320; // w-80 = 320px (same as Team-indeling)
      
      // Adjust horizontal position if tooltip would overflow
      if (left - tooltipWidth / 2 < padding) {
        left = padding + tooltipWidth / 2;
      } else if (left + tooltipWidth / 2 > window.innerWidth - padding) {
        left = window.innerWidth - padding - tooltipWidth / 2;
      }
      
      // Position above with spacing (same as Team-indeling: mt-3 = 12px)
      // Note: Team-indeling uses 'top-full mt-3' which means: position at bottom of trigger + 12px
      // But we want it above, so: position at top of trigger - 12px - tooltip height
      let top = rect.top - tooltipRect.height - 12;
      if (top < padding) {
        // If tooltip would overflow top, position below instead
        top = rect.bottom + 12;
      }
      
      setPosition({
        top,
        left,
      });
    }
  };

  const handleMouseEnter = () => {
    setIsVisible(true);
    // Small delay to ensure tooltip is rendered before calculating position
    setTimeout(() => updatePosition(), 0);
  };

  const handleMouseLeave = () => {
    setIsVisible(false);
  };

  // Update position on scroll or resize while tooltip is visible
  useEffect(() => {
    if (isVisible) {
      const handleScroll = () => updatePosition();
      const handleResize = () => updatePosition();
      
      window.addEventListener('scroll', handleScroll, true);
      window.addEventListener('resize', handleResize);
      
      return () => {
        window.removeEventListener('scroll', handleScroll, true);
        window.removeEventListener('resize', handleResize);
      };
    }
  }, [isVisible, text]);

  return (
    <>
      <div
        ref={wrapperRef}
        className="relative inline-flex"
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      >
        {children}
      </div>
      {isVisible && (
        <div
          ref={tooltipRef}
          className="fixed left-0 top-full mt-3 w-80 rounded-xl shadow-2xl border border-gray-200 p-4 text-left z-50 max-h-64 overflow-y-auto"
          style={{
            top: `${position.top}px`,
            left: `${position.left}px`,
            pointerEvents: 'auto',
            backgroundColor: '#ffffff',
            transform: 'translateX(-50%)',
            wordWrap: 'break-word',
            wordBreak: 'break-word',
          }}
          onClick={(e) => e.stopPropagation()}
        >
          {/* Arrow pointer (exact same style as Team-indeling) */}
          <div
            className="absolute -top-2 left-4 w-0 h-0 border-l-8 border-r-8 border-b-8 border-transparent"
            style={{
              borderBottomColor: '#ffffff',
              filter: 'drop-shadow(0 -1px 1px rgba(0,0,0,0.1))',
            }}
          />
          
          {/* Description text (exact same styling as Team-indeling remarks) */}
          <div className="text-xs text-gray-600 whitespace-pre-wrap leading-relaxed">
            {text}
          </div>
        </div>
      )}
    </>
  );
}

// Helper component for info icon with tooltip
function InfoIcon({ description }: { description?: string | null }) {
  if (!description || description.trim() === '') return null;
  
  return (
    <Tooltip text={description}>
      <span className="inline-flex items-center cursor-help">
        <svg 
          className="w-4 h-4 text-gray-400 hover:text-gray-600 transition-colors" 
          fill="none" 
          stroke="currentColor" 
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <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>
      </span>
    </Tooltip>
  );
}

// Helper component for external link icon
function ExternalLinkIcon({ className = "w-4 h-4" }: { className?: string }) {
  return (
    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
    </svg>
  );
}

// Helper component for displaying info rows with optional info icon and Jira Assets link
function InfoRow({ label, value, referenceValue, infoDescription, jiraHost }: { label: string; value?: string | null; referenceValue?: ReferenceValue | null; infoDescription?: string | null; jiraHost?: string }) {
  // If referenceValue is provided, use it; otherwise use value string
  const displayValue = referenceValue?.name || value;
  const objectId = referenceValue?.objectId;
  
  // Get description: use infoDescription if provided, otherwise fall back to referenceValue?.description
  const description = infoDescription || referenceValue?.description || null;
  
  // Debug: log referenceValue info for fields that should have descriptions
  if (referenceValue && import.meta.env.DEV) {
  }

  return (
    <div className="group">
      <div className="mb-2">
        <label className="block text-xs font-semibold text-gray-500 uppercase tracking-wider">{label}</label>
      </div>
      <div className="flex items-center gap-2">
        <p className="text-base font-medium text-gray-900 leading-relaxed">
          {displayValue || <span className="text-gray-400 italic">Niet ingevuld</span>}
        </p>
        {/* Info icon with description tooltip - shown when description exists */}
        {description && (
          <span className="inline-flex items-center">
            <InfoIcon description={description} />
          </span>
        )}
        {/* External link to Jira Assets - shown when objectId exists */}
        {objectId && jiraHost && (
          <Tooltip text="Openen in Jira Assets">
            <a
              href={`${jiraHost}/secure/insight/assets/ICMT-${objectId}`}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center justify-center text-gray-400 hover:text-blue-600 transition-colors"
            >
              <ExternalLinkIcon />
            </a>
          </Tooltip>
        )}
      </div>
    </div>
  );
}