// Article detail screen

const { CATEGORIES: D_CATS, STATUSES: D_STATUSES, CAT_BG_PALETTE: D_BG } = window.KS_DATA;

function StatusSelect({ value, onChange }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, []);
  return (
    <div className="status-select-wrap" ref={ref}>
      <button className="status-trigger" onClick={() => setOpen(!open)}>
        <span className={"status s-" + value}>
          <span className="status-dot" />
          {statusLabel(value)}
        </span>
        <Icon name="chev-down" size={11} />
      </button>
      {open && (
        <div className="status-menu">
          {D_STATUSES.map(s => (
            <div key={s.id} className="status-menu-item" onClick={() => { onChange(s.id); setOpen(false); }}>
              <span className={"status-dot s-" + s.id}
                    style={{ background: s.id === 'new' ? '#c8c8c4' :
                      s.id === 'draft' ? '#e8a330' :
                      s.id === 'reviewed' ? '#1f9d55' :
                      s.id === 'images_done' ? '#6b3ec4' :
                      s.id === 'ready' ? '#1f9d55' :
                      '#1968c4' }} />
              <span>{s.label}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// Pencil-icon edit affordance
function Pencil() {
  return <span className="edit-pencil"><Icon name="edit" size={14} /></span>;
}

function ThumbnailCard({ article, onUpdate, onCopyPrompt, onGenerate, disabled }) {
  return (
    <div className="thumb-card">
      <div className="thumb-grid">
        <div>
          <div className="section-h">Thumbnail</div>
          <details className="prompt-block" open={false}>
            <summary><Icon name="chev-right" size={11} className="chev" /> Image prompt</summary>
            <textarea
              className="prompt-text"
              value={article.thumbnail_prompt || ''}
              onChange={(e) => onUpdate({ thumbnail_prompt: e.target.value })}
              rows={4}
              style={{ width: '100%', border: 'none', resize: 'vertical' }}
            />
          </details>
          <div className="thumb-actions">
            <button className="btn-sm" onClick={() => onCopyPrompt(article.thumbnail_prompt)}>
              <Icon name="copy" size={11} /> Copy prompt
            </button>
            <button className="btn-sm" disabled={disabled} onClick={() => onGenerate('thumb')}>
              <Icon name="sparkle" size={11} /> Generate image
            </button>
            <button className="btn-sm"><Icon name="upload" size={11} /> Upload</button>
            {article.thumbnail_image && (
              <button className="btn-sm" onClick={() => onUpdate({ thumbnail_image: false })}>Remove</button>
            )}
          </div>
        </div>
        <div className={"thumb-preview" + (article.thumbnail_image ? ' filled' : '')}>
          {article.thumbnail_image ? (
            article.thumbnail_url
              ? <img src={article.thumbnail_url} alt="thumbnail" style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 'var(--radius)' }} />
              : <MockImage category={article.category} label="thumbnail.png" />
          ) : (
            <span>No image</span>
          )}
        </div>
      </div>
    </div>
  );
}

function StepCard({ step, idx, articleCategory, onUpdate, onRegen, onCopyPrompt, onGenerate, disabled }) {
  const bodyRef = useRef(null);
  // auto-resize
  useEffect(() => {
    const el = bodyRef.current;
    if (el) { el.style.height = 'auto'; el.style.height = el.scrollHeight + 'px'; }
  }, [step.body]);

  return (
    <div className="step-card">
      <div className="step-header">
        <span className="step-num">Step <span className="num">{idx + 1}</span> of 6</span>
        <button className="step-regen btn-sm" onClick={onRegen}>
          <Icon name="refresh" size={11} /> Regenerate
        </button>
      </div>

      <div className="step-title-wrap">
        <input
          className="step-title-input"
          value={step.title}
          placeholder="Step title"
          onChange={(e) => onUpdate({ title: e.target.value })}
        />
        <Pencil />
      </div>

      <textarea
        ref={bodyRef}
        className="step-body-input"
        value={step.body}
        placeholder="Body text — 2 to 4 sentences."
        onChange={(e) => onUpdate({ body: e.target.value })}
      />

      <div className="step-prompt-section">
        <details className="prompt-block">
          <summary><Icon name="chev-right" size={11} className="chev" /> Image prompt</summary>
          <textarea
            className="prompt-text"
            value={step.image_prompt || ''}
            onChange={(e) => onUpdate({ image_prompt: e.target.value })}
            rows={3}
            style={{ width: '100%', border: 'none', resize: 'vertical' }}
          />
        </details>
      </div>

      <div className="step-image-row">
        <div />
        <div>
          <div className={"step-image" + (step.image ? ' filled' : '')}>
            {step.image ? (
              step.image_url
                ? <img src={step.image_url} alt={`step ${idx + 1}`} style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 'var(--radius)' }} />
                : <MockImage category={articleCategory} label={`step-0${idx + 1}.png`} />
            ) : (
              <span className="upload-hint">Drop image here<br/>or click to upload</span>
            )}
          </div>
          <div className="step-img-actions">
            <button className="btn-sm" onClick={() => onCopyPrompt(step.image_prompt)}>
              <Icon name="copy" size={11} /> Copy
            </button>
            {step.image ? (
              <>
                <button className="btn-sm" disabled={disabled} onClick={onGenerate}>
                  <Icon name="refresh" size={11} /> Replace
                </button>
                <button className="btn-sm" onClick={() => onUpdate({ image: false })}>Remove</button>
              </>
            ) : (
              <>
                <button className="btn-sm" disabled={disabled} onClick={onGenerate}>
                  <Icon name="sparkle" size={11} /> Generate
                </button>
                <button className="btn-sm"><Icon name="upload" size={11} /> Upload</button>
              </>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function Detail({ article, onBack, onUpdateArticle, onUpdateStep, onPreview, onDelete, onGenerateText, onCopy, onGenerateImage, onExport, imageQuotaLeft, saveState }) {
  const generatedAt = article.steps?.some(s => s.title);
  const hasContent = generatedAt;
  const catBg = D_BG[article.category] || 'bg-soft-blue';
  const catColor = (() => {
    const map = {
      screen_time:    { bg: '#FEF0EB', color: '#B84318' },
      safety:         { bg: '#FDEBEB', color: '#A32D2D' },
      first_phone:    { bg: '#E4F6EE', color: '#176B47' },
      social_media:   { bg: '#EEEDFE', color: '#534AB7' },
      age_guides:     { bg: '#FFF4D6', color: '#8B6914' },
      parenting_tips: { bg: '#E6F1FB', color: '#1A5FA5' },
      health_dev:     { bg: '#FAEEDA', color: '#7A4B0C' },
      behavior:       { bg: '#FDE8EE', color: '#B5295A' },
    };
    return map[article.category] || { bg: '#eee', color: '#333' };
  })();

  return (
    <div className="detail-wrap">
      <div className="detail-top">
        <button className="back-link" onClick={onBack}>
          <Icon name="arrow-left" size={14} /> Dashboard
        </button>
        <div className="detail-actions">
          <span className={"save-indicator" + (saveState === 'saving' ? ' saving' : '')}>
            {saveState === 'saving' ? 'Saving…' : <><Icon name="check" size={12} /> Saved</>}
          </span>
          <StatusSelect value={article.status} onChange={(v) => onUpdateArticle({ status: v })} />
          {hasContent && <button className="btn" onClick={onGenerateText}><Icon name="refresh" size={13} /> Regenerate all</button>}
          {hasContent && <button className="btn" onClick={onExport}><Icon name="download" size={13} /> Export</button>}
          {hasContent && <button className="btn" onClick={onPreview}><Icon name="phone" size={13} /> Preview</button>}
          <button className="btn btn-danger" onClick={onDelete}><Icon name="trash" size={13} /></button>
        </div>
      </div>

      <div className="article-header">
        <div className="title-edit-wrap">
          <input
            className="title-input"
            value={article.title}
            placeholder="Article title…"
            onChange={(e) => onUpdateArticle({ title: e.target.value })}
          />
          <Pencil />
        </div>
        <div className="article-meta">
          <select
            className="cat-pill-select"
            value={article.category}
            onChange={(e) => onUpdateArticle({ category: e.target.value })}
            style={{ background: catColor.bg, color: catColor.color }}
          >
            {D_CATS.map(c => <option key={c.id} value={c.id}>{c.label}</option>)}
            <option value="__add">+ Add category…</option>
          </select>
          <span className="meta-text">{article.creative_count} creatives</span>
          <span className="meta-sep">·</span>
          <span className="meta-text">{article.reading_time} read</span>
          <span className="meta-sep">·</span>
          <span className="meta-text" style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11 }}>{article.id}</span>
        </div>
      </div>

      {!hasContent ? (
        <div className="empty-state">
          <div className="glyph"><Icon name="sparkle" size={24} /></div>
          <h3>No content yet</h3>
          <p>Edit the title or category above if needed, then generate.<br/>This topic has {article.creative_count} matching ad creatives.</p>
          <button className="btn-generate" onClick={onGenerateText}>
            <Icon name="sparkle" size={14} /> Generate article
          </button>
        </div>
      ) : (
        <>
          <ThumbnailCard
            article={article}
            onUpdate={onUpdateArticle}
            onCopyPrompt={onCopy}
            onGenerate={() => onGenerateImage('thumb')}
            disabled={imageQuotaLeft <= 0}
          />
          {article.steps.map((s, idx) => (
            <StepCard
              key={idx}
              step={s}
              idx={idx}
              articleCategory={article.category}
              onUpdate={(patch) => onUpdateStep(idx, patch)}
              onRegen={() => onUpdateStep(idx, { title: s.title, body: s.body })}
              onCopyPrompt={onCopy}
              onGenerate={() => onGenerateImage(idx)}
              disabled={imageQuotaLeft <= 0}
            />
          ))}
          <div className="preview-cta-wrap">
            <button className="btn-preview" onClick={onPreview}>
              <Icon name="phone" size={14} /> Preview on phone
            </button>
          </div>
        </>
      )}
    </div>
  );
}

window.Detail = Detail;