---
// SPDX-License-Identifier: MIT
// SPDX-FileCopyrightText: 2025 Fideus Labs LLC

/**
 * Authors component for MyST frontmatter
 * Displays authors with ORCID/email links and affiliation references
 * Props:
 * - authors: Array of Contributor objects from frontmatter
 * - affiliations: Array of Affiliation objects from frontmatter
 */
import type { Contributor, Affiliation } from '@awesome-myst/myst-zod';

interface Props {
  authors?: Contributor[];
  affiliations?: Affiliation[];
}

const { authors, affiliations } = Astro.props;

// Helper function to get author name as string
function getAuthorName(author: any): string {
  if (!author.name) return 'Unknown Author';
  // If name is a string, return it directly
  if (typeof author.name === 'string') return author.name;
  // If name is an object, use the literal property
  if (typeof author.name === 'object' && author.name.literal) {
    return author.name.literal;
  }
  // Fallback: try to construct name from parts
  if (typeof author.name === 'object') {
    const parts = [];
    if (author.name.given) parts.push(author.name.given);
    if (author.name.family) parts.push(author.name.family);
    if (parts.length > 0) return parts.join(' ');
  }
  return 'Unknown Author';
}

// Helper function to render affiliation by ID
function getAffiliationName(affiliationId: string, affiliations: any[] | undefined) {
  if (!affiliations) return affiliationId;
  const affiliationsLookup = Object.fromEntries(
    affiliations.map(({ id, ...rest }: any) => [id, rest])
  );
  const affiliation = affiliationsLookup[affiliationId] ?? { name: affiliationId };
  return affiliation.name || affiliation.institution || affiliationId;
}
---

{authors && authors.length > 0 && (
  <div style="margin-bottom: var(--wa-space-l);">
    <h4 style="font-size: var(--wa-font-size-small); font-weight: var(--wa-font-weight-semibold); color: var(--wa-color-neutral-700); margin-bottom: var(--wa-space-s);">Authors</h4>
    <div style="display: flex; flex-direction: column; gap: var(--wa-space-s);">
      {authors.map((author: any) => (
        <div style="display: flex; align-items: flex-start; gap: var(--wa-space-s);">
          <span style="font-weight: var(--wa-font-weight-semibold); font-size: var(--wa-font-size-small);">{getAuthorName(author)}</span>
          <div style="display: flex; align-items: center; gap: var(--wa-space-xs);">
            {author.orcid && (
              <a
                href={`https://orcid.org/${author.orcid.replace(/(https?:\/\/)?orcid\.org\//, '')}`}
                target="_blank"
                rel="noopener noreferrer"
                title="ORCID"
                style="color: var(--wa-color-neutral-500); transition: color 0.2s;"
                onmouseover="this.style.color='var(--wa-color-success-600)'"
                onmouseout="this.style.color='var(--wa-color-neutral-500)'"
              >
                <wa-icon library="scienceicons" name="orcid" style="font-size:1rem;" />
              </a>
            )}
            {author.email && (
              <a
                href={`mailto:${author.email}`}
                title="Email"
                style="color: var(--wa-color-neutral-500); transition: color 0.2s;"
                onmouseover="this.style.color='var(--wa-color-primary-600)'"
                onmouseout="this.style.color='var(--wa-color-neutral-500)'"
              >
                <wa-icon library="scienceicons" name="email" style="font-size:1rem;" />
              </a>
            )}
          </div>
          {author.affiliations && author.affiliations.length > 0 && (
            <div style="font-size: var(--wa-font-size-small); color: var(--wa-color-neutral-600);">
              {author.affiliations.map((affId: any, index: number) => (
                <span>
                  {getAffiliationName(affId, affiliations)}
                  {index < author.affiliations.length - 1 && ', '}
                </span>
              ))}
            </div>
          )}
        </div>
      ))}
    </div>
  </div>
)}