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

// ─────────────────────────────────────────────────────────────
// Screen 9 — Card list / search
// ─────────────────────────────────────────────────────────────
function CardListScreen() {
  const cards = [
    { name: '田中 太郎', company: '未来商事 株式会社', role: '代表取締役 CEO', initial: '田', tone: 'lilac', tag: 'IoT' },
    { name: '山田 花子', company: 'ネオテック株式会社', role: 'CTO / Co-founder', initial: '山', tone: 'cyan', tag: 'AI' },
    { name: '鈴木 一郎', company: '株式会社オリオン', role: '事業開発部長', initial: '鈴', tone: 'magenta', tag: 'FinTech' },
    { name: '佐藤 美咲', company: 'スタジオ零', role: 'デザインディレクター', initial: '佐', tone: 'lilac', tag: 'UX' },
    { name: 'James Carter', company: 'Helix Robotics', role: 'VP of Sales', initial: 'J', tone: 'cyan', tag: 'Robotics' },
    { name: '高橋 直樹', company: 'コア・ラボ株式会社', role: '営業企画', initial: '高', tone: 'lilac', tag: 'SaaS' },
    { name: '伊藤 さくら', company: 'グリーンウェイ', role: 'プロダクトマネージャ', initial: '伊', tone: 'magenta', tag: 'CleanTech' },
  ];

  const tones = {
    lilac: { bg: `linear-gradient(135deg, ${C.lilac}, ${C.lilacDeep})` },
    cyan: { bg: `linear-gradient(135deg, ${C.cyan}, ${C.lilac})` },
    magenta: { bg: `linear-gradient(135deg, ${C.magenta}, ${C.lilac})` },
  };

  return (
    <>
      <AppHeader title="名刺" subtitle="// 342 CARDS" />
      <div style={{ flex: 1, overflow: 'auto', padding: '14px 18px 100px' }}>
        {/* Search */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px',
          border: `1px solid ${C.border2}`, background: C.bg2, marginBottom: 12,
        }}>
          <Icon name="search" size={16} color={C.fg3} />
          <span style={{ flex: 1, fontFamily: FS, fontSize: 13, color: C.fg3 }}>氏名・会社名で検索</span>
          <span style={{ fontFamily: FM, fontSize: 9.5, color: C.fg4, letterSpacing: '.1em' }}>⌘K</span>
        </div>

        {/* Sort + Import CTA */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
          <span style={{ fontFamily: FM, fontSize: 10, color: C.fg3, letterSpacing: '.1em' }}>342 件 · {cards.length} 件表示</span>
          <span style={{ fontFamily: FM, fontSize: 10, color: C.lilac, letterSpacing: '.08em', display: 'flex', alignItems: 'center', gap: 4 }}>
            <Icon name="arrow-down-up" size={11} color={C.lilac} />
            登録日 新しい順
          </span>
        </div>

        {/* Bulk import CTA — links to Screen 11 */}
        <div
          onClick={() => window.SKG_NAV && window.SKG_NAV.go('cards-import')}
          role="button"
          tabIndex={0}
          style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '11px 14px',
            border: `1px dashed ${C.cyan}`,
            background: 'rgba(125,249,255,.05)',
            marginBottom: 14, cursor: 'pointer',
          }}
        >
          <div style={{
            width: 32, height: 32,
            border: `1px solid ${C.cyan}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            flexShrink: 0,
          }}>
            <Icon name="upload-cloud" size={15} color={C.cyan} stroke={1.8} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: FS, fontSize: 12.5, color: C.fg1, fontWeight: 500 }}>名刺データを一括インポート</div>
            <div style={{ fontFamily: FM, fontSize: 10, color: C.fg3, marginTop: 2, letterSpacing: '.04em' }}>CSV · 最大 500 行 / 1 ファイル</div>
          </div>
          <Icon name="chevron-right" size={14} color={C.cyan} />
        </div>

        {/* List */}
        {cards.map((c, i) => (
          <div key={i}
            onClick={() => window.SKG_NAV && window.SKG_NAV.go('contact')}
            style={{
            padding: 14, border: `1px solid ${C.border}`,
            background: 'rgba(165,154,202,.02)', marginBottom: 8,
            display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer',
          }}>
            <div style={{
              width: 44, height: 44,
              background: tones[c.tone].bg,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: FF, fontSize: 17, color: C.bg1, fontWeight: 600,
              flexShrink: 0,
            }}>{c.initial}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: FF, fontSize: 15, fontWeight: 500, color: C.fg1 }}>{c.name}</div>
              <div style={{ fontFamily: FS, fontSize: 11.5, color: C.fg2, marginTop: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.company}</div>
              <div style={{ fontFamily: FM, fontSize: 9.5, color: C.fg3, marginTop: 3, letterSpacing: '.06em' }}>{c.role}</div>
            </div>
            <span style={{ fontFamily: FM, fontSize: 9, color: C.lilac, padding: '2px 7px', border: `1px solid ${C.border2}`, letterSpacing: '.1em' }}>{c.tag}</span>
          </div>
        ))}
      </div>
      <ConsultFAB withPlus />
      <BottomNav active="cards" />
    </>
  );
}

// ─────────────────────────────────────────────────────────────
// Screen 10 — Contact detail
// ─────────────────────────────────────────────────────────────
function ContactDetailScreen() {
  return (
    <>
      <AppHeader title="連絡先" subtitle="// CONTACT" back
        right={<button onClick={() => { if (window.confirm('この連絡先を削除します。名刺画像も同時に削除されます。')) window.SKG_NAV && window.SKG_NAV.go('cards'); }} style={{ background: 'transparent', border: 'none', cursor: 'pointer', padding: 4 }}>
          <Icon name="trash-2" size={18} color={C.magenta} />
        </button>}
      />
      <div style={{ flex: 1, overflow: 'auto', padding: '20px 18px 100px' }}>
        {/* Card image */}
        <div style={{
          width: '100%', aspectRatio: '1.7 / 1',
          background: `linear-gradient(135deg, #1a1525 0%, #15111F 100%)`,
          border: `1px solid ${C.border2}`,
          marginBottom: 22, position: 'relative', overflow: 'hidden',
          boxShadow: `inset 0 1px 0 rgba(255,255,255,.04), 0 0 24px rgba(165,154,202,.18)`,
        }}>
          <div style={{ position: 'absolute', inset: 22 }}>
            <div style={{ fontFamily: FF, fontSize: 10, color: C.fg3, letterSpacing: '.12em' }}>未来商事 株式会社</div>
            <div style={{ fontFamily: FF, fontSize: 22, color: C.fg1, fontWeight: 600, marginTop: 16, letterSpacing: '-0.02em' }}>田中 太郎</div>
            <div style={{ fontFamily: FS, fontSize: 10, color: C.fg2, marginTop: 4 }}>代表取締役 CEO</div>
            <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, fontFamily: FM, fontSize: 9, color: C.fg3, letterSpacing: '.04em' }}>
              tanaka@miraishoji.co.jp · 03-1234-5678
            </div>
          </div>
          {/* corner accent */}
          <div style={{ position: 'absolute', top: 0, right: 0, width: 30, height: 30, borderTop: `1px solid ${C.cyan}`, borderRight: `1px solid ${C.cyan}`, opacity: 0.5 }} />
          <div style={{ position: 'absolute', bottom: 4, right: 12, fontFamily: FM, fontSize: 8, color: C.lilac, letterSpacing: '.2em' }}>// 拡大表示</div>
        </div>

        {/* Hero info */}
        <div style={{ marginBottom: 20 }}>
          <div style={{ fontFamily: FM, fontSize: 9.5, letterSpacing: '.2em', color: C.lilac }}>// CONTACT INFO</div>
          <div style={{ fontFamily: FF, fontSize: 26, fontWeight: 600, color: C.fg1, letterSpacing: '-0.02em', marginTop: 6 }}>田中 太郎</div>
          <div style={{ fontFamily: FS, fontSize: 13, color: C.fg2, marginTop: 4 }}>未来商事 株式会社 · 代表取締役 CEO</div>
        </div>

        {/* Action items (tap-to-launch) */}
        {[
          { icon: 'mail', label: 'tanaka@miraishoji.co.jp', sub: 'メーラーで開く', action: 'mailto' },
          { icon: 'phone', label: '03-1234-5678', sub: '電話アプリで発信', action: 'tel' },
          { icon: 'map-pin', label: '東京都千代田区丸の内 1-1-1', sub: '地図アプリで開く', action: 'map' },
        ].map((it, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 14,
            padding: '14px 14px', border: `1px solid ${C.border}`,
            background: 'rgba(165,154,202,.02)', marginBottom: 8,
            cursor: 'pointer',
          }}>
            <div style={{
              width: 36, height: 36, border: `1px solid ${C.border2}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }}>
              <Icon name={it.icon} size={15} color={C.lilac} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: FM, fontSize: 12, color: C.fg1, letterSpacing: '.02em', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{it.label}</div>
              <div style={{ fontFamily: FS, fontSize: 10.5, color: C.fg3, marginTop: 2 }}>{it.sub}</div>
            </div>
            <Icon name="external-link" size={14} color={C.fg3} />
          </div>
        ))}

        {/* Memo */}
        <div style={{ fontFamily: FM, fontSize: 9.5, letterSpacing: '.2em', color: C.lilac, margin: '20px 0 8px' }}>// MEMO</div>
        <div style={{
          padding: 14, border: `1px solid ${C.border}`,
          background: 'rgba(165,154,202,.03)', marginBottom: 22,
          fontFamily: FS, fontSize: 12, color: C.fg2, lineHeight: 1.7,
          borderLeft: `2px solid ${C.cyan}`,
        }}>
          2026/04/28 産業 IoT 展示会で交換。AI 活用に強い関心。アジア進出を検討中で、製造現場 DX の事例を求めている。
        </div>

        {/* Edit button */}
        <SecondaryBtn full icon="pencil" onClick={() => window.SKG_NAV && window.SKG_NAV.go('cards-upload')}>編集する</SecondaryBtn>
      </div>
      <ConsultFAB />
    </>
  );
}

window.SKG_CARDS = { CardListScreen, ContactDetailScreen };