{/* Header */}

📝 Haravan Blog Tool

Viết & đẩy bài chuẩn SEO nhanh gọn

SEO: {seo.score}/100

{/* Notification */} {notification && (

{notification.type === 'success' ? : } {notification.msg}

)} {/* cURL fallback */} {curlCmd && (

Lệnh cURL — dán vào Terminal/CMD

{curlCmd}

)} {/* Config */}

Cấu hình Haravan

setApiKey(e.target.value)} className="px-3 py-2 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-blue-500" /> setBlogId(e.target.value)} className="px-3 py-2 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-blue-500" /> setAuthor(e.target.value)} className="px-3 py-2 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-blue-500" />

{preview ? ( // Preview mode

{featuredImage && {featuredImage.alt}

}

{title || 'Tiêu đề'}

{excerpt &&

{excerpt}

}

Chưa có nội dung

' }} /> {tags && (

{tags.split(',').map((t, i) => ( #{t.trim()} ))}

)}

) : (

{/* Main editor */}

URL slug: setHandle(slugify(e.target.value))} className="flex-1 px-2 py-1 border border-slate-200 rounded text-xs font-mono focus:ring-2 focus:ring-blue-500" />

setExcerpt(e.target.value)}
                  rows={2}
                  placeholder="Tóm tắt ngắn (hiển thị ở trang danh sách)..."
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
                />

{/* Toolbar */}
                <div className="border border-slate-200 rounded-lg overflow-hidden">
                  <div className="flex flex-wrap items-center gap-1 p-2 bg-slate-50 border-b border-slate-200">
                    <button onClick={() => cmd('formatBlock', '<h2>')} className="p-1.5 hover:bg-slate-200 rounded" title="H2"><Heading1 size={14} /></button>
                    <button onClick={() => cmd('formatBlock', '<h3>')} className="p-1.5 hover:bg-slate-200 rounded" title="H3"><Heading2 size={14} /></button>
                    <div className="w-px h-5 bg-slate-300 mx-1" />
                    <button onClick={() => cmd('bold')} className="p-1.5 hover:bg-slate-200 rounded"><Bold size={14} /></button>
                    <button onClick={() => cmd('italic')} className="p-1.5 hover:bg-slate-200 rounded"><Italic size={14} /></button>
                    <button onClick={() => cmd('insertUnorderedList')} className="p-1.5 hover:bg-slate-200 rounded"><List size={14} /></button>
                    <button onClick={insertLink} className="p-1.5 hover:bg-slate-200 rounded"><LinkIcon size={14} /></button>
                    <div className="w-px h-5 bg-slate-300 mx-1" />
                    <button onClick={() => fileInputRef.current?.click()} className="flex items-center gap-1 px-2 py-1 hover:bg-slate-200 rounded text-xs">
                      <ImageIcon size={14} /> Ảnh
                    </button>
                    <input ref={fileInputRef} type="file" accept="image/*" multiple onChange={uploadImages} className="hidden" />
                  </div>
                  <div
                    ref={editorRef}
                    contentEditable
                    onInput={e => setContent(e.currentTarget.innerHTML)}
                    className="p-4 focus:outline-none prose prose-sm max-w-none"
                    style={{ minHeight: '350px' }}
                    suppressContentEditableWarning
                  />
                </div>

{images.length > 0 && (
                  <div>
                    <div className="text-xs font-semibold text-slate-600 mb-2">Thư viện ảnh (click "Chèn" để thêm vào bài)</div>
                    <div className="grid grid-cols-3 md:grid-cols-4 gap-2">
                      {images.map(img => (
                        <div key={img.id} className="border border-slate-200 rounded-lg overflow-hidden">
                          <img src={img.base64} alt={img.alt} className="w-full h-20 object-cover" />
                          <div className="p-1 space-y-1">
                            <input
                              type="text"
                              value={img.alt}
                              onChange={e => setImages(prev => prev.map(i => i.id === img.id ? { ...i, alt: e.target.value } : i))}
                              className="w-full px-1 py-0.5 text-xs border border-slate-200 rounded"
                              placeholder="alt"
                            />
                            <div className="flex gap-1">
                              <button onClick={() => insertImg(img)} className="flex-1 text-xs py-0.5 bg-blue-600 text-white rounded">Chèn</button>
                              <button onClick={() => setImages(prev => prev.filter(i => i.id !== img.id))} className="px-1.5 bg-red-100 text-red-600 rounded"><X size={10} /></button>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </div>

{/* Sidebar */}
            <div className="space-y-3">
              <div className="bg-white rounded-xl shadow-sm p-4">
                <div className="text-xs font-semibold text-slate-600 mb-2">ẢNH ĐẠI DIỆN</div>
                {featuredImage ? (
                  <div className="relative">
                    <img src={featuredImage.base64} alt="" className="w-full rounded-lg" />
                    <button onClick={() => setFeaturedImage(null)} className="absolute top-1 right-1 p-1 bg-red-500 text-white rounded-full">
                      <X size={12} />
                    </button>
                  </div>
                ) : (
                  <button
                    onClick={() => featuredInputRef.current?.click()}
                    className="w-full py-6 border-2 border-dashed border-slate-300 rounded-lg hover:border-blue-400 flex flex-col items-center gap-1 text-slate-500 text-xs"
                  >
                    <Upload size={18} /> Tải ảnh
                  </button>
                )}
                <input ref={featuredInputRef} type="file" accept="image/*" onChange={uploadFeatured} className="hidden" />
              </div>

<div className="bg-white rounded-xl shadow-sm p-4 space-y-2">
                <div className="text-xs font-semibold text-slate-600">SEO</div>
                <input
                  type="text"
                  value={metaTitle}
                  onChange={e => setMetaTitle(e.target.value)}
                  placeholder={`Meta title (${metaTitle.length}/60)`}
                  className="w-full px-2 py-1.5 border border-slate-200 rounded text-xs focus:ring-2 focus:ring-blue-500"
                />
                <textarea
                  value={metaDescription}
                  onChange={e => setMetaDescription(e.target.value)}
                  rows={3}
                  placeholder={`Meta description (${metaDescription.length}/160)`}
                  className="w-full px-2 py-1.5 border border-slate-200 rounded text-xs focus:ring-2 focus:ring-blue-500"
                />
                <input
                  type="text"
                  value={tags}
                  onChange={e => setTags(e.target.value)}
                  placeholder="Tags: tag1, tag2, tag3"
                  className="w-full px-2 py-1.5 border border-slate-200 rounded text-xs focus:ring-2 focus:ring-blue-500"
                />
              </div>

<div className="bg-white rounded-xl shadow-sm p-4">
                <div className="text-xs font-semibold text-slate-600 mb-2">Checklist SEO ({seo.wc} từ)</div>
                <div className="space-y-1">
                  {seo.checks.map((c, i) => (
                    <div key={i} className={`flex items-start gap-1.5 text-xs ${c.ok ? 'text-green-600' : 'text-slate-400'}`}>
                      {c.ok ? <CheckCircle size={12} className="flex-shrink-0 mt-0.5" /> : <AlertCircle size={12} className="flex-shrink-0 mt-0.5" />}
                      <span>{c.t}</span>
                    </div>
                  ))}
                </div>
              </div>

<button
                onClick={copyPayload}
                className="w-full px-3 py-2 bg-slate-100 hover:bg-slate-200 rounded-lg text-xs flex items-center justify-center gap-1"
              >
                <Copy size={12} /> Copy JSON payload
              </button>
            </div>
          </div>
        )}

<div className="text-center text-xs text-slate-400 py-2">
          Haravan API: <code className="bg-slate-200 px-1 rounded">POST /com/blogs/{'{blog_id}'}/articles.json</code>
        </div>
      </div>
    </div>
  );
}