import { useState } from 'react';
import { TeknavData } from '../../teknav-data.js';
import { useNav, EmptyState, pillBtn } from '../../teknav-ui.jsx';
import { ArticleRow } from '../../teknav-articles.jsx';
import { contentApi } from '../../src/lib/content-api.js';

export function GlossaryPage({ slug }) {
  const { navigate } = useNav();
  const term = TeknavData.glossary?.find((item) => item.slug === slug);
  const articles = contentApi.fallbackArticles().filter((article) => (
    article.tags?.some((tag) => tag.toLowerCase() === term?.term?.toLowerCase() || tag.toLowerCase() === term?.english?.toLowerCase())
    || article.summary?.toLowerCase().includes(term?.english?.toLowerCase() || '')
    || article.title?.toLowerCase().includes(term?.english?.toLowerCase() || '')
  )).slice(0, 6);

  if (!term) return <EmptyState title="واژه پیدا نشد" />;

  const related = (term.related ?? []).map((item) => TeknavData.glossary?.find((g) => g.slug === item)).filter(Boolean);
  const topic = TeknavData.topicHubs?.find((item) => item.slug === term.topic);

  return (
    <main style={{ paddingTop: 76, background: '#FAF7F0', minHeight: '100vh', fontFamily: 'Vazirmatn,sans-serif', direction: 'rtl' }}>
      <section style={{ borderBottom: '1px solid #E4DDD2', background: 'linear-gradient(135deg,#FFFFFF 0%,#F4EFE6 100%)', padding: '44px 24px' }}>
        <div style={{ maxWidth: 1040, margin: '0 auto' }}>
          <button onClick={() => navigate('/articles')} style={{ ...pillBtn, background: '#F4EFE6', color: '#0F6B73', border: '1px solid #E4DDD2', marginBottom: 18 }}>بازگشت به مقاله‌ها</button>
          <div style={{ color: '#0F6B73', fontSize: 12, fontWeight: 900, marginBottom: 8 }}>فرهنگ واژگان تکنّاو</div>
          <h1 style={{ fontSize: 'clamp(30px,5vw,48px)', color: '#263238', margin: '0 0 6px', fontWeight: 900 }}>{term.term}</h1>
          <div style={{ color: '#5F6B6D', fontSize: 18, direction: 'ltr', textAlign: 'right', marginBottom: 18 }}>{term.english}</div>
          <p style={{ maxWidth: 720, color: '#263238', lineHeight: 2, fontSize: 17, margin: 0 }}>{term.summary}</p>
        </div>
      </section>
      <section style={{ maxWidth: 1040, margin: '0 auto', padding: '32px 24px', display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 24 }} className="glossary-grid">
        <div style={{ display: 'grid', gap: 18 }}>
          <div style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 8, padding: 20 }}>
            <h2 style={{ margin: '0 0 14px', color: '#263238', fontSize: 20 }}>پرسش‌های رایج</h2>
            {(term.faqs ?? []).map(([q, a]) => (
              <div key={q} style={{ borderTop: '1px solid #E4DDD2', padding: '14px 0' }}>
                <strong style={{ color: '#0F6B73' }}>{q}</strong>
                <p style={{ margin: '8px 0 0', color: '#5F6B6D', lineHeight: 1.9 }}>{a}</p>
              </div>
            ))}
          </div>
          <div style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 8, padding: 20 }}>
            <h2 style={{ margin: '0 0 14px', color: '#263238', fontSize: 20 }}>مقاله‌های مرتبط</h2>
            {articles.length === 0 ? <EmptyState title="هنوز مقاله مرتبطی پیدا نشد" /> : articles.map((article, index) => <ArticleRow key={article.id} article={article} idx={index} />)}
          </div>
        </div>
        <aside style={{ display: 'grid', gap: 14, alignContent: 'start' }}>
          {topic && (
            <button onClick={() => navigate(`/topics/${topic.slug}`)} style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 8, padding: 18, textAlign: 'right', cursor: 'pointer', fontFamily: 'Vazirmatn,sans-serif' }}>
              <div style={{ fontSize: 12, color: '#5F6B6D' }}>خوشه موضوعی</div>
              <div style={{ fontSize: 18, color: '#0F6B73', fontWeight: 900 }}>{topic.title}</div>
            </button>
          )}
          <div style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 8, padding: 18 }}>
            <h3 style={{ margin: '0 0 12px', color: '#263238', fontSize: 16 }}>واژه‌های مرتبط</h3>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {related.map((item) => (
                <button key={item.slug} onClick={() => navigate(`/glossary/${item.slug}`)} style={{ ...pillBtn, background: '#F4EFE6', color: '#0F6B73', border: '1px solid #E4DDD2', fontSize: 12 }}>{item.term}</button>
              ))}
            </div>
          </div>
        </aside>
      </section>
      <style>{`@media(max-width:850px){.glossary-grid{grid-template-columns:1fr!important}}`}</style>
    </main>
  );
}