// src/utils/toolRendering.ts - Consolidated tool rendering utilities
import { Tool, escapeHtml, sanitizeText, truncateText, getConfidenceColor } from './uiHelpers.js';

// TOOL CLASSIFICATION UTILITIES (consolidates repeated logic across components)
export interface ToolClassification {
  isMethod: boolean;
  isConcept: boolean;
  isHosted: boolean;
  isOpenSource: boolean;
  hasKnowledgebase: boolean;
}

export function classifyTool(tool: Tool): ToolClassification {
  const isMethod = tool.type === 'method';
  const isConcept = tool.type === 'concept';
  const isHosted = tool.projectUrl !== undefined && 
                   tool.projectUrl !== null && 
                   tool.projectUrl !== "" && 
                   tool.projectUrl.trim() !== "";
  const isOpenSource = tool.license !== 'Proprietary';
  const hasKnowledgebase = tool.knowledgebase === true;

  return { isMethod, isConcept, isHosted, isOpenSource, hasKnowledgebase };
}

export function getToolCardClass(tool: Tool): string {
  const { isMethod, isConcept, isHosted, isOpenSource } = classifyTool(tool);
  
  if (isConcept) return 'card card-concept tool-card cursor-pointer';
  if (isMethod) return 'card card-method tool-card cursor-pointer';
  if (isHosted) return 'card card-hosted tool-card cursor-pointer';
  if (isOpenSource) return 'card card-oss tool-card cursor-pointer';
  return 'card tool-card cursor-pointer';
}

export function getToolChipClass(tool: Tool): string {
  const { isMethod, isHosted, isOpenSource } = classifyTool(tool);
  
  if (isMethod) return 'tool-chip tool-chip-method';
  if (isHosted) return 'tool-chip tool-chip-hosted';
  if (isOpenSource) return 'tool-chip tool-chip-oss';
  return 'tool-chip';
}

export function getRecommendationClass(tool: Tool): string {
  const { isMethod, isHosted, isOpenSource } = classifyTool(tool);
  
  if (isMethod) return 'method';
  if (isHosted) return 'hosted';
  if (isOpenSource) return 'oss';
  return '';
}

// BADGE RENDERING UTILITIES (consolidates badge logic across components)
export function renderToolBadges(tool: Tool): string {
  const { isMethod, isConcept, isHosted, hasKnowledgebase } = classifyTool(tool);
  
  let badges = '';
  
  if (isConcept) {
    badges += '<span class="badge" style="background-color: var(--color-concept); color: white;">Konzept</span>';
  } else if (isMethod) {
    badges += '<span class="badge" style="background-color: var(--color-method); color: white;">Methode</span>';
  } else if (isHosted) {
    badges += '<span class="badge badge-primary">CC24-Server</span>';
  }
  
  if (hasKnowledgebase) {
    badges += '<span class="badge badge-error">📖</span>';
  }
  
  return badges;
}

export function renderInlineBadges(tool: Tool): string {
  const { isMethod, isHosted, hasKnowledgebase } = classifyTool(tool);
  
  let badges = '';
  
  if (isMethod) {
    badges += '<span class="badge" style="background-color: var(--color-method); color: white;">Methode</span>';
  } else if (isHosted) {
    badges += '<span class="badge badge-primary">CC24-Server</span>';
  }
  
  if (hasKnowledgebase) {
    badges += '<span class="badge badge-error">📖</span>';
  }
  
  return badges;
}

// METADATA RENDERING UTILITIES (consolidates metadata display logic)
export function renderToolMetadata(tool: Tool, compact: boolean = false): string {
  const { isMethod, isConcept } = classifyTool(tool);
  const domains = tool.domains || [];
  const phases = tool.phases || [];
  const domainsText = domains.length > 0 ? domains.join(', ') : 'Domain-agnostic';
  const phasesText = phases.join(', ');
  
  if (compact) {
    return `
      <div class="flex gap-3 text-xs text-secondary">
        <span>${isMethod ? 'Methode' : isConcept ? 'Konzept' : tool.platforms?.slice(0, 2).join(', ')}</span>
        <span>•</span>
        <span>${tool.skillLevel}</span>
      </div>
    `;
  }
  
  let metadataHTML = `<div class="grid gap-2">`;
  
  if (!isConcept) {
    metadataHTML += `
      <div><strong>Betriebssystem:</strong> ${(tool.platforms || []).join(', ')}</div>
      <div><strong>Skill Level:</strong> ${tool.skillLevel}</div>
      <div><strong>Lizenzmodell:</strong> ${tool.license}</div>
      <div><strong>Deployment:</strong> ${tool.accessType}</div>
    `;
  } else {
    metadataHTML += `<div><strong>Skill Level:</strong> ${tool.skillLevel}</div>`;
  }
  
  metadataHTML += `
    <div><strong>Einsatzgebiete:</strong> ${domainsText}</div>
    <div><strong>Ermittlungsphasen:</strong> ${phasesText}</div>
  </div>`;
  
  return metadataHTML;
}

