d3ro-voice/src/renderer/components/StatusBar.tsx

// src/renderer/components/StatusBar.tsx
// 인스트루먼트 섀시 하단 — 각인 스타일 상태 표시 + Ollama 오프라인 넛징

import { useState, useEffect } from 'react'
import { Box, Typography, Fade, IconButton } from '@mui/material'
import CloseIcon from '@mui/icons-material/Close'
import { Led } from './ds'
import { d3roPalette, d3roFontMono } from '../theme'
import { OllamaGuideModal } from './OllamaGuideModal'
import type { LLMStatus } from '@shared/types'

export function StatusBar(): React.ReactElement {
  const [llmStatus, setLlmStatus] = useState<LLMStatus | null>(null)
  const [showNudge, setShowNudge] = useState(false)
  const [guideOpen, setGuideOpen] = useState(false)

  useEffect(() => {
    window.electronAPI.llm.getStatus().then((r) => {
      if (r.success) setLlmStatus(r.data)
    })

    const unsub = window.electronAPI.llm.onStatusChanged((e) => setLlmStatus(e.status))
    const interval = setInterval(() => {
      window.electronAPI.llm.getStatus().then((r) => {
        if (r.success) setLlmStatus(r.data)
      })
    }, 5000)

    return () => { unsub(); clearInterval(interval) }
  }, [])

  const connected = llmStatus?.connectionState === 'connected'

  // 오프라인 3초 후 넛징 버블 표시 → 10초 후 자동 숨김
  useEffect(() => {
    if (!connected) {
      const showTimer = setTimeout(() => setShowNudge(true), 3000)
      const hideTimer = setTimeout(() => setShowNudge(false), 13000)
      return () => { clearTimeout(showTimer); clearTimeout(hideTimer) }
    }
    setShowNudge(false)
    return undefined
  }, [connected])

  return (
    <>
      <Box
        sx={{
          position: 'relative',
          display: 'flex',
          alignItems: 'center',
          gap: 2,
          px: 2,
          py: 0.5,
          borderTop: `1px solid ${d3roPalette.border.subtle}`,
          bgcolor: d3roPalette.bg.sidebar,
          minHeight: 28,
        }}
      >
        {/* 넛징 버블 */}
        <Fade in={showNudge && !connected}>
          <Box
            sx={{
              position: 'absolute',
              bottom: 32,
              left: 8,
              bgcolor: d3roPalette.bg.card,
              border: `1px solid ${d3roPalette.border.default}`,
              borderRadius: '10px',
              px: 2,
              py: 1.5,
              boxShadow: '0 8px 24px rgba(0,0,0,0.4)',
              maxWidth: 280,
              zIndex: 100,
              // 말풍선 삼각형
              '&::after': {
                content: '""',
                position: 'absolute',
                bottom: -6,
                left: 16,
                width: 12,
                height: 12,
                bgcolor: d3roPalette.bg.card,
                border: `1px solid ${d3roPalette.border.default}`,
                borderTop: 'none',
                borderLeft: 'none',
                transform: 'rotate(45deg)',
              },
            }}
          >
            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <Typography sx={{ fontSize: '12px', color: d3roPalette.text.primary, mb: 0.5, fontWeight: 600 }}>
                Ollama가 실행되지 않고 있어요
              </Typography>
              <IconButton size="small" onClick={() => setShowNudge(false)} sx={{ color: d3roPalette.text.inactive, p: 0, ml: 1 }}>
                <CloseIcon sx={{ fontSize: 14 }} />
              </IconButton>
            </Box>
            <Typography sx={{ fontSize: '11px', color: d3roPalette.text.inactive, mb: 1 }}>
              LLM 후처리(번역, 요약 등)를 사용하려면 Ollama가 필요합니다.
            </Typography>
            <Typography
              onClick={() => { setGuideOpen(true); setShowNudge(false) }}
              sx={{
                fontSize: '11px',
                color: d3roPalette.accent.amber,
                fontWeight: 700,
                cursor: 'pointer',
                '&:hover': { textDecoration: 'underline' },
              }}
            >
              설치 안내 보기 →
            </Typography>
          </Box>
        </Fade>

        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
          <Led color={connected ? 'green' : 'red'} size={6} />
          <Typography
            onClick={() => !connected && setGuideOpen(true)}
            sx={{
              fontFamily: d3roFontMono,
              fontSize: '9px',
              color: connected ? d3roPalette.text.inactive : d3roPalette.tag.red,
              letterSpacing: '1px',
              fontWeight: 700,
              cursor: connected ? 'default' : 'pointer',
              '&:hover': connected ? {} : { textDecoration: 'underline' },
            }}
          >
            {connected ? 'OLLAMA' : 'OFFLINE'}
          </Typography>
        </Box>

        {llmStatus?.activeModel && (
          <Typography sx={{ fontFamily: d3roFontMono, fontSize: '9px', color: d3roPalette.text.dimLabel, letterSpacing: '0.5px' }}>
            {llmStatus.activeModel.toUpperCase()}
          </Typography>
        )}

        <Box sx={{ flex: 1 }} />

        <Typography sx={{ fontFamily: d3roFontMono, fontSize: '9px', color: d3roPalette.text.muted, letterSpacing: '1px', fontWeight: 700 }}>
          PRECISION DATA LINK
        </Typography>
      </Box>

      <OllamaGuideModal open={guideOpen} onClose={() => setGuideOpen(false)} />
    </>
  )
}