import { X, ChevronDown, ChevronRight } from 'lucide-react';
import { useState, type ReactNode } from 'react';
import { incidentStatusClass, severityBadgeClass } from '../../../utils/auditLog';
import {
    actionTakenBadgeClass,
    forensicDisplayValue,
    forensicSeverityBadgeClass,
    formatForensicTimestamp,
} from '../../../utils/forensics';

interface EventDetailsDrawerProps {
    log: any | null;
    relatedEvents?: any[];
    onClose: () => void;
}

function DetailRow({ label, value }: { label: string; value: unknown }) {
    const display = forensicDisplayValue(value);
    const isMultiline = display.includes('\n');

    return (
        <div className="flex flex-col gap-1">
            <span className="text-[10px] font-bold uppercase tracking-wider text-slate-500">{label}</span>
            {isMultiline ? (
                <pre className="overflow-x-auto rounded-lg border border-slate-800 bg-slate-900/50 p-2 text-[10px] text-slate-300 whitespace-pre-wrap break-all">
                    {display}
                </pre>
            ) : (
                <span className="text-xs text-slate-200 break-all">{display}</span>
            )}
        </div>
    );
}

function Section({
    title,
    children,
    defaultOpen = true,
}: {
    title: string;
    children: ReactNode;
    defaultOpen?: boolean;
}) {
    const [open, setOpen] = useState(defaultOpen);

    return (
        <div className="rounded-xl border border-slate-800 bg-slate-900/30">
            <button
                type="button"
                onClick={() => setOpen((prev) => !prev)}
                className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left"
            >
                <span className="text-[11px] font-bold uppercase tracking-wider text-slate-300">{title}</span>
                {open ? <ChevronDown className="h-4 w-4 text-slate-500" /> : <ChevronRight className="h-4 w-4 text-slate-500" />}
            </button>
            {open && <div className="grid grid-cols-1 gap-4 border-t border-slate-800 px-4 py-4 sm:grid-cols-2">{children}</div>}
        </div>
    );
}

