/* global React */
const { useState, useEffect } = React;

const C = {
  bg0: '#07050D', bg1: '#0B0814', bg2: '#15111F', bg3: '#1E1830', bg4: '#2A2240',
  border: 'rgba(165,154,202,.14)',
  border2: 'rgba(165,154,202,.28)',
  borderGlow: 'rgba(165,154,202,.56)',
  fg1: '#FFFFFF',
  fg2: 'rgba(231,224,255,.72)',
  fg3: 'rgba(231,224,255,.48)',
  fg4: 'rgba(231,224,255,.24)',
  lilac: '#A59ACA', lilacGlow: '#C9BEFF', lilacDeep: '#6E5FA0',
  cyan: '#7DF9FF', magenta: '#FF6EC7',
  warning: '#F4B860',
};
const FS = '"Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif';
const FF = '"Noto Serif JP", "Hiragino Mincho ProN", serif';
const FM = '"JetBrains Mono", "Noto Sans JP", "Hiragino Kaku Gothic ProN", monospace, sans-serif';

// Lucide icon (uses globally loaded lucide CDN)
function Icon({ name, size = 18, color, stroke = 1.5, style = {} }) {
  return <i data-lucide={name} style={{ width: size, height: size, color: color || 'currentColor', strokeWidth: stroke, display: 'inline-flex', flexShrink: 0, ...style }}></i>;
}

// Logo mark (hexagon monogram)
function LogoMark({ size = 22 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      <path d="M16 2L28 9V23L16 30L4 23V9L16 2Z" stroke={C.lilac} strokeWidth="1.5"/>
      <path d="M16 9L22 12.5V19.5L16 23L10 19.5V12.5L16 9Z" stroke={C.cyan} strokeWidth="1.2" opacity="0.7"/>
      <circle cx="16" cy="16" r="2" fill={C.lilac}/>
    </svg>
  );
}

// App header — logo + hamburger
function AppHeader({ title, subtitle, back, onBack, right }) {
  return (
    <div style={{
      padding: '14px 18px 12px',
      borderBottom: `1px solid ${C.border}`,
      background: 'rgba(11,8,20,.85)',
      backdropFilter: 'blur(12px)',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      gap: 12,
      position: 'sticky', top: 0, zIndex: 5,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 0 }}>
        {back ? (
          <button onClick={onBack || (() => window.SKG_NAV && window.SKG_NAV.back())} style={{ background: 'transparent', border: 'none', padding: 4, cursor: 'pointer', color: C.fg1, display: 'flex' }}>
            <Icon name="chevron-left" size={22} color={C.fg1} />
          </button>
        ) : (
          <LogoMark size={22} />
        )}
        <div style={{ minWidth: 0 }}>
          {subtitle && <div style={{ fontFamily: FM, fontSize: 9, letterSpacing: '.2em', textTransform: 'uppercase', color: C.lilac }}>{subtitle}</div>}
          <div style={{ fontFamily: FF, fontSize: 19, fontWeight: 600, color: C.fg1, letterSpacing: '-0.02em', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{title}</div>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexShrink: 0 }}>
        {right}
        {!back && <button style={{ background: 'transparent', border: 'none', padding: 6, cursor: 'pointer', color: C.fg1, display: 'flex' }}>
          <Icon name="menu" size={20} color={C.fg1} />
        </button>}
      </div>
    </div>
  );
}

// Bottom nav — 4 tabs
function BottomNav({ active = 'home' }) {
  const tabs = [
    { id: 'home', label: 'ホーム', icon: 'home' },
    { id: 'inbox', label: '受信トレイ', icon: 'inbox' },
    { id: 'cards', label: '名刺', icon: 'credit-card' },
    { id: 'settings', label: '設定', icon: 'settings' },
  ];
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-around', alignItems: 'stretch',
      padding: '8px 4px 18px',
      borderTop: `1px solid ${C.border}`,
      background: 'rgba(11,8,20,.94)', backdropFilter: 'blur(12px)',
    }}>
      {tabs.map(t => {
        const isA = active === t.id;
        return (
          <div key={t.id}
            onClick={() => window.SKG_NAV && window.SKG_NAV.go(t.id)}
            style={{
            flex: 1, padding: '6px 4px', display: 'flex', flexDirection: 'column',
            alignItems: 'center', gap: 4, cursor: 'pointer',
            color: isA ? C.lilac : C.fg3,
            borderTop: isA ? `1px solid ${C.lilac}` : '1px solid transparent',
            marginTop: -9, paddingTop: 14,
          }}>
            <Icon name={t.icon} size={19} stroke={isA ? 1.8 : 1.5} />
            <span style={{ fontFamily: FS, fontSize: 9.5, letterSpacing: '.04em', fontWeight: isA ? 500 : 400 }}>{t.label}</span>
          </div>
        );
      })}
    </div>
  );
}

