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 { Alert, AlertDescription } from "@/components/ui/alert";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { AlertTriangle, CheckCircle, XCircle, Clock, Bell, Shield } from "lucide-react";
import Link from "next/link";

export default function AdminAlertsPage() {
  // Mock data for system alerts
  const alerts = [
    {
      id: "1",
      type: "security",
      severity: "high",
      title: "Suspicious Login Attempts",
      description: "Multiple failed login attempts detected from IP 192.168.1.100",
      timestamp: "2024-01-20 14:30:00",
      status: "active",
      affectedUsers: 3
    },
    {
      id: "2",
      type: "system",
      severity: "medium", 
      title: "High Memory Usage",
      description: "Server memory usage has exceeded 85% for the past hour",
      timestamp: "2024-01-20 13:45:00",
      status: "resolved",
      affectedUsers: 0
    },
    {
      id: "3",
      type: "payment",
      severity: "high",
      title: "Payment Processing Error",
      description: "Bitcoin payment gateway experiencing delays",
      timestamp: "2024-01-20 12:15:00",
      status: "active",
      affectedUsers: 12
    },
    {
      id: "4",
      type: "user",
      severity: "low",
      title: "New Vendor Registration",
      description: "New vendor 'tech_supplies' has registered and requires approval",
      timestamp: "2024-01-20 11:20:00",
      status: "pending",
      affectedUsers: 1
    },
    {
      id: "5",
      type: "security",
      severity: "critical",
      title: "Potential Security Breach",
      description: "Unusual API access patterns detected from multiple IPs",
      timestamp: "2024-01-20 10:30:00",
      status: "investigating",
      affectedUsers: 0
    }
  ];

  const getSeverityColor = (severity: string) => {
    switch (severity) {
      case "critical": return "destructive";
      case "high": return "destructive";
      case "medium": return "secondary";
      case "low": return "outline";
      default: return "outline";
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case "active": return "destructive";
      case "resolved": return "default";
      case "pending": return "secondary";
      case "investigating": return "outline";
      default: return "outline";
    }
  };

  const getTypeIcon = (type: string) => {
    switch (type) {
      case "security": return <Shield className="h-4 w-4" />;
      case "system": return <AlertTriangle className="h-4 w-4" />;
      case "payment": return <Bell className="h-4 w-4" />;
      case "user": return <CheckCircle className="h-4 w-4" />;
      default: return <AlertTriangle className="h-4 w-4" />;
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-semibold tracking-tight">System Alerts</h1>
          <p className="text-sm text-muted-foreground mt-1">Monitor system alerts and security notifications</p>
        </div>
        <Button asChild variant="outline" size="sm">
          <Link href="/dashboard">Back to Dashboard</Link>
        </Button>
      </div>

      {/* Alert Summary */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Active Alerts</CardTitle>
            <AlertTriangle className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">8</div>
            <p className="text-xs text-muted-foreground">Require 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">Critical</CardTitle>
            <XCircle className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">2</div>
            <p className="text-xs text-muted-foreground">Immediate action needed</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Resolved Today</CardTitle>
            <CheckCircle className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">15</div>
            <p className="text-xs text-muted-foreground">Successfully resolved</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Avg Response</CardTitle>
            <Clock className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">12m</div>
            <p className="text-xs text-muted-foreground">Average resolution time</p>
          </CardContent>
        </Card>
      </div>

      {/* Critical Alerts */}
      <Alert variant="destructive">
        <AlertTriangle className="h-4 w-4" />
        <AlertDescription>
          <strong>Critical Alert:</strong> Potential security breach detected. Multiple unusual API access patterns from different IP addresses. Immediate investigation required.
        </AlertDescription>
      </Alert>

      {/* Alerts Table */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle>System Alerts</CardTitle>
              <CardDescription>Recent system alerts and notifications</CardDescription>
            </div>
            <div className="flex items-center space-x-2">
              <Button variant="outline" size="sm">
                Mark All Read
              </Button>
              <Button variant="outline" size="sm">
                Clear Resolved
              </Button>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Type</TableHead>
                <TableHead>Alert</TableHead>
                <TableHead>Severity</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Affected Users</TableHead>
                <TableHead>Timestamp</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {alerts.map((alert) => (
                <TableRow key={alert.id}>
                  <TableCell>
                    <div className="flex items-center space-x-2">
                      {getTypeIcon(alert.type)}
                      <span className="capitalize">{alert.type}</span>
                    </div>
                  </TableCell>
                  <TableCell>
                    <div>
                      <div className="font-medium">{alert.title}</div>
                      <div className="text-sm text-muted-foreground max-w-[300px] truncate">
                        {alert.description}
                      </div>
                    </div>
                  </TableCell>
                  <TableCell>
                    <Badge variant={getSeverityColor(alert.severity)}>
                      {alert.severity}
                    </Badge>
                  </TableCell>
                  <TableCell>
                    <Badge variant={getStatusColor(alert.status)}>
                      {alert.status}
                    </Badge>
                  </TableCell>
                  <TableCell>{alert.affectedUsers}</TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {alert.timestamp}
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex items-center justify-end space-x-2">
                      <Button variant="outline" size="sm">
                        View Details
                      </Button>
                      {alert.status === "active" && (
                        <Button variant="outline" size="sm">
                          Resolve
                        </Button>
                      )}
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      {/* Alert Categories */}
      <div className="grid gap-6 md:grid-cols-3">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <Shield className="h-5 w-5 mr-2" />
              Security Alerts
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <div className="flex justify-between">
                <span className="text-sm">Failed Logins</span>
                <Badge variant="destructive">3</Badge>
              </div>
              <div className="flex justify-between">
                <span className="text-sm">Suspicious Activity</span>
                <Badge variant="destructive">1</Badge>
              </div>
              <div className="flex justify-between">
                <span className="text-sm">API Abuse</span>
                <Badge variant="secondary">0</Badge>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <AlertTriangle className="h-5 w-5 mr-2" />
              System Alerts
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <div className="flex justify-between">
                <span className="text-sm">High CPU Usage</span>
                <Badge variant="secondary">1</Badge>
              </div>
              <div className="flex justify-between">
                <span className="text-sm">Memory Issues</span>
                <Badge variant="default">0</Badge>
              </div>
              <div className="flex justify-between">
                <span className="text-sm">Database Slow</span>
                <Badge variant="secondary">0</Badge>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <Bell className="h-5 w-5 mr-2" />
              Payment Alerts
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <div className="flex justify-between">
                <span className="text-sm">Gateway Issues</span>
                <Badge variant="destructive">1</Badge>
              </div>
              <div className="flex justify-between">
                <span className="text-sm">Failed Transactions</span>
                <Badge variant="secondary">2</Badge>
              </div>
              <div className="flex justify-between">
                <span className="text-sm">High Volume</span>
                <Badge variant="outline">0</Badge>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}