/* global React, SKG */
const { C, FS, FF, FM, Icon, PrimaryBtn, SecondaryBtn, AppHeader, BottomNav, ConsultFAB, StatusBadge, WithdrawnLabel, Eyebrow } = window.SKG;

// ─────────────────────────────────────────────────────────────
// Screen 3 — Home dashboard
// ─────────────────────────────────────────────────────────────
function HomeScreen() {
  return (
    <>
      <AppHeader title="ダッシュボード" subtitle="// HOME"
        right={<><Icon name="bell" size={20} color={C.fg2} /><div style={{ position: 'absolute', top: 12, right: 38, width: 6, height: 6, borderRadius: '50%', background: C.magenta, boxShadow: `0 0 8px ${C.magenta}` }} /></>}
      />
      <div style={{ flex: 1, overflow: 'auto', padding: '20px 18px 100px' }}>
        {/* Profile state card */}
        <div style={{
          padding: 18, border: `1px solid ${C.border2}`,
          background: 'linear-gradient(135deg, rgba(165,154,202,.08), rgba(125,249,255,.03))',
          borderRadius: 4, marginBottom: 20, position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
            <div>
              <div style={{ fontFamily: FM, fontSize: 9.5, letterSpacing: '.2em', color: C.lilac, textTransform: 'uppercase' }}>// 自社プロフィール</div>
              <div style={{ fontFamily: FF, fontSize: 18, fontWeight: 600, color: C.fg1, marginTop: 4 }}>株式会社コアラボ</div>
            </div>
            <div style={{
              padding: '4px 9px', border: `1px solid ${C.cyan}`, color: C.cyan,
              fontFamily: FM, fontSize: 9.5, letterSpacing: '.12em',
              display: 'inline-flex', gap: 5, alignItems: 'center',
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: C.cyan, boxShadow: `0 0 6px ${C.cyan}` }} />
              MATCHING ON
            </div>
          </div>
          {/* Progress */}
          <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: FM, fontSize: 10, color: C.fg2, letterSpacing: '.06em', marginBottom: 6 }}>
            <span>プロフィール完了率</span>
            <span style={{ color: C.lilac, fontWeight: 500 }}>72%</span>
          </div>
          <div style={{ height: 4, background: C.bg3, position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', inset: 0, width: '72%', background: `linear-gradient(90deg, ${C.lilac}, ${C.cyan})`, boxShadow: `0 0 12px ${C.lilac}` }} />
          </div>
        </div>

        {/* New match alerts */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
          <Eyebrow style={{ marginBottom: 0 }}>// 新着のお知らせ</Eyebrow>
          <span style={{ fontFamily: FM, fontSize: 10, color: C.magenta, letterSpacing: '.1em' }}>3 未読</span>
        </div>

        {[
          { name: '製造業 · 中規模', reason: 'IoT センサ事業との補完性が高く', anon: true, time: '2時間前' },
          { name: '株式会社オリオン', reason: 'AI 推論基盤の共同検証先として', anon: false, time: '昨日' },
          { name: 'SaaS · スタートアップ', reason: '顧客基盤の相互送客が見込め', anon: true, time: '04.30' },
        ].map((m, i) => (
          <div key={i}
            onClick={() => window.SKG_NAV && window.SKG_NAV.go('match')}
            style={{
            padding: 14, border: `1px solid ${C.border}`, background: 'rgba(165,154,202,.03)',
            borderRadius: 4, marginBottom: 10, display: 'flex', gap: 12, alignItems: 'flex-start',
            cursor: 'pointer',
          }}>
            <div style={{
              width: 6, alignSelf: 'stretch', background: i === 0 ? C.cyan : C.lilac,
              boxShadow: i === 0 ? `0 0 8px ${C.cyan}` : 'none', flexShrink: 0,
            }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8 }}>
                <div style={{ fontFamily: FF, fontSize: 14, fontWeight: 500, color: C.fg1, fontStyle: m.anon ? 'italic' : 'normal' }}>{m.name}</div>
                <span style={{ fontFamily: FM, fontSize: 10, color: C.fg3, flexShrink: 0 }}>{m.time}</span>
              </div>
              <div style={{ fontFamily: FS, fontSize: 12, color: C.fg2, marginTop: 4, lineHeight: 1.5 }}>{m.reason}…</div>
            </div>
          </div>
        ))}

        {/* Consultant message */}
        <Eyebrow style={{ marginTop: 24 }}>// コンサルから</Eyebrow>
        <div style={{
          padding: 14, border: `1px solid ${C.border}`,
          background: 'rgba(125,249,255,.03)', borderRadius: 4, marginBottom: 24,
          display: 'flex', gap: 12,
        }}>
          <div style={{
            width: 36, height: 36, borderRadius: '50%', flexShrink: 0,
            background: `linear-gradient(135deg, ${C.cyan}, ${C.lilac})`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: FF, fontSize: 14, color: C.bg1, fontWeight: 600,
          }}>森</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: FS, fontSize: 12, color: C.fg1, fontWeight: 500 }}>森 雅彦 <span style={{ color: C.fg3, fontFamily: FM, fontSize: 10, fontWeight: 400 }}>· 担当コンサル</span></div>
            <div style={{ fontFamily: FS, fontSize: 12, color: C.fg2, marginTop: 4, lineHeight: 1.5 }}>先日の相談、貴社の状況を踏まえた提案を 2 件まとめました。確認をお願いします。</div>
          </div>
        </div>

        {/* 3 CTAs */}
        <Eyebrow>// アクション</Eyebrow>
        {[
          { icon: 'sparkles', title: 'マッチング機会を待つ', sub: 'プロフィールを充実させ提案を受ける', go: 'inbox' },
          { icon: 'messages-square', title: 'コンサルに相談', sub: '個別の関係づくりを依頼する', go: '__consult__' },
          { icon: 'scan-line', title: '名刺をアップロード', sub: '撮影して連絡先帳に追加', go: 'cards-upload' },
        ].map((c, i) => (
          <div key={i}
            onClick={() => {
              if (!window.SKG_NAV) return;
              if (c.go === '__consult__') window.SKG_NAV.openConsult();
              else window.SKG_NAV.go(c.go);
            }}
            style={{
            padding: '16px 16px', border: `1px solid ${C.border2}`, background: C.bg2,
            display: 'flex', alignItems: 'center', gap: 14, marginBottom: 8, cursor: 'pointer',
          }}>
            <div style={{
              width: 40, height: 40, border: `1px solid ${C.lilac}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              background: 'rgba(165,154,202,.06)',
            }}>
              <Icon name={c.icon} size={18} color={C.lilac} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: FF, fontSize: 14, fontWeight: 500, color: C.fg1 }}>{c.title}</div>
              <div style={{ fontFamily: FS, fontSize: 11, color: C.fg3, marginTop: 2 }}>{c.sub}</div>
            </div>
            <Icon name="arrow-up-right" size={16} color={C.fg2} />
          </div>
        ))}
      </div>
      <ConsultFAB />
      <BottomNav active="home" />
    </>
  );
}

// ─────────────────────────────────────────────────────────────
// Screen 4 — Inbox
// ─────────────────────────────────────────────────────────────
function InboxScreen() {
  const filters = ['すべて', '未対応', '対応済', '失効済'];
  const items = [
    { name: '株式会社オリオン', industry: '製造業', size: '101-500名', status: 'unread', reason: 'IoT 領域の共同検証パートナー候補。御社の制御技術と相互補完。', days: 12, expSoon: false, anon: false },
    { name: '製造業 · 中規模企業', industry: '製造業', size: '51-100名', status: 'pending', reason: '海外販路の相互紹介を視野に。担当コンサルが両社の戦略適合を確認。', days: 8, expSoon: false, anon: true },
    { name: 'ネオテック株式会社', industry: 'SaaS', size: '11-50名', status: 'accepted', reason: 'AI 推論基盤の共同検証先として、PoC を経て連絡先交換に進む。', days: 21, expSoon: false, anon: false },
    { name: 'ITコンサル · 小規模', industry: 'コンサル', size: '11-50名', status: 'pending', reason: '営業 DX 導入の事例先として、双方の知見交換に意義あり。', days: 28, expSoon: true, anon: true },
    { name: null, industry: null, size: null, status: 'expired', reason: '提案期限を過ぎたため失効しました。', days: -2, expSoon: false, withdrawn: true },
    { name: 'スタジオ零', industry: 'デザイン', size: '11-50名', status: 'declined', reason: 'PoC 規模が現状リソースと合致せず辞退。', days: 5, expSoon: false, anon: false },
  ];
  return (
    <>
      <AppHeader title="受信トレイ" subtitle="// INBOX · 6 件"
        right={<Icon name="filter" size={20} color={C.fg2} />}
      />
      <div style={{ flex: 1, overflow: 'auto', padding: '14px 18px 100px' }}>
        {/* Filter chips */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 16, overflowX: 'auto' }}>
          {filters.map((f, i) => (
            <span key={f} style={{
              flexShrink: 0, padding: '6px 14px',
              border: `1px solid ${i === 0 ? C.lilac : C.border2}`,
              color: i === 0 ? C.lilac : C.fg2,
              background: i === 0 ? 'rgba(165,154,202,.08)' : 'transparent',
              fontFamily: FM, fontSize: 10.5, letterSpacing: '.08em',
              boxShadow: i === 0 ? `0 0 12px rgba(165,154,202,.25)` : 'none',
            }}>{f}</span>
          ))}
        </div>

        {items.map((it, i) => (
          <div key={i}
            onClick={() => window.SKG_NAV && window.SKG_NAV.go('match')}
            style={{
            padding: 14, border: `1px solid ${it.status === 'unread' ? C.cyan : C.border}`,
            background: it.status === 'unread' ? 'rgba(125,249,255,.03)' : 'rgba(165,154,202,.02)',
            borderRadius: 4, marginBottom: 10, cursor: 'pointer',
            opacity: it.status === 'expired' || it.status === 'declined' ? 0.6 : 1,
            boxShadow: it.status === 'unread' ? `0 0 14px rgba(125,249,255,.12)` : 'none',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8, marginBottom: 8 }}>
              <div style={{ minWidth: 0, flex: 1 }}>
                {it.withdrawn ? <WithdrawnLabel /> : (
                  <>
                    <div style={{ fontFamily: FF, fontSize: 15, fontWeight: 600, color: C.fg1, fontStyle: it.anon ? 'italic' : 'normal' }}>
                      {it.name}
                      {it.anon && <span style={{ fontFamily: FM, fontSize: 9.5, color: C.fg4, marginLeft: 8, letterSpacing: '.1em' }}>· 匿名</span>}
                    </div>
                    {it.industry && (
                      <div style={{ fontFamily: FM, fontSize: 10.5, color: C.fg3, marginTop: 3, letterSpacing: '.04em' }}>
                        {it.industry} · {it.size}
                      </div>
                    )}
                  </>
                )}
              </div>
              <StatusBadge status={it.status} />
            </div>
            <div style={{ fontFamily: FS, fontSize: 12, color: C.fg2, lineHeight: 1.6, marginBottom: 10 }}>{it.reason}</div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: FM, fontSize: 10, letterSpacing: '.04em' }}>
              <span style={{ color: C.fg3 }}>{it.days >= 0 ? `${it.days} 日前 受信` : '失効済'}</span>
              {it.days >= 0 && it.status !== 'expired' && it.status !== 'declined' && (
                <span style={{ color: it.expSoon ? C.warning : C.fg3, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                  {it.expSoon && <Icon name="alert-triangle" size={11} color={C.warning} />}
                  失効まで {30 - it.days} 日
                </span>
              )}
            </div>
          </div>
        ))}
      </div>
      <ConsultFAB />
      <BottomNav active="inbox" />
    </>
  );
}

window.SKG_HOME = { HomeScreen, InboxScreen };