---
// src/components/ToolCard.astro
import ShareButton from './ShareButton.astro';

export interface Props {
  tool: {
    name: string;
    icon?: string;
    type?: string;
    description: string;
    domains: string[];
    phases: string[];
    platforms: string[];
    skillLevel: string;
    accessType: string;
    url: string;
    projectUrl?: string;
    license: string;
    tags: string[];
    statusUrl?: string;
    knowledgebase?: boolean;
  };
}

const { tool } = Astro.props;

const isMethod = tool.type === 'method';
const isConcept = tool.type === 'concept';

const hasValidProjectUrl = tool.projectUrl !== undefined && 
                          tool.projectUrl !== null && 
                          tool.projectUrl !== "" && 
                          tool.projectUrl.trim() !== "";

const hasKnowledgebase = tool.knowledgebase === true;

const cardClass = isConcept ? 'card card-concept tool-card cursor-pointer' :
                  isMethod ? 'card card-method tool-card cursor-pointer' : 
                  hasValidProjectUrl ? 'card card-hosted tool-card cursor-pointer' : 
                  (tool.license !== 'Proprietary' ? 'card card-oss tool-card cursor-pointer' : 'card tool-card cursor-pointer');

const toolDataAttributes = {
  'data-tool-name': tool.name.toLowerCase(),
  'data-tool-type': tool.type,
  'data-tool-domains': (tool.domains || []).join(','),
  'data-tool-phases': (tool.phases || []).join(','),
  'data-tool-tags': (tool.tags || []).join(',').toLowerCase(),
  'data-tool-platforms': (tool.platforms || []).join(','),
  'data-tool-license': tool.license || '',
  'data-tool-skill': tool.skillLevel,
  'data-tool-description': tool.description.toLowerCase()
};
---

<div 
  class={cardClass} 
  {...toolDataAttributes}
  onclick={`window.showToolDetails('${tool.name}')`}
>
<div class="tool-card-header">
  <h3>
    {tool.icon && <span class="mr-2 text-lg">{tool.icon}</span>}
    {tool.name}
  </h3>
  <div class="tool-card-badges">
    {!isMethod && hasValidProjectUrl && <span class="badge badge-primary">CC24-Server</span>}
    {hasKnowledgebase && <span class="badge badge-error">📖</span>}
    <ShareButton toolName={tool.name} context="card" size="small" />
  </div>
</div>

<p class="text-muted">
  {tool.description}
</p>

<div class="tool-card-metadata flex items-center gap-4 mb-3" style="line-height: 1;">
  <div class="metadata-item flex items-center gap-2 text-xs text-secondary flex-shrink-1 min-w-0">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0">
      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
      <line x1="9" y1="9" x2="15" y2="9"></line>
      <line x1="9" y1="15" x2="15" y2="15"></line>
    </svg>
    <span class="overflow-hidden min-w-0" style="text-overflow: ellipsis; white-space: nowrap;">
      {tool.platforms.slice(0, 2).join(', ')}{tool.platforms.length > 2 ? '...' : ''}
    </span>
  </div>
  
  <div class="metadata-item flex items-center gap-2 text-xs text-secondary flex-shrink-1 min-w-0">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0">
      <circle cx="12" cy="12" r="10"></circle>
      <path d="M12 6v6l4 2"></path>
    </svg>
    <span class="overflow-hidden min-w-0" style="text-overflow: ellipsis; white-space: nowrap;">
      {tool.skillLevel}
    </span>
  </div>
  
  <div class="metadata-item flex items-center gap-2 text-xs text-secondary flex-shrink-1 min-w-0">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0">
      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
      <polyline points="14 2 14 8 20 8"></polyline>
    </svg>
    <span class="overflow-hidden min-w-0" style="text-overflow: ellipsis; white-space: nowrap;">
      {isConcept ? 'Konzept' : isMethod ? 'Methode' : tool.license === 'Proprietary' ? 'Prop.' : tool.license?.split(' ')[0]}
    </span>
  </div>
  </div>

<div class="tool-tags-container">
  {tool.tags.slice(0, 8).map(tag => (
    <span class="tag">{tag}</span>
  ))}
</div>

<div class="tool-card-buttons" onclick="event.stopPropagation();">
  {isConcept ? (
    <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);">
      Mehr erfahren
    </a>
  ) : isMethod ? (
    <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);">
      Zur Methode
    </a>
  ) : hasValidProjectUrl ? (
    <div class="button-row">
      <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>
  ) : (
    <a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-primary single-button">
      Software-Homepage
    </a>
  )}
</div>
</div>
</div>