/** 템플릿 배포 등급 표시.
 *
 * 페이지 전체 배너를 쓰던 때는 전 템플릿이 내부 전용이라 그걸로 충분했다.
 * 퍼블릭 도메인 명화가 섞이면 배너로는 어느 결과물이 공개 가능한지 구분이 안 되므로
 * 등급을 **카드 단위로** 붙이고, 경고는 내부 전용을 실제로 고른 순간에만 띄운다.
 */

export type License = "public-domain" | "internal-only" | "user-uploaded";

const STYLES: Record<License, { label: string; fg: string; bg: string; bd: string }> = {
  "public-domain": {
    label: "공개 가능",
    fg: "var(--color-mint)",
    bg: "var(--color-mint-10)",
    bd: "var(--color-mint-30)",
  },
  "internal-only": {
    label: "내부 전용",
    fg: "#ffc9a3",
    bg: "rgba(255, 154, 90, 0.12)",
    bd: "rgba(255, 154, 90, 0.35)",
  },
  // 내부 전용과 색을 나눈다 — 끄는 조건이 다르고, 책임 주체도 다르다
  "user-uploaded": {
    label: "권리 미확인",
    fg: "#c9b6ff",
    bg: "rgba(166, 130, 255, 0.14)",
    bd: "rgba(166, 130, 255, 0.38)",
  },
};

export function LicenseBadge({ license }: { license: License }) {
  const s = STYLES[license] ?? STYLES["internal-only"];
  return (
    <span style={{
      display: "inline-block",
      padding: "0.1rem 0.45rem",
      borderRadius: "var(--radius-full)",
      border: `1px solid ${s.bd}`,
      background: s.bg,
      color: s.fg,
      fontSize: "var(--text-xs)",
      fontWeight: 700,
      whiteSpace: "nowrap",
      lineHeight: 1.5,
    }}>
      {s.label}
    </span>
  );
}

/** 내부 전용을 고른 순간에만 뜨는 경고. 항상 떠 있으면 아무도 안 읽는다. */
export function InternalOnlyWarning({ note }: { note?: string }) {
  return (
    <div style={{
      background: STYLES["internal-only"].bg,
      border: `1px solid ${STYLES["internal-only"].bd}`,
      borderRadius: "var(--radius-xl)",
      padding: "0.75rem 1.25rem",
      fontSize: "var(--text-base)",
      color: "var(--color-text-gray-300)",
      lineHeight: 1.6,
    }}>
      <strong style={{ color: STYLES["internal-only"].fg }}>내부 전용 템플릿</strong>
      {" — "}
      {note || "이 레퍼런스로 만든 결과물은 외부 공개·상업 사용을 금합니다."}
    </div>
  );
}

/** 사용자가 올린 레퍼런스에 대한 고지. 남의 저작물일 수 있다. */
export function UserReferenceNotice() {
  return (
    <div style={{
      background: STYLES["user-uploaded"].bg,
      border: `1px solid ${STYLES["user-uploaded"].bd}`,
      borderRadius: "var(--radius-xl)",
      padding: "0.75rem 1.25rem",
      fontSize: "var(--text-sm)",
      color: "var(--color-text-gray-300)",
      lineHeight: 1.6,
    }}>
      직접 올린 레퍼런스는 <strong style={{ color: STYLES["user-uploaded"].fg }}>권리를 가진 이미지만</strong> 사용하세요.
      타인의 저작물을 올려 생긴 문제의 책임은 업로드한 사람에게 있습니다.
      결과물은 권리 미확인으로 분류됩니다. 긴 변 600px 이상이면 결과가 좋습니다.
    </div>
  );
}