'use client';

import React, { useState, useEffect } from 'react';
import { DashboardLayout } from '@/components/dashboard/DashboardLayout';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import { AuditTable } from '@/components/audit/AuditTable';
import { AuditFilters } from '@/components/audit/AuditFilters';
import { EmailAuditFilters } from '@/components/audit/EmailAuditFilters';
import { EmailLogsTable } from '@/components/audit/EmailLogsTable';
import { ShieldAlert, ChevronLeft, ChevronRight } from 'lucide-react';
import { IconButton } from '@/components/ui';
import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';
import { StatusHistoryTable } from '@/components/audit/StatusHistoryTable';
import { useToast } from '@/components/ui/Toast';

export default function PageContent() {
    const toast = useToast();
    const { data: session, status } = useSession();
    const router = useRouter();

    const [activeTab, setActiveTab] = useState<'system' | 'email' | 'status'>('system');

    // Interfaces matching the Table components
    interface AuditLog {
        id: number;
        action: string;
        resource: string;
        resourceId?: string;
        details?: string;
        createdAt: string;
        user: {
            name: string | null;
            email: string;
        };
    }

    interface EmailLog {
        id: number;
        recipient: string;
        subject: string;
        trigger: string;
        status: string;
        errorMessage?: string;
        metadata?: string;
        sentAt: string;
    }

    // System Logs State
    const [logs, setLogs] = useState<AuditLog[]>([]);
    const [loading, setLoading] = useState(true);
    const [pagination, setPagination] = useState({ page: 1, total: 0, pages: 0, limit: 20 });
    const [filters, setFilters] = useState({
        userId: '',
        action: '',
        startDate: '',
        endDate: ''
    });

    // Email Logs State
    const [emailLogs, setEmailLogs] = useState<EmailLog[]>([]);
    const [emailLoading, setEmailLoading] = useState(false);
    const [emailPagination, setEmailPagination] = useState({ page: 1, total: 0, pages: 0, limit: 20 });
    const [emailFilters, setEmailFilters] = useState({
        search: '',
        status: '',
        trigger: '',
        startDate: '',
        endDate: ''
    });
    const [isDownloading, setIsDownloading] = useState(false);

    const fetchLogs = React.useCallback(async () => {
        setLoading(true);
        try {
            const params = new URLSearchParams({
                page: pagination.page.toString(),
                limit: pagination.limit.toString(),
                ...filters
            });
            const res = await fetch(`/api/audit-logs?${params}`);
            const data = await res.json();

            if (data.logs) {
                setLogs(data.logs);
                setPagination(prev => ({ ...prev, ...data.pagination }));
            }
        } catch (error) {
            console.error('Failed to fetch logs:', error);
        } finally {
            setLoading(false);
        }
    }, [pagination.page, pagination.limit, filters]);

    const fetchEmailLogs = React.useCallback(async () => {
        setEmailLoading(true);
        try {
            const params = new URLSearchParams({
                page: emailPagination.page.toString(),
                limit: emailPagination.limit.toString(),
                ...emailFilters
            });
            const res = await fetch(`/api/audit/email-logs?${params}`);
            const data = await res.json();

            if (data.logs) {
                setEmailLogs(data.logs);
                setEmailPagination(prev => ({ ...prev, ...data.pagination }));
            }
        } catch (error) {
            console.error('Failed to fetch email logs:', error);
        } finally {
            setEmailLoading(false);
        }
    }, [emailPagination.page, emailPagination.limit, emailFilters]);

    // Auth Check
    useEffect(() => {
        if (status === 'loading') return;
        if (!session || session.user?.role !== 'ADMIN') {
            // react-doctor-disable-next-line react-doctor/nextjs-no-client-side-redirect
            // Client-side role guard — useSession resolves only after mount.
            router.push('/dashboard');
        } else {
            if (activeTab === 'system') fetchLogs();
            if (activeTab === 'email') fetchEmailLogs();
        }
    }, [session, status, activeTab, fetchLogs, fetchEmailLogs, router]);

    const handleFilterChange = (key: string, value: string) => {
        setFilters(prev => ({ ...prev, [key]: value }));
        setPagination(prev => ({ ...prev, page: 1 }));
    };

    const handleEmailFilterChange = (key: string, value: string) => {
        setEmailFilters(prev => ({ ...prev, [key]: value }));
        setEmailPagination(prev => ({ ...prev, page: 1 }));
    };

    const handleDownloadReport = async () => {
        if (isDownloading) return;
        setIsDownloading(true);

        try {
            // Fetch all matching logs (up to 1000 for safety)
            const params = new URLSearchParams({
                limit: '1000',
                ...emailFilters
            });
            const res = await fetch(`/api/audit/email-logs?${params}`);
            const data = await res.json();

            if (!data.logs || data.logs.length === 0) {
                toast.info('No logs to export');
                return;
            }

            const doc = new jsPDF();
            const pageWidth = doc.internal.pageSize.width;

            // --- Branding & Header ---
            // Top Color Bar
            doc.setFillColor(245, 158, 11); // Amber-500
            doc.rect(0, 0, pageWidth, 4, 'F');

            // Logo / Title Area
            doc.setFont('helvetica', 'bold');
            doc.setFontSize(22);
            doc.setTextColor(15, 23, 42); // Slate-900
            doc.text('Uptime Sentinel', 14, 20);

            doc.setFontSize(10);
            doc.setTextColor(100, 116, 139); // Slate-500
            doc.text('Audit Trail & Compliance Report', 14, 26);

            // Right side header info
            doc.setFontSize(9);
            doc.text('Generated By: Admin', pageWidth - 15, 20, { align: 'right' });
            doc.text(`Date: ${new Date().toLocaleDateString()}`, pageWidth - 15, 25, { align: 'right' });
            doc.text(`Time: ${new Date().toLocaleTimeString()}`, pageWidth - 15, 30, { align: 'right' });

            // --- Report Title & Context ---
            doc.setFontSize(14);
            doc.setTextColor(15, 23, 42);
            doc.text('Email Traffic Log', 14, 45);

            // Filter Context
            doc.setFontSize(9);
            doc.setTextColor(71, 85, 105); // Slate-600
            const activeFilters = [];
            if (emailFilters.search) activeFilters.push(`Search: "${emailFilters.search}"`);
            if (emailFilters.status) activeFilters.push(`Status: ${emailFilters.status}`);
            if (emailFilters.trigger) activeFilters.push(`Trigger: ${emailFilters.trigger}`);
            if (emailFilters.startDate) activeFilters.push(`From: ${emailFilters.startDate}`);
            if (emailFilters.endDate) activeFilters.push(`To: ${emailFilters.endDate}`);

            const filterText = activeFilters.length > 0 ? activeFilters.join('  |  ') : 'All Records';
            doc.text(filterText, 14, 52);

            // --- Stats Summary (Optional lightweight stats) ---
            const total = data.logs.length;
            const sent = data.logs.filter((l: EmailLog) => l.status === 'SENT').length;
            const failed = total - sent;

            doc.setFillColor(241, 245, 249); // Slate-100
            doc.roundedRect(14, 58, 180, 12, 1, 1, 'F');

            doc.setFontSize(9);
            doc.setTextColor(15, 23, 42);
            doc.text(`Total Records: ${total}`, 20, 65);
            doc.setTextColor(22, 163, 74); // Green
            doc.text(`Success: ${sent}`, 70, 65);
            doc.setTextColor(220, 38, 38); // Red
            doc.text(`Failed: ${failed}`, 110, 65);


            // --- Table Content ---
            const columns = [
                { header: 'Time', dataKey: 'time' },
                { header: 'Status', dataKey: 'status' },
                { header: 'Trigger', dataKey: 'trigger' },
                { header: 'Recipient', dataKey: 'recipient' },
                { header: 'Subject', dataKey: 'subject' },
            ];

            const rows = data.logs.map((log: EmailLog) => ({
                time: new Date(log.sentAt).toLocaleString([], { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }),
                status: log.status,
                trigger: log.trigger ? log.trigger.toUpperCase() : '-',
                recipient: log.recipient,
                subject: log.subject
            }));

            autoTable(doc, {
                columns: columns,
                body: rows,
                startY: 75,
                theme: 'grid',
                headStyles: {
                    fillColor: [248, 250, 252], // Slate-50
                    textColor: [71, 85, 105], // Slate-600
                    lineColor: [226, 232, 240], // Slate-200
                    lineWidth: 0.1,
                    fontStyle: 'bold',
                    font: 'helvetica',
                    fontSize: 8,
                    halign: 'left'
                },
                bodyStyles: {
                    fillColor: [255, 255, 255],
                    textColor: [51, 65, 85], // Slate-700
                    lineColor: [241, 245, 249],
                    fontSize: 8,
                    cellPadding: 3
                },
                alternateRowStyles: {
                    fillColor: [251, 252, 253] // Very light slate
                },
                columnStyles: {
                    time: { cellWidth: 35 },
                    status: { cellWidth: 20, fontStyle: 'bold' },
                    trigger: { cellWidth: 25 },
                    recipient: { cellWidth: 50 },
                    subject: { cellWidth: 'auto' }
                },
                didParseCell: function (data) {
                    if (data.section === 'body' && data.column.dataKey === 'status') {
                        if (data.cell.raw === 'SENT') {
                            data.cell.styles.textColor = [22, 163, 74]; // Emerald-600
                        } else {
                            data.cell.styles.textColor = [220, 38, 38]; // Red-600
                        }
                    }
                },
                didDrawPage: function () {
                    // Footer
                    const pageCount = doc.getNumberOfPages();
                    doc.setFontSize(8);
                    doc.setTextColor(148, 163, 184);
                    doc.text('Confidential - Internal Use Only', 14, doc.internal.pageSize.height - 10);
                    doc.text('Page ' + pageCount, doc.internal.pageSize.width - 20, doc.internal.pageSize.height - 10);
                }
            });

            doc.save(`email-audit-report-${new Date().toISOString().split('T')[0]}.pdf`);

        } catch (error) {
            console.error('Failed to download PDF:', error);
            toast.error('Failed to generate report', error instanceof Error ? error.message : undefined);
        } finally {
            setIsDownloading(false);
        }
    };

    const handlePageChange = (newPage: number) => {
        if (activeTab === 'system') {
            if (newPage >= 1 && newPage <= pagination.pages) {
                setPagination(prev => ({ ...prev, page: newPage }));
            }
        } else {
            if (newPage >= 1 && newPage <= emailPagination.pages) {
                setEmailPagination(prev => ({ ...prev, page: newPage }));
            }
        }
    };

    if (status === 'loading' || !session) return null;

    const currentPagination = activeTab === 'system' ? pagination : emailPagination;

    return (
        <DashboardLayout>
            <div className="max-w-7xl mx-auto py-8">
                {/* Header */}
                <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
                    <div>
                        <h1 className="text-2xl font-bold text-slate-800 dark:text-white flex items-center gap-3">
                            <ShieldAlert className="size-8 text-amber-500" />
                            Audit Logs
                        </h1>
                        <p className="text-slate-500 dark:text-slate-400 mt-1">
                            Track and monitor all administrative actions and system changes.
                        </p>
                    </div>

                    <div className="flex items-center gap-4">
                        {/* Tab Switcher */}
                        <div className="bg-slate-100 dark:bg-slate-800 p-1 rounded-lg flex items-center">
                            <button type="button"
                                onClick={() => setActiveTab('system')}
                                className={`px-4 py-2 text-sm font-medium rounded-md transition-all ${activeTab === 'system'
                                    ? 'bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm'
                                    : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200'
                                    }`}
                            >
                                System Logs
                            </button>
                            <button type="button"
                                onClick={() => setActiveTab('email')}
                                className={`px-4 py-2 text-sm font-medium rounded-md transition-all ${activeTab === 'email'
                                    ? 'bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm'
                                    : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200'
                                    }`}
                            >
                                Email Traffic
                            </button>
                            <button type="button"
                                onClick={() => setActiveTab('status')}
                                className={`px-4 py-2 text-sm font-medium rounded-md transition-all ${activeTab === 'status'
                                    ? 'bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm'
                                    : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200'
                                    }`}
                            >
                                Status & Events
                            </button>
                        </div>

                        <div className="hidden md:flex items-center gap-2 bg-amber-50 dark:bg-amber-900/20 px-4 py-2 rounded-lg border border-amber-100 dark:border-amber-900/30">
                            <span className="size-2 rounded-full bg-amber-500 animate-pulse"></span>
                            <span className="text-sm font-medium text-amber-700 dark:text-amber-400">Admin Mode Active</span>
                        </div>
                    </div>
                </div>

                {activeTab === 'system' ? (
                    <>
                        {/* System Audit Content */}
                        <AuditFilters
                            filters={filters}
                            onFilterChange={handleFilterChange}
                            onReset={() => setFilters({ userId: '', action: '', startDate: '', endDate: '' })}
                            onRefresh={fetchLogs}
                        />
                        <AuditTable logs={logs} isLoading={loading} />
                    </>
                ) : activeTab === 'email' ? (
                    <>
                        {/* Email Logs Content */}
                        <EmailAuditFilters
                            filters={emailFilters}
                            onFilterChange={handleEmailFilterChange}
                            onReset={() => setEmailFilters({ search: '', status: '', trigger: '', startDate: '', endDate: '' })}
                            onRefresh={fetchEmailLogs}
                            onDownloadPdf={handleDownloadReport}
                            isDownloading={isDownloading}
                        />
                        <div className="mb-2 flex justify-between items-center text-sm text-slate-500">
                            <span>Showing all email records</span>
                        </div>
                        <EmailLogsTable logs={emailLogs} isLoading={emailLoading} />
                    </>
                ) : (
                    <>
                        {/* Status History Content */}
                        <StatusHistoryTable />
                    </>
                )}

                {/* Pagination */}
                <div className="flex items-center justify-between mt-6 px-2">
                    <p className="text-sm text-slate-500">
                        Showing page <span className="font-semibold">{currentPagination.page}</span> of <span className="font-semibold">{currentPagination.pages || 1}</span>
                    </p>
                    <div className="flex items-center gap-2">
                        <IconButton
                            label="Previous page"
                            variant="outline"
                            size="md"
                            onClick={() => handlePageChange(currentPagination.page - 1)}
                            disabled={currentPagination.page === 1}
                            className="border-slate-200 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800"
                        >
                            <ChevronLeft className="size-5 text-slate-600 dark:text-slate-400" />
                        </IconButton>
                        <IconButton
                            label="Next page"
                            variant="outline"
                            size="md"
                            onClick={() => handlePageChange(currentPagination.page + 1)}
                            disabled={currentPagination.page === currentPagination.pages || currentPagination.pages === 0}
                            className="border-slate-200 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800"
                        >
                            <ChevronRight className="size-5 text-slate-600 dark:text-slate-400" />
                        </IconButton>
                    </div>
                </div>
            </div>
        </DashboardLayout>
    );
}