'use client';

import { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
import { Sparkles, TrendingDown, TrendingUp, AlertCircle } from 'lucide-react';

export function OptimizationEngine() {
  const [recommendations, setRecommendations] = useState([
    {
      id: '1',
      type: 'cost',
      title: 'Right-size underutilized VMs',
      description: '3 VMs are running at less than 20% capacity',
      savings: '$450/month',
      impact: 'high',
      action: 'Resize VMs',
    },
    {
      id: '2',
      type: 'performance',
      title: 'Enable auto-scaling for web tier',
      description: 'Web tier experiencing traffic spikes',
      improvement: '30% better response time',
      impact: 'medium',
      action: 'Configure auto-scaling',
    },
    {
      id: '3',
      type: 'security',
      title: 'Update security policies',
      description: '5 resources have outdated security policies',
      impact: 'high',
      action: 'Review policies',
    },
  ]);

  return (
    <Card className="bg-gray-800 border-gray-700">
      <CardHeader>
        <CardTitle className="text-white flex items-center gap-2">
          <Sparkles className="h-5 w-5 text-orange-500" />
          AI-Powered Optimization Recommendations
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {recommendations.map((rec) => (
            <div
              key={rec.id}
              className="p-4 bg-gray-900 rounded-lg border border-gray-700"
            >
              <div className="flex items-start justify-between mb-2">
                <div>
                  <h4 className="text-white font-semibold mb-1">{rec.title}</h4>
                  <p className="text-sm text-gray-400">{rec.description}</p>
                </div>
                <span
                  className={`px-2 py-1 text-xs rounded ${
                    rec.impact === 'high'
                      ? 'bg-red-500/20 text-red-400'
                      : rec.impact === 'medium'
                      ? 'bg-yellow-500/20 text-yellow-400'
                      : 'bg-blue-500/20 text-blue-400'
                  }`}
                >
                  {rec.impact} impact
                </span>
              </div>
              
              {rec.savings && (
                <div className="flex items-center gap-2 text-green-400 mb-2">
                  <TrendingDown className="h-4 w-4" />
                  <span className="text-sm font-semibold">{rec.savings}</span>
                </div>
              )}
              
              {rec.improvement && (
                <div className="flex items-center gap-2 text-blue-400 mb-2">
                  <TrendingUp className="h-4 w-4" />
                  <span className="text-sm font-semibold">{rec.improvement}</span>
                </div>
              )}

              <button className="mt-2 px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600 transition-colors text-sm">
                {rec.action}
              </button>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

