/* MainLayout.jsx — WebGNB + WebSidebar shell for KARE Partner Web */

const KARE = {
  primary: '#0D7A6E',
  primaryHover: '#E6F4F2',
  primaryPressed: '#085C53',
  gold: '#C9A84C',
  n900: '#111827',
  n700: '#374151',
  n500: '#6B7280',
  n300: '#D1D5DB',
  n100: '#F3F4F6',
  n000: '#FFFFFF',
  // status
  voucher_issued: '#2563EB',
  voucher_active: '#059669',
  voucher_used: '#7C3AED',
  voucher_expired: '#9CA3AF',
  voucher_cancelled: '#6B7280',
  voucher_pending: '#D97706',
  bk_requested: '#F59E0B',
  bk_confirmed: '#059669',
  bk_rejected: '#DC2626',
  bk_completed: '#7C3AED',
  // semantic
  error: '#DC2626', errorBg: '#FEF2F2',
  warning: '#D97706', warningBg: '#FFFBEB',
  success: '#059669', successBg: '#ECFDF5',
  info: '#0284C7', infoBg: '#F0F9FF',
  // shadows
  shadowSm: '0 1px 3px rgba(0,0,0,0.10)',
  shadowMd: '0 4px 12px rgba(0,0,0,0.12)',
  shadowLg: '0 8px 24px rgba(0,0,0,0.15)',
};

const FONT = "'Inter', 'Pretendard', 'Noto Sans KR', system-ui, -apple-system, sans-serif";