export function EventDetailsDrawer({ log, relatedEvents = [], onClose }: EventDetailsDrawerProps) {
    if (!log) {
        return null;
    }

    const forensics = log.forensics ?? {};
    const overview = forensics.overview ?? {};
    const attack = forensics.attack ?? {};
    const request = forensics.request ?? {};
    const source = forensics.source ?? {};
    const detection = forensics.detection ?? {};
    const action = forensics.action ?? {};
    const identifiers = forensics.identifiers ?? {};
    const timeline = log.timeline ?? [];
    const severityLabel = attack.severity_label ?? overview.severity_label ?? log.severity;
    const actionTaken = action.action_taken ?? log.context?.action_taken ?? null;
    const attackDescription = log.attack_description?.description ?? log.description ?? null;

    return (
        <div className="fixed inset-0 z-50 flex justify-end bg-slate-950/70 backdrop-blur-sm" onClick={onClose}>
            <div
                className="h-full w-full max-w-3xl overflow-y-auto border-l border-slate-800 bg-slate-950 p-6 shadow-2xl"
                onClick={(event) => event.stopPropagation()}
            >
                <div className="mb-6 flex items-start justify-between gap-4">
                    <div>
                        <h3 className="text-lg font-bold text-white">Incident Details</h3>
                        <p className="mt-1 text-xs text-slate-500">Forensic investigation record · Event #{log.id}</p>
                    </div>
                    <button
                        type="button"
                        onClick={onClose}
                        className="rounded-lg border border-slate-800 p-2 text-slate-400 transition hover:text-white"
                    >
                        <X className="h-4 w-4" />
                    </button>
                </div>

                <div className="mb-5 flex flex-wrap gap-2">
                    <span className={`inline-flex rounded-md border px-2 py-0.5 text-[10px] font-bold uppercase ${severityBadgeClass(log.severity)}`}>
                        {log.severity}
                    </span>
                    <span className={`inline-flex rounded-md border px-2 py-0.5 text-[10px] font-bold uppercase ${forensicSeverityBadgeClass(severityLabel)}`}>
                        {forensicDisplayValue(severityLabel)}
                    </span>
                    {actionTaken && (
                        <span className={`inline-flex rounded-md border px-2 py-0.5 text-[10px] font-bold uppercase ${actionTakenBadgeClass(actionTaken)}`}>
                            {actionTaken}
                        </span>
                    )}
                    {log.incident_status && (
                        <span className={`inline-flex rounded-md border px-2 py-0.5 text-[10px] font-bold uppercase ${incidentStatusClass(log.incident_status)}`}>
                            {log.incident_status}
                        </span>
                    )}
                </div>

                <div className="space-y-4">
                    <Section title="Overview">
                        <DetailRow label="Event ID" value={`#${overview.event_id ?? log.id}`} />
                        <DetailRow label="Website" value={overview.website ?? log.agent?.site_name} />
                        <DetailRow label="Website ID" value={overview.website_id ?? log.agent_id} />
                        <DetailRow label="Timestamp (Local)" value={formatForensicTimestamp(overview.timestamp_local ?? log.logged_at)} />
                        <DetailRow label="Timestamp (UTC)" value={formatForensicTimestamp(overview.timestamp_utc ?? log.logged_at)} />
                        <DetailRow label="Event Type" value={overview.event_type ?? log.event} />
                        <DetailRow label="Module" value={overview.module ?? log.module} />
                        <DetailRow label="Trigger Source" value={overview.trigger_source ?? log.trigger_source} />
                        <DetailRow label="Message" value={overview.message ?? log.message} />
                        {attackDescription && (
                            <div className="sm:col-span-2">
                                <DetailRow label="Description" value={attackDescription} />
                            </div>
                        )}
                    </Section>

                    <Section title="Attack Information">
                        <DetailRow label="Attack Type" value={attack.attack_type} />
                        <DetailRow label="Severity Label" value={attack.severity_label} />
                        <DetailRow label="Threat Score" value={attack.threat_score} />
                        <DetailRow label="Confidence Score" value={attack.confidence_score} />
                    </Section>

                    <Section title="Request Information">
                        <DetailRow label="HTTP Method" value={request.http_method} />
                        <DetailRow label="Requested URL" value={request.request_uri} />
                        <DetailRow label="REST Endpoint" value={request.rest_endpoint} />
                        <DetailRow label="Query String" value={request.query_string} />
                        <DetailRow label="HTTP Status Returned" value={request.http_status} />
                        <DetailRow label="Response Time (ms)" value={request.response_time_ms} />
                        <DetailRow label="User Agent" value={request.user_agent} />
                        <DetailRow label="Referer" value={request.referer} />
                        <div className="sm:col-span-2">
                            <DetailRow label="Request Headers (Safe Subset)" value={request.request_headers} />
                        </div>
                    </Section>

                    <Section title="Source Information">
                        <DetailRow label="Source IP" value={source.source_ip ?? log.ip_address} />
                        <DetailRow label="Reverse DNS" value={source.reverse_dns} />
                        <DetailRow label="Country" value={source.country} />
                        <DetailRow label="ASN" value={source.asn} />
                        <DetailRow label="ISP" value={source.isp} />
                        <DetailRow label="IP Already Blocked" value={source.ip_blocked} />
                        <DetailRow label="Previous Detections (IP)" value={source.previous_detections_ip} />
                        <DetailRow label="Previous Detections (Website)" value={source.previous_detections_website} />
                        <DetailRow label="First Seen" value={formatForensicTimestamp(source.first_seen)} />
                        <DetailRow label="Last Seen" value={formatForensicTimestamp(source.last_seen)} />
                    </Section>

                    <Section title="Detection Details">
                        <DetailRow label="Detection Rule ID" value={detection.rule_id} />
                        <DetailRow label="Detection Rule Name" value={detection.rule_name} />
                        <DetailRow label="Trigger Module" value={detection.trigger_module} />
                        <DetailRow label="Policy Version" value={detection.policy_version ?? log.policy_version} />
                        <DetailRow label="Plugin Version" value={detection.plugin_version} />
                    </Section>

                    <Section title="Action Taken">
                        <DetailRow label="Action" value={action.action_taken} />
                        <DetailRow label="HTTP Status Returned" value={action.http_status_returned} />
                    </Section>

                    <Section title="Timeline" defaultOpen={timeline.length > 0}>
                        {timeline.length === 0 ? (
                            <div className="sm:col-span-2 text-xs text-slate-500">No timeline entries recorded.</div>
                        ) : (
                            <div className="sm:col-span-2 space-y-2">
                                {timeline.map((entry: any, index: number) => (
                                    <div key={`${entry.at}-${index}`} className="rounded-lg border border-slate-800 bg-slate-900/40 px-3 py-2">
                                        <div className="flex flex-wrap items-center justify-between gap-2">
                                            <span className="text-xs font-semibold text-white">{entry.label}</span>
                                            <span className="text-[10px] text-slate-500">{formatForensicTimestamp(entry.at)}</span>
                                        </div>
                                        <p className="mt-1 text-[11px] text-slate-400">{entry.detail}</p>
                                        <p className="mt-1 text-[10px] text-slate-600">Actor: {entry.actor ?? 'system'}</p>
                                    </div>
                                ))}
                            </div>
                        )}
                    </Section>

                    <Section title="Related Events" defaultOpen={relatedEvents.length > 0}>
                        {relatedEvents.length === 0 ? (
                            <div className="sm:col-span-2 text-xs text-slate-500">No related events found.</div>
                        ) : (
                            <div className="sm:col-span-2 divide-y divide-slate-800 rounded-xl border border-slate-800">
                                {relatedEvents.map((event) => (
                                    <div key={event.id} className="px-3 py-2.5 text-xs text-slate-300">
                                        <div className="flex flex-wrap items-center gap-2">
                                            <span className="font-mono text-slate-500">#{event.id}</span>
                                            <span className={`rounded border px-1.5 py-0.5 text-[9px] font-bold uppercase ${severityBadgeClass(event.severity)}`}>
                                                {event.severity}
                                            </span>
                                            <span className="text-slate-400">{formatForensicTimestamp(event.logged_at)}</span>
                                        </div>
                                        <p className="mt-1 font-semibold text-slate-200">{event.event}</p>
                                        <p className="mt-0.5 text-slate-500">{event.message}</p>
                                    </div>
                                ))}
                            </div>
                        )}
                    </Section>

                    <Section title="Raw JSON Payload" defaultOpen={false}>
                        <div className="sm:col-span-2">
                            <pre className="overflow-x-auto rounded-xl border border-slate-800 bg-slate-900/60 p-3 text-[10px] text-slate-300">
                                {JSON.stringify(log.context ?? {}, null, 2)}
                            </pre>
                        </div>
                    </Section>
                </div>

                <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <DetailRow label="Request ID" value={identifiers.request_id} />
                    <DetailRow label="Correlation ID" value={identifiers.correlation_id} />
                </div>
            </div>
        </div>
    );
}