inkling/src/renderer/inbox/components/OllamaBanner.tsx

import React from 'react';
import { useInbox } from '../store.js';

interface OllamaBannerProps {
  onOpenSettings?: () => void;
}

export function OllamaBanner({ onOpenSettings }: OllamaBannerProps = {}): React.ReactElement | null {
  const status = useInbox((s) => s.ollamaStatus);
  const recheckOllama = useInbox((s) => s.recheckOllama);
  if (status.ok) return null;
  const isMissing = status.reason?.includes('not installed');
  const message = isMissing
    ? '`ollama pull gemma4:e4b` 실행 후 앱을 재시작해주세요.'
    : 'Inkling 정리가 잠시 멈췄습니다. Ollama를 실행해주세요.';
  return (
    <div className="banner warn" style={{ flexDirection: 'column', alignItems: 'flex-start' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%' }}>
        <span style={{ flex: 1 }}>⚠ {message}</span>
        <button
          onClick={() => {
            recheckOllama().catch((e) => {
              // eslint-disable-next-line no-console
              console.warn('recheckOllama failed', e);
            });
          }}
          style={{
            background: 'transparent', color: '#946100',
            border: '1px solid #d99500', borderRadius: 4,
            padding: '2px 8px', fontSize: 12, cursor: 'pointer'
          }}
        >
          재확인
        </button>
        {onOpenSettings && (
          <button
            onClick={onOpenSettings}
            style={{
              background: 'transparent', color: 'inherit',
              border: '1px solid currentColor', borderRadius: 4,
              padding: '2px 8px', fontSize: 12, cursor: 'pointer',
              marginLeft: 6
            }}
          >
            설정
          </button>
        )}
      </div>
      {status.reason ? (
        <span style={{ fontSize: 11, opacity: 0.7, marginTop: 4 }}>
          진단: {status.reason}
        </span>
      ) : null}
    </div>
  );
}