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

const { tool } = Astro.props;

// Check if tool has a valid project URL (means we're hosting it)
const hasValidProjectUrl = tool.projectUrl !== undefined && 
                          tool.projectUrl !== null && 
                          tool.projectUrl !== "" && 
                          tool.projectUrl.trim() !== "";

// Determine card styling based on hosting status (derived from projectUrl)
const cardClass = hasValidProjectUrl ? 'card card-hosted' : (tool.license !== 'Proprietary' ? 'card card-oss' : 'card');
---

<div class={cardClass}>
  <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.75rem;">
    <h3 style="margin: 0;">{tool.name}</h3>
    <div style="display: flex; gap: 0.5rem;">
      {hasValidProjectUrl && <span class="badge badge-primary">Self-Hosted</span>}
      {tool.license !== 'Proprietary' && <span class="badge badge-success">Open Source</span>}
    </div>
  </div>
  
  <p class="text-muted" style="font-size: 0.875rem; margin-bottom: 1rem;">
    {tool.description}
  </p>
  
  <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem;">
    <div style="display: flex; align-items: center; gap: 0.25rem;">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <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="text-muted" style="font-size: 0.75rem;">
        {tool.platforms.join(', ')}
      </span>
    </div>
    
    <div style="display: flex; align-items: center; gap: 0.25rem;">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="10"></circle>
        <path d="M12 6v6l4 2"></path>
      </svg>
      <span class="text-muted" style="font-size: 0.75rem;">
        {tool.skillLevel}
      </span>
    </div>
    
    <div style="display: flex; align-items: center; gap: 0.25rem;">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <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="text-muted" style="font-size: 0.75rem;">
        {tool.license}
      </span>
    </div>
  </div>
  
  <div style="display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 1rem;">
    {tool.tags.map(tag => (
      <span class="tag">{tag}</span>
    ))}
  </div>
  
  <!-- Button section - dual buttons for hosted tools, single for others -->
  {hasValidProjectUrl ? (
    <!-- Two buttons for tools we're hosting -->
    <div style="display: flex; gap: 0.5rem;">
      <a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-secondary" style="flex: 1;">
        Project Page
      </a>
      <a href={tool.projectUrl} target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="flex: 1;">
        Access Service
      </a>
    </div>
  ) : (
    <!-- Single button for tools we're not hosting -->
    <a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="width: 100%;">
      Visit Website
    </a>
  )}
</div>