/* kiosk-ui.jsx — primitive UI components for the kiosk */

const K = {
  // Hospital-tech palette: deep teal, less coral
  bg:        '#F1F9F9',
  bgDeep:    '#E8F4F5',
  ink:       '#0F2A2C',
  ink2:      '#2F5252',
  ink3:      '#4F8A8B',
  meta:      '#7B9A9C',
  line:      '#D4E6E7',
  primary:   '#6FC3C4',
  primaryDk: '#4F8A8B',
  primary900:'#2F5252',
  primary100:'#D2ECED',
  primary050:'#F1F9F9',
  coral:     '#FB735C',
  white:     '#FFFFFF',
  warning:   '#A97B00',
  warningBg: '#FFF1CC',
  danger:    '#D63131',
  dangerBg:  '#FBD3D3',
  success:   '#28A338',
  successBg: '#D6F0DA',
};

window.K = K;

// ── Big primary button (kiosk-scale) ──────────────────────
function KButton({ children, onClick, variant = 'primary', size = 'lg', icon, iconRight, style, disabled }) {
  const base = {
    border: 'none', cursor: disabled ? 'not-allowed' : 'pointer',
    borderRadius: 999, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    gap: 14, fontFamily: "'Anuphan'", letterSpacing: 0,
    transition: 'transform .15s ease, box-shadow .15s ease, background .15s ease',
    opacity: disabled ? 0.4 : 1,
  };
  const sizes = {
    xl: { style: { minHeight: 104 }, className: 'px-8 py-4 sm:px-12 sm:py-6 md:px-14 md:py-8 text-xl sm:text-3xl lg:text-4xl font-semibold leading-none' },
    lg: { style: { minHeight: 80  }, className: 'px-6 py-4 sm:px-10 sm:py-5 md:px-10 md:py-6 text-lg sm:text-2xl lg:text-3xl font-semibold leading-none' },
    md: { style: { minHeight: 60  }, className: 'px-5 py-3 sm:px-7 sm:py-4 md:px-7 md:py-5 text-lg sm:text-xl lg:text-2xl font-medium leading-none' },
    sm: { style: { minHeight: 44  }, className: 'px-4 py-2 sm:px-5 sm:py-3 md:px-5 md:py-3 text-base sm:text-lg lg:text-xl font-medium leading-none' },
  };
  const variants = {
    primary:   { background: K.primary900, color: '#fff', boxShadow: '0 8px 20px rgba(47,82,82,.25)' },
    secondary: { background: '#fff', color: K.primary900, border: `2px solid ${K.primary900}` },
    ghost:     { background: K.primary050, color: K.primary900 },
    danger:    { background: K.danger, color: '#fff', boxShadow: '0 8px 20px rgba(214,49,49,.25)' },
    coral:     { background: K.coral, color: '#fff' },
  };
  return (
    <button onClick={disabled ? undefined : onClick}
      className={sizes[size].className}
      style={{ ...base, ...sizes[size].style, ...variants[variant], ...style }}
      onMouseDown={e => !disabled && (e.currentTarget.style.transform = 'scale(.98)')}
      onMouseUp={e => (e.currentTarget.style.transform = 'scale(1)')}
      onMouseLeave={e => (e.currentTarget.style.transform = 'scale(1)')}>
      {icon && <i className={`ph ${icon}`} style={{ fontSize: '1.1em' }}></i>}
      {children}
      {iconRight && <i className={`ph ${iconRight}`} style={{ fontSize: '1.1em' }}></i>}
    </button>
  );
}

// ── Card ──────────────────────────────────────────────────
function KCard({ children, style, padding = 32, onClick, accent }) {
  return (
    <div onClick={onClick} style={{
      background: '#fff',
      borderRadius: 24,
      border: `1px solid ${K.line}`,
      boxShadow: '0 4px 16px rgba(47,82,82,.06)',
      padding,
      position: 'relative',
      cursor: onClick ? 'pointer' : 'default',
      ...style,
    }}>
      {accent && <div style={{
        position: 'absolute', top: 0, left: 24, right: 24, height: 4,
        background: accent, borderRadius: '0 0 4px 4px',
      }} />}
      {children}
    </div>
  );
}

// ── Step indicator (top of kiosk) ─────────────────────────
function KStepRail({ steps, current }) {
  return (
    <div className="px-4 sm:px-10 md:px-20" style={{ display: 'flex', alignItems: 'flex-start', gap: 0 }}>
      {steps.map((s, i) => {
        const done = i < current;
        const active = i === current;
        return (
          <React.Fragment key={s.id}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, flex: '0 0 auto', minWidth: 100 }}>
              <div className="text-lg sm:text-2xl lg:text-3xl font-bold leading-none" style={{
                width: 64, height: 64, borderRadius: '50%',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: done ? K.primary900 : active ? '#fff' : K.bgDeep,
                color: done ? '#fff' : active ? K.primary900 : K.meta,
                border: active ? `4px solid ${K.primary900}` : `1px solid ${K.line}`,
                transition: 'all .3s',
              }}>
                {done ? <i className="ph-bold ph-check" style={{ fontSize: 28 }}></i> : i + 1}
              </div>
              <div className={active ? 'text-base sm:text-lg lg:text-xl font-semibold leading-tight' : 'text-base sm:text-lg font-medium leading-tight'} style={{
                color: active ? K.primary900 : done ? K.ink2 : K.meta,
                whiteSpace: 'nowrap', textAlign: 'center',
              }}>{(window.t || (x => x))(s.label)}</div>
            </div>
            {i < steps.length - 1 && (
              <div style={{
                flex: 1, height: 3, marginTop: 30,
                background: done ? K.primary900 : K.line,
                transition: 'background .3s',
              }} />
            )}
          </React.Fragment>
        );
      })}
    </div>
  );
}