// BUTTON RENDERING UTILITIES (consolidates button logic across components)
export function renderToolButtons(tool: Tool, stopPropagation: boolean = true): string {
  const { isMethod, isConcept, isHosted } = classifyTool(tool);
  const onClickAttr = stopPropagation ? 'onclick="event.stopPropagation();"' : '';
  
  if (isConcept) {
    return `
      <a href="${tool.url}" target="_blank" rel="noopener noreferrer" 
         class="btn btn-primary single-button" 
         style="background-color: var(--color-concept); border-color: var(--color-concept);"
         ${onClickAttr}>
        Mehr erfahren
      </a>
    `;
  }
  
  if (isMethod) {
    return `
      <a href="${tool.projectUrl || tool.url}" target="_blank" rel="noopener noreferrer" 
         class="btn btn-primary single-button" 
         style="background-color: var(--color-method); border-color: var(--color-method);"
         ${onClickAttr}>
        Zur Methode
      </a>
    `;
  }
  
  if (isHosted) {
    return `
      <div class="button-row" ${onClickAttr}>
        <a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-secondary">
          Homepage
        </a>
        <a href="${tool.projectUrl}" target="_blank" rel="noopener noreferrer" class="btn btn-primary">
          Zugreifen
        </a>
      </div>
    `;
  }
  
  return `
    <a href="${tool.url}" target="_blank" rel="noopener noreferrer" 
       class="btn btn-primary single-button" ${onClickAttr}>
      Software-Homepage
    </a>
  `;
}

export function renderExtendedToolLinks(tool: Tool): string {
  const { hasKnowledgebase } = classifyTool(tool);
  let linksHTML = renderToolButtons(tool, false);
  
  if (hasKnowledgebase) {
    const kbId = tool.name.toLowerCase()
      .replace(/[^a-z0-9\s-]/g, '')
      .replace(/\s+/g, '-')
      .replace(/-+/g, '-')
      .replace(/^-|-$/g, '');
      
    linksHTML += `
      <a href="/knowledgebase#kb-${kbId}" class="btn btn-secondary w-full mt-2">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2">
          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
          <polyline points="14 2 14 8 20 8"/>
          <line x1="16" y1="13" x2="8" y2="13"/>
          <line x1="16" y1="17" x2="8" y2="17"/>
          <polyline points="10 9 9 9 8 9"/>
        </svg>
        Knowledgebase anzeigen
      </a>
    `;
  }
  
  return linksHTML;
}

// TAG RENDERING UTILITIES (consolidates tag display logic)
export function renderTagCloud(tool: Tool, maxTags: number = 8): string {
  const tags = tool.tags || [];
  return tags.slice(0, maxTags).map(tag => 
    `<span class="tag">${escapeHtml(tag)}</span>`
  ).join('');
}

