"use client"

import { useState } from 'react';
import { Button } from '@/app/_components/ui/button';
import {
    AlertTriangle,
    Bell,
    ShieldAlert,
    Radio,
    RadioTower,
    Shield
} from 'lucide-react';
import { cn } from '@/app/_lib/utils';
import { Badge } from '@/app/_components/ui/badge';
import { IIncidentLog } from '@/app/_utils/types/ews';

interface PanicButtonDemoProps {
    onTriggerAlert: (priority: 'high' | 'medium' | 'low') => void;
    onResolveAllAlerts: () => void;
    activeIncidents: IIncidentLog[];
    className?: string;
}

export default function PanicButtonDemo({
    onTriggerAlert,
    onResolveAllAlerts,
    activeIncidents,
    className
}: PanicButtonDemoProps) {
    const [isTriggering, setIsTriggering] = useState(false);

    const handleTriggerPanic = (priority: 'high' | 'medium' | 'low') => {
        setIsTriggering(true);
        onTriggerAlert(priority);

        // Reset animation
        setTimeout(() => {
            setIsTriggering(false);
        }, 1000);
    };

    return (
        <div className={cn("border border-muted bg-background p-3 rounded-lg shadow-xl", className)}>
            <div className="flex items-center justify-between mb-3">
                <h3 className="font-bold flex items-center gap-2">
                    <Shield className="h-5 w-5 text-red-500" />
                    <span>EWS Panic Button Demo</span>
                </h3>

                {activeIncidents.length > 0 && (
                    <Badge variant="destructive" className="ml-2 animate-pulse">
                        {activeIncidents.length} Active
                    </Badge>
                )}
            </div>

            <div className="flex flex-col gap-2">
                <Button
                    variant="destructive"
                    size="lg"
                    className={cn(
                        "bg-red-600 hover:bg-red-700 flex items-center gap-2 transition-all",
                        isTriggering && "animate-ping"
                    )}
                    onClick={() => handleTriggerPanic('high')}
                >
                    <AlertTriangle className="h-5 w-5" />
                    <span>SEND HIGH PRIORITY ALERT</span>
                </Button>

                <div className="grid grid-cols-2 gap-2">
                    <Button
                        variant="default"
                        className="bg-amber-600 hover:bg-amber-700 flex items-center gap-2"
                        onClick={() => handleTriggerPanic('medium')}
                    >
                        <Bell className="h-4 w-4" />
                        <span>Medium Priority</span>
                    </Button>

                    <Button
                        variant="outline"
                        className="border-blue-600 text-blue-600 hover:bg-blue-100 flex items-center gap-2"
                        onClick={() => handleTriggerPanic('low')}
                    >
                        <RadioTower className="h-4 w-4" />
                        <span>Low Priority</span>
                    </Button>
                </div>

                {activeIncidents.length > 0 && (
                    <Button
                        variant="outline"
                        className="mt-3 border-green-600 text-green-600 hover:bg-green-100"
                        onClick={onResolveAllAlerts}
                    >
                        <Shield className="h-4 w-4 mr-2" />
                        <span>Resolve All Alerts</span>
                    </Button>
                )}
            </div>

            <p className="text-xs text-muted-foreground mt-2">
                Simulates a mobile app panic button activation in the Jember area.
            </p>
        </div>
    );
}