import { Button } from './Button';

export interface LogDockEntry {
  id: string;
  kind: 'success' | 'error' | 'info';
  title: string;
  text: string;
  at: number;
}

export interface LogDockProps {
  entries: LogDockEntry[];
  activeEntry: LogDockEntry | null;
  open: boolean;
  onToggle: () => void;
  formatTime: (timestamp: number) => string;
}

function isNativePreviewError(entry: LogDockEntry | null) {
  if (!entry) return false;
  return entry.text.includes("reading 'invoke'") || entry.text.includes('undefined (reading');
}

function displayEntry(entry: LogDockEntry | null) {
  if (!entry) return null;
  if (!isNativePreviewError(entry)) return entry;
  return {
    ...entry,
    title: 'Desktop-команды недоступны',
    text: 'Запусти клиент через Tauri, чтобы управлять службами и применять конфиг.',
  };
}

export function LogDock({
  entries,
  activeEntry,
  open,
  onToggle,
  formatTime,
}: LogDockProps) {
  const current = displayEntry(activeEntry);

  return (
    <footer className={`log-dock ${current?.kind ?? 'idle'}`} aria-live="polite">
      <div className={`log-current ${current ? 'visible' : 'hidden'}`}>
        {current ? (
          <>
            <strong>{current.title}</strong>
            <span>{current.text}</span>
          </>
        ) : (
          <span className="log-muted">Журнал событий</span>
        )}
      </div>
      <Button type="button" variant="neutral" size="sm" className="log-toggle" onClick={onToggle}>
        {open ? 'Скрыть' : 'Посмотреть'} <span className="log-count">{entries.length}</span>
      </Button>
      {open ? (
        <div className="log-history">
          {entries.length ? entries.map((entry) => {
            const friendly = displayEntry(entry);
            return (
              <div className={`log-history-row ${entry.kind}`} key={entry.id}>
                <time>{formatTime(entry.at)}</time>
                <div>
                  <strong>{friendly?.title ?? entry.title}</strong>
                  <span>{friendly?.text ?? entry.text}</span>
                  {isNativePreviewError(entry) ? <span className="log-raw-detail">Детали: {entry.text}</span> : null}
                </div>
              </div>
            );
          }) : (
            <div className="log-history-row">
              <time>--:--:--</time>
              <span>Событий пока нет.</span>
            </div>
          )}
        </div>
      ) : null}
    </footer>
  );
}
