// ポータル / ホーム（テーマ0）v3
// - ヒーロー内に小型クイックアクションを集約、KPI・活動ログはデフォルト非表示
// - 業務メニューはシンプルなボタン列（6項目）
// - 「カスタマイズ」でドラッグ&ドロップ並べ替え＋表示/非表示切替（ユーザーごとに localStorage 保存）
// - お気に入り登録＋「すべて／お気に入り」フィルタ
// メニューは links があれば公開中モックへ外部遷移（新規タブ）、無ければ内蔵デモ画面へ。
const openExternal = (url) => window.open(url, '_blank', 'noopener');

// ---- ユーザーごとの設定（モック: localStorage に保存） ----
const PORTAL_PREFS_KEY = 'cx-portal-prefs-v4:ON-10482';
const SECTION_META = {
  kpi:      { label: 'KPI サマリー（案件・帳票・AI検索・アラート）' },
  activity: { label: '最近の活動' },
};
const DEFAULT_PREFS = {
  order: ['kpi', 'activity'],
  hidden: { kpi: true, activity: true },   // 優先度を下げデフォルト非表示（カスタマイズで表示可）
  menuOrder: ['search', 'report', 'ict', 'estimate', 'drawing', 'masterdb', 'admin'],
  favorites: ['search', 'report', 'estimate'],
  themeFilter: 'all',                      // all | fav
};
const loadPrefs = () => {
  try {
    const raw = JSON.parse(localStorage.getItem(PORTAL_PREFS_KEY) || 'null');
    if (!raw) return DEFAULT_PREFS;
    const menuOrder = [...(raw.menuOrder || [])];
    DEFAULT_PREFS.menuOrder.forEach(id => { if (!menuOrder.includes(id)) menuOrder.push(id); });
    return { ...DEFAULT_PREFS, ...raw, hidden: { ...raw.hidden }, menuOrder,
             order: raw.order?.length ? raw.order : DEFAULT_PREFS.order };
  } catch (e) { return DEFAULT_PREFS; }
};
const savePrefs = (p) => { try { localStorage.setItem(PORTAL_PREFS_KEY, JSON.stringify(p)); } catch (e) {} };

// 配列内で from を to の位置へ移動
const moveInArray = (arr, fromId, toId) => {
  const a = [...arr];
  const i = a.indexOf(fromId), j = a.indexOf(toId);
  if (i < 0 || j < 0) return arr;
  a.splice(i, 1); a.splice(j, 0, fromId);
  return a;
};

