/* app.jsx — 加油站法律服务 AI 助手 (WeChat-H5 prototype) */
const { useState, useEffect, useRef } = React;

/* ────────────────────────────────────────────────────────────
   Splash mask — 3s, two lines, fades to team page
   ──────────────────────────────────────────────────────────── */
function Splash({ onDone }){
  const [out, setOut] = useState(false);
  useEffect(()=>{
    const t1 = setTimeout(()=>setOut(true), 2600);
    const t2 = setTimeout(onDone, 3000);
    return ()=>{ clearTimeout(t1); clearTimeout(t2); };
  },[]);
  return (
    <div style={{
      position:'absolute', inset:0, zIndex:48,
      background:'linear-gradient(165deg,#5B7BF8 0%,#3B6EF6 48%,#6E5FE6 100%)',
      display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
      color:'#fff', textAlign:'center', padding:'0 36px',
      opacity: out?0:1, transition:'opacity .4s ease',
    }}>
      {/* emblem */}
      <div style={{position:'relative', marginBottom:38}}>
        <span style={{position:'absolute', inset:-14, borderRadius:'50%', border:'2px solid rgba(255,255,255,0.5)', animation:'pulseRing 2.4s ease-out infinite'}}></span>
        <div style={{
          width:92, height:92, borderRadius:26,
          background:'rgba(255,255,255,0.14)', border:'1px solid rgba(255,255,255,0.35)',
          backdropFilter:'blur(6px)',
          display:'flex', alignItems:'center', justifyContent:'center',
          boxShadow:'0 14px 40px rgba(20,30,90,0.4)',
        }}>{Icon.scale('#fff')}</div>
      </div>
      <div style={{fontSize:25, fontWeight:700, letterSpacing:1, lineHeight:1.35, textShadow:'0 2px 14px rgba(20,30,90,0.3)'}}>
        加油站法律服务 AI 助手
      </div>
      <div style={{fontSize:15.5, fontWeight:400, marginTop:14, color:'rgba(255,255,255,0.86)', letterSpacing:4, paddingLeft:4}}>
        专为中石油企业
      </div>
      {/* progress */}
      <div style={{position:'absolute', bottom:104, width:120, height:3, borderRadius:99, background:'rgba(255,255,255,0.25)', overflow:'hidden'}}>
        <div style={{height:'100%', background:'#fff', transformOrigin:'left', animation:'barFill 3s linear forwards'}}></div>
      </div>
      <div style={{position:'absolute', bottom:64, fontSize:12, color:'rgba(255,255,255,0.6)', letterSpacing:2}}>
        正在为您接入专属法律顾问…
      </div>
    </div>
  );
}

/* ────────────────────────────────────────────────────────────
   对话 / 服务 toggle
   ──────────────────────────────────────────────────────────── */
function Toggle({ tab, setTab, light }){
  const base = light ? 'rgba(255,255,255,0.62)' : C.ink3;
  const active = light ? '#fff' : C.ink;
  const Item = ({ id, label }) => (
    <div onClick={()=>setTab(id)} style={{position:'relative', cursor:'pointer', padding:'2px 2px'}}>
      <span style={{fontSize:21, fontWeight:tab===id?700:500, color:tab===id?active:base, transition:'color .2s'}}>{label}</span>
      {tab===id && <div style={{position:'absolute', left:'50%', transform:'translateX(-50%)', bottom:-7, width:20, height:3, borderRadius:99, background:active}}></div>}
    </div>
  );
  return (
    <div style={{display:'flex', alignItems:'center', gap:22, padding:'12px 18px 14px'}}>
      <div onClick={()=>setTab('chat')} style={{display:'flex', cursor:'pointer', marginRight:-6}}>{Icon.back(light?'#fff':C.ink)}</div>
      <Item id="chat" label="对话" />
      <Item id="service" label="服务" />
    </div>
  );
}

/* ────────────────────────────────────────────────────────────
   对话 — team profile + working chat
   ──────────────────────────────────────────────────────────── */
