/* ===== Panex — Upload + Analyzing ===== */

function AppHeader({ title, onBack, right }){
  return (
    <div className="app-head">
      <button className="app-iconbtn" onClick={onBack}><Icon name="back" size={22} color="#0E1626"/></button>
      <span className="app-title">{title}</span>
      <div className="app-head-r">{right || <span style={{width:38}}/>}</div>
    </div>
  );
}

function Upload({ onBack, onAnalyze }){
  const [files, setFiles] = useState([]);   // {url,name}
  const [drag, setDrag] = useState(false);
  const [src, setSrc] = useState("kakao");
  const inputRef = useRef(null);
  const sources = [{k:"kakao",t:"카톡"},{k:"insta",t:"인스타 DM"},{k:"sms",t:"문자"}];

  function addFiles(list){
    const arr = [...list].filter(f=>f.type.startsWith("image")).slice(0,6).map(f=>({file:f,url:URL.createObjectURL(f),name:f.name}));
    setFiles(p=>[...p,...arr].slice(0,6));
  }
  function useSample(){ setFiles([{file:null,url:"__sample",name:"sample.png"}]); }
  const ready = files.length>0;

  return (
    <div className="screen" style={{animation:"fadeIn .3s"}}>
      <AppHeader title="대화 분석" onBack={onBack}/>
      <div className="screen-body noscroll">
        {/* source picker */}
        <div className="src-tabs">
          {sources.map(s=>(
            <button key={s.k} className={`src-tab ${src===s.k?"on":""}`} onClick={()=>setSrc(s.k)}>{s.t}</button>
          ))}
        </div>
        <p className="up-help">어디서 캡처했든 괜찮아요. 대화가 잘 보이게만 올려주세요.</p>

        {/* drop zone */}
        <div className={`dropzone ${drag?"drag":""} ${ready?"has":""}`}
          onDragOver={e=>{e.preventDefault();setDrag(true)}}
          onDragLeave={()=>setDrag(false)}
          onDrop={e=>{e.preventDefault();setDrag(false);addFiles(e.dataTransfer.files)}}
          onClick={()=>!ready && inputRef.current.click()}>
          {!ready ? (
            <div className="dz-empty">
              <div className="dz-ic floaty"><Icon name="upload" size={30} color="#6C5DD8"/></div>
              <b>스크린샷을 끌어다 놓으세요</b>
              <span>또는 눌러서 파일 선택 · 최대 6장</span>
            </div>
          ) : (
            <div className="dz-grid" onClick={e=>e.stopPropagation()}>
              {files.map((f,i)=>(
                <div key={i} className="thumb">
                  {f.url==="__sample"
                    ? <div className="thumb-sample"><Icon name="image" size={22} color="#A99DF3"/><span>예시 대화</span></div>
                    : <img src={f.url} alt=""/>}
                  <button className="thumb-x" onClick={()=>setFiles(p=>p.filter((_,j)=>j!==i))}><Icon name="x" size={13} color="#fff"/></button>
                </div>
              ))}
              {files.length<6 && files[0].url!=="__sample" && (
                <button className="thumb add" onClick={()=>inputRef.current.click()}><Icon name="plus" size={22} color="#9598AD"/></button>
              )}
            </div>
          )}
          <input ref={inputRef} type="file" accept="image/*" multiple hidden onChange={e=>addFiles(e.target.files)}/>
        </div>

        {!ready && (
          <button className="sample-link" onClick={useSample}>
            <Icon name="sparkle" size={15} color="#6C5DD8"/> 스크린샷 없이 예시로 체험해보기
          </button>
        )}

        <div className="privacy">
          <Icon name="lock" size={16} color="#6C5DD8"/>
          <span>업로드한 대화는 분석 직후 자동 삭제돼요. 저장도, 공유도 없습니다.</span>
        </div>
      </div>

      <div className="screen-cta">
        <button className={`btn btn-primary btn-lg ${ready?"":"disabled"}`} disabled={!ready} onClick={()=>onAnalyze(files)} style={{width:"100%"}}>
          {ready ? <><Icon name="sparkle" size={19} color="#fff"/> 이 대화 복기하기</> : "스크린샷을 올려주세요"}
        </button>
      </div>
    </div>
  );
}

function Analyzing({ job, onDone, onError }){
  const D = window.CR_DATA;
  const [step, setStep] = useState(0);
  const [pct, setPct] = useState(0);
  useEffect(()=>{
    let cancelled = false;
    const stepT = setInterval(()=> setStep(s=> Math.min(s+1, D.loadingSteps.length-1)), 640);
    const dur = 3300, t0 = Date.now();
    const pctT = setInterval(()=>{
      const p = Math.min(99, Math.round((Date.now()-t0)/dur*100));
      setPct(p);
    }, 60);
    const minWait = new Promise(r=>setTimeout(r, dur+360));
    Promise.all([job.catch(err=>({__error:err})), minWait]).then(([result])=>{
      if(cancelled) return;
      if(result && result.__error) onError(result.__error.message || "분석 중 문제가 생겼어요. 다시 시도해주세요.");
      else { setPct(100); onDone(result); }
    });
    return ()=>{ cancelled=true; clearInterval(stepT); clearInterval(pctT); };
  },[]);
  return (
    <div className="screen analyzing" style={{animation:"fadeIn .3s"}}>
      <div className="anz-center">
        <div className="anz-rings">
          <div className="anz-ring r1"/><div className="anz-ring r2"/>
          <Mascot size={92} mood="think"/>
        </div>
        <div className="anz-pct">{pct}<span>%</span></div>
        <div className="anz-step" key={step} style={{animation:"fadeUp .35s"}}>{D.loadingSteps[step]}</div>
        <div className="anz-bar"><div className="anz-bar-fill" style={{width:`${pct}%`}}/></div>
        <p className="anz-foot">잠깐만요, 꼼꼼히 복기하는 중이에요 🔍</p>
      </div>
    </div>
  );
}

Object.assign(window, { Upload, Analyzing, AppHeader });