import React, { useEffect, useRef } from 'react';
import { Loader, TrendingUp, Search, Eye } from 'lucide-react';
import { AnalysisState } from '../types';

interface StepProcessingProps {
  state: AnalysisState;
}

export const StepProcessing: React.FC<StepProcessingProps> = ({ state }) => {
  const percentage = Math.round((state.completed / state.total) * 100) || 0;
  const terminalRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (terminalRef.current) {
      terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
    }
  }, [state.completed, state.currentCompany]);

  return (
    <div className="max-w-3xl mx-auto mt-12 px-4">
      <div className="text-center mb-8">
        <div className="inline-block p-3 bg-indigo-50 rounded-full mb-4">
           <Loader className="animate-spin text-indigo-600" size={32} />
        </div>
        <h2 className="text-2xl font-bold text-slate-900">Running Market Audit</h2>
        <p className="text-slate-600">Analyzing digital traces based on your strategy...</p>
      </div>

      <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200 mb-6">
        <div className="flex justify-between text-sm font-medium text-slate-700 mb-2">
          <span>Progress</span>
          <span>{percentage}% ({state.completed}/{state.total})</span>
        </div>
        <div className="w-full bg-slate-100 rounded-full h-4 overflow-hidden">
          <div className="bg-indigo-600 h-4 rounded-full transition-all duration-500 ease-out" style={{ width: `${percentage}%` }}></div>
        </div>
      </div>

      <div className="bg-slate-900 rounded-xl shadow-xl overflow-hidden font-mono text-sm">
        <div className="bg-slate-800 px-4 py-2 flex items-center gap-2 border-b border-slate-700">
          <div className="w-3 h-3 rounded-full bg-red-500"></div>
          <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
          <div className="w-3 h-3 rounded-full bg-green-500"></div>
          <span className="ml-2 text-slate-400 text-xs">audit_agent.exe</span>
        </div>
        <div ref={terminalRef} className="p-6 h-64 overflow-y-auto text-slate-300 space-y-2 scroll-smooth">
            <div className="text-emerald-400">$ load_strategy --context="custom"</div>
            {state.completed > 0 && <div className="text-slate-500">... {state.completed} companies analyzed.</div>}
            
            {state.currentCompany && (
                <>
                    <div className="animate-pulse text-indigo-300">{`> Analyzing: ${state.currentCompany}`}</div>
                    <div className="pl-4 border-l-2 border-slate-700 space-y-1 mt-2">
                        <div className="flex items-center gap-2 text-emerald-400"><TrendingUp size={14} /> Fetching Firmographics (Revenue/Size)...</div>
                        <div className="flex items-center gap-2"><Eye size={14} /> Scanning Custom Signals...</div>
                        <div className="flex items-center gap-2"><Search size={14} /> Validating against ICP...</div>
                    </div>
                </>
            )}
        </div>
      </div>
    </div>
  );
};