---
import type { CollectionEntry } from 'astro:content';
import { formatDate, processMarkdown, isValidDate } from '../utils/markdown';
import { siteConfig, getPostCardAspectRatio } from '../config';
import { normalizeStatus, getStatusDisplayText, hasStatusStyling, getStatusClasses } from '../utils/status';
import { optimizeContentImagePath, getOptimizedFormat } from '../utils/images';
import ImageWrapper from './ImageWrapper.astro';
import Icon from './Icon.astro';

interface Props {
  project: CollectionEntry<'projects'>;
  featured?: boolean;
  eager?: boolean;
  context?: 'featured' | 'recent' | 'projects' | 'tags' | 'home';
  showCategories?: boolean;
}

const { project, featured = false, eager = false, context = 'projects', showCategories = true } = Astro.props;

// Get excerpt from markdown processing
const { excerpt } = processMarkdown(project.body || '');

const { title, description: rawDescription, date, image: rawImage, imageAlt } = project.data;

// Process Obsidian bracket syntax in image field (copy from PostCard)
const image = (() => {
  if (!rawImage) return rawImage;

  // Handle case where rawImage is an array (unquoted YAML syntax)
  let imageValue = rawImage;
  if (Array.isArray(rawImage)) {
    // If it's an array, take the first element
    imageValue = rawImage[0];
  }

  // Ensure imageValue is a string before calling string methods
  if (typeof imageValue !== 'string') {
    console.warn('ProjectCard: imageValue is not a string:', imageValue);
    return imageValue;
  }

  // Check if it's Obsidian double bracket syntax
  if (imageValue.startsWith('[[') && imageValue.endsWith(']]')) {
    // Extract the content inside the double brackets
    return imageValue.slice(2, -2);
  }

  return imageValue;
})();

const description = rawDescription || excerpt;
const categories = project.data.categories || [];
const status = normalizeStatus(project.data.status);
const repositoryUrl = project.data.repositoryUrl;
const projectUrl = project.data.projectUrl || project.data.demoUrl || project.data.demoURL;

// Determine content availability for layout
const hasDescription = description && description.trim().length > 0;
const hasCategories = showCategories && categories.length > 0;
const hasHoverContent = hasDescription || hasCategories;

// Determine if we should show the cover image
// Projects should always show images when available (not controlled by postOptions)
const shouldShowCoverImage = true;
---

