o2o-castad-frontend/src/pages/Poster/StylingContent.tsx

import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import PosterDropzone from '../../components/PosterDropzone';
import P2vKeyGate from '../../components/P2vKeyGate';
import {
  InternalOnlyWarning,
  LicenseBadge,
  UserReferenceNotice,
} from '../../components/LicenseBadge';
import { useP2vJob } from '../../hooks/useP2vJob';
import {
  F2Category,
  F2Format,
  F2Template,
  F2UploadHint,
  P2vAuthError,
  createF2Template,
  createStylingJob,
  deleteF2Template,
  getF2UploadHint,
  isP2vActive,
  listF2Categories,
  listF2Formats,
  listF2Templates,
  p2vFile,
} from '../../utils/p2vApi';

/** 사용자가 올린 레퍼런스 카테고리. 서버 카테고리 목록에서 따로 떼어 아래에 둔다 */
const USER_CATEGORY = 'user';

/**
 * 포스터 스타일링(F2).
 *
 * **내부 시연 전용이다.** 영화 포스터 레퍼런스는 저작권 자산이라 결과물을 외부에
 * 공개하면 안 된다(퍼블릭 도메인 명화만 예외). 그래서 화면 상단에 범위를 못박고,
 * 템플릿마다 배포 등급 배지를 붙인다.
 *
 * 다른 파이프라인과 달리 위저드가 아니라 **한 화면짜리 도구**다 — 업로드·템플릿·
 * 포맷·결과가 한눈에 있어야 여러 스타일을 빠르게 갈아 끼우며 비교할 수 있고,
 * 30초짜리 작업에 단계를 나누면 왕복만 늘어난다. 그래서 폴링도 GenerationFlow 가
 * 아니라 이 컴포넌트가 직접 소유한다(F1·썰박스와 다른 유일한 지점).
 */