const PortalScreen = ({ onOpenTheme, menuStyle = 'art', layout = 'cards' }) => {
  const d = CXDATA;
  const [prefs, setPrefsRaw] = useState(loadPrefs);
  const [editMode, setEditMode] = useState(false);
  const [dragItem, setDragItem] = useState(null);   // {kind:'menu'|'sec', id}
  const setPrefs = (p) => { setPrefsRaw(p); savePrefs(p); };

  // メニューの主遷移: 外部モック優先、無ければ内蔵デモ。primary:'internal' は内蔵画面優先
  const openTheme = (t) => {
    if (t.primary !== 'internal' && t.links && t.links.length) openExternal(t.links[0].url);
    else onOpenTheme(t.id);
  };
  const themeById = (id) => d.themes.find(t => t.id === id);

  // お気に入り
  const isFav = (id) => prefs.favorites.includes(id);
  const toggleFav = (id) => setPrefs({
    ...prefs,
    favorites: isFav(id) ? prefs.favorites.filter(f => f !== id) : [...prefs.favorites, id],
  });
  const setFilter = (f) => setPrefs({ ...prefs, themeFilter: f });

  // カスタマイズ操作
  const toggleSec = (id) => setPrefs({ ...prefs, hidden: { ...prefs.hidden, [id]: !prefs.hidden[id] } });
  const moveMenu = (fromId, toId) => setPrefs({ ...prefs, menuOrder: moveInArray(prefs.menuOrder, fromId, toId) });
  const moveSec  = (fromId, toId) => setPrefs({ ...prefs, order: moveInArray(prefs.order, fromId, toId) });
  const resetPrefs = () => setPrefs({ ...DEFAULT_PREFS, favorites: prefs.favorites });

  const menuThemes = prefs.menuOrder.map(themeById).filter(Boolean);
  const visibleMenu = (editMode || prefs.themeFilter !== 'fav') ? menuThemes : menuThemes.filter(t => isFav(t.id));

  // ---- 業務メニューカード（イラスト＋タイトル＋ひとこと説明） ----
  const MenuBtn = (t) => {
    const hasExt = !!(t.primary !== 'internal' && t.links && t.links.length);
    return (
      <div key={t.id} className={`cx-menu-btn${editMode ? ' editing' : ''}`}
           draggable={editMode}
           onDragStart={() => setDragItem({ kind: 'menu', id: t.id })}
           onDragOver={(e) => { if (dragItem?.kind === 'menu' && dragItem.id !== t.id) { e.preventDefault(); moveMenu(dragItem.id, t.id); } }}
           onDragEnd={() => setDragItem(null)}
           onClick={() => { if (!editMode) openTheme(t); }}>
        <div className="art-band" style={{background: menuStyle==='photo' ? '#101b30' : (MENU_ART_BG[t.id] || '#F4F1EA')}}>
          {menuStyle==='photo' ? <MenuArt2 id={t.id}/> : <MenuArt id={t.id}/>}
          {editMode ? (
            <span className="grip"><CXIcon name="grip" size={16}/></span>
          ) : (
            <button className={`fav-btn2${isFav(t.id) ? ' on' : ''}`} title={isFav(t.id) ? 'お気に入り解除' : 'お気に入りに追加'}
                    onClick={(e) => { e.stopPropagation(); toggleFav(t.id); }}>
              <CXIcon name="star" size={14}/>
            </button>
          )}
        </div>
        <div className="body">
          <h3>{t.name}{t.status === 'beta' && <span className="beta">β</span>}</h3>
          <p className="desc">{t.desc}</p>
          <div className="foot">
            <Chip tone="muted">{t.tag}</Chip>
            <span className="open">開く<CXIcon name={hasExt ? 'externalLink' : 'chevronRight'} size={13}/></span>
          </div>
        </div>
      </div>
    );
  };

  // ---- ダッシュボードセクション ----
  const SECTIONS = {
    kpi: (
      <div className="cx-stats" style={{marginBottom:12}}>{d.portalStats.map((s,i)=><Stat key={i} {...s}/>)}</div>
    ),
    activity: (
      <div className="cx-card" style={{marginBottom:12}}>
        {d.activity.slice(0,3).map((a,i)=>(
          <div key={i} className="act-row" style={{borderBottom:i<2?'1px solid var(--c-border)':'0'}}>
            <div className="cx-avatar" style={{width:26,height:26,fontSize:11,background:'var(--c-primary)'}}>{a.who[0]}</div>
            <div style={{fontSize:12.5}}><b>{a.who}</b> さんが{a.act}</div>
            <Chip tone="muted">{a.theme}</Chip>
            <span style={{marginLeft:'auto',fontSize:11.5,color:'var(--c-text-3)'}}>{a.time}</span>
          </div>
        ))}
      </div>
    ),
  };

  const SectionWrap = (id) => {
    const hidden = !!prefs.hidden[id];
    if (!editMode) return hidden ? null : <React.Fragment key={id}>{SECTIONS[id]}</React.Fragment>;
    return (
      <div key={id} className={`sec-wrap${hidden ? ' off' : ''}`} draggable
           onDragStart={() => setDragItem({ kind: 'sec', id })}
           onDragOver={(e) => { if (dragItem?.kind === 'sec' && dragItem.id !== id) { e.preventDefault(); moveSec(dragItem.id, id); } }}
           onDragEnd={() => setDragItem(null)}>
        <div className="sec-head">
          <span className="grip"><CXIcon name="grip" size={15}/></span>
          <span className="nm">{SECTION_META[id].label}</span>
          <label className="sw" onClick={e=>e.stopPropagation()}>
            <input type="checkbox" checked={!hidden} onChange={() => toggleSec(id)}/>表示
          </label>
        </div>
        <div className="sec-body">{SECTIONS[id]}</div>
      </div>
    );
  };

  return (
    <div className="cx-portal">
      {/* hero: 挨拶＋小型クイックアクション */}
      <div className="cx-hero">
        <Topo/>
        <div className="hero-top">
          <div style={{minWidth:0}}>
            <div className="eyebrow">小野田ケミコ株式会社 ｜ ケミコプラットフォーム</div>
            <h1>こんにちは、{d.user.name} さん</h1>
            <div className="sub">{d.user.dept}</div>
            <div className="quick sm">
              <div className="qbtn" onClick={()=>openTheme(themeById('report'))}><CXIcon name="clipboard" size={13}/>施工記録をつける</div>
              <div className="qbtn" onClick={()=>openTheme(themeById('search'))}><CXIcon name="search" size={13}/>AIで調べる</div>
              <div className="qbtn" onClick={()=>openTheme(themeById('estimate'))}><CXIcon name="fileText" size={13}/>見積を作成する</div>
              <div className="qbtn" onClick={()=>onOpenTheme('masterdb')}><CXIcon name="db" size={13}/>マスターデータ</div>
            </div>
          </div>
          <button className="cust-btn" onClick={()=>setEditMode(m=>!m)}>
            <CXIcon name={editMode?'check':'sliders'} size={14}/>{editMode?'完了':'カスタマイズ'}
          </button>
        </div>
      </div>

      {/* カスタマイズモードのバナー */}
      {editMode && (
        <div className="cust-banner">
          <CXIcon name="sliders" size={14}/>
          <span>カスタマイズモード：項目を<b>ドラッグ&ドロップ</b>で並べ替え、チェックで表示/非表示を切替できます（ユーザーごとに保存）</span>
          <div style={{marginLeft:'auto',display:'flex',gap:8}}>
            <Btn kind="sec" size="sm" onClick={resetPrefs}>初期設定に戻す</Btn>
            <Btn size="sm" icon="check" onClick={()=>setEditMode(false)}>完了</Btn>
          </div>
        </div>
      )}

      {/* ダッシュボード（ユーザー設定の順序・表示） */}
      {prefs.order.map(SectionWrap)}

      {/* 業務メニュー */}
      <div className="cx-sec-h">
        <h2>業務メニュー</h2>
        {!editMode && (
          <div className="cx-seg">
            <button className={prefs.themeFilter==='all'?'on':''} onClick={()=>setFilter('all')}>すべて</button>
            <button className={prefs.themeFilter==='fav'?'on':''} onClick={()=>setFilter('fav')}>
              <CXIcon name="star" size={12}/>お気に入り（{prefs.favorites.length}）
            </button>
          </div>
        )}
        <div className="line"/>
      </div>
      {visibleMenu.length ? (
        <div className={`cx-menu-grid${layout === 'list' ? ' list' : ''}`}>{visibleMenu.map(MenuBtn)}</div>
      ) : (
        <div className="fav-empty">
          お気に入りに登録されたメニューがありません。<br/>
          各ボタン右の <CXIcon name="star" size={13}/> をクリックしてお気に入りに追加できます。
        </div>
      )}
    </div>
  );
};
window.PortalScreen = PortalScreen;