import React from 'react';
import { useTranslation } from 'react-i18next';
import { P2vJob, p2vFile } from '../../utils/p2vApi';

interface PosterResultContentProps {
  job: P2vJob;
  /** 새 포스터로 처음부터 */
  onNew: () => void;
}

/**
 * 포스터 영상 완성 화면.
 *
 * 다운로드는 `<a download>` 다 — 헤더를 못 붙이므로 p2vFile() 이 접근 키를
 * 쿼리로 태워준다(P2V 서버가 ?key= 경로를 지원하는 이유가 이것이다).
 */
const PosterResultContent: React.FC<PosterResultContentProps> = ({ job, onNew }) => {
  const { t } = useTranslation();

  const video = p2vFile(job.artifacts.video);
  const thumbnail = job.artifacts.thumbnail ? p2vFile(job.artifacts.thumbnail) : null;

  return (
    <div className="p2v-scope p2v-result">
      <h2 className="p2v-result__title">{t('poster.result.title')}</h2>

      <div className="p2v-result__grid">
        <div className="p2v-panel p2v-result__player">
          {video ? (
            <video src={video} controls playsInline />
          ) : (
            <p className="p2v-note">{t('poster.result.videoMissing')}</p>
          )}
        </div>

        <div className="p2v-result__side">
          <p className="p2v-label">{t('poster.result.fileName')}</p>
          <p className="p2v-result__filename">{job.name}.mp4</p>

          {job.metadata && (
            <div className="p2v-result__block">
              {([
                ['event_name', job.metadata.event_name],
                ['date_text', job.metadata.date_text],
                ['place', job.metadata.place],
              ] as const).map(([field, value]) => (
                value ? (
                  <div key={field} className="p2v-result__row">
                    <span>{t(`poster.review.field.${field}`)}</span>
                    <b>{value}</b>
                  </div>
                ) : null
              ))}
              {job.metadata.keywords?.length > 0 && (
                <div className="p2v-tags">
                  {job.metadata.keywords.map((kw) => (
                    <span key={kw} className="p2v-tag">#{kw}</span>
                  ))}
                </div>
              )}
            </div>
          )}

          {job.narration && job.narration.length > 0 && (
            <div className="p2v-result__block">
              <p className="p2v-label">{t('poster.review.narration')}</p>
              {job.narration.map((line, i) => (
                <p key={i} className="p2v-narration-line">{line}</p>
              ))}
            </div>
          )}

          <div className="p2v-result__actions">
            {thumbnail && (
              <a href={thumbnail} download className="p2v-btn-tonal">
                {t('poster.result.downloadThumb')}
              </a>
            )}
            {video && (
              <a href={video} download className="p2v-btn-cta p2v-btn-cta--compact">
                {t('poster.result.downloadVideo')}
              </a>
            )}
          </div>
        </div>
      </div>

      <button type="button" className="p2v-btn-outline p2v-result__new" onClick={onNew}>
        {t('poster.result.new')}
      </button>
    </div>
  );
};

export default PosterResultContent;