// content-editor.jsx — 컨텐츠 에디터: 세일즈 포인트 · 사장님 픽 · 비교 노트
const { useState } = React;

const CAT = window.CATALOG;
const SP_DEFAULT = CAT.salesPoints || [];
const ED_DEFAULT = CAT.editorials || [];

// ─── HEADER ──────────────────────────────────────────────
function Header() {
  return (
    <header className="cat-header">
      <div className="cat-header-inner">
        <a className="cat-brand" href="#">
          <img className="cat-brand-mark" src="assets/symbol-brush.svg" alt="" />
          <div>
            <div className="cat-brand-name">스페셜라이즈드 세종점</div>
            <div className="cat-brand-sub">Content Editor · 카탈로그 컨텐츠</div>
          </div>
        </a>
        <div className="cat-header-sep" />
        <div className="cat-header-title">컨텐츠 <b>편집기</b></div>
        <div className="cat-header-tools">
          <span>저장 · <b>자동 (브라우저)</b></span>
        </div>
      </div>
    </header>
  );
}

function PageNav() {
  return (
    <nav className="cat-pagenav">
      <div className="cat-pagenav-inner">
        <a href="관리자.html">관리자 <small>Admin</small></a>
        <a href="스케줄러.html">스케줄러 <small>Scheduler</small></a>
        <a className="on" href="컨텐츠편집기.html">컨텐츠 <small>Editor</small></a>
        <a href="2026 카탈로그.html">카탈로그 <small>Catalog</small></a>
        <a href="재고관리.html">재고관리 <small>Inventory</small></a>
        <a href="서비스 견적서.html">서비스 견적서 <small>Estimate</small></a>
      </div>
    </nav>
  );
}

// ─── SALES POINTS EDITOR ─────────────────────────────────
function SalesPointsEditor({ items, setItems }) {
  const update = (i, patch) => {
    setItems(items.map((x, idx) => idx === i ? { ...x, ...patch } : x));
  };
  const add = () => setItems([...items, { k: "", v: "" }]);
  const remove = (i) => setItems(items.filter((_, idx) => idx !== i));
  const move = (i, delta) => {
    const newIdx = i + delta;
    if (newIdx < 0 || newIdx >= items.length) return;
    const arr = [...items];
    [arr[i], arr[newIdx]] = [arr[newIdx], arr[i]];
    setItems(arr);
  };

  return (
    <div className="ce-card">
      <div className="ce-card-head">
        <div>
          <div className="ce-card-h">세일즈 포인트</div>
          <div className="ce-card-d">매장 직원이 손님에게 한 줄로 말할 핵심 메시지 ({items.length}개)</div>
        </div>
        <button className="ce-btn ce-btn-primary" onClick={add}>＋ 새 포인트</button>
      </div>
      <div className="ce-list">
        {items.map((sp, i) => (
          <div className="ce-sp-row" key={i}>
            <div className="ce-sp-idx">{String(i+1).padStart(2,"0")}</div>
            <div className="ce-sp-body">
              <input
                className="ce-sp-k"
                value={sp.k}
                onChange={(e)=>update(i, { k: e.target.value })}
                placeholder="제목 (예: Body Geometry Fit)"
              />
              <textarea
                className="ce-sp-v"
                value={sp.v}
                onChange={(e)=>update(i, { v: e.target.value })}
                placeholder="설명 (예: 전 차종 1.5h 정밀 피팅. 첫 구매 고객 50% 할인.)"
                rows={2}
              />
            </div>
            <div className="ce-row-controls">
              <button onClick={()=>move(i, -1)} disabled={i === 0}>↑</button>
              <button onClick={()=>move(i, 1)} disabled={i === items.length - 1}>↓</button>
              <button className="del" onClick={()=>remove(i)}>×</button>
            </div>
          </div>
        ))}
        {items.length === 0 && <div className="ce-empty">아직 포인트가 없습니다. ＋ 새 포인트를 눌러 추가하세요.</div>}
      </div>
    </div>
  );
}

