// 고객 내방상담 체크리스트 (디자인: 칩 클라우드 + 설정행, 아정당 파랑/흰색, 금액 숨김)
// "견적서 만들기" → 선택 내역을 app으로 넘겨 단가사전 매칭 후 편집 화면에 채움.  window.EstChecklist
const CD = window.CHECKLIST_DATA;
const CHK_STORE = 'chk:state';
const HEADER_FIELDS = [
  { k: 'client', label: '고객명', ph: '예) 박○○' },
  { k: 'date', label: '상담일', ph: '26.06.05' },
  { k: 'name', label: '현장', ph: '예) 고덕 베네루체 32평 A', wide: true },
  { k: 'py', label: '평형', ph: '33' },
  { k: 'budget', label: '예산', ph: '8,000만' },
];

function EMPTY_BASICS() { return { rooms: '', baths: '', verandas: '', bw: '', bh: '', lw: '', lh: '', km: '', pkgs: [] }; }
function chkDefaultItem(it) { return { on: false, qty: it.qty || 1, opt: '', memo: '', _memoOpen: false }; }
function chkBuildItems() { const m = {}; CD.forEach((c) => c.items.forEach((it) => { m[it.id] = chkDefaultItem(it); })); return m; }
function chkLoad() {
  try {
    const p = JSON.parse(localStorage.getItem(CHK_STORE) || 'null');
    if (p) { const base = chkBuildItems(); Object.keys(p.items || {}).forEach((id) => { if (base[id]) base[id] = { ...base[id], ...p.items[id], _memoOpen: false }; }); return { header: p.header || {}, items: base, basics: { ...EMPTY_BASICS(), ...(p.basics || {}) } }; }
  } catch (e) {}
  return { header: {}, items: chkBuildItems(), basics: EMPTY_BASICS() };
}

function ChkStepper({ value, unit, onChange }) {
  return (
    <div className="qty">
      <button onClick={() => onChange(Math.max(0, (Number(value) || 0) - 1))}>−</button>
      <input value={value} onChange={(e) => onChange(Number(String(e.target.value).replace(/[^\d.]/g, '')) || 0)} />
      <button onClick={() => onChange((Number(value) || 0) + 1)}>+</button>
      <span className="qty-unit">{unit}</span>
    </div>
  );
}
function ChkSeg({ options, value, onChange }) {
  return <div className="seg">{options.map((o) => <button key={o} className={value === o ? 'on' : ''} onClick={() => onChange(value === o ? '' : o)}>{o}</button>)}</div>;
}
function ChkConfigRow({ item, st, onChange }) {
  return (
    <div className="cfg-row">
      <span className="cfg-name">{item.label}</span>
      {item.opts && <ChkSeg options={item.opts} value={st.opt} onChange={(o) => onChange({ opt: o })} />}
      <ChkStepper value={st.qty} unit={item.unit} onChange={(v) => onChange({ qty: v })} />
      <button className={'memo-btn' + (st.memo || st._memoOpen ? ' has' : '')} onClick={() => onChange({ _memoOpen: !st._memoOpen })}>{st.memo || '메모'}</button>
      {st._memoOpen && <input className="memo-input" placeholder={item.hint || '메모 입력'} value={st.memo} autoFocus onChange={(e) => onChange({ memo: e.target.value })} onBlur={() => onChange({ _memoOpen: false })} />}
    </div>
  );
}
function ChkSection({ cat, idx, items, onItem }) {
  const selected = cat.items.filter((it) => items[it.id].on);
  const cfg = selected.filter((it) => it.opts || (it.unit && it.unit !== '식'));
  const onChip = (it) => {
    const cur = items[it.id];
    if (!cur.on && it.group) cat.items.forEach((sib) => { if (sib.id !== it.id && sib.group === it.group && items[sib.id].on) onItem(sib.id, { on: false }); });
    onItem(it.id, { on: !cur.on });
  };
  return (
    <section className="sec" id={'csec-' + cat.id}>
      <div className="sec-head">
        <span className="sec-no">{String(idx + 1).padStart(2, '0')}</span>
        <h2 className="sec-name">{cat.name}</h2>
        {selected.length > 0 && <span className="sec-count">{selected.length}</span>}
        <span className="sec-hint">{cat.hint || '해당되는 항목 선택 (복수 가능)'}</span>
      </div>
      <div className="chips">
        {cat.items.map((it) => (
          <button key={it.id} className={'chip' + (items[it.id].on ? ' on' : '')} onClick={() => onChip(it)}><span className="chip-dot"></span>{it.label}</button>
        ))}
      </div>
      {cfg.length > 0 && (
        <div className="cfg">
          <div className="cfg-h">선택 항목 설정</div>
          {cfg.map((it) => <ChkConfigRow key={it.id} item={it} st={items[it.id]} onChange={(p) => onItem(it.id, p)} />)}
        </div>
      )}
    </section>
  );
}