function ChatScreen({ agent, setTab, messages, onSend, onReset }){
  const [draft, setDraft] = useState('');
  const [subtab, setSubtab] = useState('专业擅长');
  const scroller = useRef(null);
  const hasThread = messages.length > 0;

  useEffect(()=>{ if(scroller.current) scroller.current.scrollTop = scroller.current.scrollHeight; }, [messages]);

  const send = (text)=>{ const t=(text??draft).trim(); if(!t) return; setDraft(''); onSend(t); };
  const subContent = { '专业擅长':agent.skill, '团队简介':agent.intro, '获奖荣誉':agent.awards }[subtab];

  return (
    <div style={{display:'flex', flexDirection:'column', height:'100%', background:C.bg}}>
      {/* hero */}
      <div style={{background:C.hero, flexShrink:0, paddingBottom: hasThread?14:20, position:'relative'}}>
        <Toggle tab="chat" setTab={setTab} light />
        <div style={{textAlign:'center', padding: hasThread?'0 0 2px':'6px 0 0'}}>
          <div style={{color:'#fff', fontWeight:700, fontSize: hasThread?20:25, letterSpacing:1, textShadow:'0 2px 12px rgba(20,30,90,0.25)'}}>{hasThread ? agent.name : '加油站法律服务 AI 助手'}</div>
          {!hasThread && <div style={{color:'rgba(255,255,255,0.85)', fontSize:14, marginTop:8, letterSpacing:.5}}>服务对象：专为中石油企业</div>}
        </div>
        {!hasThread && (
          <div style={{height:4}}></div>
        )}
      </div>

      {/* scroll body */}
      <div ref={scroller} className="noscroll" style={{flex:1, overflowY:'auto', padding: hasThread?'16px 16px 8px':'18px 16px 8px'}}>
        {!hasThread && (
          <React.Fragment>
            {/* profile card */}
            <div style={{background:'#fff', borderRadius:18, padding:'20px 18px', boxShadow:'0 8px 26px rgba(31,55,120,0.08)'}}>
              <div style={{fontSize:21, fontWeight:700, color:C.ink}}>{agent.person}</div>
              <div style={{display:'flex', flexWrap:'wrap', gap:8, margin:'14px 0 4px'}}>
                {agent.tags.map(t=>(
                  <span key={t} style={{background:C.chip, color:'#5B6273', fontSize:13.5, padding:'5px 11px', borderRadius:8}}>{t}</span>
                ))}
              </div>
              <div style={{height:1, background:C.line, margin:'16px 0 0'}}></div>
              <div style={{display:'flex', gap:26, marginTop:14}}>
                {['专业擅长','团队简介','获奖荣誉'].map(s=>(
                  <div key={s} onClick={()=>setSubtab(s)} style={{position:'relative', cursor:'pointer', paddingBottom:8}}>
                    <span style={{fontSize:15.5, fontWeight:subtab===s?700:500, color:subtab===s?C.brand:C.ink2}}>{s}</span>
                    {subtab===s && <div style={{position:'absolute', left:0, bottom:0, width:24, height:3, borderRadius:99, background:C.brand}}></div>}
                  </div>
                ))}
              </div>
              <div className="fade-enter" key={subtab} style={{marginTop:14, fontSize:15.5, lineHeight:1.72, color:'#2C3340', textWrap:'pretty'}}>{subContent}</div>
            </div>

            {/* suggested questions */}
            <div style={{margin:'22px 4px 10px', fontSize:13.5, color:C.ink3, letterSpacing:.5}}>大家都在问</div>
            <div style={{display:'flex', flexDirection:'column', gap:12}}>
              {agent.questions.map(q=>(
                <div key={q} onClick={()=>send(q)} style={{
                  background:'#fff', borderRadius:14, padding:'16px 16px', display:'flex', alignItems:'center', gap:14,
                  border:'1px solid #EEF1F6', cursor:'pointer',
                }}>
                  <div style={{width:38, height:38, borderRadius:9, background:C.chip, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>{Icon.hash()}</div>
                  <div style={{fontSize:17, fontWeight:600, color:C.ink, lineHeight:1.4}}>{q}</div>
                </div>
              ))}
            </div>
          </React.Fragment>
        )}

        {hasThread && messages.map((m,i)=>(
          <div key={i} style={{display:'flex', justifyContent:m.role==='user'?'flex-end':'flex-start', marginBottom:16, gap:10}}>
            {m.role==='ai' && <Avatar agent={agent} size={34} ai={false} />}
            <div style={{
              maxWidth:'78%', padding:'12px 15px', borderRadius:16, fontSize:15.5, lineHeight:1.66,
              whiteSpace:'pre-wrap', textWrap:'pretty',
              background: m.role==='user'?C.brand:'#fff',
              color: m.role==='user'?'#fff':'#2C3340',
              borderTopRightRadius: m.role==='user'?5:16,
              borderTopLeftRadius: m.role==='ai'?5:16,
              boxShadow: m.role==='user'?'none':'0 4px 16px rgba(31,55,120,0.06)',
            }}>
              {m.typing
                ? <span style={{display:'inline-flex', gap:5, padding:'3px 2px'}}>
                    {[0,1,2].map(d=><span key={d} style={{width:7, height:7, borderRadius:'50%', background:'#C2C8D4', animation:`blink 1.2s ${d*0.16}s infinite`}}></span>)}
                  </span>
                : m.text}
            </div>
          </div>
        ))}
      </div>

      {/* bottom bar */}
      <div style={{flexShrink:0, background:'#fff', borderTop:'0.5px solid '+C.line, padding:'12px 16px 10px'}}>
        {!hasThread ? (
          <div style={{display:'flex', flexWrap:'wrap', gap:10, marginBottom:12}}>
            {['新对话','转接律师','分享','导出报告'].map(b=>(
              <button key={b} onClick={b==='新对话'?onReset:undefined} style={{
                border:`1px solid ${C.brand}`, color:C.brand, background:'#fff',
                fontSize:15.5, fontWeight:600, padding:'9px 20px', borderRadius:99, cursor:'pointer', fontFamily:'inherit',
              }}>{b}</button>
            ))}
          </div>
        ) : (
          <div style={{display:'flex', gap:10, marginBottom:10}}>
            <button onClick={onReset} style={{border:`1px solid ${C.brand}`, color:C.brand, background:'#fff', fontSize:14, fontWeight:600, padding:'7px 16px', borderRadius:99, cursor:'pointer', fontFamily:'inherit'}}>新对话</button>
            <button style={{border:`1px solid ${C.brand}`, color:C.brand, background:'#fff', fontSize:14, fontWeight:600, padding:'7px 16px', borderRadius:99, cursor:'pointer', fontFamily:'inherit'}}>转接律师</button>
          </div>
        )}
        <div style={{display:'flex', alignItems:'center', gap:3, marginBottom:9, color:C.ink3, fontSize:12.5}}>
          {Icon.lock()}<span>对话内容已开启隐私保护</span>
        </div>
        <div style={{display:'flex', alignItems:'center', gap:10}}>
          <input
            value={draft} onChange={e=>setDraft(e.target.value)}
            onKeyDown={e=>{ if(e.key==='Enter') send(); }}
            placeholder="描述您的法律问题…"
            style={{
              flex:1, height:46, border:'none', outline:'none', background:C.chip,
              borderRadius:99, padding:'0 18px', fontSize:16, color:C.ink, fontFamily:'inherit',
            }} />
          <div onClick={()=>send()} style={{
            width:46, height:46, borderRadius:'50%', flexShrink:0, cursor:'pointer',
            background: draft.trim()?C.brand:C.brandSoft, display:'flex', alignItems:'center', justifyContent:'center',
            transition:'background .2s',
          }}>{Icon.send('#fff')}</div>
        </div>
      </div>
    </div>
  );
}

/* ────────────────────────────────────────────────────────────
   服务 — lawyer directory
   ──────────────────────────────────────────────────────────── */
function ServiceScreen({ setTab, onPick }){
  const [cat, setCat] = useState('律师分身');
  const [filter, setFilter] = useState('全部');
  const list = AGENTS.filter(a => filter==='全部' || a.field===filter || a.tags.includes(filter));

  return (
    <div style={{display:'flex', flexDirection:'column', height:'100%',
      background:'linear-gradient(180deg,#EAEAF8 0%,#EEF2F9 22%)'}}>
      <Toggle tab="service" setTab={setTab} />
      <div className="noscroll" style={{flex:1, overflowY:'auto', padding:'0 16px 24px'}}>
        {/* search */}
        <div style={{display:'flex', alignItems:'center', gap:10, background:'#fff', borderRadius:99, padding:'13px 18px', boxShadow:'0 2px 10px rgba(31,55,120,0.05)'}}>
          {Icon.search()}<span style={{color:C.ink3, fontSize:16}}>搜索服务</span>
        </div>
        {/* category tabs */}
        <div className="noscroll" style={{display:'flex', gap:26, overflowX:'auto', padding:'20px 2px 6px'}}>
          {CATEGORIES.map(c=>(
            <div key={c} onClick={()=>setCat(c)} style={{position:'relative', cursor:'pointer', whiteSpace:'nowrap', paddingBottom:8}}>
              <span style={{fontSize:20, fontWeight:cat===c?700:500, color:cat===c?C.ink:'#9AA3B2'}}>{c}</span>
              {cat===c && <div style={{position:'absolute', left:'50%', transform:'translateX(-50%)', bottom:0, width:22, height:3, borderRadius:99, background:C.brand}}></div>}
            </div>
          ))}
        </div>
        {/* filter chips */}
        <div className="noscroll" style={{display:'flex', gap:10, overflowX:'auto', padding:'10px 2px 4px'}}>
          {FILTERS.map(f=>(
            <div key={f} onClick={()=>setFilter(f)} style={{
              whiteSpace:'nowrap', cursor:'pointer', padding:'9px 18px', borderRadius:99, fontSize:15, fontWeight:600,
              background: filter===f?C.brand:'#fff', color: filter===f?'#fff':'#5B6273',
              boxShadow: filter===f?'none':'0 1px 4px rgba(31,55,120,0.05)',
            }}>{f}</div>
          ))}
        </div>
        {/* cards */}
        <div style={{display:'flex', flexDirection:'column', gap:16, marginTop:18}}>
          {list.map(a=>(
            <div key={a.id} onClick={()=>onPick(a)} style={{
              background:'#fff', borderRadius:18, padding:'18px 16px', cursor:'pointer',
              display:'flex', gap:14, boxShadow:'0 8px 24px rgba(31,55,120,0.07)',
            }}>
              <Avatar agent={a} size={52} />
              <div style={{flex:1, minWidth:0}}>
                <div style={{fontSize:18.5, fontWeight:700, color:C.ink}}>{a.name}</div>
                <div style={{display:'flex', flexWrap:'wrap', gap:7, margin:'10px 0'}}>
                  <RibbonBadge>{a.org}</RibbonBadge>
                  <GoldBadge>律师团队</GoldBadge>
                  <OutlineChip>{a.field}</OutlineChip>
                </div>
                <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:9}}>
                  <LevelTag>{a.level}</LevelTag>
                  <span style={{fontSize:15.5, color:C.ink, fontWeight:500}}>{a.firm}</span>
                </div>
                <div style={{fontSize:14.5, lineHeight:1.6, color:C.ink2, textWrap:'pretty',
                  display:'-webkit-box', WebkitLineClamp:2, WebkitBoxOrient:'vertical', overflow:'hidden'}}>
                  擅长：{a.skill}
                </div>
                <div style={{display:'flex', alignItems:'center', gap:6, marginTop:11, color:C.ink3, fontSize:13.5}}>
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M4 5h16v11H8l-4 4V5z" stroke="#9AA3B2" strokeWidth="1.7" strokeLinejoin="round"/></svg>
                  {a.consults}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ────────────────────────────────────────────────────────────
   App
   ──────────────────────────────────────────────────────────── */
function App(){
  const [splash, setSplash] = useState(true);
  const [tab, setTab] = useState('service');
  const [agent, setAgent] = useState(AGENTS[0]);
  const [threads, setThreads] = useState({}); // agentId -> messages[]
  const msgs = threads[agent.id] || [];

  const setMsgs = (updater)=> setThreads(prev=>({ ...prev, [agent.id]: typeof updater==='function'?updater(prev[agent.id]||[]):updater }));

  const onSend = (text)=>{
    setMsgs(m=>[...m, {role:'user', text}, {role:'ai', typing:true}]);
    const cur = agent;
    setTimeout(()=>{
      setThreads(prev=>{
        const arr = (prev[cur.id]||[]).slice();
        const ans = `您好，关于「${text}」，${cur.person}团队为您梳理如下：\n\n1. 先核实相关资质、证照与材料是否齐全；\n2. 对照现行法规判断主要合规风险点；\n3. 留存证据并按法定程序申报、整改或申辩。\n\n本回复由 AI 依据公开法规生成，仅供参考。如需正式法律意见，可点击下方「转接律师」由 ${cur.person} 团队人工跟进。`;
        arr[arr.length-1] = {role:'ai', text:ans};
        return { ...prev, [cur.id]: arr };
      });
    }, 1100);
  };
  const onReset = ()=> setMsgs([]);
  const onPick = (a)=>{ setAgent(a); setTab('chat'); };

  return (
    <div className="phone">
      <div style={{height:'100%', display:'flex', flexDirection:'column', position:'relative'}}>
        <div style={{flex:1, minHeight:0}}>
          {tab==='chat'
            ? <ChatScreen agent={agent} setTab={setTab} messages={msgs} onSend={onSend} onReset={onReset} />
            : <ServiceScreen setTab={setTab} onPick={onPick} />}
        </div>
        {splash && <Splash onDone={()=>setSplash(false)} />}
      </div>
    </div>
  );
}

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