export function renderRelatedItems(
  tool: Tool, 
  allTools: Tool[], 
  modalType: string = 'primary'
): string {
  const relatedConcepts = tool.related_concepts || [];
  const relatedSoftware = tool.related_software || [];
  
  let html = '';
  
  if (relatedConcepts.length > 0 && modalType === 'primary') {
    const conceptLinks = relatedConcepts.map(conceptName => {
      const concept = allTools.find(t => t.name === conceptName && t.type === 'concept');
      if (concept) {
        return `
          <button class="tag cursor-pointer" 
                  style="background-color: var(--color-concept-bg); border: 1px solid var(--color-concept); color: var(--color-concept); transition: var(--transition-fast);" 
                  onclick="event.stopPropagation(); window.showToolDetails('${conceptName}', 'secondary')" 
                  onmouseover="this.style.backgroundColor='var(--color-concept)'; this.style.color='white';"
                  onmouseout="this.style.backgroundColor='var(--color-concept-bg)'; this.style.color='var(--color-concept)';">
            ${conceptName}
          </button>
        `;
      }
      return `<span class="tag" style="background-color: var(--color-bg-tertiary); color: var(--color-text-secondary);">${conceptName}</span>`;
    }).join('');

    const isMobile = window.innerWidth <= 768;
    const collapseOnMobile = isMobile && relatedConcepts.length > 2;

    html += `
      <div class="mt-4">
        <div class="flex items-center gap-2 mb-2">
          <strong style="color: var(--color-text);">Verwandte Konzepte:</strong>
          ${collapseOnMobile ? `
            <button id="concepts-toggle-${modalType}" 
                    onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === '▼' ? '▲' : '▼';"
                    class="btn-icon text-xs">
              ▼
            </button>
          ` : ''}
        </div>
        <div ${collapseOnMobile ? 'class="hidden"' : ''} class="flex flex-wrap gap-1">
          ${conceptLinks}
        </div>
      </div>
    `;
  }

  if (relatedSoftware.length > 0 && modalType === 'primary') {
    const softwareLinks = relatedSoftware.map(softwareName => {
      const software = allTools.find(t => t.name === softwareName && (t.type === 'software' || t.type === 'method'));
      if (software) {
        const { isHosted, isMethod } = classifyTool(software);
        const bgColor = isMethod ? 'var(--color-method-bg)' : 
                        isHosted ? 'var(--color-hosted-bg)' : 'var(--color-oss-bg)';
        const borderColor = isMethod ? 'var(--color-method)' : 
                            isHosted ? 'var(--color-hosted)' : 'var(--color-oss)';
        
        return `
          <button class="tag cursor-pointer" 
                  style="background-color: ${bgColor}; border: 1px solid ${borderColor}; color: ${borderColor}; transition: var(--transition-fast);" 
                  onclick="event.stopPropagation(); window.showToolDetails('${softwareName}', 'secondary')" 
                  onmouseover="this.style.backgroundColor='${borderColor}'; this.style.color='white';"
                  onmouseout="this.style.backgroundColor='${bgColor}'; this.style.color='${borderColor}';">
            ${softwareName}
          </button>
        `;
      }
      return `<span class="tag" style="background-color: var(--color-bg-tertiary); color: var(--color-text-secondary);">${softwareName}</span>`;
    }).join('');

    const isMobile = window.innerWidth <= 768;
    const collapseOnMobile = isMobile && relatedSoftware.length > 2;

    html += `
      <div class="mt-4">
        <div class="flex items-center gap-2 mb-2">
          <strong style="color: var(--color-text);">Verwandte Software:</strong>
          ${collapseOnMobile ? `
            <button id="software-toggle-${modalType}" 
                    onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === '▼' ? '▲' : '▼';"
                    class="btn-icon text-xs">
              ▼
            </button>
          ` : ''}
        </div>
        <div ${collapseOnMobile ? 'class="hidden"' : ''} class="flex flex-wrap gap-1">
          ${softwareLinks}
        </div>
      </div>
    `;
  }
  
  return html;
}

// CONFIDENCE RENDERING UTILITIES (consolidates AI confidence display logic)
export interface ConfidenceData {
  overall: number;
  semanticRelevance: number;
  taskSuitability: number;
  uncertaintyFactors: string[];
  strengthIndicators: string[];
}

