import { useState } from 'react';
import { 
  Search, 
  CheckCircle, 
  XCircle, 
  AlertCircle, 
  Database,
  Scale,
  FileText,
  Globe,
  Shield
} from 'lucide-react';

const VERIFICATION_STEPS = [
  {
    id: 'extract',
    name: 'Claim Extraction',
    status: 'complete',
    detail: 'NLP processed: 3 fallacies detected, 2 loaded terms flagged'
  },
  {
    id: 'source',
    name: 'Multi-Source Hash',
    status: 'complete',
    detail: '4/5 sources matched (Congress.gov, SCOTUS, DHS, BLS)'
  },
  {
    id: 'legal',
    name: 'Legal Validation',
    status: 'complete',
    detail: 'Statutes verified: 18 U.S.C. §2381, Trump v. Hawaii'
  },
  {
    id: 'temporal',
    name: 'Temporal Check',
    status: 'warning',
    detail: 'FY2025 data current; CA PRA request pending for gaps'
  },
  {
    id: 'shield',
    name: 'Liability Shield',
    status: 'complete',
    detail: 'Anti-SLAPP flagged; opinion qualifiers applied'
  }
];

const SOURCE_DATABASES = [
  { name: 'Congress.gov', status: 'connected', latency: '45ms' },
  { name: 'SCOTUS Opinions', status: 'connected', latency: '62ms' },
  { name: 'DHS FY2025 Data', status: 'connected', latency: '89ms' },
  { name: 'CA Legislature', status: 'connected', latency: '78ms' },
  { name: 'FBI UCR', status: 'degraded', latency: '340ms' },
  { name: 'BLS Statistics', status: 'connected', latency: '56ms' },
];

export default function VerificationEngine() {
  const [activeTab, setActiveTab] = useState('pipeline');

  return (
    <div className="space-y-6">
      {/* Status Header */}
      <div className="glass-panel rounded-xl p-6">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <div className="w-16 h-16 rounded-full bg-gradient-to-br from-green-600 to-emerald-800 flex items-center justify-center">
              <Shield className="w-8 h-8 text-white" />
            </div>
            <div>
              <h3 className="text-lg font