import { useState, useEffect } from 'react'
import { Shield, EyeOff, Lock, Activity, AlertTriangle, CheckCircle } from 'lucide-react'

export default function PrivacyDashboard() {
  const [securityMetrics, setSecurityMetrics] = useState({
    encryptionLevel: 'AES-256',
    threatsBlocked: 0,
    dataProcessed: 0,
    uptime: '100%'
  })

  const [recentActivities, setRecentActivities] = useState([])

  useEffect(() => {
    // Simulate real-time security updates
    const interval = setInterval(() => {
      setSecurityMetrics(prev => ({
        ...prev,
        threatsBlocked: prev.threatsBlocked + Math.floor(Math.random() * 3),
        dataProcessed: prev.dataProcessed + Math.floor(Math.random() * 10)
      }))

      setRecentActivities(prev => {
        const newActivity = {
          id: Date.now(),
          action: ['Threat detected', 'Data encrypted', 'Access logged'][Math.floor(Math.random() * 3)],
          timestamp: new Date().toLocaleTimeString(),
          status: 'secured'
        }
        return [newActivity, ...prev.slice(0, 4)]
      })
    }, 5000)

    return () => clearInterval(interval)
  }, [])

  return (
    <div className="card">
      <h2 className="text-2xl font-bold mb-6 flex items-center">
        <Shield className="mr-2 h-6 w-6 text-primary-500" />
        Privacy & Security
      </h2>

      <div className="grid grid-cols-2 gap-4 mb-6">
        <div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
          <div className="flex items-center justify-between mb-1">
            <Lock className="h-4 w-4 text-green-600 dark:text-green-400" />
            <span className="text-xs text-green-700 dark:text-green-300">ACTIVE</span>
          </div>
          <p className="text-lg font-semibold">{securityMetrics.encryptionLevel}</p>
          <p className="text-xs text-green-700 dark:text-green-300">Encryption</p>
        </div>

        <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
          <div className="flex items-center justify-between mb-1">
            <EyeOff className="h-4 w-4 text-blue-600 dark:text-blue-400" />
            <span className="text-xs text-blue-700 dark:text-blue-300">LIVE</span>
          </div>
          <p className="text-lg font-semibold">{securityMetrics.uptime}</p>
          <p className="text-xs text-blue-700 dark:text-blue-300">Uptime</p>
        </div>

        <div className="p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg border border-orange-200 dark:border-orange-800">
          <div className="flex items-center justify-between mb-1">
            <AlertTriangle className="h-4 w-4 text-orange-600 dark:text-orange-400" />
            <span className="text-xs text-orange-700 dark:text-orange-300">BLOCKED</span>
          </div>
          <p className="text-lg font-semibold">{securityMetrics.threatsBlocked}</p>
          <p className="text-xs text-orange-700 dark:text-orange-300">Threats</p>
        </div>

        <div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
          <div className="flex items-center justify-between mb-1">
            <Activity className="h-4 w-4 text-purple-600 dark:text-purple-400" />
            <span className="text-xs text-purple-700 dark:text-purple-300">PROCESSED</span>
          </div>
          <p className="text-lg font-semibold">{securityMetrics.dataProcessed}</p>
          <p className="text-xs text-purple-700 dark:text-purple-300">Data Units</p>
        </div>
      </div>

      <div className="border-t border-dark-200 dark:border-dark-700 pt-4">
        <h3 className="font-semibold mb-3 flex items-center">
          <Activity className="h-4 w-4 mr-2" />
          Security Activity
        </h3>
        <div className="space-y-2">
          {recentActivities.length === 0 ? (
            <p className="text-sm text-dark-500 dark:text-dark-400">No recent activity</p>
          ) : (
            recentActivities.map((activity) => (
              <div
                key={activity.id}
                className="flex items-center justify-between p-2 bg-dark-50 dark:bg-dark-800 rounded border border-dark-200 dark:border-dark-700"
              >
                <div className="flex items-center space-x-2">
                  <CheckCircle className="h-3 w-3 text-green-500" />
                  <span className="text-sm">{activity.action}</span>
                </div>
                <span className="text-xs text-dark-500 dark:text-dark-400">{activity.timestamp}</span>
              </div>
            ))
          )}
        </div>
      </div>

      <div className="mt-6 p-4 bg-dark-50 dark:bg-dark-800 rounded-lg border border-dark-200 dark:border-dark-700">
        <h3 className="font-semibold mb-2 text-sm">Privacy Guarantee</h3>
        <ul className="space-y-1 text-xs text-dark-600 dark:text-dark-400">
          <li className="flex items-center space-x-2">
            <CheckCircle className="h-3 w-3 text-green-500" />
            <span>End-to-end encryption</span>
          </li>
          <li className="flex items-center space-x-2">
            <CheckCircle className="h-3 w-3 text-green-500" />
            <span>Zero data retention</span>
          </li>
          <li className="flex items-center space-x-2">
            <CheckCircle className="h-3 w-3 text-green-500" />
            <span>Local processing priority</span>
          </li>
          <li className="flex items-center space-x-2">
            <CheckCircle className="h-3 w-3 text-green-500" />
            <span>Anonymous usage tracking</span>
          </li>
        </ul>
      </div>
    </div>
  )
}