const TOASTS = {
  like: { icon: 'heart', name: '국밥마니아', text: '내 사진을 좋아합니다', thumb: true, badge: 'var(--text-accent)' },
  comment: { icon: 'message-circle', name: '야식러버', text: '댓글: "여기 웨이팅 심해요"', thumb: true, badge: 'var(--text-accent)' },
  report: { icon: 'map-pin-question', system: true, name: '위치 제보가 도착했어요', text: '야식탐험가님 외 1명이 「청년다방 역삼점」으로 제보', thumb: true, badge: 'var(--text-warning)', action: '확인' },
  approved: { icon: 'map-pin-check', name: '순대국매니아', text: '내 위치 제보를 승인했어요', thumb: true, badge: 'var(--text-success)' },
  follow: { icon: 'user-plus', name: '떡볶이덕후', text: '나를 팔로우하기 시작했어요', badge: 'var(--text-accent)', action: '맞팔로우' },
  missionApproved: { icon: 'circle-check', system: true, name: '월간 밀키트 미션', text: '인증샷이 승인됐어요 · 응모권 2매 지급', thumb: true, badge: 'var(--text-success)', action: '확인' },
  missionRejected: { icon: 'x', system: true, name: '월간 밀키트 미션', text: '인증샷이 반려됐어요 · 사유 확인 후 재응모', thumb: true, badge: 'var(--text-danger)', action: '사유 보기' },
  missionNew: { icon: 'flag', system: true, name: '새 미션이 열렸어요', text: '월간 밀키트 인증샷 · 응모권 2매', thumb: true, badge: 'var(--text-accent)', action: '보러가기' },
  missionRemind: { icon: 'bell-ringing', system: true, name: '월간 밀키트 미션', text: '알림 신청한 미션이 오늘 시작했어요', thumb: true, badge: 'var(--text-accent)', action: '참여하기' },
  notice: { icon: 'speakerphone', system: true, name: '공지', text: '위치 정보 처리방침이 9/1자 개정됩니다', badge: 'var(--bg-ink)', action: '보기' },
  event: { icon: 'gift', system: true, name: '여름 한정 배지 이벤트', text: '8/31까지 카페 3곳을 기록하면 배지 지급', badge: 'var(--text-accent)', action: '보러가기' },
  maintenance: { icon: 'tool', system: true, name: '서버 점검 안내', text: '8/28 02:00~04:00 사진 업로드가 잠시 중단됩니다', badge: 'var(--text-warning)', action: '자세히' }
};