function ChecklistPage({ onGenerate, flash }) {
  const init = useMemo(chkLoad, []);
  const [header, setHeader] = useState(init.header);
  const [items, setItems] = useState(init.items);
  const [basics, setBasics] = useState(init.basics);
  const [aiRows, setAiRows] = useState([]);   // AI 상담 보완 제안(빠진 항목) — 생성 시 포함
  const [aiOpen, setAiOpen] = useState(false);
  const [activeId, setActiveId] = useState(CD[0].id);
  const PKGS = useMemo(() => { const s = new Set(); window.DICT.forEach((d) => { const k = (d.setName || '').trim(); if (k) s.add(k); }); return [...s]; }, []);

  useEffect(() => {
    const slim = {}; Object.keys(items).forEach((id) => { const s = items[id]; slim[id] = { on: s.on, qty: s.qty, opt: s.opt, memo: s.memo }; });
    localStorage.setItem(CHK_STORE, JSON.stringify({ header, items: slim, basics }));
  }, [header, items, basics]);

  const setB = (k, v) => setBasics((b) => ({ ...b, [k]: v }));
  const addPkg = () => setBasics((b) => ({ ...b, pkgs: [...(b.pkgs || []), { name: PKGS[0] || '', qty: 1 }] }));
  const updPkg = (i, patch) => setBasics((b) => { const a = (b.pkgs || []).slice(); a[i] = { ...a[i], ...patch }; return { ...b, pkgs: a }; });
  const rmPkg = (i) => setBasics((b) => ({ ...b, pkgs: (b.pkgs || []).filter((_, j) => j !== i) }));
  const onItem = (id, patch) => setItems((p) => ({ ...p, [id]: { ...p[id], ...patch } }));
  const selectedCount = useMemo(() => CD.reduce((a, c) => a + c.items.filter((it) => items[it.id].on).length, 0), [items]);
  const groups = useMemo(() => CD.map((c) => ({ id: c.id, name: c.name, n: c.items.filter((it) => items[it.id].on).length })).filter((g) => g.n), [items]);

  const jumpTo = (id) => { const el = document.getElementById('csec-' + id); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 72, behavior: 'smooth' }); };
  const reset = () => { if (confirm('체크 항목과 현장 정보를 초기화할까요?')) { setItems(chkBuildItems()); setHeader({}); setBasics(EMPTY_BASICS()); setAiRows([]); } };

  const generate = () => {
    const selected = [];
    CD.forEach((c) => c.items.forEach((it) => {
      const s = items[it.id]; if (!s.on) return;
      selected.push({ id: it.id, catId: c.id, catName: c.name, label: it.label, unit: it.unit, qty: s.qty, opt: s.opt, memo: s.memo });
    }));
    const pkgs = (basics.pkgs || []).filter((p) => p.name && (Number(p.qty) || 0) > 0);
    if (selected.length === 0 && pkgs.length === 0 && aiRows.length === 0) { (flash || (() => {}))('체크한 항목이 없어요 — 먼저 공정을 선택해주세요'); return; }
    onGenerate({ header, selected, basics: { ...basics, pkgs }, aiRows });
  };

  return (
    <div className="chk app">
      <div className="info-bar">
        <div className="info-grid">
          {HEADER_FIELDS.map((f) => (
            <label className={'field' + (f.wide ? ' field-wide' : '')} key={f.k}>
              <span className="field-label">{f.label}</span>
              <input value={header[f.k] || ''} placeholder={f.ph} onChange={(e) => setHeader((h) => ({ ...h, [f.k]: e.target.value }))} />
            </label>
          ))}
          <span style={{ flex: 1 }} />
          <button onClick={reset} style={{ border: '1px solid var(--line)', background: 'var(--surface)', borderRadius: 8, padding: '7px 13px', fontSize: 13, fontWeight: 600, color: 'var(--ink-2)' }}>초기화</button>
        </div>
      </div>
      <div className="body">
        <nav className="rail">
          {CD.map((c, i) => {
            const cnt = c.items.filter((it) => items[it.id].on).length;
            return (
              <button key={c.id} className={'rail-item' + (activeId === c.id ? ' active' : '')} onClick={() => { setActiveId(c.id); jumpTo(c.id); }}>
                <span className="rail-no">{String(i + 1).padStart(2, '0')}</span>
                <span className="rail-name">{c.name}</span>
                {cnt > 0 && <span className="rail-cnt">{cnt}</span>}
              </button>
            );
          })}
        </nav>
        <main className="sections">
          {/* 현장 기본정보 + 욕실 패키지 (견적 수량에 반영) */}
          <section className="sec">
            <div className="sec-head"><span className="sec-no">00</span><h2 className="sec-name">현장 기본정보 · 욕실 구성</h2><span className="sec-hint">개수·치수를 입력하면 수량이 자동으로 계산됩니다</span></div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 20, padding: '14px 18px' }}>
              {[['rooms', '방'], ['baths', '욕실'], ['verandas', '베란다']].map(([k, lbl]) => (
                <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ fontSize: 13.5, fontWeight: 700 }}>{lbl} 개수</span>
                  <ChkStepper value={basics[k] || 0} unit="개" onChange={(v) => setB(k, v)} />
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, padding: '0 18px 14px', alignItems: 'flex-end' }}>
              <span style={{ fontSize: 12, color: 'var(--ink-3)', alignSelf: 'center' }}>치수(선택, 타일 자동산출용)</span>
              {[['bw', '침실욕실 가로'], ['bh', '침실욕실 세로'], ['lw', '거실욕실 가로'], ['lh', '거실욕실 세로']].map(([k, lbl]) => (
                <label key={k} style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
                  <span style={{ fontSize: 11, color: 'var(--ink-3)' }}>{lbl}(mm)</span>
                  <input value={basics[k] || ''} onChange={(e) => setB(k, e.target.value.replace(/[^\d]/g, ''))} placeholder="mm" style={{ width: 84, padding: '6px 8px', border: '1px solid var(--line)', borderRadius: 7, fontSize: 13, outline: 'none' }} />
                </label>
              ))}
              <label style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
                <span style={{ fontSize: 11, color: 'var(--ink-3)' }}>주방 길이(M)</span>
                <input value={basics.km || ''} onChange={(e) => setB('km', e.target.value.replace(/[^\d.]/g, ''))} placeholder="M" style={{ width: 64, padding: '6px 8px', border: '1px solid var(--line)', borderRadius: 7, fontSize: 13, outline: 'none' }} />
              </label>
            </div>
            <div className="cfg">
              <div className="cfg-h">욕실 패키지 — 유형과 개소를 고르면 견적에 자동으로 들어갑니다</div>
              {(basics.pkgs || []).map((p, i) => (
                <div className="cfg-row" key={i}>
                  <select value={p.name} onChange={(e) => updPkg(i, { name: e.target.value })} style={{ minWidth: 200, padding: '7px 10px', border: '1px solid var(--line)', borderRadius: 8, fontSize: 13.5, background: '#fff' }}>
                    <option value="">패키지 선택</option>
                    {PKGS.map((n) => <option key={n} value={n}>{n}</option>)}
                  </select>
                  <ChkStepper value={p.qty || 1} unit="개소" onChange={(v) => updPkg(i, { qty: v })} />
                  <button className="memo-btn" onClick={() => rmPkg(i)} style={{ marginLeft: 'auto' }}>✕ 삭제</button>
                </div>
              ))}
              <div style={{ padding: '11px 18px' }}>
                <button onClick={addPkg} disabled={PKGS.length === 0} style={{ padding: '7px 13px', border: '1px solid var(--accent)', background: 'var(--accent-soft)', color: 'var(--accent-ink)', borderRadius: 8, fontSize: 13, fontWeight: 700 }}>＋ 욕실 패키지 추가</button>
                {PKGS.length === 0 && <span style={{ fontSize: 12, color: 'var(--ink-3)', marginLeft: 8 }}>단가 사전에서 패키지를 먼저 만드세요</span>}
              </div>
            </div>
          </section>
          {CD.map((c, i) => <ChkSection key={c.id} cat={c} idx={i} items={items} onItem={onItem} />)}
          <div style={{ fontSize: 12, color: 'var(--ink-3)', textAlign: 'center', padding: '6px 0' }}>현장 실측 후 단가는 협의에 따라 조정됩니다.</div>
        </main>
        <aside className="summary">
          <div className="sum-card">
            <div className="sum-title">선택 요약 <span>{selectedCount}개 항목</span></div>
            <button onClick={() => setAiOpen(true)} style={{ width: '100%', margin: '2px 0 8px', padding: '10px', border: '1px solid var(--accent-line)', background: 'var(--accent-soft)', color: 'var(--accent-ink)', borderRadius: 9, fontWeight: 700, fontSize: 13, cursor: 'pointer' }}>AI로 빠진 항목 점검{aiRows.length > 0 ? ' (' + aiRows.length + '건 담김)' : ''}</button>
            <div className="sum-lines">
              {groups.length === 0 && <div className="sum-empty">체크한 항목이 여기에 모입니다.</div>}
              {groups.map((g) => (
                <button className="sum-line" key={g.id} onClick={() => jumpTo(g.id)}>
                  <span className="sum-line-name">{g.name}</span>
                  <span className="sum-line-cnt">{g.n}</span>
                </button>
              ))}
            </div>
            <button className="chk-cta" onClick={generate}>견적서 만들기 →</button>
            <div className="sum-foot">단가·금액은 다음 단계(편집)에서 조정합니다</div>
          </div>
        </aside>
      </div>

      {/* 현장(태블릿/모바일) 하단 고정 CTA — 사이드바 숨을 때 */}
      <div className="chk-mobilebar">
        <div className="cmb-info"><span>선택</span><b>{selectedCount}개</b></div>
        <button className="cmb-ai" onClick={() => setAiOpen(true)}>🤖 보완</button>
        <button className="cmb-cta" onClick={generate}>견적서 만들기 →</button>
      </div>

      {/* AI 상담 보완 모달 (넓게) */}
      {aiOpen && (
        <div onClick={() => setAiOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 80, background: 'rgba(20,30,50,.45)', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: '40px 20px', overflow: 'auto' }}>
          <div onClick={(e) => e.stopPropagation()} style={{ width: 'min(720px, 96vw)', background: 'var(--surface)', borderRadius: 14, boxShadow: '0 20px 60px rgba(0,0,0,.3)', padding: '16px 18px' }}>
            <div style={{ display: 'flex', alignItems: 'center', marginBottom: 6 }}>
              <span style={{ fontSize: 12.5, color: 'var(--ink-3)' }}>체크 못 한 항목을 녹취에서 찾아 제안 → 담으면 견적서에 함께 들어갑니다</span>
              <span style={{ flex: 1 }} />
              <button onClick={() => setAiOpen(false)} style={{ border: 'none', background: 'transparent', fontSize: 18, color: 'var(--ink-3)', cursor: 'pointer' }}>✕</button>
            </div>
            {window.EstAI && <window.EstAI.AIPanel defaultOpen onAddRows={(rows) => setAiRows((p) => [...p, ...rows])} flash={flash || (() => {})} />}
            {aiRows.length > 0 && <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--accent-ink)', marginTop: 10 }}>🤖 담긴 보완 항목 {aiRows.length}건 <button onClick={() => setAiRows([])} style={{ border: 'none', background: 'transparent', color: 'var(--ink-3)', textDecoration: 'underline', fontSize: 11, cursor: 'pointer' }}>모두 지우기</button></div>}
          </div>
        </div>
      )}
    </div>
  );
}

window.EstChecklist = { ChecklistPage };