/* ===================================================
   AUTHOR PAGE
   =================================================== */
function socialIcon(type) {
  switch (type) {
    case 'github':    return <Icon.Github />;
    case 'twitter':   return <Icon.Twitter />;
    case 'linkedin':  return <Icon.Linkedin />;
    case 'instagram': return <Icon.Instagram />;
    case 'facebook':  return <Icon.Facebook />;
    case 'mail':      return <Icon.Mail />;
    case 'web':       return <Icon.Globe />;
    default:          return <Icon.Globe />;
  }
}

function CredCard({ item, style }) {
  return (
    <div className="cred-card" style={style}>
      <div className="cred-card__img">{item.image || `image\n${(item.name || '').toLowerCase().replace(/\s+/g, '-')}.png`}</div>
      <h4 className="cred-card__name">{item.name}</h4>
      <p className="cred-card__meta">{item.issuer || item.platform} · {item.year}</p>
    </div>
  );
}

function AuthorApp({ routeAuthorId }) {
  const { data: authors } = useJson('/data/authors.json');
  const [view, setView] = React.useState('certificates'); // certificates | courses

  const id = routeAuthorId || new URLSearchParams(window.location.search).get('id') || 'ana';
  const author = authors ? authors.find(a => a.id === id) : null;

  if (!authors) {
    return <main className="page author-page"><div className="container"><div className="empty">cargando…</div></div></main>;
  }
  if (!author) {
    return (
      <main className="page author-page">
        <div className="container">
          <div className="empty">
            No se encontró el autor <code>{id}</code>.<br/>
            <TransitionLink href="/" className="btn btn--ghost" style={{ marginTop: 16 }}>Volver al inicio</TransitionLink>
          </div>
        </div>
      </main>
    );
  }

  const list = view === 'certificates' ? author.certificates : author.courses;

  return (
    <main className="page author-page" data-screen-label="03 Autor">
        <section className="container">
          <div className="author-hero">
            <img className="author-hero__avatar" src={author.avatar} alt={author.name} />
            <div>
              <h1 className="author-hero__name">{author.name}</h1>
              <p className="author-hero__user">@{author.username}</p>
              <p className="author-hero__bio">{author.bio}</p>
            </div>
          </div>

          <div className="author-block" style={{ '--i': 0 }}>
            <p className="author-block__label">/ redes</p>
            <div className="socials">
              {author.socials.map((s, i) => (
                <a key={i} href={s.url} target="_blank" rel="noreferrer" className="social-row" style={{ '--i': i }}>
                  <span className="social-row__icon">{socialIcon(s.type)}</span>
                  <div>
                    <p className="social-row__type">{s.type}</p>
                    <p className="social-row__label">{s.label}</p>
                  </div>
                </a>
              ))}
            </div>
          </div>

          <div className="author-block" style={{ '--i': 1 }}>
            <p className="author-block__label">/ sobre</p>
            <div className="description-block">{author.description}</div>
          </div>

          <div className="author-block" style={{ '--i': 2 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4, gap: 16, flexWrap: 'wrap' }}>
              <p className="author-block__label" style={{ margin: 0 }}>/ formación</p>
              <div className="switch">
                <button
                  className={view === 'certificates' ? 'is-on' : ''}
                  onClick={() => setView('certificates')}
                >Certificados</button>
                <button
                  className={view === 'courses' ? 'is-on' : ''}
                  onClick={() => setView('courses')}
                >Cursos</button>
              </div>
            </div>
            {list && list.length > 0 ? (
              <div className="cred-grid">
                {list.map((item, i) => <CredCard key={i} item={item} style={{ '--i': i }} />)}
              </div>
            ) : (
              <div className="empty">Aún no hay {view === 'certificates' ? 'certificados' : 'cursos'} cargados.</div>
            )}
          </div>
        </section>
      </main>
  );
}

window.AuthorApp = AuthorApp;