<div class="group relative bg-white dark:bg-primary-800 rounded-xl border border-primary-200 dark:border-primary-700 overflow-hidden hover:shadow-xl transition-all duration-300 aspect-[4/3]" data-project-categories={categories.join(',')}>
  <a href={`/projects/${project.id}`} class="block h-full" aria-label={`View project: ${title}`}>
    <!-- Background Image or Fallback -->
    {image && shouldShowCoverImage && (
      <div class="absolute inset-0">
        <ImageWrapper
          src={(() => {
            // Clean the image path by removing Obsidian brackets
            let cleanImagePath = image;
            if (!cleanImagePath || typeof cleanImagePath !== 'string') return '';
            if (cleanImagePath.startsWith('[[') && cleanImagePath.endsWith(']]')) {
              cleanImagePath = cleanImagePath.slice(2, -2);
            }

            // Remove Obsidian subfolder prefixes (images/, attachments/)
            if (typeof cleanImagePath === 'string') {
              // Extract just the filename if it includes attachments/
              if (cleanImagePath.includes('attachments/')) {
                 cleanImagePath = cleanImagePath.split('attachments/').pop() || '';
              }
              // Remove images/ prefix if present (Obsidian subfolder setting)
              else if (cleanImagePath.startsWith('images/')) {
                cleanImagePath = cleanImagePath.replace('images/', '');
              }
            }

            const finalSrc = cleanImagePath || '';
            // Convert to WebP if applicable (sync-images.js creates WebP versions)
            return getOptimizedFormat(finalSrc);
          })()}
          basePath={(() => {
            // 1. External URLs - no basePath needed
            if (typeof image === 'string' && image.startsWith('http')) {
              return '';
            }

            // 2. Clean the image path to check for attachments/ prefix
            let cleanImagePath = image;
            if (typeof cleanImagePath === 'string' && cleanImagePath.startsWith('[[') && cleanImagePath.endsWith(']]')) {
              cleanImagePath = cleanImagePath.slice(2, -2);
            }

            // 3. Detect folder-based vs file-based: if image path starts with 'attachments/',
            // it's a single-file project (shared attachments folder)
            if (typeof cleanImagePath === 'string' && cleanImagePath.includes('attachments/')) {
              // Single-file project with image in attachments folder
              // The sync script copies these to /projects/attachments/
              return "/projects/attachments/";
            }

            // 4. Folder-based project - sync script copies images to project folder root
            // Safety check: ensure project.id exists before using it
            if (project.id) {
              return `/projects/${project.id}/`;
            } else {
              // Fallback to attachments directory if project.id is undefined
              return '/projects/attachments/';
            }
          })()}
          alt={imageAlt || `Cover image for project: ${title}`}
          width={800}
          height={600}
          loading={eager ? 'eager' : 'lazy'}
          fetchpriority={eager ? 'high' : 'auto'}
          class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
        />
        <!-- Dark overlay for better text readability -->
        <div class="absolute inset-0 bg-black/70 group-hover:bg-black/80 transition-colors duration-300"></div>
      </div>
    )}

    {!image && (
      <!-- Fallback background when no image -->
      <div class="absolute inset-0 bg-gradient-to-br from-primary-200 to-primary-300 dark:from-primary-700 dark:to-primary-800"></div>
    )}

    <!-- Status badge -->
    {status && (
      <div class="absolute top-3 right-3 z-10">
        <span class={`px-2 py-1 rounded-full text-xs font-medium shadow-sm ${getStatusClasses(status)}`}>
          {getStatusDisplayText(status)}
        </span>
      </div>
    )}

    <!-- Date -->
    {isValidDate(date) && (
      <div class="absolute top-3 left-3 z-10">
        <time datetime={date.toISOString()} class={`text-xs font-mono px-2 py-1 rounded backdrop-blur-sm ${
          image && shouldShowCoverImage
            ? 'text-white/90 bg-black/20'
            : 'text-primary-700 dark:text-primary-200 bg-white/80 dark:bg-black/20'
        }`}>
          {formatDate(date)}
        </time>
      </div>
    )}

    <!-- Content Overlay -->
    <div class={`absolute inset-0 flex flex-col p-4 md:p-6 z-10 mobile-centered ${
      // Perfect center title when no description or categories
      !hasDescription && !hasCategories
        ? 'justify-center items-center'
        // Balance layout when only one type of content
        : (hasDescription && !hasCategories) || (!hasDescription && hasCategories)
        ? 'justify-center items-center'
        // Default layout for full content
        : 'justify-center items-center'
    }`}>
      <!-- Title - always centered -->
      <h3 class={`text-xl font-bold transition-colors line-clamp-2 text-center ${
        image && shouldShowCoverImage
          ? 'text-white group-hover:text-highlight-300 drop-shadow-lg'
          : 'text-primary-900 dark:text-primary-50 group-hover:text-highlight-600 dark:group-hover:text-highlight-400'
      } ${
        // Adjust margin based on content
        !hasDescription && !hasCategories ? 'mb-0' :
        (hasDescription && !hasCategories) ? 'mb-4' :
        (!hasDescription && hasCategories) ? 'mb-4' : 'mb-2'
      }`}>
        {title}
      </h3>

      {hasHoverContent ? (
        <!-- Hover content for full layout -->
        <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          <!-- Description -->
          {hasDescription && (
            <p class={`text-sm mb-3 line-clamp-2 text-left ${
              image && shouldShowCoverImage
                ? 'text-white/90 drop-shadow-lg'
                : 'text-primary-700 dark:text-primary-300'
            }`}>
              {description}
            </p>
          )}

          <!-- Categories -->
          {hasCategories && (
            <div class="flex flex-wrap gap-1 mb-3 justify-center">
              {categories.slice(0, 3).map(category => (
                <span class={`inline-flex items-center px-2 py-1 text-xs font-medium rounded backdrop-blur-sm ${
                  image && shouldShowCoverImage
                    ? 'bg-white/20 text-white/90'
                    : 'bg-primary-100 dark:bg-primary-700 text-primary-700 dark:text-primary-200'
                }`}>
                  {category}
                </span>
              ))}
              {categories.length > 3 && (
                <span class={`inline-flex items-center px-2 py-1 text-xs font-medium rounded backdrop-blur-sm ${
                  image && shouldShowCoverImage
                    ? 'bg-white/20 text-white/90'
                    : 'bg-primary-100 dark:bg-primary-700 text-primary-700 dark:text-primary-200'
                }`}>
                  +{categories.length - 3} more
                </span>
              )}
            </div>
          )}
        </div>
      ) : (
        <!-- Always visible content for minimal layouts -->
        <div class="flex flex-col items-center">
          {hasDescription && (
            <p class={`text-sm line-clamp-2 text-center ${
              image && shouldShowCoverImage
                ? 'text-white/90 drop-shadow-lg'
                : 'text-primary-700 dark:text-primary-300'
            }`}>
              {description}
            </p>
          )}

          {hasCategories && (
            <div class="flex flex-wrap gap-1 mt-3 justify-center">
              {categories.slice(0, 3).map(category => (
                <span class={`inline-flex items-center px-2 py-1 text-xs font-medium rounded backdrop-blur-sm ${
                  image && shouldShowCoverImage
                    ? 'bg-white/20 text-white/90'
                    : 'bg-primary-100 dark:bg-primary-700 text-primary-700 dark:text-primary-200'
                }`}>
                  {category}
                </span>
              ))}
              {categories.length > 3 && (
                <span class={`inline-flex items-center px-2 py-1 text-xs font-medium rounded backdrop-blur-sm ${
                  image && shouldShowCoverImage
                    ? 'bg-white/20 text-white/90'
                    : 'bg-primary-100 dark:bg-primary-700 text-primary-700 dark:text-primary-200'
                }`}>
                  +{categories.length - 3} more
                </span>
              )}
            </div>
          )}
        </div>
      )}
    </div>
  </a>
</div>

<style>
  /* Make cards more compact and centered on mobile */
  @media (max-width: 768px) {
    /* Reduce card height on mobile and center them */
    .group[data-project-categories] {
      aspect-ratio: 2/1 !important;
      max-height: 200px !important;
      width: 100%;
      max-width: 100%;
    }
    
    /* Center content vertically and horizontally on mobile */
    .group[data-project-categories] .mobile-centered {
      justify-content: center !important;
      align-items: center !important;
      padding-top: 0 !important;
      padding: 1rem !important;
    }
    
    /* Smaller title on mobile */
    .group[data-project-categories] h3 {
      font-size: 1rem !important;
      margin-bottom: 0 !important;
    }
    
    /* Hide description and hover content on mobile to save space */
    .group[data-project-categories] .opacity-0 {
      display: none !important;
    }
    
    /* Ensure badges stay in corners */
    .group[data-project-categories] .absolute.top-3 {
      position: absolute !important;
    }
  }
</style>