// ─── SPOTLIGHT (사장님 픽) EDITOR ────────────────────────
function SpotlightEditor({ sku, setSku }) {
  const bike = CAT.bikes.find(b => b.sku === sku) || CAT.bikes[0];
  return (
    <div className="ce-card">
      <div className="ce-card-head">
        <div>
          <div className="ce-card-h">사장님 픽 (Spotlight)</div>
          <div className="ce-card-d">카탈로그 상단에 크게 노출될 이번 시즌 추천 모델</div>
        </div>
      </div>
      <div className="ce-spot-body">
        <div className="ce-spot-pick">
          <label className="ce-label">추천 모델 선택</label>
          <select value={sku} onChange={(e)=>setSku(e.target.value)} className="ce-select">
            {CAT.bikes.map(b => (
              <option key={b.sku} value={b.sku}>
                {b.name} · {b.tier} · {b.cat}
              </option>
            ))}
          </select>
        </div>
        {bike && (
          <div className="ce-spot-preview" style={{background: bike.gradient}}>
            <div className="ce-spot-preview-num">EDITOR'S PICK · 01</div>
            <div className="ce-spot-preview-info">
              <div className="ce-spot-preview-eyebrow">{bike.eyebrow} · {bike.tier}</div>
              <div className="ce-spot-preview-title">{bike.name}</div>
              <div className="ce-spot-preview-sales">"{bike.sales}"</div>
              <div className="ce-spot-preview-stats">
                <span><b>{bike.weightKg}</b>kg</span>
                <span><b>{(bike.priceShop/10000).toFixed(0)}</b>만원</span>
                <span><b>{bike.stock}</b>대 재고</span>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// ─── EDITORIAL (비교 노트) EDITOR ────────────────────────
function EditorialsEditor({ items, setItems }) {
  const update = (i, patch) => {
    setItems(items.map((x, idx) => idx === i ? { ...x, ...patch } : x));
  };
  const updateBody = (i, bi, val) => {
    const ed = items[i];
    const body = [...ed.body];
    body[bi] = val;
    update(i, { body });
  };
  const addBody = (i) => {
    const ed = items[i];
    update(i, { body: [...ed.body, ""] });
  };
  const removeBody = (i, bi) => {
    const ed = items[i];
    update(i, { body: ed.body.filter((_, idx) => idx !== bi) });
  };
  const add = () => setItems([...items, {
    title: "", lead: "", body: [""], tags: []
  }]);
  const remove = (i) => {
    if (!confirm("이 비교 노트를 삭제하시겠습니까?")) return;
    setItems(items.filter((_, idx) => idx !== i));
  };
  const updateTags = (i, tagStr) => {
    update(i, { tags: tagStr.split(",").map(t => t.trim()).filter(Boolean) });
  };

  return (
    <div className="ce-card">
      <div className="ce-card-head">
        <div>
          <div className="ce-card-h">사장님의 비교 노트</div>
          <div className="ce-card-d">고객 질문에 대한 사장님 답변 — 모델 간 비교 사설 ({items.length}개)</div>
        </div>
        <button className="ce-btn ce-btn-primary" onClick={add}>＋ 새 비교 노트</button>
      </div>
      <div className="ce-edt-list">
        {items.map((ed, i) => (
          <div className="ce-edt-row" key={i}>
            <div className="ce-edt-head">
              <input
                className="ce-edt-title"
                value={ed.title}
                onChange={(e)=>update(i, { title: e.target.value })}
                placeholder="비교 제목 (예: Tarmac SL8 vs Roubaix SL8 — 어느 쪽이 당신의 로드인가)"
              />
              <button className="ce-btn-icon del" onClick={()=>remove(i)}>×</button>
            </div>
            <textarea
              className="ce-edt-lead"
              value={ed.lead}
              onChange={(e)=>update(i, { lead: e.target.value })}
              placeholder="리드 문장 (한 줄로 핵심 메시지)"
              rows={2}
            />
            <div className="ce-edt-body-list">
              <div className="ce-label" style={{marginBottom:6}}>본문 단락 ({ed.body.length}개)</div>
              {ed.body.map((para, bi) => (
                <div className="ce-edt-para" key={bi}>
                  <div className="ce-edt-para-num">0{bi+1}</div>
                  <textarea
                    value={para}
                    onChange={(e)=>updateBody(i, bi, e.target.value)}
                    placeholder="본문 단락"
                    rows={2}
                  />
                  <button className="ce-btn-icon del-sm" onClick={()=>removeBody(i, bi)} disabled={ed.body.length <= 1}>×</button>
                </div>
              ))}
              <button className="ce-btn-ghost" onClick={()=>addBody(i)}>＋ 단락 추가</button>
            </div>
            <div className="ce-edt-tags">
              <span className="ce-label">태그</span>
              <input
                value={(ed.tags || []).join(", ")}
                onChange={(e)=>updateTags(i, e.target.value)}
                placeholder="쉼표로 구분 (예: 로드, 비교, 추천)"
              />
            </div>
          </div>
        ))}
        {items.length === 0 && <div className="ce-empty">아직 비교 노트가 없습니다. ＋ 새 비교 노트를 눌러 추가하세요.</div>}
      </div>
    </div>
  );
}

// ─── FOOTER ──────────────────────────────────────────────
function Footer() {
  return (
    <footer className="cat-footer">
      <div className="cat-inner cat-footer-inner">
        <div className="cat-footer-brand">
          <img className="cat-footer-mark" src="assets/symbol-brush-sejong.svg" alt="" />
          <div>
            <div className="cat-footer-name">컨텐츠 편집기 · 스페셜라이즈드 세종점</div>
            <div className="cat-footer-sub">카탈로그에 노출되는 매장 직접 작성 컨텐츠를 관리합니다</div>
          </div>
        </div>
        <div className="cat-footer-meta">
          <span>변경 사항은 자동으로 브라우저에 저장됩니다 (로컬 전용)</span>
          <img className="cat-footer-wordmark" src="assets/wordmark-specialized.svg" alt="Specialized" />
        </div>
      </div>
    </footer>
  );
}

// ─── APP ─────────────────────────────────────────────────
function App() {
  // v3.11 A1: 권한 체크 — 콘텐츠 편집은 owner/manager만 (PRD §5)
  const role = window.AUTH?.role || "owner";
  const canEdit = ["owner","manager"].includes(role);

  const [salesPoints, setSalesPoints] = useState(() => {
    try { return JSON.parse(localStorage.getItem("ce.salesPoints")) || SP_DEFAULT; }
    catch(e) { return SP_DEFAULT; }
  });
  const [editorials, setEditorials] = useState(() => {
    try { return JSON.parse(localStorage.getItem("ce.editorials")) || ED_DEFAULT; }
    catch(e) { return ED_DEFAULT; }
  });
  const [spotlightSku, setSpotlightSku] = useState(() =>
    localStorage.getItem("ce.spotlightSku") || "TSL8-EXP-56"
  );
  const [tab, setTab] = useState("sales");
  // v3.11 A2: 자동 저장 표시
  const [lastSaved, setLastSaved] = useState(null);
  const markSaved = () => setLastSaved(new Date());

  // 자동 저장 (디바운스 없이 매번 — 단순 목업)
  React.useEffect(() => {
    try { localStorage.setItem("ce.salesPoints", JSON.stringify(salesPoints)); markSaved(); } catch(e) {}
  }, [salesPoints]);
  React.useEffect(() => {
    try { localStorage.setItem("ce.editorials", JSON.stringify(editorials)); markSaved(); } catch(e) {}
  }, [editorials]);
  React.useEffect(() => {
    try { localStorage.setItem("ce.spotlightSku", spotlightSku); markSaved(); } catch(e) {}
  }, [spotlightSku]);

  if (!canEdit) {
    return (
      <div style={{padding:"80px 24px",textAlign:"center",minHeight:"100vh",
                   display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center"}}>
        <div style={{fontSize:48,marginBottom:16}}>🔒</div>
        <h2 style={{margin:"0 0 8px"}}>편집 권한 없음</h2>
        <p style={{color:"var(--grey-600)",marginBottom:24,maxWidth:480}}>
          카탈로그 콘텐츠 편집은 <b>매장 대표(owner)</b> 또는 <b>운영 매니저(manager)</b> 권한이 필요합니다.<br/>
          현재 역할: <b>{role}</b>
        </p>
        <a href="관리자.html" className="cat-btn cat-btn-primary">← 관리자 대시보드로</a>
      </div>
    );
  }

  const resetAll = () => {
    if (!confirm("모든 컨텐츠를 카탈로그 기본값으로 초기화하시겠습니까?")) return;
    setSalesPoints(SP_DEFAULT);
    setEditorials(ED_DEFAULT);
    setSpotlightSku("TSL8-EXP-56");
  };

  return (
    <div className="inv-app">
      <Header />
      <PageNav />
      <main className="inv-main">
        <div className="cat-inner">
          <div className="inv-page-head">
            <div>
              <h1 className="inv-page-h">컨텐츠 편집기</h1>
              <p className="inv-page-sub" style={{marginTop:10}}>
                카탈로그에 노출되는 사장님 픽 · 세일즈 포인트 · 비교 노트를 직접 작성하고 수정할 수 있습니다.
              </p>
            </div>
            <div style={{display:"flex", gap:10, alignItems:"center"}}>
              {/* A2: 자동 저장 표시 */}
              {lastSaved && (
                <span style={{fontSize:12,color:"var(--green-500,#029359)",display:"inline-flex",alignItems:"center",gap:4}}>
                  <span style={{width:6,height:6,borderRadius:3,background:"var(--green-500,#029359)",display:"inline-block"}}/>
                  자동 저장됨 · {lastSaved.toLocaleTimeString("ko-KR",{hour:"2-digit",minute:"2-digit",second:"2-digit"})}
                </span>
              )}
              <a href="2026 카탈로그.html" className="ce-btn ce-btn-ghost">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg>
                카탈로그에서 미리보기
              </a>
              <button className="ce-btn ce-btn-secondary" onClick={resetAll}>
                기본값으로 초기화
              </button>
            </div>
          </div>

          <div className="ce-tabs">
            <button className={"ce-tab " + (tab === "sales" ? "on":"")} onClick={()=>setTab("sales")}>
              세일즈 포인트 <em>{salesPoints.length}</em>
            </button>
            <button className={"ce-tab " + (tab === "spot" ? "on":"")} onClick={()=>setTab("spot")}>
              사장님 픽 <em>1</em>
            </button>
            <button className={"ce-tab " + (tab === "edt" ? "on":"")} onClick={()=>setTab("edt")}>
              비교 노트 <em>{editorials.length}</em>
            </button>
          </div>

          {tab === "sales" && <SalesPointsEditor items={salesPoints} setItems={setSalesPoints} />}
          {tab === "spot"  && <SpotlightEditor sku={spotlightSku} setSku={setSpotlightSku} />}
          {tab === "edt"   && <EditorialsEditor items={editorials} setItems={setEditorials} />}
        </div>
      </main>
      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);