import { useCallback, useEffect, useState } from 'react';
import axios from '../../../bootstrap';
import { Search, Clock } from 'lucide-react';
import { buildAuditLogQuery, incidentStatusClass, severityBadgeClass } from '../../../utils/auditLog';
import { EventDetailsDrawer } from './EventDetailsDrawer';
import { IncidentActionButtons } from './IncidentActionButtons';

export function AuditLogsView() {
    const [logs, setLogs] = useState<any[]>([]);
    const [isLoading, setIsLoading] = useState(true);
    const [search, setSearch] = useState('');
    const [severityFilter, setSeverityFilter] = useState('');
    const [statusFilter, setStatusFilter] = useState('');
    const [moduleFilter, setModuleFilter] = useState('');
    const [dateFrom, setDateFrom] = useState('');
    const [dateTo, setDateTo] = useState('');
    const [selectedLog, setSelectedLog] = useState<any | null>(null);
    const [relatedEvents, setRelatedEvents] = useState<any[]>([]);
    const [incidentActionId, setIncidentActionId] = useState<number | null>(null);

    const fetchLogs = useCallback(async () => {
        setIsLoading(true);
        try {
            const query = buildAuditLogQuery({
                search: search || undefined,
                severity: severityFilter || undefined,
                status: statusFilter || undefined,
                module: moduleFilter || undefined,
                date_from: dateFrom || undefined,
                date_to: dateTo || undefined,
            });
            const res = await axios.get(`/audit-logs${query}`);
            setLogs(res.data.logs || []);
        } catch (err) {
            console.error('Error fetching audit logs', err);
        } finally {
            setIsLoading(false);
        }
    }, [search, severityFilter, statusFilter, moduleFilter, dateFrom, dateTo]);

    useEffect(() => {
        const timer = window.setTimeout(() => {
            fetchLogs();
        }, 250);

        return () => window.clearTimeout(timer);
    }, [fetchLogs]);

    const openEventDetails = async (log: any) => {
        try {
            const res = await axios.get(`/audit-logs/${log.id}`);
            setSelectedLog(res.data.log);
            setRelatedEvents(res.data.related_events || []);
        } catch (err) {
            console.error('Error loading event details', err);
            setSelectedLog(log);
            setRelatedEvents([]);
        }
    };

    const handleIncidentAction = async (incidentId: number, action: 'acknowledge' | 'resolve' | 'archive') => {
        setIncidentActionId(incidentId);
        try {
            await axios.post(`/incidents/${incidentId}/${action}`);
            await fetchLogs();
        } catch (err) {
            console.error(`Incident ${action} error`, err);
        } finally {
            setIncidentActionId(null);
        }
    };

    return (
        <div className="space-y-6">
            <div>
                <h3 className="text-xl font-bold text-white">Security Audit Logs</h3>
                <p className="text-sm text-slate-400">Real-time log of security events, failures, and locks across all agents</p>
            </div>

            <div className="grid grid-cols-1 gap-3 bg-slate-900/40 border border-slate-800/80 p-4 rounded-2xl lg:grid-cols-3">
                <div className="relative lg:col-span-2">
                    <Search className="absolute left-3.5 top-3 w-4 h-4 text-slate-500" />
                    <input
                        type="text"
                        placeholder="Search logs by website, event, or keyword..."
                        value={search}
                        onChange={(e) => setSearch(e.target.value)}
                        className="w-full pl-10 pr-4 py-2 bg-slate-950 border border-slate-800 rounded-xl text-sm text-slate-200 focus:outline-none focus:border-rose-500/40"
                    />
                </div>
                <select
                    value={severityFilter}
                    onChange={(e) => setSeverityFilter(e.target.value)}
                    className="px-4 py-2 bg-slate-950 border border-slate-800 rounded-xl text-sm text-slate-200 focus:outline-none"
                >
                    <option value="">All Severities</option>
                    <option value="critical">Critical</option>
                    <option value="warning">Warning</option>
                    <option value="info">Info</option>
                    <option value="success">Success</option>
                </select>
                <select
                    value={statusFilter}
                    onChange={(e) => setStatusFilter(e.target.value)}
                    className="px-4 py-2 bg-slate-950 border border-slate-800 rounded-xl text-sm text-slate-200 focus:outline-none"
                >
                    <option value="">All Statuses</option>
                    <option value="open">Open</option>
                    <option value="acknowledged">Acknowledged</option>
                    <option value="resolved">Resolved</option>
                    <option value="archived">Archived</option>
                    <option value="none">Non-incident</option>
                </select>
                <input
                    type="text"
                    placeholder="Module (e.g. policy, xmlrpc)"
                    value={moduleFilter}
                    onChange={(e) => setModuleFilter(e.target.value)}
                    className="px-4 py-2 bg-slate-950 border border-slate-800 rounded-xl text-sm text-slate-200 focus:outline-none"
                />
                <input
                    type="date"
                    value={dateFrom}
                    onChange={(e) => setDateFrom(e.target.value)}
                    className="px-4 py-2 bg-slate-950 border border-slate-800 rounded-xl text-sm text-slate-200 focus:outline-none"
                />
                <input
                    type="date"
                    value={dateTo}
                    onChange={(e) => setDateTo(e.target.value)}
                    className="px-4 py-2 bg-slate-950 border border-slate-800 rounded-xl text-sm text-slate-200 focus:outline-none"
                />
            </div>

            <div className="bg-slate-900/40 border border-slate-800/80 rounded-2xl overflow-hidden">
                {isLoading ? (
                    <div className="flex justify-center items-center py-16">
                        <div className="w-8 h-8 border-4 border-rose-500/20 border-t-rose-500 rounded-full animate-spin"></div>
                    </div>
                ) : logs.length === 0 ? (
                    <div className="text-center py-16 text-slate-500 text-sm">
                        No security logs found matching your filters.
                    </div>
                ) : (
                    <div className="divide-y divide-slate-800/60">
                        {logs.map((log) => (
                            <div
                                key={log.id}
                                className="p-4 hover:bg-slate-850/10 transition-all flex flex-col sm:flex-row gap-4 justify-between items-start sm:items-center"
                            >
                                <button
                                    type="button"
                                    onClick={() => openEventDetails(log)}
                                    className="space-y-1.5 flex-1 text-left"
                                >
                                    <div className="flex flex-wrap items-center gap-2.5">
                                        <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider border ${severityBadgeClass(log.severity)}`}>
                                            {log.severity}
                                        </span>
                                        <span className="font-mono text-xs text-slate-400 font-semibold">{log.event}</span>
                                        {log.incident_status && (
                                            <span className={`inline-flex rounded-md border px-1.5 py-0.5 text-[9px] font-bold uppercase ${incidentStatusClass(log.incident_status)}`}>
                                                {log.incident_status}
                                            </span>
                                        )}
                                        <span className="text-xs font-semibold text-rose-400">{log.agent?.site_name}</span>
                                    </div>
                                    <p className="text-slate-300 text-sm">{log.message}</p>
                                </button>
                                <div className="flex flex-col items-end gap-2">
                                    <IncidentActionButtons
                                        log={log}
                                        busyId={incidentActionId}
                                        compact
                                        onAction={handleIncidentAction}
                                    />
                                    <div className="text-xs text-slate-500 flex items-center gap-1.5 whitespace-nowrap">
                                        <Clock className="w-3.5 h-3.5" />
                                        {new Date(log.logged_at).toLocaleString()}
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                )}
            </div>

            <EventDetailsDrawer
                log={selectedLog}
                relatedEvents={relatedEvents}
                onClose={() => {
                    setSelectedLog(null);
                    setRelatedEvents([]);
                }}
            />
        </div>
    );
}