// Floating "コンサルに相談" button
function ConsultFAB({ withPlus = false }) {
  return (
    <div style={{ position: 'absolute', right: 16, bottom: 90, zIndex: 10, display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'flex-end' }}>
      {withPlus && (
        <button onClick={() => window.SKG_NAV && window.SKG_NAV.go('cards-upload')} style={{
          width: 52, height: 52, borderRadius: '50%', border: `1px solid ${C.lilac}`,
          background: C.bg2, color: C.lilac, cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: `0 0 16px rgba(165,154,202,.4)`,
        }}>
          <Icon name="plus" size={22} color={C.lilac} stroke={1.8} />
        </button>
      )}
      <button onClick={() => window.SKG_NAV && window.SKG_NAV.openConsult()} style={{
        height: 48, padding: '0 18px', borderRadius: 0,
        border: `1px solid ${C.lilac}`,
        background: C.lilac, color: C.bg1, cursor: 'pointer',
        display: 'flex', alignItems: 'center', gap: 8,
        fontFamily: FS, fontSize: 12, fontWeight: 600, letterSpacing: '.06em',
        boxShadow: `0 0 24px rgba(165,154,202,.5)`,
      }}>
        <Icon name="messages-square" size={16} color={C.bg1} stroke={2} />
        コンサルに相談
      </button>
    </div>
  );
}

// Status badge for matching proposals
function StatusBadge({ status }) {
  const map = {
    unread: { label: '未読', color: C.cyan, icon: 'circle-dot' },
    pending: { label: '応答待ち', color: C.lilac, icon: 'clock' },
    accepted: { label: '承諾', color: C.magenta, icon: 'check' },
    declined: { label: '辞退', color: C.fg3, icon: 'x' },
    expired: { label: '失効', color: C.fg4, icon: 'circle-slash' },
  };
  const s = map[status] || map.pending;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '3px 8px', border: `1px solid ${s.color}`,
      color: s.color, fontFamily: FM, fontSize: 9.5, letterSpacing: '.1em',
      textTransform: 'uppercase',
    }}>
      <Icon name={s.icon} size={10} color={s.color} stroke={1.8} />
      {s.label}
    </span>
  );
}

// Withdrawn company label
function WithdrawnLabel() {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '4px 10px', border: `1px dashed ${C.fg4}`,
      color: C.fg3, fontFamily: FM, fontSize: 10, letterSpacing: '.1em',
    }}>
      <Icon name="user-x" size={11} stroke={1.5} />
      退会済み企業
    </span>
  );
}

// Primary button
function PrimaryBtn({ children, full, disabled, glow = true, onClick, icon, style = {} }) {
  return (
    <button onClick={onClick} disabled={disabled} style={{
      width: full ? '100%' : 'auto',
      padding: '13px 20px',
      background: disabled ? C.bg3 : C.lilac,
      color: disabled ? C.fg3 : C.bg1,
      border: 'none', cursor: disabled ? 'not-allowed' : 'pointer',
      fontFamily: FS, fontSize: 13, fontWeight: 600, letterSpacing: '.06em',
      boxShadow: !disabled && glow ? `0 0 20px rgba(165,154,202,.45)` : 'none',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      ...style,
    }}>
      {icon && <Icon name={icon} size={16} color={disabled ? C.fg3 : C.bg1} stroke={2} />}
      {children}
    </button>
  );
}

