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

// ─────────────────────────────────────────────────────────────
// Screen 7 — Account settings
// ─────────────────────────────────────────────────────────────
function SettingsScreen() {
  const sections = [
    { id: 'profile', icon: 'building-2', label: 'プロフィール', sub: '会社情報・担当者を編集', open: false, ext: '株式会社コアラボ' },
    { id: 'password', icon: 'key-round', label: 'パスワード変更', sub: '現在 · 90 日前に更新', open: false },
    { id: 'notify', icon: 'bell', label: 'メール通知', sub: '3 つのトピックで受信', open: true, isToggles: true },
    { id: 'lang', icon: 'languages', label: '言語', sub: '現在 · 日本語', open: false, ext: '日本語 / English' },
    { id: 'export', icon: 'download', label: 'データエクスポート', sub: 'CSV 形式で全データ取得', open: false },
    { id: 'import', icon: 'upload-cloud', label: 'データインポート', sub: '名刺 CSV を一括取込（最大 500 行 / ファイル）', open: false, ext: 'インポート →' },
    { id: 'consent', icon: 'file-text', label: '同意履歴', sub: '4 件の同意記録', open: false, ext: '履歴を表示 →' },
  ];
  return (
    <>
      <AppHeader title="アカウント設定" subtitle="// SETTINGS" back />
      <div style={{ flex: 1, overflow: 'auto', padding: '18px 18px 100px' }}>
        {/* Profile chip */}
        <div style={{
          padding: 16, border: `1px solid ${C.border2}`,
          background: 'linear-gradient(135deg, rgba(165,154,202,.08), transparent)',
          marginBottom: 20, display: 'flex', alignItems: 'center', gap: 14,
        }}>
          <div style={{
            width: 48, height: 48, borderRadius: '50%',
            background: `linear-gradient(135deg, ${C.lilac}, ${C.cyan})`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: FF, fontSize: 18, color: C.bg1, fontWeight: 600,
          }}>林</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: FF, fontSize: 16, fontWeight: 600, color: C.fg1 }}>林 健太郎</div>
            <div style={{ fontFamily: FM, fontSize: 10.5, color: C.fg3, marginTop: 3, letterSpacing: '.04em' }}>tenant_owner · hayashi@coreLabs.jp</div>
          </div>
        </div>

        {sections.map((s, i) => (
          <div key={s.id}
            onClick={() => {
              if (s.id === 'import') { window.SKG_NAV && window.SKG_NAV.go('cards-import'); }
            }}
            style={{
              border: `1px solid ${s.open ? C.border2 : C.border}`,
              background: s.open ? 'rgba(165,154,202,.04)' : 'transparent',
              marginBottom: 8,
              cursor: s.id === 'import' ? 'pointer' : 'default',
            }}>
            <div style={{
              padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 14,
              cursor: 'pointer',
            }}>
              <Icon name={s.icon} size={18} color={C.lilac} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: FS, fontSize: 13.5, color: C.fg1, fontWeight: 500 }}>{s.label}</div>
                <div style={{ fontFamily: FS, fontSize: 11, color: C.fg3, marginTop: 2 }}>{s.sub}</div>
              </div>
              {s.ext && <span style={{ fontFamily: FM, fontSize: 10, color: C.fg2, letterSpacing: '.04em' }}>{s.ext}</span>}
              <Icon name={s.open ? 'chevron-up' : 'chevron-right'} size={16} color={C.fg3} />
            </div>
            {s.isToggles && s.open && (
              <div style={{ padding: '4px 16px 16px' }}>
                {[
                  { l: 'マッチング提案の受信', on: true },
                  { l: 'コンサルからの返信', on: true },
                  { l: 'システム連絡 · 重要なお知らせ', on: false },
                ].map((t, j) => (
                  <div key={j} style={{
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    padding: '11px 0', borderTop: `1px solid ${C.border}`,
                  }}>
                    <span style={{ fontFamily: FS, fontSize: 12.5, color: C.fg1 }}>{t.l}</span>
                    <div style={{
                      width: 38, height: 22, position: 'relative',
                      background: t.on ? C.lilac : C.bg3,
                      border: `1px solid ${t.on ? C.lilac : C.border2}`,
                      boxShadow: t.on ? `0 0 12px rgba(165,154,202,.4)` : 'none',
                      transition: 'all 240ms',
                    }}>
                      <div style={{
                        position: 'absolute', top: 2,
                        left: t.on ? 18 : 2,
                        width: 16, height: 16,
                        background: t.on ? C.bg1 : C.fg2,
                        transition: 'left 240ms',
                      }} />
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        ))}

        {/* Withdraw */}
        <div
          onClick={() => { if (window.confirm('退会します。進行中の提案は相手社に通知のうえクローズされます。続行しますか?')) { window.alert('退会処理が完了しました。ログイン画面に戻ります。'); window.SKG_NAV && window.SKG_NAV.go('login'); } }}
          style={{
          marginTop: 20, padding: '16px 16px',
          border: `1px solid ${C.magenta}`,
          background: 'rgba(255,110,199,.04)',
          display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer',
        }}>
          <Icon name="alert-octagon" size={18} color={C.magenta} />
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: FS, fontSize: 13.5, color: C.magenta, fontWeight: 500, letterSpacing: '.04em' }}>退会する</div>
            <div style={{ fontFamily: FS, fontSize: 10.5, color: C.fg3, marginTop: 2, lineHeight: 1.5 }}>進行中の提案は相手社に通知のうえクローズ</div>
          </div>
          <Icon name="chevron-right" size={16} color={C.magenta} />
        </div>
      </div>
      <BottomNav active="settings" />
    </>
  );
}

