"use client";

/**
 * 게이트 ①·③ 자동 승인 — (a) 시작 화면 옵션으로 확정(2026-08-28).
 *   <AutoApprovePanel />  /playreel 시작 화면: 스위치 2개 + 잠긴 2·4·5단계 안내. 되돌리는 자리도 여기.
 * 아이콘은 SVG만(이모지 금지).
 */

import { GATE_META, type GateKey } from "@/lib/playreel";
import { AUTO_APPROVABLE, setAutoApprove, useAutoApprove, type AutoApprovable } from "@/lib/prefs";

export const isAutoApprovable = (g: GateKey | null | undefined): g is AutoApprovable =>
  !!g && (AUTO_APPROVABLE as readonly string[]).includes(g);

const AUTO_COPY: Record<AutoApprovable, string> = {
  fetch_confirm: "상세페이지에서 읽은 정보와 기본 섹션을 그대로 사용",
  narration_confirm: "자동 생성 문장과 기본 목소리로 바로 진행",
};

const Lock = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden style={{ flexShrink: 0 }}>
    <rect x="4" y="11" width="16" height="10" rx="2" /><path d="M8 11V7a4 4 0 0 1 8 0v4" />
  </svg>
);

function Switch({ on, onChange, label }: { on: boolean; onChange: (v: boolean) => void; label: string }) {
  return (
    <button type="button" role="switch" aria-checked={on} aria-label={label} className={`switch${on ? " on" : ""}`} onClick={() => onChange(!on)}>
      <span className="switch-knob" />
    </button>
  );
}

export function AutoApprovePanel() {
  const prefs = useAutoApprove();
  return (
    <div>
      <p className="field-label" style={{ margin: "0 0 0.75rem" }}>자동화 승인 단계 설정</p>
      <div className="card" style={{ padding: "0.5rem 1rem" }}>
        {AUTO_APPROVABLE.map((g) => {
          const m = GATE_META[g];
          return (
            <div key={g} className="pref-row">
              <div style={{ minWidth: 0 }}>
                <p style={{ margin: 0, fontSize: "var(--text-sm)", fontWeight: 600 }}>{m.step}단계 · {m.name}</p>
                <p style={{ margin: "2px 0 0", fontSize: "var(--text-xs)", color: "var(--color-text-gray-500)" }}>{AUTO_COPY[g]}</p>
              </div>
              <Switch on={!!prefs[g]} onChange={(v) => setAutoApprove(g, v)} label={`${m.name} 자동 승인`} />
            </div>
          );
        })}
        <div className="pref-row" style={{ opacity: 0.55 }}>
          <div style={{ minWidth: 0 }}>
            <p style={{ margin: 0, fontSize: "var(--text-sm)", fontWeight: 600 }}>2 · 4 · 5단계</p>
            <p style={{ margin: "2px 0 0", fontSize: "var(--text-xs)", color: "var(--color-text-gray-500)" }}>되돌릴 수 없는 단계라 항상 확인합니다</p>
          </div>
          <span style={{ color: "var(--color-text-gray-500)" }}><Lock /></span>
        </div>
      </div>
    </div>
  );
}