import React from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { 
  Clock, Brain, TrendingUp, Zap, Lightbulb, Target, AlertTriangle,
  ArrowRight, CheckCircle, DollarSign, Users, Shield, Calendar
} from "lucide-react";

const ROLE_CONFIGS = {
  procurement: {
    color: 'from-blue-600 to-indigo-700',
    title: 'Procurement Intelligence',
    question: 'What should I negotiate this week?',
    metrics: [
      { icon: Clock, label: 'Analysis Time', value: '12 hrs saved', trend: '+15%' },
      { icon: Brain, label: 'Decision Speed', value: '3x faster', trend: 'vs manual' },
      { icon: TrendingUp, label: 'Forecast Accuracy', value: '94%', trend: '+2.1%' },
    ],
    actions: [
      { label: 'Renegotiate 3 vendor contracts expiring in 30 days', priority: 'high', impact: '$12,400 potential savings' },
      { label: 'Consolidate 5 underperforming vendors into Tier 1', priority: 'medium', impact: '18% rate reduction' },
    ],
    prediction: 'Next quarter spend projected at $425K — 8% below budget if consolidation executed',
  },
  operator: {
    color: 'from-emerald-600 to-teal-700',
    title: 'Operations Command Center',
    question: 'Where do I need to reallocate resources?',
    metrics: [
      { icon: Clock, label: 'Report Time', value: '8 hrs saved', trend: '+22%' },
      { icon: Brain, label: 'Reallocation Speed', value: '5x faster', trend: 'vs manual' },
      { icon: TrendingUp, label: 'Demand Forecast', value: '91%', trend: '+3.5%' },
    ],
    actions: [
      { label: 'Sector B understaffed by 12% — shift 8 workers from Sector A', priority: 'high', impact: 'Fill rate +15%' },
      { label: 'OT exposure at 22% in kitchen roles — redistribute shifts', priority: 'medium', impact: '$8,200 OT savings' },
    ],
    prediction: 'Peak demand expected Dec 15-22 — pre-approve 45 additional workers now',
  },
  sector: {
    color: 'from-purple-600 to-violet-700',
    title: 'Sector Performance Hub',
    question: 'Which sites need immediate attention?',
    metrics: [
      { icon: Clock, label: 'Site Analysis', value: '6 hrs saved', trend: '+18%' },
      { icon: Brain, label: 'Shift Decisions', value: '4x faster', trend: 'vs manual' },
      { icon: TrendingUp, label: 'Pattern Accuracy', value: '89%', trend: '+4.2%' },
    ],
    actions: [
      { label: 'Site #3 no-show rate spiked 8% — review worker pool', priority: 'high', impact: 'Reliability +12%' },
      { label: '3 certifications expiring this week — schedule renewals', priority: 'high', impact: 'Compliance 100%' },
    ],
    prediction: 'Tuesday/Wednesday historically 15% understaffed — auto-schedule buffer',
  },
  client: {
    color: 'from-green-600 to-emerald-700',
    title: 'Your Staffing Intelligence',
    question: 'How can I reduce costs without sacrificing quality?',
    metrics: [
      { icon: Clock, label: 'Order Tracking', value: '4 hrs saved', trend: '+25%' },
      { icon: Brain, label: 'Vendor Choice', value: '2x faster', trend: 'vs manual' },
      { icon: TrendingUp, label: 'Cost Accuracy', value: '96%', trend: '+1.8%' },
    ],
    actions: [
      { label: 'Switch 2 orders to Preferred Vendor — same quality, lower rate', priority: 'high', impact: '$2,100 savings' },
      { label: 'Lock in recurring staff for your top 3 positions', priority: 'medium', impact: '15% rate lock' },
    ],
    prediction: 'Your Q1 staffing cost projected at $48K — $6K below last year',
  },
  vendor: {
    color: 'from-amber-600 to-orange-700',
    title: 'Vendor Growth Dashboard',
    question: 'How do I maximize revenue and retention?',
    metrics: [
      { icon: Clock, label: 'Scheduling Time', value: '10 hrs saved', trend: '+30%' },
      { icon: Brain, label: 'Assignment Match', value: '6x faster', trend: 'vs manual' },
      { icon: TrendingUp, label: 'Revenue Forecast', value: '92%', trend: '+2.5%' },
    ],
    actions: [
      { label: '12 workers idle this week — propose to 3 pending orders', priority: 'high', impact: '$4,800 revenue' },
      { label: '2 clients at churn risk — schedule check-in calls', priority: 'high', impact: '$18K annual value' },
    ],
    prediction: 'December revenue projected at $125K — 22% above November',
  },
  admin: {
    color: 'from-slate-700 to-slate-900',
    title: 'Platform Command Center',
    question: 'What needs my attention across the entire system?',
    metrics: [
      { icon: Clock, label: 'Oversight Time', value: '15 hrs saved', trend: '+35%' },
      { icon: Brain, label: 'System Decisions', value: '8x faster', trend: 'vs manual' },
      { icon: TrendingUp, label: 'Platform Accuracy', value: '97%', trend: '+1.2%' },
    ],
    actions: [
      { label: '3 vendors pending compliance review — approve/reject today', priority: 'high', impact: 'Onboard $45K revenue' },
      { label: 'System automation at 85% — enable 2 more workflows', priority: 'medium', impact: '+$12K/month savings' },
    ],
    prediction: 'Platform GMV projected at $2.4M this quarter — 18% growth',
  },
};