// ─────────────────────────────────────────────────────────────
// Screen 8 — Card upload (OCR review step)
// ─────────────────────────────────────────────────────────────
function CardUploadScreen() {
  return (
    <>
      <AppHeader title="名刺をアップロード" subtitle="// STEP 2 · OCR 確認" back />
      <div style={{ flex: 1, overflow: 'auto', padding: '18px 18px 100px' }}>

        {/* Step indicator */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 20 }}>
          {[
            { n: '01', l: '撮影', done: true },
            { n: '02', l: '確認・編集', done: false, current: true },
          ].map((st, i) => (
            <React.Fragment key={i}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{
                  width: 22, height: 22,
                  border: `1px solid ${st.current || st.done ? C.lilac : C.border2}`,
                  background: st.done ? C.lilac : 'transparent',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: FM, fontSize: 9.5, color: st.done ? C.bg1 : st.current ? C.lilac : C.fg3,
                  letterSpacing: '.04em',
                }}>{st.done ? <Icon name="check" size={11} color={C.bg1} stroke={2.4} /> : st.n}</div>
                <span style={{ fontFamily: FM, fontSize: 10, color: st.current ? C.lilac : C.fg3, letterSpacing: '.1em' }}>{st.l}</span>
              </div>
              {i === 0 && <span style={{ flex: 1, height: 1, background: C.lilac, opacity: 0.4 }} />}
            </React.Fragment>
          ))}
        </div>

        {/* Card preview */}
        <div style={{
          width: '100%', aspectRatio: '1.7 / 1',
          background: `linear-gradient(135deg, #1a1525 0%, #15111F 100%)`,
          border: `1px solid ${C.border2}`,
          marginBottom: 8, position: 'relative', overflow: 'hidden',
          boxShadow: `inset 0 1px 0 rgba(255,255,255,.04), 0 0 24px rgba(165,154,202,.15)`,
        }}>
          {/* faux card content */}
          <div style={{ position: 'absolute', inset: 18 }}>
            <div style={{ fontFamily: FF, fontSize: 9, color: C.fg3, letterSpacing: '.1em' }}>未来商事 株式会社</div>
            <div style={{ fontFamily: FF, fontSize: 18, color: C.fg1, fontWeight: 600, marginTop: 14 }}>田中 太郎</div>
            <div style={{ fontFamily: FS, fontSize: 9, color: C.fg2, marginTop: 4 }}>代表取締役 CEO</div>
            <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, fontFamily: FM, fontSize: 8, color: C.fg3, letterSpacing: '.04em' }}>
              tanaka@miraishoji.co.jp · 03-1234-5678
            </div>
          </div>
          {/* OCR scan line animation */}
          <div style={{ position: 'absolute', left: 0, right: 0, top: '60%', height: 1, background: C.cyan, boxShadow: `0 0 12px ${C.cyan}` }} />
          {/* corners */}
          {['tl','tr','bl','br'].map(c => {
            const pos = {
              tl: { top: 6, left: 6, borderTop: `1.5px solid ${C.lilac}`, borderLeft: `1.5px solid ${C.lilac}` },
              tr: { top: 6, right: 6, borderTop: `1.5px solid ${C.lilac}`, borderRight: `1.5px solid ${C.lilac}` },
              bl: { bottom: 6, left: 6, borderBottom: `1.5px solid ${C.lilac}`, borderLeft: `1.5px solid ${C.lilac}` },
              br: { bottom: 6, right: 6, borderBottom: `1.5px solid ${C.lilac}`, borderRight: `1.5px solid ${C.lilac}` },
            }[c];
            return <div key={c} style={{ position: 'absolute', width: 16, height: 16, ...pos }} />;
          })}
        </div>
        <div style={{ textAlign: 'right', marginBottom: 20 }}>
          <span style={{ fontFamily: FM, fontSize: 10, color: C.lilac, letterSpacing: '.08em' }}>↻ 再撮影する</span>
        </div>

        {/* OCR confidence */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: FM, fontSize: 10, color: C.cyan, letterSpacing: '.1em', marginBottom: 14 }}>
          <Icon name="sparkles" size={12} color={C.cyan} />
          OCR 抽出完了 · 信頼度 94%
        </div>

        {/* Form */}
        <Field label="会社名" required value="未来商事 株式会社" icon="building" />
        <Field label="氏名" required value="田中 太郎" icon="user" />
        <Field label="役職" value="代表取締役 CEO" icon="briefcase" />
        <Field label="メール" value="tanaka@miraishoji.co.jp" icon="mail" />
        <Field label="電話" value="03-1234-5678" icon="phone" />
        <Field label="補足メモ" multiline placeholder="出会った場所・話した内容など" value="2026/04/28 産業 IoT 展示会で交換。AI 活用に強い関心。" />

        <PrimaryBtn full icon="check" onClick={() => { window.alert('保存しました。連絡先帳に追加されます。'); window.SKG_NAV && window.SKG_NAV.go('cards'); }}>保存する</PrimaryBtn>
      </div>
    </>
  );
}

window.SKG_SETTINGS = { SettingsScreen, CardUploadScreen };