// QuickQueryHelper.tsx — 快捷查询语法助手 // Logan.Li
import { useState } from 'react';
import { ChevronDown, ChevronUp, Zap } from 'lucide-react';
import type { LogEngine } from './types-v3';
import { QUICK_TEMPLATES } from './types-v3';

interface Props {
  engine: LogEngine;
  onSelect: (query: string) => void;
}

const ENGINE_NAMES: Record<LogEngine, string> = {
  loki: 'LogQL',
  elasticsearch: 'Lucene',
  sls: 'SQL/SPL',
};

export function QuickQueryHelper({ engine, onSelect }: Props) {
  const [open, setOpen] = useState(false);
  const templates = QUICK_TEMPLATES[engine];

  return (
    <div>
      <button
        onClick={() => setOpen(!open)}
        className="flex items-center gap-1 text-[11px] px-2 py-1 rounded transition-colors"
        style={{ color: 'var(--dg-blue)', background: open ? 'var(--dg-bg-tertiary)' : 'transparent' }}
      >
        <Zap className="h-3 w-3" />
        快捷查询
        {open ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
      </button>

      {open && (
        <div
          className="mt-2 p-3 rounded-lg border animate-fade-in"
          style={{ background: 'var(--dg-bg-secondary)', borderColor: 'var(--dg-border)' }}
        >
          <p className="text-[10px] mb-2" style={{ color: 'var(--dg-text-muted)' }}>
            {ENGINE_NAMES[engine]} 常用查询模板，点击快速填充
          </p>
          <div className="grid grid-cols-2 gap-1.5">
            {templates.map((t, i) => (
              <button
                key={i}
                onClick={() => { onSelect(t.query); setOpen(false); }}
                className="text-left px-2 py-1.5 rounded border text-[11px] transition-all hover:border-blue-400"
                style={{
                  background: 'var(--dg-bg-tertiary)',
                  borderColor: 'var(--dg-border)',
                  color: 'var(--dg-text-secondary)',
                }}
                title={t.query}
              >
                <span className="font-medium block truncate" style={{ color: 'var(--dg-text-primary)' }}>{t.label}</span>
                <span className="block truncate opacity-60 font-mono mt-0.5">{t.query}</span>
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}