import React from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { FileText, Download, Search, Filter } from 'lucide-react';

const mockLogs = [
  {
    id: 1,
    action: 'User Login',
    user: 'admin@karibeo.com',
    ip: '192.168.1.100',
    timestamp: '2025-10-10 15:23:45',
    status: 'success',
    details: 'Successful authentication via password'
  },
  {
    id: 2,
    action: 'Permission Changed',
    user: 'manager@karibeo.com',
    ip: '192.168.1.105',
    timestamp: '2025-10-10 14:45:12',
    status: 'success',
    details: 'Updated role permissions for Staff group'
  },
  {
    id: 3,
    action: 'Failed Login',
    user: 'unknown@example.com',
    ip: '45.123.67.89',
    timestamp: '2025-10-10 14:15:03',
    status: 'failed',
    details: 'Invalid credentials - 3rd attempt'
  },
  {
    id: 4,
    action: 'Data Export',
    user: 'analyst@karibeo.com',
    ip: '192.168.1.110',
    timestamp: '2025-10-10 13:30:22',
    status: 'success',
    details: 'Exported user analytics report'
  },
  {
    id: 5,
    action: 'System Settings',
    user: 'admin@karibeo.com',
    ip: '192.168.1.100',
    timestamp: '2025-10-10 12:18:55',
    status: 'success',
    details: 'Modified security policies'
  },
  {
    id: 6,
    action: 'User Deletion',
    user: 'admin@karibeo.com',
    ip: '192.168.1.100',
    timestamp: '2025-10-10 11:45:30',
    status: 'success',
    details: 'Deleted inactive user account'
  }
];

const AuditLogs = () => {
  const getStatusColor = (status: string) => {
    return status === 'success' 
      ? 'bg-green-100 text-green-800' 
      : 'bg-red-100 text-red-800';
  };

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle>System Audit Logs</CardTitle>
              <CardDescription>Complete history of system activities and changes</CardDescription>
            </div>
            <div className="flex gap-2">
              <Button variant="outline" size="sm">
                <Filter className="h-4 w-4 mr-2" />
                Filter
              </Button>
              <Button variant="outline" size="sm">
                <Download className="h-4 w-4 mr-2" />
                Export
              </Button>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="mb-4">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
              <Input 
                placeholder="Search logs by user, action, or IP..." 
                className="pl-10"
              />
            </div>
          </div>

          <div className="space-y-3">
            {mockLogs.map((log) => (
              <div key={log.id} className="border rounded-lg p-4 hover:bg-gray-50 transition-colors">
                <div className="flex items-start justify-between">
                  <div className="flex items-start gap-3 flex-1">
                    <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-1">
                      <FileText className="h-5 w-5 text-blue-600" />
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-1">
                        <h3 className="font-semibold text-gray-900">{log.action}</h3>
                        <Badge className={getStatusColor(log.status)}>
                          {log.status}
                        </Badge>
                      </div>
                      <p className="text-sm text-gray-600 mb-2">{log.details}</p>
                      <div className="flex items-center gap-4 text-xs text-gray-500">
                        <span className="font-medium">{log.user}</span>
                        <span>IP: {log.ip}</span>
                        <span>{log.timestamp}</span>
                      </div>
                    </div>
                  </div>
                  <Button variant="ghost" size="sm" className="ml-2">
                    Details
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Events</CardTitle>
            <FileText className="h-4 w-4 text-blue-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">12,489</div>
            <p className="text-xs text-gray-600 mt-1">Last 30 days</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Failed Actions</CardTitle>
            <FileText className="h-4 w-4 text-red-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">87</div>
            <p className="text-xs text-gray-600 mt-1">Requiring attention</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Storage Used</CardTitle>
            <FileText className="h-4 w-4 text-purple-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">2.4 GB</div>
            <p className="text-xs text-gray-600 mt-1">Of 10 GB limit</p>
          </CardContent>
        </Card>
      </div>
    </div>
  );
};

export default AuditLogs;