function SecondaryBtn({ children, full, danger, onClick, icon, style = {} }) {
  return (
    <button onClick={onClick} style={{
      width: full ? '100%' : 'auto',
      padding: '13px 20px',
      background: 'transparent',
      color: danger ? C.magenta : C.fg1,
      border: `1px solid ${danger ? C.magenta : C.border2}`,
      cursor: 'pointer',
      fontFamily: FS, fontSize: 13, fontWeight: 500, letterSpacing: '.04em',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      ...style,
    }}>
      {icon && <Icon name={icon} size={16} color={danger ? C.magenta : C.fg1} stroke={1.8} />}
      {children}
    </button>
  );
}

// Input field
function Field({ label, type = 'text', placeholder, value, hint, error, icon, suffix, required, multiline }) {
  return (
    <label style={{ display: 'block', marginBottom: 16 }}>
      {label && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: FS, fontSize: 11, fontWeight: 500, color: C.fg2, letterSpacing: '.06em', marginBottom: 8, textTransform: 'uppercase' }}>
          {label}
          {required && <span style={{ color: C.magenta, fontFamily: FM }}>·</span>}
        </div>
      )}
      <div style={{
        display: 'flex', alignItems: multiline ? 'flex-start' : 'center', gap: 10,
        padding: multiline ? '12px 14px' : '0 14px',
        height: multiline ? 'auto' : 46,
        minHeight: multiline ? 96 : 46,
        background: C.bg2,
        border: `1px solid ${error ? C.magenta : C.border2}`,
        borderRadius: 2,
      }}>
        {icon && <Icon name={icon} size={16} color={C.fg3} />}
        {multiline ? (
          <div style={{ flex: 1, fontFamily: FS, fontSize: 13, color: value ? C.fg1 : C.fg3, lineHeight: 1.7, whiteSpace: 'pre-wrap' }}>
            {value || placeholder}
          </div>
        ) : (
          <div style={{ flex: 1, fontFamily: type === 'password' ? FM : FS, fontSize: 13.5, color: value ? C.fg1 : C.fg3, letterSpacing: type === 'password' ? '.2em' : 0 }}>
            {value || placeholder}
          </div>
        )}
        {suffix}
      </div>
      {hint && !error && <div style={{ fontFamily: FS, fontSize: 10.5, color: C.fg3, marginTop: 6 }}>{hint}</div>}
      {error && <div style={{ fontFamily: FS, fontSize: 10.5, color: C.magenta, marginTop: 6 }}>{error}</div>}
    </label>
  );
}

// Background grid + radial glow
function ScreenBg({ children, style = {} }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, overflow: 'hidden',
      background: C.bg1,
      backgroundImage: `
        radial-gradient(600px 400px at 20% 0%, rgba(165, 154, 202, 0.12), transparent 60%),
        radial-gradient(500px 300px at 95% 100%, rgba(125, 249, 255, 0.05), transparent 60%),
        linear-gradient(rgba(165,154,202,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(165,154,202,.04) 1px, transparent 1px)
      `,
      backgroundSize: 'auto, auto, 48px 48px, 48px 48px',
      ...style,
    }}>
      {children}
    </div>
  );
}

// Phone shell — common sizing for canvas (no iOS chrome — pure app surface)
function PhoneShell({ children, label }) {
  return (
    <div style={{
      width: 390, height: 844,
      background: C.bg1,
      position: 'relative', overflow: 'hidden',
      border: `1px solid ${C.border}`,
      fontFamily: FS,
    }}>
      <ScreenBg />
      <div style={{ position: 'relative', width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
        {children}
      </div>
    </div>
  );
}

// Section divider — eyebrow + line
function Eyebrow({ children, style = {} }) {
  return (
    <div style={{
      fontFamily: FM, fontSize: 9.5, letterSpacing: '.2em',
      color: C.lilac, textTransform: 'uppercase',
      display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12,
      ...style,
    }}>
      <span>{children}</span>
      <span style={{ flex: 1, height: 1, background: `linear-gradient(90deg, ${C.border2}, transparent)` }} />
    </div>
  );
}

window.SKG = {
  C, FS, FF, FM, Icon, LogoMark, AppHeader, BottomNav, ConsultFAB,
  StatusBadge, WithdrawnLabel, PrimaryBtn, SecondaryBtn, Field,
  ScreenBg, PhoneShell, Eyebrow,
};