/* global React */
const AC = {
  bg: 'rgb(6,11,24)',
  bgDeep: 'rgb(21,19,49)',
  gold: '#E6C79C',
  goldDark: '#9E7B4B',
  lavender: 'rgb(186,171,212)',
  muted: 'rgb(78,70,114)',
  white: 'rgb(255,255,255)',
  violet: 'rgba(59,39,172,0.5)'
};

// Pick the article: prefer ?slug=..., else window.ARTICLE_SLUG, else first article.
function _resolveSlug() {
  if (typeof window === 'undefined') return null;
  const url = new URLSearchParams(window.location.search);
  return url.get('slug') || window.ARTICLE_SLUG || (window.ARTICLES && window.ARTICLES[0] && window.ARTICLES[0].slug);
}

function ArticleHero({ title, lead, cat }) {
  return (
    <section style={{
      position: 'relative', background: AC.bg,
      padding: '180px 24px 80px', overflow: 'hidden'
    }}>
      <div style={{
        position: 'relative',
        maxWidth: 912, margin: '0 auto',
        display: 'flex', flexDirection: 'column', gap: 32
      }}>
        <div style={{
          fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
          letterSpacing: '0.2em', color: AC.muted
        }}>{(cat || '').toUpperCase()}</div>

        <h1 style={{
          margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 52,
          lineHeight: 1.15, letterSpacing: '-0.022em', color: AC.white,
          textWrap: 'balance'
        }}>{title}</h1>

        <p style={{
          margin: 0, fontFamily: 'Nunito', fontSize: 18, lineHeight: 1.7,
          color: AC.lavender
        }}>{lead}</p>
      </div>
    </section>);
}

function ArticleCover({ hue = 0 }) {
  return (
    <section style={{
      position: 'relative', background: AC.bg, padding: '0 24px 40px'
    }}>
      <div style={{
        maxWidth: 1088, margin: '0 auto',
        height: 420, borderRadius: 20, overflow: 'hidden',
        position: 'relative', background: AC.bgDeep
      }}>
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: `url(assets/hero-bg.png)`,
          backgroundSize: 'cover', backgroundPosition: 'center',
          filter: `hue-rotate(${hue}deg) saturate(0.9) brightness(0.8)`
        }} />
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(6,11,24,0) 55%, rgba(6,11,24,0.5) 100%)'
        }} />
      </div>
    </section>);
}

function SectionRenderer({ section }) {
  if (section.type === 'heading') {
    return (
      <h2 style={{
        margin: '8px 0 0', fontFamily: 'Nunito', fontSize: 26,
        letterSpacing: '-0.022em', color: AC.white, fontWeight: 600
      }}>{section.text}</h2>);
  }
  if (section.type === 'para') {
    return (
      <p style={{
        margin: 0, fontFamily: 'Nunito', fontSize: 17, lineHeight: 1.75,
        color: AC.lavender
      }}>{section.text}</p>);
  }
  if (section.type === 'list') {
    return (
      <ul style={{
        margin: 0, paddingLeft: 0, listStyle: 'none',
        display: 'flex', flexDirection: 'column', gap: 12
      }}>
        {section.items.map((item, i) =>
        <li key={i} style={{
          position: 'relative', paddingLeft: 28,
          fontFamily: 'Nunito', fontSize: 17, lineHeight: 1.6,
          color: AC.lavender
        }}>
          <span style={{
            position: 'absolute', left: 0, top: '0.55em',
            width: 8, height: 8, borderRadius: '50%', background: AC.gold
          }} />
          {item}
        </li>
        )}
      </ul>);
  }
  if (section.type === 'quote') {
    return (
      <blockquote style={{
        margin: '16px 0', padding: '32px 40px',
        borderLeft: `2px solid ${AC.gold}`,
        background: 'rgba(21,19,49,0.5)',
        borderRadius: '0 12px 12px 0'
      }}>
        <p style={{
          margin: 0, fontFamily: 'Playfair Display', fontStyle: 'italic',
          fontSize: 24, lineHeight: 1.5, color: AC.white,
          letterSpacing: '-0.022em'
        }}>{section.text}</p>
      </blockquote>);
  }
  if (section.type === 'image') {
    return (
      <figure style={{
        margin: '8px 0', display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'center'
      }}>
        <img src={section.src} alt={section.alt || ''} style={{
          maxWidth: '100%', width: '100%', height: 'auto', borderRadius: 12, display: 'block'
        }} />
        {section.caption &&
          <figcaption style={{
            margin: 0, fontFamily: 'Nunito', fontSize: 14, lineHeight: 1.6,
            color: AC.muted, textAlign: 'center', fontStyle: 'italic'
          }}>{section.caption}</figcaption>
        }
      </figure>);
  }
  if (section.type === 'signature') {
    return (
      <p style={{
        margin: '8px 0 0', fontFamily: 'Playfair Display', fontStyle: 'italic',
        fontSize: 20, color: AC.gold
      }}>— {section.text}</p>);
  }
  return null;
}