export function renderConfidenceTooltip(confidence: ConfidenceData): string {
  const confidenceColor = getConfidenceColor(confidence.overall);
  const tooltipId = `tooltip-${Math.random().toString(36).substr(2, 9)}`;
  
  return `
    <span class="confidence-tooltip-trigger" 
          style="display: inline-flex; align-items: center; gap: 0.125rem; cursor: help; margin-left: 0.25rem; position: relative;"
          onmouseenter="this.querySelector('.confidence-tooltip').style.display = 'block'"
          onmouseleave="this.querySelector('.confidence-tooltip').style.display = 'none'"
          onclick="event.stopPropagation();">
      <div style="width: 6px; height: 6px; border-radius: 50%; background-color: ${confidenceColor}; flex-shrink: 0;"></div>
      <span style="font-size: 0.625rem; color: white; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.5);">${confidence.overall}%</span>
      
      <div class="confidence-tooltip" 
           style="display: none; position: absolute; top: 100%; right: 0; z-index: 1001; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 1rem; min-width: 320px; max-width: 400px; box-shadow: var(--shadow-lg); font-size: 0.75rem; color: var(--color-text); margin-top: 0.5rem;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
          <strong style="font-size: 0.875rem; color: var(--color-primary);">KI-Vertrauenswertung</strong>
          <span style="background-color: ${confidenceColor}; color: white; font-weight: 600; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.625rem;">${confidence.overall}%</span>
        </div>
        
        <div style="display: grid; grid-template-columns: 1fr; gap: 0.625rem; margin-bottom: 0.75rem;">
          <div style="background: var(--color-bg-secondary); padding: 0.5rem; border-radius: 0.375rem; border-left: 3px solid var(--color-accent);">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem;">
              <span style="font-weight: 600; font-size: 0.6875rem; color: var(--color-text);">🔍 Semantische Relevanz</span>
              <strong style="color: var(--color-accent);">${confidence.semanticRelevance}%</strong>
            </div>
            <div style="font-size: 0.625rem; color: var(--color-text-secondary); line-height: 1.3;">
              Wie gut die Tool-Beschreibung semantisch zu Ihrer Anfrage passt
            </div>
          </div>
          
          <div style="background: var(--color-bg-secondary); padding: 0.5rem; border-radius: 0.375rem; border-left: 3px solid var(--color-primary);">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem;">
              <span style="font-weight: 600; font-size: 0.6875rem; color: var(--color-text);">🎯 Aufgaben-Eignung</span>
              <strong style="color: var(--color-primary);">${confidence.taskSuitability}%</strong>
            </div>
            <div style="font-size: 0.625rem; color: var(--color-text-secondary); line-height: 1.3;">
              KI-bewertete Eignung für Ihre spezifische Aufgabenstellung
            </div>
          </div>
        </div>
        
        ${confidence.strengthIndicators && confidence.strengthIndicators.length > 0 ? `
          <div style="margin-bottom: 0.75rem; padding: 0.5rem; background: var(--color-oss-bg); border-radius: 0.375rem; border-left: 3px solid var(--color-accent);">
            <strong style="color: var(--color-accent); font-size: 0.6875rem; display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.375rem;">
              <span>✓</span> Stärken dieser Empfehlung:
            </strong>
            <ul style="margin: 0; padding-left: 1rem; font-size: 0.625rem; line-height: 1.4; color: var(--color-text);">
              ${confidence.strengthIndicators.slice(0, 3).map(s => `<li style="margin-bottom: 0.25rem;">${sanitizeText(s)}</li>`).join('')}
            </ul>
          </div>
        ` : ''}
        
        ${confidence.uncertaintyFactors && confidence.uncertaintyFactors.length > 0 ? `
          <div style="padding: 0.5rem; background: var(--color-hosted-bg); border-radius: 0.375rem; border-left: 3px solid var(--color-warning);">
            <strong style="color: var(--color-warning); font-size: 0.6875rem; display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.375rem;">
              <span>⚠</span> Mögliche Einschränkungen:
            </strong>
            <ul style="margin: 0; padding-left: 1rem; font-size: 0.625rem; line-height: 1.4; color: var(--color-text);">
              ${confidence.uncertaintyFactors.slice(0, 3).map(f => `<li style="margin-bottom: 0.25rem;">${sanitizeText(f)}</li>`).join('')}
            </ul>
          </div>
        ` : ''}
        
        <div style="margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); font-size: 0.625rem; color: var(--color-text-secondary); text-align: center;">
          Forensisch fundierte KI-Analyse
        </div>
      </div>
    </span>
  `;
}

// SUITABILITY UTILITIES (consolidates suitability display logic)
export function getSuitabilityText(score: string): string {
  const texts = {
    high: 'GUT GEEIGNET',
    medium: 'GEEIGNET', 
    low: 'VIELLEICHT GEEIGNET'
  };
  return texts[score] || 'GEEIGNET';
}

export function getSuitabilityColor(score: string): string {
  const colors = {
    high: 'var(--color-accent)',
    medium: 'var(--color-warning)',
    low: 'var(--color-text-secondary)'
  };
  return colors[score] || 'var(--color-warning)';
}