/* ---------- Icons ---------- */
const I = {
  dashboard: (p) => (
    <svg width={p?.size||18} height={p?.size||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/>
      <rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/>
    </svg>
  ),
  booking: (p) => (
    <svg width={p?.size||18} height={p?.size||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="16" rx="2"/><line x1="3" y1="10" x2="21" y2="10"/>
      <line x1="8" y1="3" x2="8" y2="7"/><line x1="16" y1="3" x2="16" y2="7"/>
    </svg>
  ),
  voucher: (p) => (
    <svg width={p?.size||18} height={p?.size||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 8V6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2a2 2 0 0 0 0 4v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 0 0-4z"/>
      <line x1="9" y1="8" x2="9" y2="16"/>
    </svg>
  ),
  settlement: (p) => (
    <svg width={p?.size||18} height={p?.size||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
    </svg>
  ),
  cancel: (p) => (
    <svg width={p?.size||18} height={p?.size||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
    </svg>
  ),
  products: (p) => (
    <svg width={p?.size||18} height={p?.size||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/>
    </svg>
  ),
  manual: (p) => (
    <svg width={p?.size||18} height={p?.size||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
    </svg>
  ),
  support: (p) => (
    <svg width={p?.size||18} height={p?.size||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
    </svg>
  ),
  settings: (p) => (
    <svg width={p?.size||18} height={p?.size||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="3"/>
      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
    </svg>
  ),
  logout: (p) => (
    <svg width={p?.size||16} height={p?.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>
    </svg>
  ),
  chevron: (p) => (
    <svg width={p?.size||14} height={p?.size||14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="9 18 15 12 9 6"/>
    </svg>
  ),
  arrowUp: (p) => (
    <svg width={p?.size||12} height={p?.size||12} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/>
    </svg>
  ),
  arrowDown: (p) => (
    <svg width={p?.size||12} height={p?.size||12} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/>
    </svg>
  ),
  warn: (p) => (
    <svg width={p?.size||18} height={p?.size||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
      <line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
    </svg>
  ),
  lock: (p) => (
    <svg width={p?.size||14} height={p?.size||14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
    </svg>
  ),
  bell: (p) => (
    <svg width={p?.size||16} height={p?.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>
    </svg>
  ),
  users: (p) => (
    <svg width={p?.size||14} height={p?.size||14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
      <path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
    </svg>
  ),
};

/* ---------- GNB ---------- */
function WebGNB({ partnerName = 'Seoul Aesthetic Clinic', userName = 'Ji-hyun Park', suspended = false }) {
  const navItems = ['대시보드', '예약 관리', '바우처 관리', '정산', '고객관리'];
  const active = '대시보드';
  return (
    <div style={{
      height: 60, background: KARE.n000, borderBottom: `1px solid ${KARE.n300}`,
      display: 'flex', alignItems: 'center', paddingLeft: 24, paddingRight: 24,
      position: 'relative', zIndex: 2,
    }}>
      {/* Logo */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, width: 216 }}>
        <div style={{
          width: 28, height: 28, borderRadius: 6, background: KARE.primary,
          color: KARE.n000, display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontWeight: 700, fontSize: 13, letterSpacing: 0.2,
        }}>K</div>
        <div style={{ fontSize: 15, fontWeight: 700, color: KARE.n900 }}>KARE</div>
        <div style={{
          fontSize: 11, fontWeight: 600, color: KARE.n500,
          padding: '3px 8px', borderRadius: 999, border: `1px solid ${KARE.n300}`,
          letterSpacing: 0.4, textTransform: 'uppercase',
        }}>Partner</div>
      </div>

      {/* Center nav */}
      <div style={{ flex: 1, display: 'flex', justifyContent: 'center', gap: 4 }}>
        {navItems.map((n) => (
          <div key={n} style={{
            padding: '8px 14px', fontSize: 14, fontWeight: n === active ? 600 : 500,
            color: n === active ? KARE.primary : KARE.n700,
            borderRadius: 6, cursor: 'pointer',
            background: n === active ? KARE.primaryHover : 'transparent',
          }}>{n}</div>
        ))}
      </div>

      {/* Right */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <div style={{ position: 'relative', color: KARE.n500, cursor: 'pointer' }}>
          <I.bell />
          <div style={{
            position: 'absolute', top: -2, right: -2, width: 8, height: 8,
            borderRadius: 999, background: KARE.error, border: `2px solid ${KARE.n000}`,
          }} />
        </div>
        <div style={{ width: 1, height: 24, background: KARE.n300 }} />
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', lineHeight: 1.3 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: KARE.n900, display: 'flex', alignItems: 'center', gap: 6 }}>
            {partnerName}
            {suspended && (
              <span style={{
                fontSize: 10, fontWeight: 700, color: KARE.warning, background: KARE.warningBg,
                padding: '2px 6px', borderRadius: 4, letterSpacing: 0.4,
              }}>SUSPENDED</span>
            )}
          </div>
          <div style={{ fontSize: 11, color: KARE.n500 }}>{userName}</div>
        </div>
        <div style={{
          width: 32, height: 32, borderRadius: 999, background: KARE.n100,
          border: `1px solid ${KARE.n300}`, display: 'flex', alignItems: 'center',
          justifyContent: 'center', fontSize: 12, fontWeight: 600, color: KARE.n700,
        }}>JP</div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6, padding: '7px 10px',
          borderRadius: 6, color: KARE.n500, fontSize: 12, fontWeight: 500, cursor: 'pointer',
        }}>
          <I.logout /> Logout
        </div>
      </div>
    </div>
  );
}

/* ---------- Sidebar ---------- */
function WebSidebar({ active = 'dashboard', disabledItems = [] }) {
  const items = [
    { id: 'dashboard', label: '대시보드', icon: I.dashboard },
    { id: 'booking', label: '예약 관리', icon: I.booking },
    { id: 'voucher', label: '바우처 관리', icon: I.voucher },
    { id: 'settlement', label: '정산 내역', icon: I.settlement },
    { id: 'manual', label: '수동 사용처리', icon: I.manual },
    { id: 'cancel', label: '취소 요청', icon: I.cancel },
    { id: 'products', label: '상품 관리', icon: I.products },
    { id: 'support', label: '1:1 문의', icon: I.support },
    { id: 'settings', label: '설정', icon: I.settings },
  ];

  return (
    <div style={{
      width: 240, background: KARE.n000, borderRight: `1px solid ${KARE.n300}`,
      padding: '16px 0', display: 'flex', flexDirection: 'column', gap: 2,
      flexShrink: 0,
    }}>
      <div style={{
        padding: '8px 24px 12px', fontSize: 11, fontWeight: 600, color: KARE.n500,
        letterSpacing: 0.6, textTransform: 'uppercase',
      }}>Menu</div>
      {items.map((it) => {
        const isActive = it.id === active;
        const isDisabled = disabledItems.includes(it.id);
        return (
          <div key={it.id} style={{
            position: 'relative', display: 'flex', alignItems: 'center', gap: 12,
            padding: '10px 24px', fontSize: 14,
            fontWeight: isActive ? 600 : 500,
            color: isDisabled ? KARE.n300 : isActive ? KARE.primary : KARE.n700,
            background: isActive ? KARE.primaryHover : 'transparent',
            cursor: isDisabled ? 'not-allowed' : 'pointer',
          }}>
            {isActive && (
              <div style={{
                position: 'absolute', left: 0, top: 0, bottom: 0, width: 3, background: KARE.primary,
              }} />
            )}
            <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
              <it.icon />
            </span>
            <span style={{ flex: 1 }}>{it.label}</span>
            {isDisabled && <span style={{ color: KARE.n300 }}><I.lock size={12}/></span>}
          </div>
        );
      })}
      <div style={{ flex: 1 }} />
      <div style={{
        margin: '0 16px', padding: 14, borderRadius: 8, background: KARE.n100,
        fontSize: 11, color: KARE.n500, lineHeight: 1.5,
      }}>
        <div style={{ fontWeight: 600, color: KARE.n700, marginBottom: 2 }}>Partner ID</div>
        PTR-2024-0471
      </div>
    </div>
  );
}

/* ---------- MainLayout shell ---------- */
function MainLayout({ children, suspended = false, sidebarActive = 'dashboard', sidebarDisabled = [], banner = null }) {
  return (
    <div style={{
      width: 1280, height: 'auto', minHeight: 960, background: KARE.n100,
      fontFamily: FONT, color: KARE.n900, display: 'flex', flexDirection: 'column',
    }}>
      <WebGNB suspended={suspended} />
      {banner}
      <div style={{ display: 'flex', flex: 1, minHeight: 900 }}>
        <WebSidebar active={sidebarActive} disabledItems={sidebarDisabled} />
        <div style={{ flex: 1, padding: 32, minWidth: 0 }}>
          {children}
        </div>
      </div>
    </div>
  );
}

/* ---------- Status badge ---------- */
function StatusBadge({ kind = 'requested', label }) {
  const map = {
    requested:  { color: KARE.bk_requested,  bg: '#FFFBEB', border: 'rgba(245,158,11,0.2)',   t: 'REQUESTED' },
    confirmed:  { color: KARE.bk_confirmed,  bg: '#ECFDF5', border: 'rgba(5,150,105,0.2)',    t: 'CONFIRMED' },
    rejected:   { color: KARE.bk_rejected,   bg: '#FEF2F2', border: 'rgba(220,38,38,0.2)',    t: 'REJECTED' },
    completed:  { color: KARE.bk_completed,  bg: '#F5F3FF', border: 'rgba(124,58,237,0.2)',   t: 'COMPLETED' },
    issued:     { color: KARE.voucher_issued, bg: '#EFF6FF', border: 'rgba(37,99,235,0.2)',   t: 'ISSUED' },
    active:     { color: KARE.voucher_active, bg: '#ECFDF5', border: 'rgba(5,150,105,0.2)',   t: 'ACTIVE' },
    fully_used: { color: KARE.voucher_used,   bg: '#F5F3FF', border: 'rgba(124,58,237,0.2)',  t: 'FULLY_USED' },
    expired:    { color: KARE.voucher_expired,bg: '#F3F4F6', border: 'rgba(156,163,175,0.3)', t: 'EXPIRED' },
  };
  const s = map[kind] || map.requested;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '3px 8px', borderRadius: 4, background: s.bg,
      border: `1px solid ${s.border}`,
      fontSize: 11, fontWeight: 600, color: s.color, letterSpacing: 0.4,
      fontFamily: "'Inter', sans-serif",
    }}>
      <span style={{ width: 6, height: 6, borderRadius: 999, background: s.color }} />
      {label || s.t}
    </span>
  );
}

Object.assign(window, { KARE, FONT, I, MainLayout, WebGNB, WebSidebar, StatusBadge });