// Articles list + Article detail page

function ArticleList() {
  const { t } = useTheme();
  const { navigate } = useRouter();
  const s = useStyles();
  const cats = ['Tất cả', 'Niềng răng', 'Implant', 'Tẩy trắng', 'Chăm sóc', 'Trẻ em', 'Răng khôn'];
  const [cat, setCat] = React.useState('Tất cả');
  const [q, setQ] = React.useState('');
  const list = React.useMemo(() => {
    let out = ARTICLES.slice();
    if (cat !== 'Tất cả') out = out.filter(a => a.category === cat);
    if (q.trim()) {
      const qq = q.toLowerCase();
      out = out.filter(a => a.title.toLowerCase().includes(qq) || a.excerpt.toLowerCase().includes(qq));
    }
    return out;
  }, [cat, q]);
  const featured = list.find(a => a.featured) || list[0];
  const rest = list.filter(a => a.id !== featured?.id);

  return (
    <div>
      <div style={{ background: '#fff', borderBottom: `1px solid ${t.border}`, padding: '28px 32px 20px' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap' }}>
          <div>
            <div style={{ fontSize: 12, color: t.textMuted, marginBottom: 8 }}><a onClick={() => navigate('/')} style={{ cursor: 'pointer' }}>Trang chủ</a> / Kiến thức</div>
            <h1 style={{ fontSize: 32, fontWeight: 800, margin: '0 0 8px', color: t.primary, letterSpacing: -0.6 }}>Kiến thức nha khoa</h1>
            <p style={{ fontSize: 14, color: t.textMuted, margin: 0, maxWidth: 640 }}>Bài viết được biên soạn và thẩm định bởi nha sĩ có chứng chỉ hành nghề. Cập nhật theo y văn mới nhất.</p>
          </div>
          <a href="cms/dashboard.html" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8, padding: '10px 16px',
            background: t.primary, color: '#fff', borderRadius: 8, fontSize: 13, fontWeight: 600,
            textDecoration: 'none', border: `1px solid ${t.primary}`,
          }} title="Mở CMS editor (dành cho biên tập viên)">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
            Viết bài mới
          </a>
        </div>
      </div>
      <div style={{ maxWidth: 1400, margin: '0 auto', padding: '24px 32px' }}>
        <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginBottom: 24, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {cats.map(c => (
              <button key={c} onClick={() => setCat(c)} className="chip-interactive" style={{
                border: `1px solid ${cat === c ? t.primary : t.border}`,
                background: cat === c ? t.primary : '#fff',
                color: cat === c ? '#fff' : t.text,
                padding: '7px 14px', borderRadius: 20, fontSize: 12.5, fontWeight: 500, cursor: 'pointer',
              }}>{c}</button>
            ))}
          </div>
          <div style={{ flex: 1 }}/>
          <div style={{ position: 'relative' }}>
            <Icon.Search size={14} style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', color: t.textSubtle }}/>
            <input value={q} onChange={e => setQ(e.target.value)} placeholder="Tìm bài viết..." style={{ border: `1px solid ${t.border}`, borderRadius: 8, padding: '8px 12px 8px 30px', fontSize: 13, background: '#fff', width: 220 }}/>
          </div>
        </div>

        {featured && (
          <div onClick={() => navigate(`/article/${featured.id}`)} className="article-card" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 28, background: '#fff', border: `1px solid ${t.border}`, borderRadius: t.radius + 4, overflow: 'hidden', marginBottom: 28 }}>
            <ImgPlaceholder hue={200} sat={35} label={featured.category} style={{ minHeight: 320 }}/>
            <div style={{ padding: '36px 32px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 12 }}>
                <span style={{ fontSize: 10.5, padding: '3px 9px', background: t.coral, color: '#fff', borderRadius: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5 }}>Nổi bật</span>
                <span style={{ fontSize: 11.5, color: t.blue, fontWeight: 600 }}>{featured.category}</span>
              </div>
              <h2 style={{ fontSize: 28, fontWeight: 800, color: t.primary, margin: '0 0 14px', letterSpacing: -0.6, lineHeight: 1.15 }}>{featured.title}</h2>
              <p style={{ fontSize: 14, color: t.textMuted, lineHeight: 1.6, margin: '0 0 18px' }}>{featured.excerpt}</p>
              <div style={{ fontSize: 12, color: t.textSubtle, display: 'flex', gap: 12, alignItems: 'center' }}>
                <span>{featured.author}</span><span>·</span><span>{featured.date}</span><span>·</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon.Clock size={11}/>{featured.readTime} phút đọc</span>
                <span>·</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon.Eye size={11}/>{featured.views}</span>
              </div>
            </div>
          </div>
        )}

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
          {rest.map(a => (
            <div key={a.id} onClick={() => navigate(`/article/${a.id}`)} className="article-card" style={{ background: '#fff', border: `1px solid ${t.border}`, borderRadius: t.radius + 2, overflow: 'hidden' }}>
              <ImgPlaceholder hue={180 + a.id.charCodeAt(1) * 15} sat={28} label={a.category} style={{ height: 160 }}/>
              <div style={{ padding: 18 }}>
                <div style={{ fontSize: 11, color: t.blue, fontWeight: 600, marginBottom: 6 }}>{a.category}</div>
                <h3 style={{ fontSize: 15.5, fontWeight: 700, color: t.primary, margin: '0 0 8px', lineHeight: 1.3 }}>{a.title}</h3>
                <p style={{ fontSize: 12.5, color: t.textMuted, lineHeight: 1.55, margin: '0 0 12px', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{a.excerpt}</p>
                <div style={{ fontSize: 11, color: t.textSubtle, display: 'flex', gap: 8, alignItems: 'center' }}>
                  <span>{a.date}</span><span>·</span>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3 }}><Icon.Clock size={10}/>{a.readTime}p</span>
                  <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 3 }}><Icon.Eye size={10}/>{a.views}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ArticleDetail() {
  const { t } = useTheme();
  const { route, navigate } = useRouter();
  const s = useStyles();
  const id = route.path.split('/')[2];
  const a = ARTICLES.find(x => x.id === id) || ARTICLES[0];
  const related = ARTICLES.filter(x => x.id !== a.id && x.category === a.category).slice(0, 3);
  const tocItems = [
    { id: 't1', text: 'Tổng quan' },
    { id: 't2', text: 'Quy trình thực hiện' },
    { id: 't3', text: 'Chi phí tham khảo' },
    { id: 't4', text: 'Lưu ý sau khi điều trị' },
    { id: 't5', text: 'Câu hỏi thường gặp' },
  ];
  return (
    <div>
      <div style={{ maxWidth: 1400, margin: '0 auto', padding: '16px 32px 0' }}>
        <div style={{ fontSize: 12, color: t.textMuted }}>
          <a onClick={() => navigate('/')} style={{ cursor: 'pointer' }}>Trang chủ</a> / <a onClick={() => navigate('/articles')} style={{ cursor: 'pointer' }}>Kiến thức</a> / <span style={{ color: t.text }}>{a.category}</span>
        </div>
      </div>
      <article style={{ maxWidth: 1400, margin: '0 auto', padding: '20px 32px', display: 'grid', gridTemplateColumns: '220px 1fr 280px', gap: 40 }}>
        <aside style={{ position: 'sticky', top: 100, alignSelf: 'start' }}>
          <div style={{ fontSize: 10.5, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1, color: t.textSubtle, marginBottom: 10 }}>Mục lục</div>
          {tocItems.map((ti, i) => (
            <div key={ti.id} style={{ padding: '6px 10px', fontSize: 12.5, color: i === 0 ? t.primary : t.textMuted, fontWeight: i === 0 ? 600 : 400, borderLeft: `2px solid ${i === 0 ? t.primary : t.border}`, cursor: 'pointer' }}>
              {ti.text}
            </div>
          ))}
        </aside>

        <div style={{ maxWidth: 720 }}>
          <div style={{ fontSize: 12, color: t.blue, fontWeight: 600, marginBottom: 10 }}>{a.category}</div>
          <h1 style={{ fontSize: 36, fontWeight: 800, color: t.primary, margin: '0 0 16px', letterSpacing: -0.8, lineHeight: 1.15 }}>{a.title}</h1>
          <div style={{ display: 'flex', gap: 16, alignItems: 'center', fontSize: 12.5, color: t.textMuted, marginBottom: 24, paddingBottom: 18, borderBottom: `1px solid ${t.border}` }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <ImgPlaceholder hue={210} sat={20} style={{ width: 36, height: 36, borderRadius: 18 }}/>
              <div>
                <div style={{ fontSize: 13, fontWeight: 600, color: t.text }}>{a.author}</div>
                <div style={{ fontSize: 11, color: t.textSubtle }}>Biên tập viên y khoa · CCHN 012345</div>
              </div>
            </div>
            <span>·</span>
            <span>{a.date}</span>
            <span>·</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon.Clock size={12}/>{a.readTime} phút đọc</span>
          </div>
          <ImgPlaceholder hue={210} sat={30} label={`Hero · ${a.category}`} style={{ height: 360, borderRadius: t.radius + 2, marginBottom: 24 }}/>

          <div style={{ fontSize: 18, fontWeight: 500, color: t.text, lineHeight: 1.6, marginBottom: 22, fontStyle: 'italic', paddingLeft: 16, borderLeft: `3px solid ${t.coral}` }}>
            {a.excerpt}
          </div>

          <h2 style={{ fontSize: 22, fontWeight: 700, color: t.primary, margin: '28px 0 12px', letterSpacing: -0.3 }}>Tổng quan</h2>
          <p style={{ fontSize: 15.5, color: t.text, lineHeight: 1.75, margin: '0 0 16px' }}>
            {a.category} là một trong những dịch vụ nha khoa phổ biến nhất tại Việt Nam, với hơn 150,000 ca được thực hiện mỗi năm theo thống kê của Hội Răng Hàm Mặt Việt Nam (2025). Bài viết này cung cấp cái nhìn toàn diện dựa trên các nghiên cứu y văn và kinh nghiệm thực tế từ đội ngũ bác sĩ của chúng tôi.
          </p>
          <p style={{ fontSize: 15.5, color: t.text, lineHeight: 1.75, margin: '0 0 16px' }}>
            Trước khi quyết định thực hiện, bạn cần hiểu rõ về quy trình, chi phí, và các yếu tố ảnh hưởng đến kết quả. Quan trọng hơn hết — hãy chọn một phòng khám có giấy phép và bác sĩ có chứng chỉ hành nghề.
          </p>

          <div style={{ background: t.blueLight, border: `1px solid ${t.blue}`, borderRadius: t.radius, padding: 16, margin: '20px 0', display: 'flex', gap: 12 }}>
            <Icon.Shield size={18} style={{ color: t.blue, flexShrink: 0, marginTop: 2 }}/>
            <div style={{ fontSize: 13.5, color: t.text, lineHeight: 1.6 }}>
              <b>Thông tin đã thẩm định:</b> Nội dung được đối chiếu với hướng dẫn của Hội Răng Hàm Mặt Việt Nam và Hiệp hội Nha khoa Hoa Kỳ (ADA). Xem phương pháp thẩm định →
            </div>
          </div>

          <h2 style={{ fontSize: 22, fontWeight: 700, color: t.primary, margin: '28px 0 12px', letterSpacing: -0.3 }}>Quy trình thực hiện</h2>
          {['Khám và tư vấn ban đầu', 'Chụp X-quang và lập kế hoạch điều trị', 'Thực hiện theo lộ trình cá nhân hoá', 'Tái khám định kỳ'].map((step, i) => (
            <div key={i} style={{ display: 'flex', gap: 14, marginBottom: 14 }}>
              <div style={{ width: 28, height: 28, borderRadius: 14, background: t.primary, color: '#fff', display: 'grid', placeItems: 'center', fontSize: 13, fontWeight: 700, flexShrink: 0 }}>{i + 1}</div>
              <div style={{ fontSize: 15, color: t.text, lineHeight: 1.65 }}><b>{step}.</b> Bước này thường kéo dài từ 30 phút đến 1 tiếng, tuỳ thuộc vào tình trạng cụ thể của bệnh nhân và phương án lựa chọn.</div>
            </div>
          ))}

          <h2 style={{ fontSize: 22, fontWeight: 700, color: t.primary, margin: '28px 0 12px', letterSpacing: -0.3 }}>Chi phí tham khảo (2026)</h2>
          <div style={{ border: `1px solid ${t.border}`, borderRadius: t.radius, overflow: 'hidden', marginBottom: 18 }}>
            {SERVICES.slice(0, 3).map((sv, i) => (
              <div key={sv.id} style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', padding: '12px 16px', borderBottom: i < 2 ? `1px solid ${t.border}` : 'none', fontSize: 13.5, alignItems: 'center' }}>
                <div style={{ fontWeight: 500 }}>{sv.name}</div>
                <div style={{ fontFamily: t.numFont, color: t.textMuted, fontSize: 12 }}>{sv.duration}</div>
                <div style={{ fontFamily: t.numFont, fontWeight: 700, color: t.primary }}>{sv.min}—{sv.max} {sv.unit}</div>
              </div>
            ))}
          </div>

          <h2 style={{ fontSize: 22, fontWeight: 700, color: t.primary, margin: '28px 0 12px', letterSpacing: -0.3 }}>Câu hỏi thường gặp</h2>
          {FAQS.slice(0, 3).map((f, i) => (
            <div key={i} style={{ padding: '14px 0', borderTop: i === 0 ? `1px solid ${t.border}` : 'none', borderBottom: `1px solid ${t.border}` }}>
              <div style={{ fontSize: 15, fontWeight: 600, color: t.primary, marginBottom: 6 }}>{f.q}</div>
              <div style={{ fontSize: 14, color: t.textMuted, lineHeight: 1.6 }}>{f.a}</div>
            </div>
          ))}

          <div style={{ background: t.primary, color: '#fff', borderRadius: t.radius + 2, padding: 28, marginTop: 32, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20 }}>
            <div>
              <div style={{ fontSize: 20, fontWeight: 700, marginBottom: 4 }}>Cần tư vấn trực tiếp?</div>
              <div style={{ fontSize: 14, opacity: 0.85 }}>Đặt lịch miễn phí với phòng khám đã thẩm định gần bạn.</div>
            </div>
            <button className="btn-coral" onClick={() => navigate('/booking')} style={{ ...s.btnCoral, padding: '12px 24px', whiteSpace: 'nowrap' }}><Icon.Calendar size={14}/>Đặt lịch ngay</button>
          </div>
        </div>

        <aside>
          <div style={{ position: 'sticky', top: 100 }}>
            <div style={{ fontSize: 10.5, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1, color: t.textSubtle, marginBottom: 12 }}>Bài liên quan</div>
            {related.map(r => (
              <div key={r.id} onClick={() => navigate(`/article/${r.id}`)} style={{ marginBottom: 14, cursor: 'pointer' }}>
                <ImgPlaceholder hue={180 + r.id.charCodeAt(1) * 15} sat={28} label={r.category} style={{ height: 120, borderRadius: 8, marginBottom: 8 }}/>
                <div style={{ fontSize: 11, color: t.blue, fontWeight: 600, marginBottom: 4 }}>{r.category}</div>
                <div style={{ fontSize: 13, fontWeight: 600, color: t.primary, lineHeight: 1.35 }}>{r.title}</div>
              </div>
            ))}
          </div>
        </aside>
      </article>
    </div>
  );
}

Object.assign(window, { ArticleList, ArticleDetail });