// ── Avatar (animated nurse circle) ────────────────────────
function NurseAvatar({ size = 220, speaking, mood = 'neutral' }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: `radial-gradient(circle at 30% 25%, ${K.primary100}, ${K.primary} 90%)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      position: 'relative', overflow: 'hidden',
      boxShadow: speaking
        ? `0 0 0 8px rgba(111,195,196,.25), 0 0 0 18px rgba(111,195,196,.12), 0 12px 30px rgba(47,82,82,.18)`
        : `0 12px 30px rgba(47,82,82,.18)`,
      transition: 'box-shadow .3s',
    }}>
      <img src="assets/nurse-mordee.jpg" alt="MorDee Nurse" draggable={false} style={{
        width: '100%', height: '100%', objectFit: 'cover', display: 'block',
        userSelect: 'none', pointerEvents: 'none',
      }}/>
      {speaking && (
        <div className="text-base font-semibold leading-none" style={{
          position: 'absolute', bottom: -6, right: -6,
          background: K.success, color: '#fff', borderRadius: 999,
          padding: '6px 12px',
          display: 'flex', alignItems: 'center', gap: 6,
          boxShadow: '0 4px 10px rgba(40,163,56,.35)',
        }}>
          <span style={{
            width: 8, height: 8, borderRadius: '50%', background: '#fff',
            animation: 'kiosk-pulse 1s infinite',
          }} />
          กำลังพูด
        </div>
      )}
    </div>
  );
}

// ── Speech bubble (nurse → user) ──────────────────────────
function SpeechBubble({ children, style }) {
  return (
    <div className="text-xl sm:text-3xl lg:text-4xl font-normal leading-snug w-full p-5 sm:p-7 md:p-9" style={{
      background: '#fff',
      borderRadius: '28px 28px 28px 8px',
      boxShadow: '0 6px 20px rgba(47,82,82,.10)',
      border: `1px solid ${K.line}`,
      color: K.ink,
      ...style,
    }}>{children}</div>
  );
}

// ── Tag / chip ────────────────────────────────────────────
function KTag({ children, tone = 'neutral', icon, size = 'md' }) {
  const tones = {
    neutral:  { bg: K.bgDeep, fg: K.primary900 },
    brand:    { bg: K.primary, fg: '#fff' },
    danger:   { bg: K.dangerBg, fg: K.danger },
    warning:  { bg: K.warningBg, fg: K.warning },
    success:  { bg: K.successBg, fg: K.success },
    coral:    { bg: '#FFE6E0', fg: '#C84122' },
    info:     { bg: '#E3E5FD', fg: '#4858C7' },
  };
  const t = tones[tone];
  const sizes = {
    sm: { style: {}, className: 'px-2 py-1 sm:px-3 sm:py-1 text-base font-medium leading-none' },
    md: { style: {}, className: 'px-3 py-2 sm:px-4 sm:py-2 md:px-5 md:py-2 text-base sm:text-lg lg:text-xl font-medium leading-none' },
    lg: { style: {}, className: 'px-4 py-3 sm:px-5 sm:py-3 md:px-6 md:py-4 text-lg sm:text-xl lg:text-2xl font-semibold leading-none' },
  };
  return (
    <span className={sizes[size].className} style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      borderRadius: 999, background: t.bg, color: t.fg,
      whiteSpace: 'nowrap', ...sizes[size].style,
    }}>
      {icon && <i className={`ph-fill ${icon}`} style={{ fontSize: '1.15em' }}></i>}
      {children}
    </span>
  );
}

// ── Vital stat tile ───────────────────────────────────────
function VitalTile({ label, value, unit, icon, status = 'normal', sub }) {
  const statusMap = {
    normal: { bg: K.successBg, fg: K.success, label: 'ปกติ' },
    high:   { bg: K.dangerBg,  fg: K.danger,  label: 'สูง'  },
    low:    { bg: K.warningBg, fg: K.warning, label: 'ต่ำ'  },
    mid:    { bg: K.warningBg, fg: K.warning, label: 'เฝ้าระวัง' },
  };
  const s = statusMap[status];
  return (
    <KCard padding={28} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{
          width: 56, height: 56, borderRadius: 16,
          background: K.primary050, color: K.primary900,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <i className={`ph ${icon}`} style={{ fontSize: 28 }}></i>
        </div>
        <span className="text-base font-semibold leading-none" style={{
          padding: '6px 14px', borderRadius: 999,
          background: s.bg, color: s.fg,
        }}>{s.label}</span>
      </div>
      <div className="text-base sm:text-lg lg:text-xl font-medium leading-none" style={{ color: K.meta }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
        <span className="text-2xl sm:text-4xl lg:text-5xl font-bold leading-none" style={{ color: K.ink }}>{value}</span>
        <span className="text-lg sm:text-xl lg:text-2xl font-medium leading-none" style={{ color: K.meta }}>{unit}</span>
      </div>
      {sub && <div className="text-base font-normal leading-snug" style={{ color: K.meta }}>{sub}</div>}
    </KCard>
  );
}

Object.assign(window, { KButton, KCard, KStepRail, NurseAvatar, SpeechBubble, KTag, VitalTile });