"use client";

import type { OptimizedArticle } from "../lib/domain/types";

interface OptimizedPreviewProps {
  article: OptimizedArticle | null;
  jobId: string | null;
  exportBlocked: boolean;
}

const exportFiles = ["optimized.md", "optimized.docx", "qa_report.json"];

export function OptimizedPreview({
  article,
  jobId,
  exportBlocked,
}: OptimizedPreviewProps) {
  if (!article) {
    return (
      <section className="panel empty-panel">
        <div className="panel-heading">Optimized Result</div>
      </section>
    );
  }

  return (
    <section className="panel stack">
      <div className="panel-heading">Optimized Result</div>
      <article className="preview">
        <h2>{article.title}</h2>
        <p>{article.summary}</p>
        <pre>{article.body_markdown}</pre>
      </article>
      <div>
        <h3>Image suggestions</h3>
        <ul>
          {article.image_suggestions.map((item) => (
            <li key={item.source}>
              <strong>{item.source}</strong>: {item.suggestion}
            </li>
          ))}
        </ul>
      </div>
      <div>
        <h3>Changed sections</h3>
        <div className="tag-row">
          {article.changed_sections.map((section) => (
            <span className="tag" key={section}>
              {section}
            </span>
          ))}
        </div>
      </div>
      {article.requires_user_confirmation.length > 0 && (
        <div>
          <h3>Needs confirmation</h3>
          <ul>
            {article.requires_user_confirmation.map((item) => (
              <li key={item}>{item}</li>
            ))}
          </ul>
        </div>
      )}
      <div className="export-row">
        {exportFiles.map((fileName) =>
          jobId && !exportBlocked ? (
            <a
              className="download-link"
              href={`/api/jobs/${jobId}/exports/${fileName}`}
              key={fileName}
            >
              {fileName}
            </a>
          ) : (
            <button disabled key={fileName} type="button">
              {fileName}
            </button>
          ),
        )}
      </div>
    </section>
  );
}