const StylingContent: React.FC = () => {
  const { t } = useTranslation();

  const [templates, setTemplates] = useState<F2Template[]>([]);
  const [categories, setCategories] = useState<F2Category[]>([]);
  const [formats, setFormats] = useState<F2Format[]>([]);
  const [hint, setHint] = useState<F2UploadHint | null>(null);

  const [file, setFile] = useState<File | null>(null);
  const [selected, setSelected] = useState<string | null>(null);
  const [format, setFormat] = useState('poster');
  const [jobId, setJobId] = useState<string | null>(null);

  const [tplOpen, setTplOpen] = useState(true);
  const [busy, setBusy] = useState(false);
  const [refBusy, setRefBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [authNeeded, setAuthNeeded] = useState(false);

  const refInput = useRef<HTMLInputElement>(null);
  const { job, authNeeded: jobAuthNeeded } = useP2vJob('f2', jobId);

  const selectedTpl = templates.find((tpl) => tpl.id === selected) ?? null;
  const running = isP2vActive(job);

  const loadAll = useCallback(async () => {
    try {
      const [tpls, cats, fmts, uploadHint] = await Promise.all([
        listF2Templates(),
        listF2Categories(),
        listF2Formats(),
        getF2UploadHint(),
      ]);
      setTemplates(tpls);
      setCategories(cats);
      setFormats(fmts);
      setHint(uploadHint);
      setAuthNeeded(false);
      setError(null);
    } catch (e) {
      if (e instanceof P2vAuthError) setAuthNeeded(true);
      else setError((e as Error).message);
    }
  }, []);

  useEffect(() => { loadAll(); }, [loadAll]);

  const uploadReference = async (f: File) => {
    setRefBusy(true);
    setError(null);
    try {
      const tpl = await createF2Template(f, f.name.replace(/\.[^.]+$/, '').slice(0, 40));
      setTemplates(await listF2Templates());
      setSelected(tpl.id);         // 방금 올린 것을 바로 고른 상태로
    } catch (e) {
      if (e instanceof P2vAuthError) setAuthNeeded(true);
      else setError((e as Error).message);
    } finally {
      setRefBusy(false);
      if (refInput.current) refInput.current.value = '';
    }
  };

  const removeReference = async (id: string) => {
    if (!window.confirm(t('poster.styling.confirmDelete'))) return;
    try {
      await deleteF2Template(id);
      if (selected === id) setSelected(null);
      setTemplates(await listF2Templates());
    } catch (e) {
      setError((e as Error).message);
    }
  };

  const submit = async () => {
    if (!file || !selected || busy) return;
    setBusy(true);
    setError(null);
    try {
      const { id } = await createStylingJob(file, selected, format);
      setJobId(id);
    } catch (e) {
      if (e instanceof P2vAuthError) setAuthNeeded(true);
      else setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  };

  if (authNeeded || jobAuthNeeded) {
    return (
      <div className="p2v-scope p2v-styling">
        <P2vKeyGate onSaved={() => { setAuthNeeded(false); loadAll(); }} />
      </div>
    );
  }

  const renderCard = (tpl: F2Template) => (
    <div key={tpl.id} className="p2v-tplcard">
      <button
        type="button"
        aria-pressed={selected === tpl.id}
        className={`p2v-tpl${selected === tpl.id ? ' active' : ''}`}
        onClick={() => setSelected(tpl.id)}
      >
        {/* 명화는 가로 그림도 있다 — cover 로 자르면 무엇인지 알 수 없어 contain 을 쓴다 */}
        <img src={p2vFile(tpl.thumb_url)} alt={tpl.name_ko} />
        <span className="p2v-tpl__name">{tpl.name_ko}</span>
        {/* 제목이 1줄인 카드와 2줄인 카드가 섞인다. 아래로 밀어붙여야 한 행의 배지가 같은 선에 선다 */}
        <span className="p2v-tpl__badge">
          <LicenseBadge license={tpl.license} />
        </span>
      </button>
      {tpl.removable && (
        <button
          type="button"
          className="p2v-tpl__remove"
          title={t('poster.styling.deleteRef')}
          onClick={() => removeReference(tpl.id)}
        >
          ×
        </button>
      )}
    </div>
  );

  return (
    <div className="p2v-scope p2v-styling">
      <div className="p2v-notice p2v-notice--warn p2v-styling__scope">
        {t('poster.styling.internalScope')}
      </div>

      {/* ── 스타일 템플릿 (접이식) ─────────────────────── */}
      <button
        type="button"
        className="p2v-collapse"
        aria-expanded={tplOpen}
        onClick={() => setTplOpen(!tplOpen)}
      >
        <span className="p2v-label">{t('poster.styling.templates')}</span>
        {!tplOpen && selectedTpl && (
          <span className="p2v-collapse__picked">
            <img src={p2vFile(selectedTpl.thumb_url)} alt="" />
            <b>{selectedTpl.name_ko}</b>
            <LicenseBadge license={selectedTpl.license} />
          </span>
        )}
        {!tplOpen && !selectedTpl && (
          <span className="p2v-collapse__empty">{t('poster.styling.pickTemplate')}</span>
        )}
        <svg
          className={`p2v-collapse__caret${tplOpen ? ' open' : ''}`}
          width="18" height="18" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"
        >
          <path d="m6 9 6 6 6-6" />
        </svg>
      </button>

      {tplOpen && categories.filter((c) => c.id !== USER_CATEGORY).map((cat) => {
        const items = templates.filter((tpl) => tpl.category === cat.id);
        if (items.length === 0) return null;
        return (
          <div key={cat.id} className="p2v-tplgroup">
            <p className="p2v-tplgroup__title">
              {cat.label}
              <span>{t('poster.styling.count', { count: items.length })}</span>
            </p>
            <div className="p2v-tplgrid">{items.map(renderCard)}</div>
          </div>
        );
      })}

      {/* 내 레퍼런스 — 목록이 비어도 업로드 타일은 보여야 하므로 categories 가 아니라
          upload-hint 의 enabled 로 렌더한다 */}
      {tplOpen && hint?.enabled && (
        <div className="p2v-tplgroup">
          <p className="p2v-tplgroup__title">
            {t('poster.styling.myRefs')}
            <span>{t('poster.styling.myRefsHint')}</span>
          </p>
          <div className="p2v-tplgrid">
            {templates.filter((tpl) => tpl.category === USER_CATEGORY).map(renderCard)}
            <button
              type="button"
              className="p2v-tpl p2v-tpl--add"
              disabled={refBusy}
              onClick={() => refInput.current?.click()}
            >
              {refBusy ? (
                <>
                  <span className="p2v-spinner p2v-spinner--sm" aria-hidden="true" />
                  <span className="p2v-tpl__name">{t('poster.styling.analyzing')}</span>
                </>
              ) : (
                <>
                  <span className="p2v-tpl__plus" aria-hidden="true">+</span>
                  <span className="p2v-tpl__name">{t('poster.styling.addRef')}</span>
                  <span className="p2v-tpl__sub">
                    {t('poster.styling.minEdge', { px: hint.min_long_edge })}
                  </span>
                </>
              )}
            </button>
            <input
              ref={refInput}
              type="file"
              accept="image/jpeg,image/png,image/webp,image/gif"
              hidden
              onChange={(e) => { const f = e.target.files?.[0]; if (f) uploadReference(f); }}
            />
          </div>
          <UserReferenceNotice />
        </div>
      )}

      {/* 경고는 실제로 고른 순간에만 */}
      {selectedTpl?.license === 'internal-only' && (
        <InternalOnlyWarning note={selectedTpl.license_note} />
      )}
      {selectedTpl?.attribution && (
        <p className="p2v-note">{t('poster.styling.attribution', { source: selectedTpl.attribution })}</p>
      )}

      {/* ── 입력 / 결과 ─────────────────────────────── */}
      <div className="p2v-styling__io">
        <div>
          <p className="p2v-label">{t('poster.styling.myPoster')}</p>
          <PosterDropzone file={file} onFile={setFile} />
        </div>
        <div>
          <p className="p2v-label">{t('poster.styling.result')}</p>
          {job?.status === 'done' && job.artifacts.image ? (
            <div className="p2v-panel p2v-styling__out">
              <img src={p2vFile(job.artifacts.image)} alt={t('poster.styling.resultAlt')} />
            </div>
          ) : (
            <div className="p2v-panel p2v-styling__out p2v-styling__out--empty">
              {running && <span className="p2v-spinner p2v-spinner--md" aria-hidden="true" />}
              <span>{t(running ? 'poster.styling.converting' : 'poster.styling.resultHint')}</span>
            </div>
          )}
          {job?.status === 'done' && job.artifacts.image && (
            <div className="p2v-styling__download">
              <a href={p2vFile(job.artifacts.image)} download className="p2v-btn-tonal">
                {t('poster.styling.downloadPng')}
              </a>
            </div>
          )}
        </div>
      </div>

      {/* ── 출력 포맷 ───────────────────────────────── */}
      <p className="p2v-label">{t('poster.styling.formats')}</p>
      <div className="p2v-formats">
        {formats.map((f) => (
          <button
            key={f.id}
            type="button"
            aria-pressed={format === f.id}
            className={`p2v-select${format === f.id ? ' active' : ''}`}
            onClick={() => setFormat(f.id)}
          >
            {f.label}
          </button>
        ))}
      </div>

      <button
        type="button"
        className="p2v-btn-cta"
        disabled={!file || !selected || busy || running}
        onClick={submit}
      >
        {running
          ? t('poster.styling.converting')
          : busy ? t('poster.create.submitting') : t('poster.styling.submit')}
      </button>

      {error && <div className="p2v-note warn">{error}</div>}
      {job?.status === 'failed' && job.error && (
        <pre className="p2v-errorbox">{job.error.detail}</pre>
      )}
    </div>
  );
};

export default StylingContent;