// Page 9: AI Content Generation (2nd most important page)

const AIContentPage = () => {
  const c = useTokens();
  const D = window.HAOLIN_DATA;

  const [template, setTemplate] = useState('review');
  const [generated, setGenerated] = useState(false);
  const [loading, setLoading] = useState(false);
  const [activeDraft, setActiveDraft] = useState(0);
  const [draftText, setDraftText] = useState([
    `週六早晨的新店溪畔，12 對親子準時到齊。這是溪畔共學會第 43 次活動，美君說：「我們沒有規劃什麼，就是一起走。」\n\n孩子們沿著溪岸撿石頭、看水鳥，爸媽們在後面聊天、交換育兒小撇步。一個小時半就這樣過去了，沒有人看手機。\n\n阿德爸爸帶著 4 歲的豆豆，他說：「這是我們連續第 12 次來。豆豆現在認得五種水鳥。」`,
    `認識美君的人都知道，她曾經是一位小學老師。離職後當了全職媽媽，她總覺得自己少了什麼。\n\n「我需要一個讓我還能陪很多孩子的方式，不是只有我自己的兩個。」她說。\n\n於是新店溪畔共學會誕生了。從一開始只有 3 個家庭，到現在每週穩定 8-12 組親子。「其實我沒有做什麼，我只是每週六都出現。」`,
    `「我以為我是來給孩子找玩伴的，結果發現，我才是最被療癒的那個。」─ 參加者 小菁媽\n\n在溪畔共學會的第一次聚會，小菁帶著 2 歲的兒子加入。她說自己有產後憂鬱，朋友都說「去找人講話」，但要去哪裡呢？\n\n「這裡沒有人會問你『怎麼不上班』，也不會有人評價你的媽媽當得怎樣。大家就是在那邊，一起看孩子玩。」`,
  ]);

  const templates = [
    { key:'review',  label:'活動回顧', desc:'客觀紀錄活動過程' },
    { key:'profile', label:'人物特寫', desc:'聚焦主揪或參加者故事' },
    { key:'voice',   label:'參加心得', desc:'第一人稱的體驗分享' },
  ];

  const photos = Array(12).fill(0);

  const generate = () => {
    setLoading(true);
    setTimeout(() => { setLoading(false); setGenerated(true); }, 1800);
  };

  return (
    <div style={{padding:'32px 40px', background:c.bg, minHeight:'100vh'}}>
      <div style={{marginBottom:24}}>
        <div style={{display:'flex', alignItems:'center', gap:8, fontSize:13, color:c.inkMuted, marginBottom:8}}>
          <span>內容管理</span> <IconChevronR size={12}/> <span>AI 內容生成</span>
        </div>
        <h1 style={{fontFamily:'var(--hl-font-heading)', fontSize:30, color:c.ink, margin:0, fontWeight:500}}>幫 <span style={{color:c.primary}}>新店溪畔共學會 · 4/19</span> 產出特派員報導</h1>
        <p style={{color:c.inkSoft, fontSize:14, margin:'8px 0 0'}}>主揪美君已上傳活動資料，選一個模板讓 AI 幫你寫出初稿，你可以再編輯。</p>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'320px 280px 1fr', gap:20, alignItems:'flex-start'}}>
        {/* LEFT: raw materials */}
        <Card padding={false} style={{overflow:'hidden'}}>
          <div style={{padding:'16px 20px', borderBottom:`1px solid ${c.line}`, background:c.bgSoft}}>
            <div style={{fontSize:11, color:c.inkMuted, letterSpacing:'0.08em', fontWeight:600, marginBottom:4}}>主揪上傳</div>
            <div style={{fontSize:15, fontWeight:600, color:c.ink}}>原始素材</div>
          </div>
          <div style={{padding:'18px 20px'}}>
            <div style={{fontSize:12, color:c.inkMuted, marginBottom:8}}>12 張照片</div>
            <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:6, marginBottom:18}}>
              {photos.map((_, i) => (
                <div key={i} style={{aspectRatio:'1', borderRadius:'var(--hl-radius-sm)', overflow:'hidden'}}>
                  <PhotoPlaceholder width={80} height={80} label=""/>
                </div>
              ))}
            </div>
            <Divider style={{margin:'4px 0 14px'}}/>
            <MetaRow icon={<IconCalendar size={14}/>} label="活動日期" value="2026 / 04 / 19 (六)"/>
            <MetaRow icon={<IconPin size={14}/>} label="地點" value="新店溪碧潭段"/>
            <MetaRow icon={<IconUsers size={14}/>} label="人數" value="12 組親子 (共 27 人)"/>
            <Divider style={{margin:'14px 0'}}/>
            <div style={{fontSize:12, color:c.inkMuted, marginBottom:6}}>主揪文字紀錄</div>
            <div style={{fontSize:13, color:c.inkSoft, lineHeight:1.75, padding:12, background:c.bgAlt, borderRadius:'var(--hl-radius-sm)'}}>
              今天天氣好，小孩都很開心。阿德家豆豆第一次看到翠鳥。小菁媽今天第一次來，有哭了一下，大家陪她坐了一下下再繼續走。下次活動 4/26。
            </div>
          </div>
        </Card>

        {/* MIDDLE: template */}
        <div style={{position:'sticky', top:20, display:'flex', flexDirection:'column', gap:12}}>
          <Card padding={false}>
            <div style={{padding:'16px 20px', borderBottom:`1px solid ${c.line}`, background:c.bgSoft}}>
              <div style={{fontSize:11, color:c.inkMuted, letterSpacing:'0.08em', fontWeight:600, marginBottom:4}}>選擇模板</div>
              <div style={{fontSize:15, fontWeight:600, color:c.ink}}>報導風格</div>
            </div>
            <div style={{padding:'14px', display:'flex', flexDirection:'column', gap:8}}>
              {templates.map(t => (
                <button key={t.key} onClick={()=>setTemplate(t.key)} style={{
                  padding:'14px 16px', border:`1px solid ${template===t.key ? c.primary : c.line}`,
                  background: template===t.key ? c.primarySoft : c.paper,
                  borderRadius:'var(--hl-radius-md)',
                  textAlign:'left', cursor:'pointer',
                  fontFamily:'var(--hl-font-body)',
                }}>
                  <div style={{fontSize:14, fontWeight:600, color: template===t.key ? c.primaryDark : c.ink, marginBottom:4}}>{t.label}</div>
                  <div style={{fontSize:12, color:c.inkSoft}}>{t.desc}</div>
                </button>
              ))}
            </div>
            <div style={{padding:'0 14px 14px'}}>
              <Button variant="primary" style={{width:'100%'}} onClick={generate} disabled={loading}>
                <IconSparkle size={16}/> {loading ? '產生中⋯⋯' : (generated ? '重新產生' : '讓 AI 寫三個版本')}
              </Button>
            </div>
          </Card>
          <div style={{padding:16, background:c.bgAlt, borderRadius:'var(--hl-radius-lg)', fontSize:12, color:c.inkSoft, lineHeight:1.7}}>
            <div style={{display:'flex', gap:6, alignItems:'center', marginBottom:6, color:c.primary, fontWeight:600}}>
              <IconSparkle size={13}/> 小提醒
            </div>
            AI 產出的是初稿，特派員應該再依現場的感受調整。最怕大家都長得一樣。
          </div>
        </div>

        {/* RIGHT: generated drafts */}
        <Card padding={false}>
          <div style={{padding:'16px 20px 0', borderBottom:`1px solid ${c.line}`}}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:14}}>
              <div>
                <div style={{fontSize:11, color:c.inkMuted, letterSpacing:'0.08em', fontWeight:600, marginBottom:4}}>AI 產出</div>
                <div style={{fontSize:15, fontWeight:600, color:c.ink}}>三個草稿，選一個來編</div>
              </div>
              {generated && <div style={{fontSize:12, color:c.accent, fontWeight:500, display:'flex', gap:4, alignItems:'center'}}><IconCheck size={14}/> 已產生</div>}
            </div>
            {generated && (
              <div style={{display:'flex', gap:4}}>
                {[0,1,2].map(i => (
                  <button key={i} onClick={()=>setActiveDraft(i)} style={{
                    padding:'10px 16px', border:'none', background:'none', cursor:'pointer',
                    fontSize:13, fontFamily:'var(--hl-font-body)',
                    fontWeight: activeDraft===i ? 600 : 500,
                    color: activeDraft===i ? c.primary : c.inkSoft,
                    borderBottom: activeDraft===i ? `2px solid ${c.primary}` : '2px solid transparent',
                    marginBottom:-1,
                  }}>
                    版本 {['一','二','三'][i]} <span style={{fontSize:11, color:c.inkMuted, marginLeft:4}}>{['寫實','溫情','引言'][i]}</span>
                  </button>
                ))}
              </div>
            )}
          </div>
          <div style={{padding:'24px 28px', minHeight:400}}>
            {loading && (
              <div style={{textAlign:'center', padding:'60px 20px'}}>
                <div style={{display:'inline-flex', gap:6, alignItems:'center', color:c.inkMuted, fontSize:14, marginBottom:10}}>
                  <DotsLoader/>
                </div>
                <div style={{fontSize:14, color:c.inkSoft}}>AI 正在閱讀原始素材⋯⋯</div>
              </div>
            )}
            {!loading && !generated && (
              <div style={{textAlign:'center', padding:'80px 20px', color:c.inkMuted}}>
                <EmptyIllustration size={120}/>
                <p style={{marginTop:16, fontSize:14, lineHeight:1.7}}>選一個模板，按「讓 AI 寫三個版本」，<br/>這裡就會出現三個風格的草稿。</p>
              </div>
            )}
            {generated && !loading && (
              <div>
                <div style={{fontFamily:'var(--hl-font-heading)', fontSize:24, color:c.ink, fontWeight:500, marginBottom:16}}>
                  {['在新店溪的週六早上，他們把孩子交給了彼此', '美君說：「我沒有什麼，只是每週都出現。」', '「我以為我是來給孩子找玩伴的⋯⋯」'][activeDraft]}
                </div>
                <textarea
                  value={draftText[activeDraft]}
                  onChange={e=>{
                    const next = [...draftText];
                    next[activeDraft] = e.target.value;
                    setDraftText(next);
                  }}
                  style={{
                    width:'100%', minHeight:240, border:`1px dashed ${c.line}`,
                    borderRadius:'var(--hl-radius-sm)', padding:'14px 16px',
                    fontSize:15, lineHeight:1.85, color:c.ink,
                    fontFamily:'var(--hl-font-body)', background: c.bgSoft,
                    resize:'vertical', outline:'none',
                  }}
                />
                <div style={{fontSize:11, color:c.inkMuted, marginTop:8, display:'flex', gap:14}}>
                  <span>字數：{draftText[activeDraft].length}</span>
                  <span>估讀時間：約 3 分鐘</span>
                  <span style={{marginLeft:'auto', color:c.accent, display:'inline-flex', gap:4, alignItems:'center'}}><IconEdit size={11}/> 可直接編輯</span>
                </div>
              </div>
            )}
          </div>
          {generated && (
            <div style={{padding:'16px 24px', borderTop:`1px solid ${c.line}`, background:c.bgSoft, display:'flex', gap:10, borderRadius:'0 0 var(--hl-radius-xl) var(--hl-radius-xl)'}}>
              <Button variant="secondary" size="sm"><IconSave size={14}/> 儲存草稿</Button>
              <Button variant="primary" size="sm">發布為報導</Button>
              <Button variant="ghost" size="sm" style={{marginLeft:'auto'}}>退回主揪補資料</Button>
            </div>
          )}
        </Card>
      </div>
    </div>
  );
};

const MetaRow = ({ icon, label, value }) => {
  const c = useTokens();
  return (
    <div style={{display:'flex', alignItems:'center', gap:10, padding:'6px 0'}}>
      <span style={{color:c.inkMuted}}>{icon}</span>
      <span style={{fontSize:12, color:c.inkMuted, minWidth:64}}>{label}</span>
      <span style={{fontSize:13, color:c.ink, fontWeight:500}}>{value}</span>
    </div>
  );
};

Object.assign(window, { AIContentPage });