'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import {
  Sparkles, CheckCircle, XCircle, ChevronRight, Brain,
  Lightbulb, ArrowRight, Clock, Zap
} from 'lucide-react';
import { VOCAB } from '@/lib/white-label/constants';

interface Suggestion {
  id: string;
  title: string;
  description: string;
  confidence: number; // 0-100
  source: 'pattern_detection' | 'usage_analysis' | 'efficiency_scan' | 'user_feedback';
  impact: 'low' | 'medium' | 'high';
  estimatedTime: string;
  createdAt: string;
}

const mockSuggestions: Suggestion[] = [
  {
    id: '1',
    title: 'Create vendor payment approval workflow',
    description: 'Based on 47 manual approvals this month, automating this process could save 12 hours/week',
    confidence: 87,
    source: 'pattern_detection',
    impact: 'high',
    estimatedTime: '~2 hours',
    createdAt: '2 hours ago',
  },
  {
    id: '2',
    title: 'Add inventory reorder point alerts',
    description: 'Detected 3 stockout events. Automated alerts at 20% threshold would prevent future issues',
    confidence: 92,
    source: 'usage_analysis',
    impact: 'medium',
    estimatedTime: '~45 min',
    createdAt: '5 hours ago',
  },
  {
    id: '3',
    title: 'Optimize invoice processing API',
    description: 'Current endpoint has 2.3s average response. Refactoring could reduce to <500ms',
    confidence: 78,
    source: 'efficiency_scan',
    impact: 'low',
    estimatedTime: '~3 hours',
    createdAt: '1 day ago',
  },
];

export function SystemEvolutionPanel() {
  const [suggestions, setSuggestions] = useState<Suggestion[]>(mockSuggestions);
  const [recentMods, setRecentMods] = useState(3);

  const handleApprove = (id: string) => {
    // In production, this would trigger ${VOCAB.factory}
    setSuggestions(prev => prev.filter(s => s.id !== id));
  };

  const handleDismiss = (id: string) => {
    setSuggestions(prev => prev.filter(s => s.id !== id));
  };

  const impactColors = {
    low: 'text-gray-400 bg-gray-500/10',
    medium: 'text-amber-400 bg-amber-500/10',
    high: 'text-green-400 bg-green-500/10',
  };

  const sourceLabels = {
    pattern_detection: 'Pattern Detection',
    usage_analysis: 'Usage Analysis',
    efficiency_scan: 'Efficiency Scan',
    user_feedback: 'User Feedback',
  };

  return (
    <div className="glass-card p-6 border border-brand-secondary/20">
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-3">
          <div className="relative">
            <Sparkles className="w-6 h-6 text-brand-secondary-light" />
          </div>
          <div>
            <h2 className="text-xl font-bold text-white">System Evolution</h2>
            <p className="text-gray-500 text-sm">The Ghost has suggested {suggestions.length} new capabilities</p>
          </div>
        </div>
        <div className="flex items-center gap-2 text-sm">
          <span className="text-gray-400">Recent self-modifications:</span>
          <span className="px-2 py-1 bg-brand-secondary/20 text-brand-secondary-light rounded-full font-semibold">
            {recentMods} this week
          </span>
        </div>
      </div>

      <div className="space-y-4">
        {suggestions.map((suggestion, index) => (
          <motion.div
            key={suggestion.id}
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: index * 0.1 }}
            className="p-4 bg-gradient-to-r from-brand-secondary/5 to-brand-deep/5 rounded-xl border border-brand-secondary/20 hover:border-brand-secondary/40 transition-colors"
          >
            <div className="flex items-start justify-between gap-4">
              <div className="flex-1">
                <div className="flex items-center gap-2 mb-2">
                  <Lightbulb className="w-4 h-4 text-amber-400" />
                  <h3 className="font-semibold text-white">{suggestion.title}</h3>
                </div>
                <p className="text-gray-400 text-sm mb-3">{suggestion.description}</p>
                <div className="flex flex-wrap items-center gap-3 text-xs">
                  <span className="text-gray-500">
                    Source: <span className="text-brand-secondary-light">{sourceLabels[suggestion.source]}</span>
                  </span>
                  <span className={`px-2 py-0.5 rounded ${impactColors[suggestion.impact]}`}>
                    {suggestion.impact} impact
                  </span>
                  <span className="flex items-center gap-1 text-gray-500">
                    <Clock className="w-3 h-3" />
                    {suggestion.estimatedTime}
                  </span>
                  <span className="flex items-center gap-1 text-brand">
                    <Brain className="w-3 h-3" />
                    {suggestion.confidence}% confidence
                  </span>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <button
                  onClick={() => handleApprove(suggestion.id)}
                  className="flex items-center gap-1 px-3 py-2 bg-green-500/20 text-green-400 rounded-lg hover:bg-green-500/30 transition-colors border border-green-500/30"
                >
                  <CheckCircle className="w-4 h-4" />
                  <span>Approve</span>
                </button>
                <button
                  onClick={() => handleDismiss(suggestion.id)}
                  className="p-2 text-gray-500 hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-colors"
                >
                  <XCircle className="w-4 h-4" />
                </button>
              </div>
            </div>
          </motion.div>
        ))}

        {suggestions.length === 0 && (
          <div className="text-center py-8 text-gray-500">
            <Brain className="w-12 h-12 mx-auto mb-3 opacity-50" />
            <p>The Ghost is analyzing your operations...</p>
            <p className="text-sm">New suggestions will appear here</p>
          </div>
        )}
      </div>
    </div>
  );
}
