import { useEffect, useMemo, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { production, qa, rankExamples, roles, topics, type CheckItem, type Question } from './data';
import './style.css';

type Format = 'Reels' | 'Carousel' | 'Static';
type Draft = { topic:string; role:string; who:string; message:string; action:string; format:Format; checks:Record<string,boolean>; notes:Record<string,string> };
const empty:Draft = {topic:'',role:'',who:'',message:'',action:'',format:'Reels',checks:{},notes:{}};
const load = ():Draft => { try { return {...empty,...JSON.parse(localStorage.getItem('pcity-planner-draft')||'{}')} } catch { return empty } };

function SelectCards({items,value,onPick}:{items:Array<{id:string;label:string;description:string}>;value:string;onPick:(id:string)=>void}) {
  return <div className="choices">{items.map(item=><button key={item.id} className={'choice '+(value===item.id?'active':'')} onClick={()=>onPick(item.id)}>
    <b>{item.label}</b><span>{item.description}</span>
  </button>)}</div>
}

function Questions({kind,items,draft,setDraft}:{kind:'Role'|'Topic';items:Question[];draft:Draft;setDraft:(fn:(v:Draft)=>Draft)=>void}) {
  return <div className="questionGroup"><h3>{kind} Questions <span>3</span></h3>{items.map((item,index)=>{
    const key=kind+index; return <article className={'question '+(draft.checks[key]?'complete':'')} key={key}>
      <label><input type="checkbox" checked={!!draft.checks[key]} onChange={e=>setDraft(v=>({...v,checks:{...v.checks,[key]:e.target.checked}}))}/>
        <div><b>{item.point}</b><p>{item.question}</p><small>{item.criteria}</small></div></label>
      <textarea aria-label={item.point+' 메모'} value={draft.notes[key]||''} onChange={e=>setDraft(v=>({...v,notes:{...v.notes,[key]:e.target.value}}))} placeholder="판단 근거나 확인할 내용을 메모하세요."/>
    </article>
  })}</div>
}

function CheckList({items,prefix,draft,setDraft}:{items:CheckItem[];prefix:string;draft:Draft;setDraft:(fn:(v:Draft)=>Draft)=>void}) {
  return <div className="checklist">{items.map((item,index)=>{const key=prefix+index;return <label key={key}>
    <input type="checkbox" checked={!!draft.checks[key]} onChange={e=>setDraft(v=>({...v,checks:{...v.checks,[key]:e.target.checked}}))}/>
    <span><b>{item.point}</b><em>{item.applies}</em><p>{item.question}</p><small>{item.criteria}</small></span>
  </label>})}</div>
}

function App(){
  const [draft,setDraftState]=useState<Draft>(load);
  const [toast,setToast]=useState('');
  const setDraft=(fn:(v:Draft)=>Draft)=>setDraftState(v=>fn(v));
  useEffect(()=>localStorage.setItem('pcity-planner-draft',JSON.stringify(draft)),[draft]);
  const topic=topics.find(x=>x.id===draft.topic), role=roles.find(x=>x.id===draft.role);
  const mustCheck=[...(role?.questions||[]).map((x,i)=>!draft.checks['Role'+i]?x.point:null),...(topic?.questions||[]).map((x,i)=>!draft.checks['Topic'+i]?x.point:null)].filter(Boolean);
  const brief=['P-CITY SOCIAL CONTENT BRIEF','','Topic: '+(topic?.label||'-'),'Role: '+(role?.label||'-'),'Target: '+(draft.who||'-'),'One Message: '+(draft.message||'-'),'Next Action: '+(draft.action||'-'),'Recommended Direction: '+(topic?.direction||'-'),'Must Check: '+(mustCheck.length?mustCheck.join(', '):'기획 질문 전체 확인 완료')].join('\n');
  const similar=useMemo(()=>rankExamples(draft.topic,draft.role).slice(0,4),[draft.topic,draft.role]);
  const visibleProduction=production.filter(x=>x.applies==='항상'||x.applies==='권장'||(x.applies==='Reels'&&draft.format==='Reels')||(x.applies==='영상'&&draft.format==='Reels'));
  const copy=async()=>{await navigator.clipboard.writeText(brief);setToast('브리프를 복사했습니다');setTimeout(()=>setToast(''),1700)};
  const reset=()=>{if(confirm('작성 중인 내용을 초기화할까요?'))setDraftState(empty)};
  return <><header><div className="brand"><span>P</span><div><b>P-CITY</b><small>SOCIAL CONTENT PLANNER</small></div></div><button className="reset" onClick={reset}>새로 작성</button></header>
    <main>
      <div className="hero"><div><div className="eyebrow">PLANNER · INTERNAL USE</div><h1>좋은 콘텐츠는<br/>선명한 선택에서 시작됩니다.</h1></div><p>주제와 역할을 선택하면 지금 필요한 질문만 보여드립니다.<br/>아이디어를 실행 가능한 한 장의 브리프로 정리하세요.</p></div>
      <div className="step"><i>01</i><section><div className="eyebrow">PRIMARY TOPIC · 1개 선택</div><SelectCards items={topics} value={draft.topic} onPick={id=>setDraft(v=>({...v,topic:id}))}/></section></div>
      <div className={'step '+(!draft.topic?'locked':'')}><i>02</i><section><div className="eyebrow">CONTENT ROLE · 1개 선택</div><SelectCards items={roles} value={draft.role} onPick={id=>setDraft(v=>({...v,role:id}))}/></section></div>
      <div className={'step '+(!role?'locked':'')}><i>03</i><section><div className="eyebrow">BASIC BRIEF</div><div className="briefFields">
        <label>WHO <span>누구에게 보여주는가</span><textarea value={draft.who} onChange={e=>setDraft(v=>({...v,who:e.target.value}))}/></label>
        <label>ONE MESSAGE <span>하나만 기억시킨다면</span><textarea value={draft.message} onChange={e=>setDraft(v=>({...v,message:e.target.value}))}/></label>
        <label>NEXT ACTION <span>보고 무엇을 하게 할 것인가</span><textarea value={draft.action} onChange={e=>setDraft(v=>({...v,action:e.target.value}))}/></label>
      </div></section></div>
      <div className={'step guide '+(!topic||!role?'locked':'')}><i>04</i><section><div className="eyebrow">AUTO-GENERATED GUIDE</div><h2>{topic?.label} <span>×</span> {role?.label}</h2>{topic&&role&&<>
        <div className="questionGrid"><Questions kind="Role" items={role.questions} draft={draft} setDraft={setDraft}/><Questions kind="Topic" items={topic.questions} draft={draft} setDraft={setDraft}/></div>
        <aside><small>RECOMMENDED DIRECTION</small><p>{topic.direction}</p></aside>
      </>}</section></div>
      <div className={'step '+(!topic||!role?'locked':'')}><i>05</i><section><div className="eyebrow">CONTENT BRIEF</div><div className="output"><pre>{brief}</pre><button onClick={copy}>브리프 복사하기</button></div></section></div>
      {topic&&role&&<div className="extras">
        <details><summary><span>적용 예시</span><small>선택과 유사한 사례 우선</small></summary><div className="examples">{similar.map((item,index)=><article key={item.title} className={index===0?'closest':''}><small>{topics.find(x=>x.id===item.topic)?.label} · {roles.find(x=>x.id===item.role)?.label}</small><h3>{item.title}</h3><p>{item.direction}</p></article>)}</div></details>
        <details><summary><span>제작 가이드</span><small>포맷에 맞는 제작 체크</small></summary><div className="format">{(['Reels','Carousel','Static'] as Format[]).map(x=><button key={x} className={draft.format===x?'active':''} onClick={()=>setDraft(v=>({...v,format:x}))}>{x}</button>)}</div><CheckList items={visibleProduction} prefix="prod" draft={draft} setDraft={setDraft}/></details>
        <details><summary><span>발행 전 QA</span><small>게시 직전 사실·권리·리스크 확인</small></summary><CheckList items={qa} prefix="qa" draft={draft} setDraft={setDraft}/></details>
      </div>}
    </main>
    <footer>P-CITY SOCIAL CONTENT PLANNER <span>Excel v3 기준 · 작성 내용은 이 브라우저에 자동 저장됩니다.</span></footer>
    {toast&&<div className="toast">{toast}</div>}
  </>;
}

createRoot(document.getElementById('root')!).render(<App/>);
export default App;