import { X, Table } from 'lucide-react';
import { useUIStore } from '../../stores/useUIStore';

export function InsightPopup() {
  const { insightData, setInsightData } = useUIStore();
  if (!insightData) return null;

  return (
    <div className="fixed inset-0 z-[150] flex items-center justify-center p-8 bg-[var(--color-surface-overlay)] backdrop-blur-sm animate-fade-in">
      <div className="bg-[var(--color-surface-main)] border border-[var(--color-border-subtle)] rounded-3xl shadow-2xl w-full max-w-xl overflow-hidden flex flex-col animate-zoom-in">
        <div className="px-6 py-5 border-b border-[var(--color-border-subtle)] flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-9 h-9 rounded-xl bg-[var(--color-accent-glow)] flex items-center justify-center text-[var(--color-accent-primary)]"><Table size={16} /></div>
            <h4 className="text-[14px] font-medium text-[var(--color-text-primary)]">{insightData.title}</h4>
          </div>
          <button onClick={() => setInsightData(null)} className="text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] transition-colors"><X size={20} /></button>
        </div>
        <div className="p-6 text-[13px] text-[var(--color-text-secondary)] leading-relaxed whitespace-pre-wrap bg-[var(--color-surface-side)] m-4 rounded-xl border border-[var(--color-border-subtle)] font-mono max-h-[400px] overflow-y-auto custom-scrollbar">
          {insightData.content}
        </div>
      </div>
    </div>
  );
}