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

// ─────────────────────────────────────────────────────────────
// Screen 5 — Match proposal detail
// ─────────────────────────────────────────────────────────────
function MatchDetailScreen() {
  return (
    <>
      <AppHeader title="マッチング提案" subtitle="// PROPOSAL · #M-2841" back />
      <div style={{ flex: 1, overflow: 'auto', padding: '20px 18px 120px' }}>

        {/* Status banner */}
        <div style={{
          padding: '10px 14px', border: `1px solid ${C.warning}`,
          background: 'rgba(244,184,96,.06)', marginBottom: 18,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <Icon name="alert-triangle" size={14} color={C.warning} />
          <span style={{ flex: 1, fontFamily: FS, fontSize: 11.5, color: C.warning, letterSpacing: '.04em' }}>失効まで残り 4 日</span>
          <span style={{ fontFamily: FM, fontSize: 10, color: C.warning }}>05.11 23:59</span>
        </div>

        {/* Counterpart */}
        <div style={{ fontFamily: FM, fontSize: 9.5, letterSpacing: '.2em', color: C.lilac, marginBottom: 10 }}>// 相手社情報 · 業種のみ匿名</div>
        <div style={{
          padding: 18, border: `1px solid ${C.border2}`,
          background: 'linear-gradient(180deg, rgba(165,154,202,.06), rgba(165,154,202,.02))',
          borderRadius: 4, marginBottom: 20,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{
              width: 48, height: 48, border: `1px solid ${C.lilac}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              background: 'rgba(165,154,202,.08)',
            }}>
              <Icon name="building-2" size={22} color={C.lilac} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: FF, fontSize: 18, fontWeight: 600, color: C.fg1, fontStyle: 'italic' }}>製造業 · 中規模企業</div>
              <div style={{ fontFamily: FM, fontSize: 10.5, color: C.fg3, marginTop: 3, letterSpacing: '.06em' }}>101-500 名 · 詳細は承諾後に開示</div>
            </div>
          </div>
          {/* Masked fields */}
          <div style={{ marginTop: 16, paddingTop: 14, borderTop: `1px solid ${C.border}` }}>
            {[
              { l: '社名', v: '●●●●●●●●●', mask: true },
              { l: '所在地', v: '●●●●●●', mask: true },
              { l: '事業内容', v: '産業機器製造', mask: false },
              { l: '連絡担当者', v: '●●●●', mask: true },
            ].map((f, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '7px 0', borderBottom: i < 3 ? `1px dashed ${C.border}` : 'none' }}>
                <span style={{ fontFamily: FS, fontSize: 11.5, color: C.fg3, letterSpacing: '.04em' }}>{f.l}</span>
                <span style={{ fontFamily: f.mask ? FM : FS, fontSize: 12, color: f.mask ? C.fg4 : C.fg1, letterSpacing: f.mask ? '.1em' : 0 }}>
                  {f.v}
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* Reason */}
        <div style={{ fontFamily: FM, fontSize: 9.5, letterSpacing: '.2em', color: C.lilac, marginBottom: 10 }}>// 繋げる理由</div>
        <div style={{
          padding: '14px 16px', border: `1px solid ${C.border}`,
          background: 'rgba(165,154,202,.03)', marginBottom: 20,
          borderLeft: `3px solid ${C.lilac}`,
        }}>
          <div style={{ fontFamily: FF, fontSize: 14, fontWeight: 500, color: C.fg1, lineHeight: 1.7, marginBottom: 8 }}>
            IoT センサ事業の補完性
          </div>
          <div style={{ fontFamily: FS, fontSize: 12.5, color: C.fg2, lineHeight: 1.8 }}>
            御社のソフトウェア基盤と相手社の制御技術が、産業 IoT 領域で相互補完となる。共同 PoC を起点に、年内の事業提携も視野に入る。
          </div>
        </div>

        {/* Consultant message */}
        <div style={{ fontFamily: FM, fontSize: 9.5, letterSpacing: '.2em', color: C.lilac, marginBottom: 10 }}>// コンサルから</div>
        <div style={{
          padding: 14, border: `1px solid ${C.border}`,
          background: 'rgba(125,249,255,.03)', marginBottom: 20,
          display: 'flex', gap: 12,
        }}>
          <div style={{
            width: 32, height: 32, borderRadius: '50%', flexShrink: 0,
            background: `linear-gradient(135deg, ${C.cyan}, ${C.lilac})`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: FF, fontSize: 13, color: C.bg1, fontWeight: 600,
          }}>森</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: FS, fontSize: 11.5, color: C.fg1, fontWeight: 500 }}>森 雅彦</div>
            <div style={{ fontFamily: FS, fontSize: 12, color: C.fg2, marginTop: 4, lineHeight: 1.6 }}>双方の経営層と事前協議済みです。承諾後 1 週間以内にオンライン顔合わせを設定します。</div>
          </div>
        </div>

        {/* Mutual status */}
        <div style={{ fontFamily: FM, fontSize: 9.5, letterSpacing: '.2em', color: C.lilac, marginBottom: 10 }}>// 双方の応答状況</div>
        <div style={{
          padding: 14, border: `1px solid ${C.border}`, marginBottom: 24,
          background: C.bg2,
        }}>
          {[
            { who: '自社 · 株式会社コアラボ', status: '未応答', color: C.warning, dot: 'circle-dashed' },
            { who: '相手社', status: '承諾済', color: C.magenta, dot: 'check-circle' },
          ].map((s, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: '10px 0', borderBottom: i === 0 ? `1px solid ${C.border}` : 'none',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <Icon name={s.dot} size={14} color={s.color} stroke={1.8} />
                <span style={{ fontFamily: FS, fontSize: 12, color: C.fg1 }}>{s.who}</span>
              </div>
              <span style={{ fontFamily: FM, fontSize: 10, color: s.color, letterSpacing: '.1em', textTransform: 'uppercase' }}>{s.status}</span>
            </div>
          ))}
        </div>

        {/* Actions */}
        <div style={{ display: 'flex', gap: 10 }}>
          <SecondaryBtn full icon="x" onClick={() => { window.alert('辞退しました。コンサルに通知されます。'); window.SKG_NAV && window.SKG_NAV.go('inbox'); }}>辞退する</SecondaryBtn>
          <PrimaryBtn full icon="check" onClick={() => { window.alert('承諾しました。相手社の応答を待ちます。'); window.SKG_NAV && window.SKG_NAV.go('inbox'); }}>承諾する</PrimaryBtn>
        </div>
      </div>
      <ConsultFAB />
    </>
  );
}

// ─────────────────────────────────────────────────────────────
// Screen 6 — Consult form (modal)
// ─────────────────────────────────────────────────────────────
function ConsultFormScreen() {
  return (
    <>
      {/* Dimmed parent layer */}
      <div onClick={() => window.SKG_NAV && window.SKG_NAV.closeConsult()} style={{ position: 'absolute', inset: 0, background: 'rgba(7,5,13,.5)', backdropFilter: 'blur(8px)', cursor: 'pointer' }} />

      {/* Bottom sheet modal */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, top: 60,
        background: C.bg1,
        border: `1px solid ${C.border2}`,
        borderBottom: 'none',
        boxShadow: `0 -10px 40px rgba(0,0,0,.6), 0 0 60px rgba(165,154,202,.15)`,
        display: 'flex', flexDirection: 'column',
        overflow: 'hidden',
      }}>
        {/* Drag handle */}
        <div onClick={() => window.SKG_NAV && window.SKG_NAV.closeConsult()} style={{ display: 'flex', justifyContent: 'center', padding: '10px 0 0', cursor: 'pointer' }}>
          <div style={{ width: 36, height: 3, background: C.fg4 }} />
        </div>
        {/* Header */}
        <div style={{
          padding: '14px 20px 16px', borderBottom: `1px solid ${C.border}`,
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
        }}>
          <div>
            <div style={{ fontFamily: FM, fontSize: 9.5, letterSpacing: '.2em', color: C.lilac, textTransform: 'uppercase' }}>// CONSULTATION</div>
            <div style={{ fontFamily: FF, fontSize: 22, fontWeight: 600, color: C.fg1, marginTop: 4, letterSpacing: '-0.02em' }}>コンサルに相談する</div>
          </div>
          <button onClick={() => window.SKG_NAV && window.SKG_NAV.closeConsult()} style={{ background: 'transparent', border: 'none', color: C.fg2, cursor: 'pointer', padding: 4 }}>
            <Icon name="x" size={22} color={C.fg2} />
          </button>
        </div>

        {/* Body */}
        <div style={{ flex: 1, overflow: 'auto', padding: '18px 20px 20px' }}>
          <div style={{ fontFamily: FS, fontSize: 12, color: C.fg2, lineHeight: 1.7, marginBottom: 18, padding: '10px 12px', borderLeft: `2px solid ${C.cyan}`, background: 'rgba(125,249,255,.03)' }}>
            数営業日以内に、担当コンサルからご返信します。
          </div>

          <Field
            label="相談内容"
            required
            multiline
            placeholder="関係構築したい業界、テーマ、現状の課題などを記述してください。"
            value="海外販路拡大に向けて、製造業の中堅企業との接点を探しています。特にアジア圏で実績のある企業を希望。"
          />
          <Field label="希望日時 (任意)" placeholder="2026/05/15 14:00 〜 16:00" icon="calendar" value="2026/05/15 午後" />

          <div style={{ fontFamily: FS, fontSize: 11, fontWeight: 500, color: C.fg2, letterSpacing: '.06em', marginBottom: 10, textTransform: 'uppercase' }}>
            連絡方法 <span style={{ color: C.magenta, fontFamily: FM }}>·</span>
          </div>
          <div style={{ display: 'flex', gap: 8, marginBottom: 18 }}>
            {[
              { id: 'email', label: 'メール', icon: 'mail', active: false },
              { id: 'phone', label: '電話', icon: 'phone', active: false },
              { id: 'meet', label: 'オンライン', icon: 'video', active: true },
            ].map(o => (
              <div key={o.id} style={{
                flex: 1, padding: '12px 8px', textAlign: 'center',
                border: `1px solid ${o.active ? C.lilac : C.border2}`,
                background: o.active ? 'rgba(165,154,202,.08)' : 'transparent',
                color: o.active ? C.lilac : C.fg2,
                boxShadow: o.active ? `0 0 12px rgba(165,154,202,.25)` : 'none',
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
              }}>
                <Icon name={o.icon} size={16} color={o.active ? C.lilac : C.fg2} />
                <span style={{ fontFamily: FS, fontSize: 11, letterSpacing: '.04em' }}>{o.label}</span>
              </div>
            ))}
          </div>

          <div style={{
            padding: 14, border: `1px dashed ${C.border2}`,
            display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24,
          }}>
            <Icon name="paperclip" size={16} color={C.fg3} />
            <span style={{ flex: 1, fontFamily: FS, fontSize: 11.5, color: C.fg3 }}>添付ファイル (任意)</span>
            <span style={{ fontFamily: FM, fontSize: 10, color: C.lilac, letterSpacing: '.08em' }}>選択</span>
          </div>

          <PrimaryBtn full icon="send" onClick={() => { window.alert('相談を送信しました。担当コンサルから数営業日以内に返信が届きます。'); window.SKG_NAV && window.SKG_NAV.closeConsult(); }}>送信する</PrimaryBtn>
          <div style={{ fontFamily: FS, fontSize: 10.5, color: C.fg3, textAlign: 'center', marginTop: 14, lineHeight: 1.6 }}>
            送信後、登録メールに確認メールが届きます。
          </div>
        </div>
      </div>
    </>
  );
}

window.SKG_MATCH = { MatchDetailScreen, ConsultFormScreen };