function ArticleBody({ article }) {
  return (
    <section style={{ background: AC.bg, padding: '40px 24px 80px' }}>
      <div style={{
        maxWidth: 912, margin: '0 auto',
        display: 'flex', flexDirection: 'column', gap: 28
      }}>
        {article.sections.map((s, i) =>
        <SectionRenderer key={i} section={s} />
        )}

        <div style={{
          marginTop: 24,
          paddingTop: 24,
          borderTop: `1px solid ${AC.muted}`,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          flexWrap: 'wrap', gap: 16
        }}>
          <div style={{
            fontFamily: 'Nunito', fontSize: 14, color: AC.muted,
            letterSpacing: '0.05em'
          }}>{article.date}{article.author ? ` · ${article.author}` : ''}</div>
          <a href="blog.html" style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
            color: AC.gold, textDecoration: 'none'
          }}>
            <span>Wróć do archiwum bloga</span>
          </a>
        </div>
      </div>
    </section>);
}

function ArticleRelated({ currentSlug }) {
  const related = (typeof window !== 'undefined' && window.getLatestArticles) ?
    window.getLatestArticles(3, currentSlug) :
    [];
  if (!related.length) return null;
  return (
    <section style={{
      background: AC.bg, padding: '80px 24px',
      borderTop: `1px solid ${AC.muted}`, borderBottom: `1px solid ${AC.muted}`
    }}>
      <div style={{ maxWidth: 1312, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ marginBottom: 64 }}>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
            letterSpacing: '0.2em', color: AC.muted, marginBottom: 20
          }}>BLOG</div>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 48,
            lineHeight: 1.15, letterSpacing: '-0.022em', color: AC.white
          }}>Powiązane artykuły</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {related.map((p, i) =>
          <a key={i} href={`${p.slug}.html`} style={{
            borderRadius: 16, border: '1px solid rgb(78, 70, 114)', padding: 32,
            display: 'flex', flexDirection: 'column', gap: 16,
            textDecoration: 'none', transition: 'border-color .3s, transform .3s',
            transform: 'none'
          }}>
            <h3 style={{
              margin: 0, fontFamily: 'Nunito',
              lineHeight: 1.4, color: AC.white, fontWeight: '400', fontSize: '24px'
            }}>{p.title}</h3>
            <div style={{
              fontFamily: 'Nunito',
              letterSpacing: '0.05em', color: AC.muted, fontSize: '14px'
            }}>{p.date}</div>
            <p style={{
              margin: 0, fontFamily: 'Nunito', lineHeight: 1.6,
              color: AC.lavender, fontSize: '16px'
            }}>{p.excerpt}</p>
            <div style={{
              marginTop: 8, fontFamily: 'Nunito', fontWeight: 700,
              color: AC.gold, fontSize: '16px'
            }}>Czytaj artykuł</div>
          </a>
          )}
        </div>
      </div>
    </section>);
}

function ArticlePage() {
  const slug = _resolveSlug();
  const article = (typeof window !== 'undefined' && window.getArticleBySlug) ?
    window.getArticleBySlug(slug) :
    null;
  if (!article) {
    return (
      <section style={{ background: AC.bg, padding: '200px 24px 80px', minHeight: 600 }}>
        <div style={{ maxWidth: 912, margin: '0 auto', color: AC.lavender, fontFamily: 'Nunito' }}>
          <p>Nie znaleziono artykułu.</p>
        </div>
      </section>);
  }
  return (
    <>
      <ArticleHero title={article.title} lead={article.lead} cat={article.category} />
      <ArticleCover hue={article.hue || 0} />
      <ArticleBody article={article} />
      <ArticleRelated currentSlug={article.slug} />
    </>);
}

Object.assign(window, { ArticlePage });