import React, { useState } from "react";
import {
    Warning2,
    Refresh,
    InfoCircle,
    CloseCircle
} from "iconsax-react";
import Button from "../../components/Button";
import Pagination from "../../components/Pagination";
import TitleLine from "../../components/TitleLine";
import PageLoading from "../../components/PageLoading";
// import Error from "../../components/Error"; // Using custom error display
import FilterPanel from "./components/FilterPanel";
import AccessLogsTable from "./components/AccessLogsTable";
import LogDetailsModal from "./components/LogDetailsModal";
import { useErrorLogs, useAccessLogDetail } from "./hooks/useAccessLogs";
import { AccessLog } from "./types/AccessLogTypes";

const ErrorLogs: React.FC = () => {
    const {
        errorLogs,
        loading,
        error,
        total,
        filters,
        updateFilters,
        refetch,
    } = useErrorLogs();

    const { log: selectedLog, fetchLog, clearLog } = useAccessLogDetail();
    const [isDetailsModalOpen, setIsDetailsModalOpen] = useState(false);

    const handleViewDetails = async (log: AccessLog) => {
        await fetchLog(log.id);
        setIsDetailsModalOpen(true);
    };

    const handleCloseDetailsModal = () => {
        setIsDetailsModalOpen(false);
        clearLog();
    };

    const handleSort = (field: string, order: "ASC" | "DESC") => {
        updateFilters({ sortBy: field, sortOrder: order });
    };

    const handlePageChange = (page: number) => {
        updateFilters({ page });
    };

    const resetFilters = () => {
        updateFilters({
            page: 1,
            limit: 20,
            sortBy: "createdAt",
            sortOrder: "DESC",
            operationType: undefined,
            userType: undefined,
            entityName: "",
            entityId: "",
            userId: "",
            ipAddress: "",
            endpoint: "",
            httpMethod: undefined,
            statusCode: undefined,
            startDate: "",
            endDate: "",
            search: "",
            minExecutionTime: undefined,
            maxExecutionTime: undefined,
        });
    };

    // Count errors by status code
    const errorsByStatusCode = (errorLogs || []).reduce((acc: Record<string, number>, log: AccessLog) => {
        const statusCode = log.statusCode || 0;
        const range = statusCode >= 500 ? "5xx" : statusCode >= 400 ? "4xx" : "other";
        acc[range] = (acc[range] || 0) + 1;
        return acc;
    }, {} as Record<string, number>);

    // Count recent errors (last 24 hours)
    const recentErrors = (errorLogs || []).filter((log: AccessLog) => {
        const logDate = new Date(log.createdAt);
        const oneDayAgo = new Date(Date.now() - 24 * 60 * 60 * 1000);
        return logDate > oneDayAgo;
    }).length;

    if (error) {
        return (
            <div className="p-6">
                <TitleLine title="لاگ‌های خطا" />
                <div className="bg-red-50 border border-red-200 rounded-lg p-4">
                    <div className="flex items-center justify-between">
                        <p className="text-red-800">{error}</p>
                        <Button
                            onClick={refetch}
                            className="bg-red-600 text-white hover:bg-red-700"
                        >
                            تلاش مجدد
                        </Button>
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="p-6 space-y-6">
            {/* Header */}
            <div className="flex items-center justify-between">
                <div>
                    <TitleLine title="لاگ‌های خطا" />
                    <p className="text-gray-600 mt-2">
                        مشاهده و تحلیل خطاهای سیستم
                    </p>
                </div>

                <div className="flex items-center gap-3">
                    <Button
                        onClick={refetch}
                        disabled={loading}
                        className="flex items-center gap-2 border border-gray-300 bg-white text-gray-700 hover:bg-gray-50"
                    >
                        <Refresh size={16} className={loading ? "animate-spin" : ""} />
                        بروزرسانی
                    </Button>
                </div>
            </div>

            {/* Error Stats */}
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                    <div className="flex items-center gap-3">
                        <div className="flex-shrink-0 p-2 bg-red-100 rounded-lg">
                            <Warning2 size={20} className="text-red-600" />
                        </div>
                        <div>
                            <p className="text-sm font-medium text-gray-600">کل خطاها</p>
                            <p className="text-xl font-bold text-gray-900">
                                {(total || 0).toLocaleString('fa-IR')}
                            </p>
                        </div>
                    </div>
                </div>

                <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                    <div className="flex items-center gap-3">
                        <div className="flex-shrink-0 p-2 bg-orange-100 rounded-lg">
                            <CloseCircle size={20} className="text-orange-600" />
                        </div>
                        <div>
                            <p className="text-sm font-medium text-gray-600">خطاهای 4xx</p>
                            <p className="text-xl font-bold text-gray-900">
                                {(errorsByStatusCode["4xx"] || 0).toLocaleString('fa-IR')}
                            </p>
                        </div>
                    </div>
                </div>

                <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                    <div className="flex items-center gap-3">
                        <div className="flex-shrink-0 p-2 bg-red-100 rounded-lg">
                            <Warning2 size={20} className="text-red-600" />
                        </div>
                        <div>
                            <p className="text-sm font-medium text-gray-600">خطاهای 5xx</p>
                            <p className="text-xl font-bold text-gray-900">
                                {(errorsByStatusCode["5xx"] || 0).toLocaleString('fa-IR')}
                            </p>
                        </div>
                    </div>
                </div>

                <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                    <div className="flex items-center gap-3">
                        <div className="flex-shrink-0 p-2 bg-yellow-100 rounded-lg">
                            <InfoCircle size={20} className="text-yellow-600" />
                        </div>
                        <div>
                            <p className="text-sm font-medium text-gray-600">24 ساعت گذشته</p>
                            <p className="text-xl font-bold text-gray-900">
                                {recentErrors.toLocaleString('fa-IR')}
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            {/* Error Severity Alert */}
            {errorsByStatusCode["5xx"] > 0 && (
                <div className="bg-red-50 border border-red-200 rounded-lg p-4">
                    <div className="flex items-center gap-3">
                        <Warning2 size={20} className="text-red-600" />
                        <div>
                            <h3 className="text-sm font-medium text-red-900">هشدار خطاهای سرور</h3>
                            <p className="text-sm text-red-700 mt-1">
                                {errorsByStatusCode["5xx"]} خطای سرور (5xx) شناسایی شده است.
                                لطفاً این خطاها را بررسی و رفع کنید.
                            </p>
                        </div>
                    </div>
                </div>
            )}

            {/* Recent Errors Alert */}
            {recentErrors > 10 && (
                <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                    <div className="flex items-center gap-3">
                        <InfoCircle size={20} className="text-yellow-600" />
                        <div>
                            <h3 className="text-sm font-medium text-yellow-900">افزایش خطاها</h3>
                            <p className="text-sm text-yellow-700 mt-1">
                                {recentErrors} خطا در 24 ساعت گذشته رخ داده است.
                                ممکن است نیاز به بررسی بیشتر باشد.
                            </p>
                        </div>
                    </div>
                </div>
            )}

            {/* Filter Panel */}
            <FilterPanel
                filters={filters}
                onFiltersChange={updateFilters}
                onReset={resetFilters}
                loading={loading}
            />

            {/* Loading State */}
            {loading && <PageLoading />}

            {/* Table */}
            {!loading && (
                <>
                    <AccessLogsTable
                        logs={errorLogs}
                        loading={loading}
                        onViewDetails={handleViewDetails}
                        onSort={handleSort}
                        sortBy={filters.sortBy}
                        sortOrder={filters.sortOrder}
                    />

                    {/* Pagination */}
                    {total > (filters.limit || 20) && (
                        <div className="flex justify-center">
                            <Pagination
                                currentPage={filters.page || 1}
                                totalPages={Math.ceil(total / (filters.limit || 20))}
                                onPageChange={handlePageChange}
                            />
                        </div>
                    )}
                </>
            )}

            {/* Details Modal */}
            <LogDetailsModal
                log={selectedLog}
                isOpen={isDetailsModalOpen}
                onClose={handleCloseDetailsModal}
            />

            {/* Empty State Info */}
            {!loading && (!errorLogs || errorLogs.length === 0) && !error && (
                <div className="bg-green-50 border border-green-200 rounded-lg p-6">
                    <div className="flex items-center gap-3">
                        <InfoCircle size={24} className="text-green-600" />
                        <div>
                            <h3 className="text-lg font-medium text-green-900">عالی! هیچ خطایی یافت نشد</h3>
                            <p className="text-green-700 mt-1">
                                در بازه زمانی و فیلترهای انتخاب شده، هیچ خطایی ثبت نشده است.
                                این نشان‌دهنده عملکرد مناسب سیستم است.
                            </p>
                        </div>
                    </div>
                </div>
            )}

            {/* Error Analysis Tips */}
            {!loading && errorLogs && errorLogs.length > 0 && (
                <div className="bg-blue-50 border border-blue-200 rounded-lg p-6">
                    <div className="flex items-start gap-3">
                        <InfoCircle size={24} className="text-blue-600 flex-shrink-0 mt-0.5" />
                        <div>
                            <h3 className="text-lg font-medium text-blue-900 mb-2">راهنمای تحلیل خطاها</h3>
                            <div className="text-blue-700 space-y-2">
                                <p>• <strong>خطاهای 4xx:</strong> مربوط به درخواست‌های نامعتبر کاربران</p>
                                <p>• <strong>خطاهای 5xx:</strong> مربوط به مشکلات سرور که نیاز به رفع فوری دارند</p>
                                <p>• <strong>الگوهای تکراری:</strong> خطاهای مشابه ممکن است نشان‌دهنده مشکل سیستمی باشند</p>
                                <p>• <strong>زمان‌بندی:</strong> توجه به زمان وقوع خطاها برای شناسایی الگوهای زمانی</p>
                                <p>• <strong>IP و کاربران:</strong> شناسایی منابع خطاها برای بهبود تجربه کاربری</p>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default ErrorLogs;