export default function ReportInsightsBanner({ userRole = 'admin', reportType, data = {} }) {
  const config = ROLE_CONFIGS[userRole] || ROLE_CONFIGS.admin;

  return (
    <div className={`bg-gradient-to-r ${config.color} rounded-xl text-white overflow-hidden`}>
      {/* Header */}
      <div className="p-4 border-b border-white/10">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Lightbulb className="w-5 h-5" />
            <span className="font-bold">{config.title}</span>
            <Badge className="bg-white/20 text-white border-0 text-[10px]">AI-Powered</Badge>
          </div>
          <span className="text-sm opacity-80 italic">"{config.question}"</span>
        </div>
      </div>

      {/* Metrics Row */}
      <div className="grid grid-cols-3 divide-x divide-white/10">
        {config.metrics.map((metric, idx) => {
          const Icon = metric.icon;
          return (
            <div key={idx} className="p-4 text-center">
              <div className="flex items-center justify-center gap-1 mb-1">
                <Icon className="w-4 h-4 opacity-80" />
                <span className="text-xs opacity-80">{metric.label}</span>
              </div>
              <p className="text-2xl font-bold">{metric.value}</p>
              <p className="text-[11px] text-green-300">{metric.trend}</p>
            </div>
          );
        })}
      </div>

      {/* Actions */}
      <div className="p-4 bg-black/20">
        <p className="text-xs font-semibold uppercase tracking-wider mb-2 opacity-80">
          ⚡ Recommended Actions
        </p>
        <div className="space-y-2">
          {config.actions.map((action, idx) => (
            <div key={idx} className="flex items-center justify-between bg-white/10 rounded-lg px-3 py-2">
              <div className="flex items-center gap-2">
                {action.priority === 'high' ? (
                  <AlertTriangle className="w-4 h-4 text-amber-300" />
                ) : (
                  <CheckCircle className="w-4 h-4 text-green-300" />
                )}
                <span className="text-sm">{action.label}</span>
              </div>
              <Badge className="bg-white/20 text-white border-0 text-[10px]">
                {action.impact}
              </Badge>
            </div>
          ))}
        </div>
      </div>

      {/* Prediction */}
      <div className="p-3 bg-white/10 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Target className="w-4 h-4" />
          <span className="text-sm font-medium">Prediction:</span>
          <span className="text-sm opacity-90">{config.prediction}</span>
        </div>
        <Button 
          size="sm" 
          variant="secondary" 
          className="h-7 text-xs bg-white text-slate-900 hover:bg-white/90"
          onClick={() => window.location.href = '/SavingsEngine'}
        >
          Take Action <ArrowRight className="w-3 h-3 ml-1" />
        </Button>
      </div>
    </div>
  );
}