(() => {
    const {useState, useEffect, useRef} = React;
    const SIGN_NAMES = {Ari:'白羊座',Tau:'金牛座',Gem:'双子座',Can:'巨蟹座',Leo:'狮子座',Vir:'处女座',Lib:'天秤座',Sco:'天蝎座',Sag:'射手座',Cap:'摩羯座',Aqu:'水瓶座',Pis:'双鱼座'};
    const PERIODS = [{id:'today',name:'今天',hint:'当天'}, {id:'week',name:'七天',hint:'短期节奏'}, {id:'month',name:'一个月',hint:'30天'}, {id:'quarter',name:'三个月',hint:'90天'}, {id:'year',name:'一年',hint:'365天'}];
    const ZONES = [['Asia/Shanghai','中国大陆'],['Asia/Hong_Kong','香港'],['Asia/Taipei','台湾'],['Asia/Tokyo','日本'],['Asia/Seoul','韩国'],['Asia/Singapore','新加坡'],['America/New_York','美国东部'],['America/Los_Angeles','美国西部'],['Europe/London','英国'],['Europe/Paris','法国'],['Australia/Sydney','澳大利亚悉尼'],['UTC','世界协调时']];
    const LAYERS = {a:'A方行运',b:'B方行运',composite:'组合盘行运',synastry:'双方比较盘'};
    const fresh = () => ({name:'',date:'',time:'12:00',known:false,city:'',tz_str:'Asia/Shanghai'});
    function localDate() {const d=new Date();return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;}
    function OrbitArt(){return <svg className="rf-orbits" viewBox="0 0 240 170" fill="none" aria-hidden="true"><defs><linearGradient id="rf-orbit" x1="20" y1="15" x2="225" y2="160"><stop stopColor="#E3A0B6"/><stop offset="1" stopColor="#AC9AC8"/></linearGradient><radialGradient id="rf-glow"><stop stopColor="#EDD6E0" stopOpacity=".75"/><stop offset="1" stopColor="#EDD6E0" stopOpacity="0"/></radialGradient></defs><circle cx="120" cy="85" r="84" fill="url(#rf-glow)"/><ellipse cx="120" cy="85" rx="102" ry="40" transform="rotate(-25 120 85)" stroke="url(#rf-orbit)" strokeWidth="1.5"/><ellipse cx="120" cy="85" rx="102" ry="40" transform="rotate(27 120 85)" stroke="#C4B4D4" strokeOpacity=".7"/><circle cx="48" cy="39" r="9" fill="#E5B4C6"/><circle cx="193" cy="131" r="12" fill="#C6B7DC"/><path d="M120 108s-28-17-28-35a15 15 0 0 1 28-8 15 15 0 0 1 28 8c0 18-28 35-28 35Z" fill="url(#rf-orbit)" fillOpacity=".55"/><circle cx="191" cy="39" r="2.5" fill="#C4AFBE"/><circle cx="64" cy="136" r="2" fill="#C4AFBE"/></svg>;}
    function InfoIcon(){return <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.2" aria-hidden="true"><circle cx="10" cy="10" r="8"/><path d="M10 9v5M10 5.5v1"/></svg>;}
    function BirthCard({id,value,setValue,cities}) {
        const change=(key,next)=>setValue({...value,[key]:next});
        return <fieldset className={`rf-person ${id==='b'?'rf-person-b':''}`}>
            <legend><span className="rf-letter">{id.toUpperCase()}</span>{id==='a'?'你的出生资料':'另一位的出生资料'}</legend>
            <div className="rf-fields">
                <div className="rf-field"><label htmlFor={`${id}-name`}>称呼<small>选填</small></label><input id={`${id}-name`} maxLength="20" value={value.name} onChange={e=>change('name',e.target.value)} placeholder={id==='a'?'你':'另一位'} autoComplete="off"/></div>
                <div className="rf-field"><label htmlFor={`${id}-date`}>出生日期</label><input id={`${id}-date`} type="date" min="1900-01-01" max={localDate()} required value={value.date} onChange={e=>change('date',e.target.value)}/></div>
                <div className="rf-field rf-field-wide"><label htmlFor={`${id}-city`}>出生地</label><select id={`${id}-city`} value={value.city} onChange={e=>change('city',e.target.value)}><option value="">其他城市 / 出生地不详</option>{cities.map(city=><option value={city.id} key={city.id}>{city.name}</option>)}</select></div>
                {!value.city && <div className="rf-field rf-field-wide"><label htmlFor={`${id}-zone`}>出生地时区</label><select id={`${id}-zone`} value={value.tz_str} onChange={e=>change('tz_str',e.target.value)}>{ZONES.map(([zone,name])=><option value={zone} key={zone}>{name}</option>)}</select></div>}
                <div className="rf-field rf-field-wide"><label className="rf-known"><input type="checkbox" checked={value.known} onChange={e=>change('known',e.target.checked)}/>知道准确出生时间</label>{value.known && <><label htmlFor={`${id}-time`}>出生时间<small>出生地当地时间</small></label><input id={`${id}-time`} type="time" required value={value.time} onChange={e=>change('time',e.target.value)}/></>}</div>
            </div>
        </fieldset>;
    }
    function Evidence({events,precision}) {
        const display=(value)=> value ? (precision==='timed'?value.slice(0,16).replace('T',' '):value.slice(0,10)) : '搜索范围内未确定';
        return <details className="rf-evidence"><summary>查看计算依据 · {events.length} 项</summary><div className="rf-evidence-list">{events.map(event=><div className="rf-evidence-row" key={event.id}><span className="rf-layer-label">{LAYERS[event.layer]}{event.background?' · 持续背景':''}{event.repeated?' · 有重复经过':''}</span><strong>{event.title}</strong>{event.windows ? event.windows.map((w,i)=><p key={i}>{display(w.visible_start)} 至 {display(w.visible_end)}{w.exact_in_period.length>0?` · ${precision==='timed'?'精确相位':'估算日期'}：${w.exact_in_period.map(display).join('、')}`:''}{w.continuing_from_before?' · 此前已持续':''}{w.continuing_after?' · 延续至区间后':''}</p>) : <p>{event.tone} · 相位误差 {event.orb}°</p>}</div>)}</div>{!events.length && <p className="rf-empty">本区间未筛选出突出相位，不代表现实关系必然平静。</p>}</details>;
    }
    function Actions({items}) {return <ul className="rf-actions">{items.map((item,index)=><li key={index}><span className="rf-action-dot"/>{item}</li>)}</ul>;}
    function App(){
        const [a,setA]=useState(fresh),[b,setB]=useState(fresh),[cities,setCities]=useState([]);
        const [busy,setBusy]=useState(false),[error,setError]=useState(''),[report,setReport]=useState(null),[active,setActive]=useState('today'),[editing,setEditing]=useState(true),[elapsed,setElapsed]=useState(0),[names,setNames]=useState({a:'你',b:'另一位'});
        const controller=useRef(null),sequence=useRef(0),tabRefs=useRef([]);
        useEffect(()=>{const abort=new AbortController();fetch('/api/relationship-forecast/options',{signal:abort.signal}).then(r=>r.ok?r.json():Promise.reject()).then(data=>setCities(data.cities||[])).catch(()=>{});return ()=>abort.abort();},[]);
        useEffect(()=>{if(!busy)return;const timer=setInterval(()=>setElapsed(t=>t+1),1000);return()=>clearInterval(timer);},[busy]);
        useEffect(()=>()=>controller.current?.abort(),[]);
        const cancel=()=>{sequence.current+=1;controller.current?.abort();setBusy(false);setError('已取消等待。出生资料仍在，可重新生成。');};
        const generate=async event=>{
            event.preventDefault();if(busy)return;
            setError('');setBusy(true);setElapsed(0);
            const seq=++sequence.current,abort=new AbortController();controller.current=abort;
            const timeout=setTimeout(()=>abort.abort(),240000);
            const profile=v=>({name:v.name,date:v.date,time:v.known?v.time:null,city:v.city||null,tz_str:v.tz_str});
            try{
                const response=await fetch('/api/relationship-forecast/calculate',{method:'POST',headers:getMysticCalculationHeaders(),body:JSON.stringify({a:profile(a),b:profile(b),report_tz:Intl.DateTimeFormat().resolvedOptions().timeZone||'Asia/Shanghai'}),signal:abort.signal});
                const body=await response.json().catch(()=>({}));
                if(!response.ok)throw new Error(response.status===429?'请求较多，请稍后再试。':typeof body.detail==='string'?body.detail:response.status===422?'请核对出生日期、时间与时区，尤其是历史夏令时。':'解读暂未完成，请稍后重试。出生资料已保留。');
                const complete=body.success&&body.data?.participants?.a?.sign&&body.data?.participants?.b?.sign&&body.data?.baseline&&Array.isArray(body.data?.synastry)&&body.data?.outlook?.reading&&Array.isArray(body.data?.outlook?.events)&&PERIODS.every(p=>body.data?.periods?.[p.id]?.reading&&Array.isArray(body.data.periods[p.id].events)&&Array.isArray(body.data.periods[p.id].timeline)&&Array.isArray(body.data.periods[p.id].reading.actions));
                if(!complete)throw new Error('这次报告未完整生成，请重试。');
                if(seq!==sequence.current)return;
                setReport(body.data);setNames({a:a.name.trim()||'你',b:b.name.trim()||'另一位'});setActive('today');setEditing(false);window.scrollTo({top:0,behavior:'auto'});
            }catch(err){if(seq===sequence.current)setError(err.name==='AbortError'?'等待时间较长，本次请求已停止，可以重新尝试。':err.message||'连接暂时中断，请重试。');}
            finally{clearTimeout(timeout);if(seq===sequence.current){setBusy(false);controller.current=null;}}
        };
        const changeTab=(id)=>{setActive(id);};
        const tabKeys=(event,index)=>{let next=index;if(event.key==='ArrowRight')next=(index+1)%PERIODS.length;else if(event.key==='ArrowLeft')next=(index+PERIODS.length-1)%PERIODS.length;else if(event.key==='Home')next=0;else if(event.key==='End')next=PERIODS.length-1;else return;event.preventDefault();setActive(PERIODS[next].id);tabRefs.current[next]?.focus();};
        const current=report?.periods?.[active];
        return <>
            <header className="rf-top"><a className="rf-brand" href="/divination.html"><img src="/assets/logo.webp" alt=""/>知了</a><a className="rf-back" href="/divination.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="m14 6-6 6 6 6"/></svg>返回测算</a></header>
            <main className="rf-shell">
                {(editing||busy)&&<section className="rf-hero"><div><span className="rf-kicker">感情走势 / RELATIONSHIP</span><h1>两人的下一章</h1><p>以出生资料为起点，<br/>看看两个人的时间节奏。</p><div className="rf-chips"><span>双方比较盘</span><span>双方行运</span><span>组合盘行运</span></div></div><OrbitArt/></section>}
                {error&&<div className="rf-error" role="alert">{error}</div>}
                {busy?<section className="rf-loading" aria-live="polite" aria-busy="true"><div className="rf-loader-orbit"/><h2>正在展开两人的时间线</h2><p>计算双方星盘、组合盘与全年相位，再整理五个时间范围的解读。</p><div className="rf-loading-status">计算与解读中 · 已等待 {elapsed} 秒</div><button type="button" className="rf-link-button" onClick={cancel}>取消等待，保留资料</button></section> : editing ? <form onSubmit={generate}>
                    <div className="rf-form-grid"><BirthCard id="a" value={a} setValue={setA} cities={cities}/><BirthCard id="b" value={b} setValue={setB} cities={cities}/></div>
                    <div className="rf-form-note"><InfoIcon/><span>不知道出生时间也可以继续。报告会降低精度，不使用缺失的月亮、上升等信息。出生资料用于生成本次关系解读。</span></div>
                    <div className="rf-submit"><p>近期侧重具体时间窗口，长期侧重阶段主题。<br/>占星解读不能确认对方心意或保证现实结果。</p><button className="rf-primary" type="submit">展开两人的感情走势</button></div>
                    {report&&<button type="button" className="rf-link-button" onClick={()=>{setError('');setEditing(false);}}>返回上次报告</button>}
                </form> : report&&<>
                    <section className="rf-report-header"><div><span className="rf-kicker">两人的关系时间线</span><h1>{names.a} <span style={{color:'#b99aaa',fontWeight:400}}>与</span> {names.b}</h1><p>{SIGN_NAMES[report.participants.a.sign]} × {SIGN_NAMES[report.participants.b.sign]} · {report.date}</p></div><button type="button" className="rf-outline" onClick={()=>{setError('');setEditing(true);}}>修改资料</button></section>
                    {report.generation_source!=='model'&&<div className="rf-source-notice" role="status">部分文字解读暂未完成，标有“计算摘要”的部分展示实际相位，可通过“修改资料”重新生成。</div>}
                    <section className="rf-baseline"><div className="rf-section-label">相处背景 · 双方比较盘</div><h2>{report.baseline.headline}</h2><p>{report.baseline.text}</p><Evidence events={report.synastry} precision={report.precision}/></section>
                    <div className="rf-tabs" role="tablist" aria-label="查看时间范围">{PERIODS.map((period,index)=><button key={period.id} type="button" role="tab" id={`tab-${period.id}`} aria-controls="forecast-panel" aria-selected={active===period.id} tabIndex={active===period.id?0:-1} ref={node=>tabRefs.current[index]=node} onKeyDown={event=>tabKeys(event,index)} onClick={()=>changeTab(period.id)}>{period.name}<span>{period.hint}</span></button>)}</div>
                    <p className="rf-scale-note">{report.precision==='date_only'?'出生时间不完整，以下日期为近似参考。':'所有窗口按报告时区显示。'} 近期看细节，长期看阶段。</p>
                    <section id="forecast-panel" role="tabpanel" aria-labelledby={`tab-${active}`} tabIndex="0">
                        <div className="rf-period-grid"><article className="rf-reading"><div className="rf-range">{current.range_label} · {report.timezone}</div><h2>{current.reading.headline}</h2><p className="rf-body-text">{current.reading.text}</p><h3>这一阶段，可以留意</h3><Actions items={current.reading.actions}/></article><aside className="rf-timeline"><h3>{active==='today'?'当天观察窗口':'阶段观察窗口'}</h3>{current.timeline.length?<ol>{current.timeline.map((row,index)=><li key={`${row.event_id}-${index}`}><time dateTime={row.at}>{report.precision==='timed'?row.at.slice(0,16).replace('T',' '):row.at.slice(0,10)}</time><p>{row.title}</p><small>{row.kind==='exact'?'精确相位窗口':'相位活跃区间'}{report.precision==='date_only'?' · 近似日期':''}</small></li>)}</ol>:<p className="rf-empty">这一范围没有筛出突出的相位窗口。</p>}<p className="rf-timeline-foot">窗口来自星体位置计算，表示占星主题的活跃范围，不表示这天必然发生表白、分手或复合。</p></aside></div>
                        <Evidence events={current.events} precision={report.precision}/>
                    </section>
                    <section className="rf-outlook"><div className="rf-section-label">把时间线放远一些</div><div className="rf-range">一年末趋势 · {report.outlook.range_label}</div><h2>{report.outlook.reading.headline}</h2><p>{report.outlook.reading.text}</p><Actions items={report.outlook.reading.actions}/><Evidence events={report.outlook.events} precision={report.precision}/></section>
                    <div className="rf-limitations">{report.limitations.map((line,index)=><p key={index}>{line}</p>)}<p>AI 辅助整理 · 占星文化与自我探索</p></div>
                </>}
                <footer className="rf-legal"><span>知了 · 陪你理解每一段关系</span><span><a href="/terms.html">用户协议</a><a href="/privacy.html">隐私政策</a></span></footer>
            </main>
            <window.TabBar currentPath="divination.html" variant="playful"/>
        </>;
    }
    ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
})();