'use client';

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import {
  Eye, AlertTriangle, CheckCircle, Shield, Activity,
  Clock, TrendingUp, Bell, BellOff
} from 'lucide-react';
import { VOCAB } from '@/lib/white-label/constants';

interface Alert {
  id: string;
  type: 'anomaly' | 'pattern' | 'security' | 'performance';
  severity: 'low' | 'medium' | 'high';
  message: string;
  timestamp: string;
  dismissed?: boolean;
}

const mockAlerts: Alert[] = [
  {
    id: '1',
    type: 'anomaly',
    severity: 'medium',
    message: 'Unusual login time detected for user ops@company.com',
    timestamp: '2 min ago',
  },
  {
    id: '2',
    type: 'pattern',
    severity: 'low',
    message: 'New workflow pattern detected in invoice processing',
    timestamp: '15 min ago',
  },
  {
    id: '3',
    type: 'performance',
    severity: 'low',
    message: 'API response times improved by 23%',
    timestamp: '1 hour ago',
  },
];

export function SentinelPanel({ compact = false }: { compact?: boolean }) {
  const [alerts, setAlerts] = useState<Alert[]>(mockAlerts);
  const [patternsLearned, setPatternsLearned] = useState(127);
  const [watching, setWatching] = useState(true);

  const severityColors = {
    low: 'border-green-500/30 bg-green-500/5 text-green-400',
    medium: 'border-amber-500/30 bg-amber-500/5 text-amber-400',
    high: 'border-red-500/30 bg-red-500/5 text-red-400',
  };

  const typeIcons = {
    anomaly: <AlertTriangle className="w-4 h-4" />,
    pattern: <TrendingUp className="w-4 h-4" />,
    security: <Shield className="w-4 h-4" />,
    performance: <Activity className="w-4 h-4" />,
  };

  return (
    <div className="glass-card p-6 border border-brand-secondary/20 h-full">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-3">
          <div className="relative">
            <Eye className="w-6 h-6 text-brand-secondary-light" />
            {watching && (
              <div className="absolute -top-1 -right-1 w-2 h-2 bg-green-500 rounded-full animate-pulse" />
            )}
          </div>
          <h2 className="text-xl font-bold text-white">{VOCAB.observer}</h2>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-brand-secondary-light text-sm">{patternsLearned} patterns</span>
          <button
            onClick={() => setWatching(!watching)}
            className={`p-1.5 rounded-lg transition-colors ${watching ? 'bg-green-500/20 text-green-400' : 'bg-gray-500/20 text-gray-400'}`}
          >
            {watching ? <Bell className="w-4 h-4" /> : <BellOff className="w-4 h-4" />}
          </button>
        </div>
      </div>

      {/* Stats Row */}
      {!compact && (
        <div className="grid grid-cols-3 gap-3 mb-4">
          <div className="text-center p-2 bg-white/5 rounded-lg">
            <div className="text-2xl font-bold text-green-400">3</div>
            <div className="text-xs text-gray-500">Active Alerts</div>
          </div>
          <div className="text-center p-2 bg-white/5 rounded-lg">
            <div className="text-2xl font-bold text-brand-secondary-light">127</div>
            <div className="text-xs text-gray-500">Patterns</div>
          </div>
          <div className="text-center p-2 bg-white/5 rounded-lg">
            <div className="text-2xl font-bold text-brand">99.9%</div>
            <div className="text-xs text-gray-500">Uptime</div>
          </div>
        </div>
      )}

      {/* Alerts List */}
      <div className={`space-y-2 ${compact ? 'max-h-48' : 'max-h-64'} overflow-y-auto`}>
        {alerts.filter(a => !a.dismissed).map((alert) => (
          <motion.div
            key={alert.id}
            initial={{ opacity: 0, x: -10 }}
            animate={{ opacity: 1, x: 0 }}
            className={`flex items-start gap-3 p-3 rounded-lg border ${severityColors[alert.severity]}`}
          >
            <div className="mt-0.5">{typeIcons[alert.type]}</div>
            <div className="flex-1 min-w-0">
              <p className="text-sm text-white truncate">{alert.message}</p>
              <div className="flex items-center gap-2 mt-1">
                <Clock className="w-3 h-3 text-gray-500" />
                <span className="text-xs text-gray-500">{alert.timestamp}</span>
              </div>
            </div>
          </motion.div>
        ))}
      </div>

      {!compact && (
        <div className="mt-4 pt-4 border-t border-white/10">
          <p className="text-gray-500 text-sm text-center">
            The Sentinel is watching. Always.
          </p>
        </div>
      )}
    </div>
  );
}