function InAppToast({ item, kind, onClose, onAction }) {
  const { Avatar } = window.SpotureDesignSystem_f7ad96;
  const it = item || TOASTS[kind] || TOASTS.comment;
  const [gone, setGone] = React.useState(false);
  const hide = () => { setGone(true); setTimeout(() => onClose && onClose(), 200); };
  return (
    <div style={{ position: 'absolute', top: 52, left: 12, right: 12, zIndex: 90, transform: gone ? 'translateY(-130%)' : 'translateY(0)', opacity: gone ? 0 : 1, transition: 'transform .22s cubic-bezier(.22,1,.36,1), opacity .18s ease' }}>
      <div onClick={onAction} style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--surface-1)', borderRadius: 20, padding: '13px 14px', boxShadow: 'var(--shadow-float)', border: '1px solid var(--border)', cursor: 'pointer' }}>
        <div style={{ position: 'relative', flexShrink: 0 }}>
          {it.system
            ? <div style={{ width: 40, height: 40, borderRadius: 12, background: it.badge || 'var(--text-accent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className={'ti ti-' + it.icon} style={{ fontSize: 19, color: '#fff' }}></i></div>
            : <React.Fragment>
                <Avatar user={it.user || it.name} size={40} />
                <div style={{ position: 'absolute', right: -3, bottom: -3, width: 19, height: 19, borderRadius: '50%', background: it.badge || 'var(--text-accent)', border: '2px solid var(--surface-1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className={'ti ti-' + it.icon} style={{ fontSize: 9, color: '#fff' }}></i></div>
              </React.Fragment>}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
            <span style={{ font: '600 14px/1.3 var(--font-family)', color: 'var(--text-primary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{it.name}</span>
            <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', flexShrink: 0 }}>지금</span>
          </div>
          <span style={{ font: 'var(--text-small)', color: 'var(--text-secondary)', display: 'block', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{it.text}</span>
        </div>
        {it.action
          ? <span onClick={e => { e.stopPropagation(); onAction ? onAction() : hide(); }} style={{ flexShrink: 0, font: '600 13px/1 var(--font-family)', color: '#fff', background: 'var(--text-accent)', borderRadius: 999, padding: '10px 13px', cursor: 'pointer' }}>{it.action}</span>
          : it.thumb && <div style={{ width: 40, height: 40, borderRadius: 12, background: 'var(--surface-2)', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className="ti ti-photo" style={{ fontSize: 15, color: 'var(--text-muted)' }}></i></div>}
        <i className="ti ti-x" onClick={e => { e.stopPropagation(); hide(); }} style={{ fontSize: 15, color: 'var(--text-muted)', flexShrink: 0, cursor: 'pointer', padding: 2 }}></i>
      </div>
    </div>
  );
}
window.InAppToast = InAppToast;

function InAppAlert({ kind, onClose, onPrimary, onSecondary }) {
  const map = {
    badge: { icon: 'award', title: '배지를 받았어요', body: '국밥집 10곳을 등록해서\n「국밥전문가」 배지를 획득했어요.', primary: '배지 보러가기', secondary: '닫기' },
    approved: { icon: 'map-pin-check', title: '제보가 승인됐어요', body: '순대국매니아님이 내 제보를 승인했어요.\n위치제보왕 배지에 1건 적립됐어요.', primary: '게시물 보기', secondary: '닫기' },
    permission: { icon: 'bell', title: '알림을 받아보시겠어요?', body: '내 게시물의 위치 제보와 댓글을\n바로 알려드릴게요.', primary: '알림 허용', secondary: '나중에' },
    missionApproved: { icon: 'circle-check', tone: 'success', title: '인증샷이 승인됐어요', body: '「월간 밀키트 인증샷」 3장이 모두 통과했어요.\n응모권 2매가 지급됐습니다.', primary: '응모권 확인하기', secondary: '닫기' },
    missionRejected: { icon: 'photo-x', tone: 'danger', title: '인증샷이 반려됐어요', body: '밀키트 포장이 보이지 않아 확인이 어려웠어요.\n다시 촬영해 응모할 수 있어요.', primary: '사진 다시 올리기', secondary: '나중에' },
    missionNew: { icon: 'flag', title: '새 미션이 열렸어요', body: '「월간 밀키트 인증샷」이 시작됐어요.\n집에서 찍은 사진 3장이면 응모권 2매를 드려요.', primary: '미션 보러가기', secondary: '나중에' },
    missionRemind: { icon: 'bell-plus', title: '미션 알림을 받을까요?', body: '월간 밀키트 미션이 열리면 바로 알려드릴게요.\n마감 3일 전에도 한 번 더 알려드려요.', primary: '알림 받기', secondary: '괜찮아요' }
  };
  const c = map[kind] || map.badge;
  return (
    <div style={{ position: 'absolute', inset: 0, background: 'rgba(20,20,20,.42)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 28, zIndex: 90 }}>
      <div style={{ width: '100%', maxWidth: 300, background: 'var(--surface-1)', borderRadius: 'var(--radius-card)', padding: '26px 22px 20px', boxShadow: 'var(--shadow-float)', textAlign: 'center' }}>
        <div style={{ width: 54, height: 54, borderRadius: '50%', background: c.tone === 'danger' ? 'var(--bg-danger)' : c.tone === 'success' ? 'var(--bg-success, var(--surface-2))' : 'var(--bg-accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 15px' }}><i className={'ti ti-' + c.icon} style={{ fontSize: 25, color: c.tone === 'danger' ? 'var(--text-danger)' : c.tone === 'success' ? 'var(--text-success)' : 'var(--text-accent)' }}></i></div>
        <span style={{ font: 'var(--text-heading)', display: 'block', marginBottom: 8 }}>{c.title}</span>
        <p style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', margin: '0 0 20px', lineHeight: 1.65, whiteSpace: 'pre-line' }}>{c.body}</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <button onClick={onPrimary || onClose} style={{ width: '100%', padding: '15px 0', border: 'none', borderRadius: 999, background: c.tone === 'success' ? 'var(--text-success)' : 'var(--text-accent)', color: '#fff', font: '600 15px/1 var(--font-family)', cursor: 'pointer' }}>{c.primary}</button>
          <button onClick={onSecondary || onClose} style={{ width: '100%', padding: '14px 0', border: 'none', borderRadius: 999, background: 'transparent', color: 'var(--text-secondary)', font: '600 14px/1 var(--font-family)', cursor: 'pointer' }}>{c.secondary}</button>
        </div>
      </div>
    </div>
  );
}
window.InAppAlert = InAppAlert;