/**
 * Memory Analysis page — exact port of Angular memory-analysis.component.
 * Bar charts via canvas (theme-aware), memory breakdown, type distribution, prefix memory, expiration.
 */
import { useState, useEffect, useCallback, useRef } from 'react'
import {
    Box, List, ListItem, Divider, TextField, useTheme,
} from '@mui/material'
import { PlayArrow, HourglassEmpty, Download, Analytics, CheckBox, CheckBoxOutlineBlank, Refresh } from '@mui/icons-material'
import { useI18nStore } from '../../stores/i18n.store'
import { useRedisStateStore } from '../../stores/redis-state.store'
import { useCommonStore } from '../../stores/common.store'
import { request } from '../../stores/socket.service'
import P3xrAccordion from '../../components/P3xrAccordion'
import P3xrButton from '../../components/P3xrButton'

function formatBytes(bytes: number): string {
    if (bytes == null || isNaN(bytes)) return '-'
    if (bytes < 1024) return bytes + ' B'
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
    if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
    return (bytes / (1024 * 1024 * 1024)).toFixed(2) + ' GB'
}

function formatTTL(seconds: number): string {
    if (!seconds || seconds <= 0) return '-'
    if (seconds < 60) return seconds + 's'
    if (seconds < 3600) return Math.floor(seconds / 60) + 'm ' + (seconds % 60) + 's'
    if (seconds < 86400) return Math.floor(seconds / 3600) + 'h ' + Math.floor((seconds % 3600) / 60) + 'm'
    return Math.floor(seconds / 86400) + 'd ' + Math.floor((seconds % 86400) / 3600) + 'h'
}

function downloadText(content: string, filename: string): void {
    const blob = new Blob([content], { type: 'text/plain' })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a'); a.href = url; a.download = filename; a.click()
    URL.revokeObjectURL(url)
}

export default function MemoryAnalysisPage() {
    const strings = useI18nStore(s => s.strings)
    const currentLang = useI18nStore(s => s.currentLang)
    const connection = useRedisStateStore(s => s.connection)
    const { generalHandleError } = useCommonStore()
    const muiTheme = useTheme()
    const isDark = muiTheme.palette.mode === 'dark'
    const connName = connection?.name || 'redis'

    const [data, setData] = useState<any>(null)
    const [loading, setLoading] = useState(false)
    const [topN, setTopN] = useState(20)
    const [maxScanKeys, setMaxScanKeys] = useState(5000)
    const [typeEntries, setTypeEntries] = useState<Array<{ type: string; count: number; bytes: number }>>([])

    const [doctorText, setDoctorText] = useState<string | null>(null)
    const [doctorLoading, setDoctorLoading] = useState(false)
    const [autoRefreshDoctor, setAutoRefreshDoctor] = useState(() => localStorage.getItem('p3xr-monitor-auto-doctor') === 'true')
    const doctorIntervalRef = useRef<any>(null)

    const typeChartRef = useRef<HTMLDivElement>(null)
    const prefixChartRef = useRef<HTMLDivElement>(null)
    const resizeObRef = useRef<ResizeObserver | null>(null)
    const redrawRef = useRef<() => void>(() => {})

    const getChartColors = useCallback(() => ({
        primary: muiTheme.palette.primary.main || (isDark ? '#90caf9' : '#1976d2'),
        accent: muiTheme.palette.secondary.main || (isDark ? '#ce93d8' : '#9c27b0'),
        warn: muiTheme.palette.error.main || (isDark ? '#ef9a9a' : '#f44336'),
        text: isDark ? 'rgba(255,255,255,0.87)' : 'rgba(0,0,0,0.87)',
        grid: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)',
    }), [muiTheme, isDark])

    const getBarColors = useCallback(() => {
        const c = getChartColors()
        return [c.primary, c.accent, c.warn,
            isDark ? '#ffb74d' : '#ff9800', isDark ? '#81c784' : '#4caf50',
            isDark ? '#4dd0e1' : '#00bcd4', isDark ? '#a1887f' : '#795548', isDark ? '#90a4ae' : '#607d8b']
    }, [getChartColors, isDark])

    const drawBarChart = useCallback((container: HTMLDivElement | null, items: Array<{ label: string; value: number }>) => {
        if (!container || items.length === 0 || container.offsetWidth <= 0) return
        container.innerHTML = ''
        const colors = getChartColors()
        const barColors = getBarColors()
        const dpr = window.devicePixelRatio || 1
        const width = container.offsetWidth || 500
        const barHeight = 24, labelWidth = 120, valueWidth = 80
        const chartLeft = labelWidth + 8, chartRight = width - valueWidth - 8
        const chartWidth = chartRight - chartLeft, topPad = 8
        const height = topPad + items.length * (barHeight + 4) + 8

        const canvas = document.createElement('canvas')
        canvas.width = width * dpr; canvas.height = height * dpr
        canvas.style.width = width + 'px'; canvas.style.height = height + 'px'
        const ctx = canvas.getContext('2d')!
        ctx.scale(dpr, dpr)
        const maxVal = Math.max(...items.map(i => i.value), 1)

        items.forEach((item, i) => {
            const y = topPad + i * (barHeight + 4)
            ctx.fillStyle = colors.text; ctx.font = '12px Roboto, sans-serif'
            ctx.textAlign = 'right'; ctx.textBaseline = 'middle'
            ctx.fillText(item.label.length > 15 ? item.label.substring(0, 14) + '\u2026' : item.label, labelWidth, y + barHeight / 2)
            ctx.fillStyle = colors.grid; ctx.fillRect(chartLeft, y, chartWidth, barHeight)
            ctx.fillStyle = barColors[i % barColors.length]
            ctx.fillRect(chartLeft, y, (item.value / maxVal) * chartWidth, barHeight)
            ctx.fillStyle = colors.text; ctx.font = '11px Roboto Mono, monospace'
            ctx.textAlign = 'left'; ctx.fillText(formatBytes(item.value), chartRight + 8, y + barHeight / 2)
        })
        container.appendChild(canvas)
    }, [getChartColors, getBarColors])

    const drawCharts = useCallback((analysisData: any, entries: typeof typeEntries) => {
        drawBarChart(typeChartRef.current, entries.map(t => ({ label: t.type, value: t.bytes })))
        drawBarChart(prefixChartRef.current, (analysisData?.prefixMemory || []).slice(0, 20).map((p: any) => ({ label: p.prefix, value: p.totalBytes })))
    }, [drawBarChart])

    // Keep redraw ref in sync for ResizeObserver (always reads latest closure values)
    redrawRef.current = () => {
        if (data && typeEntries.length > 0) drawCharts(data, typeEntries)
    }

    const runAnalysis = useCallback(async () => {
        if (loading) return
        setLoading(true)
        try {
            const resp = await request({ action: 'memory/analysis', payload: { topN, maxScanKeys } })
            const d = resp.data
            setData(d)
            const entries = Object.keys(d.typeDistribution).map(type => ({
                type, count: d.typeDistribution[type], bytes: d.typeMemory[type] || 0,
            })).sort((a, b) => b.bytes - a.bytes)
            setTypeEntries(entries)
            setLoading(false)
            setTimeout(() => drawCharts(d, entries), 100)
        } catch (e) {
            setLoading(false)
            generalHandleError(e)
        }
    }, [topN, maxScanKeys, loading, drawCharts, generalHandleError])

    const runDoctor = useCallback(async () => {
        setDoctorLoading(true)
        try {
            const resp = await request({ action: 'memory/doctor' })
            setDoctorText(resp.data.text)
        } catch (e) { generalHandleError(e) }
        finally { setDoctorLoading(false) }
    }, [generalHandleError])

    const toggleAutoDoctor = useCallback(() => {
        setAutoRefreshDoctor(prev => {
            const next = !prev
            localStorage.setItem('p3xr-monitor-auto-doctor', String(next))
            if (next) runDoctor()
            return next
        })
    }, [runDoctor])

    useEffect(() => {
        if (autoRefreshDoctor) {
            doctorIntervalRef.current = setInterval(() => runDoctor(), 2000)
        } else {
            clearInterval(doctorIntervalRef.current)
        }
        return () => clearInterval(doctorIntervalRef.current)
    }, [autoRefreshDoctor, runDoctor])

    const connectionId = connection?.id
    useEffect(() => {
        setData(null)
        setTypeEntries([])
        if (connectionId) runAnalysis()
    }, [connectionId]) // eslint-disable-line react-hooks/exhaustive-deps

    // Redraw charts on theme change
    const primaryColor = muiTheme.palette.primary.main
    useEffect(() => {
        if (data) setTimeout(() => drawCharts(data, typeEntries), 100)
    }, [isDark, currentLang, primaryColor]) // eslint-disable-line react-hooks/exhaustive-deps

    // ResizeObserver for responsive bar charts in accordions
    const hasData = !!data
    useEffect(() => {
        if (!hasData) return
        let rt: any
        const ob = new ResizeObserver(() => {
            clearTimeout(rt)
            rt = setTimeout(() => redrawRef.current(), 50)
        })
        resizeObRef.current = ob
        if (typeChartRef.current) ob.observe(typeChartRef.current)
        if (prefixChartRef.current) ob.observe(prefixChartRef.current)
        return () => {
            clearTimeout(rt)
            ob.disconnect()
            resizeObRef.current = null
        }
    }, [hasData]) // eslint-disable-line react-hooks/exhaustive-deps

    const exportChart = useCallback((ref: React.RefObject<HTMLDivElement | null>, name: string) => {
        const canvas = ref.current?.querySelector('canvas') as HTMLCanvasElement
        if (!canvas) return
        const ec = document.createElement('canvas')
        ec.width = canvas.width; ec.height = canvas.height
        const ctx = ec.getContext('2d')!
        ctx.fillStyle = isDark ? '#1e1e1e' : '#ffffff'
        ctx.fillRect(0, 0, ec.width, ec.height)
        ctx.drawImage(canvas, 0, 0)
        const a = document.createElement('a'); a.href = ec.toDataURL('image/png')
        a.download = `${connName}-${name}.png`; a.click()
    }, [connName, isDark])

    const s = strings?.page?.analysis || {} as any

    const InfoRow = ({ label, value }: { label: string; value: string | number }) => (
        <>
            <ListItem sx={{ px: 2, py: 1 }}>
                <Box sx={{ display: 'flex', width: '100%' }}>
                    <Box sx={{ flex: 1 }}>{label}</Box>
                    <Box sx={{ fontFamily: "'Roboto Mono', monospace", fontSize: 13 }}>{value}</Box>
                </Box>
            </ListItem>
            <Divider />
        </>
    )

    const doctorAccordion = (
        <P3xrAccordion title={s.memoryDoctor || 'Memory Doctor'} accordionKey="analysis-doctor"
            actions={<>
                <P3xrButton icon={autoRefreshDoctor ? <CheckBox sx={{ fontSize: 18 }} /> : <CheckBoxOutlineBlank sx={{ fontSize: 18 }} />}
                    label={strings?.label?.autoRefresh || 'Auto'} color="inherit"
                    onClick={(e) => { e.stopPropagation(); toggleAutoDoctor() }} />
                {!autoRefreshDoctor && <P3xrButton icon={doctorLoading ? <HourglassEmpty sx={{ fontSize: 18 }} /> : <Refresh sx={{ fontSize: 18 }} />}
                    label={doctorLoading ? (strings?.label?.loading || 'Loading...') : (strings?.intention?.refresh || 'Refresh')}
                    color="inherit" disabled={doctorLoading} onClick={(e) => { e.stopPropagation(); runDoctor() }} />}
                <P3xrButton icon={<Download sx={{ fontSize: 18 }} />} label={strings?.intention?.export || 'Export'}
                    color="inherit" onClick={(e) => { e.stopPropagation(); if (doctorText) downloadText(doctorText, `${connName}-memory-doctor.txt`) }} />
            </>}>
            {!doctorText
                ? <Box sx={{ p: 2, opacity: 0.6 }}>{s.doctorNoData || 'Click Refresh to run Memory Doctor diagnostics.'}</Box>
                : <Box component="pre" sx={{ whiteSpace: 'pre-wrap', fontFamily: "'Roboto Mono', monospace", fontSize: 13, p: 2, m: 0 }}>{doctorText}</Box>
            }
        </P3xrAccordion>
    )

    if (loading && !data) {
        return <Box>{doctorAccordion}<Box sx={{ mt: 2 }} /><Box sx={{ display: 'flex', alignItems: 'center', gap: 1, p: 4, opacity: 0.5 }}><HourglassEmpty /> {s.running || 'Analyzing...'}</Box></Box>
    }
    if (!loading && !data) {
        return <Box>{doctorAccordion}<Box sx={{ mt: 2 }} /><Box sx={{ display: 'flex', alignItems: 'center', gap: 1, p: 4, opacity: 0.5 }}><Analytics /> {s.noData || 'No data. Click Run Analysis to start.'}</Box></Box>
    }
    if (!data) return null

    const m = data.memoryInfo
    const exp = data.expirationOverview

    return (
        <Box>
            {doctorAccordion}
            <Box sx={{ mt: 2 }} />
            {/* Controls */}
            <P3xrAccordion title={s.title || 'Memory Analysis'} accordionKey="analysis-controls"
                actions={<>
                    <P3xrButton icon={loading ? <HourglassEmpty sx={{ fontSize: 18 }} /> : <PlayArrow sx={{ fontSize: 18 }} />}
                        label={loading ? (s.running || 'Analyzing...') : (s.runAnalysis || 'Run Analysis')}
                        color="inherit" disabled={loading} onClick={(e) => { e.stopPropagation(); runAnalysis() }} />
                    <P3xrButton icon={<Download sx={{ fontSize: 18 }} />} label={strings?.intention?.export || 'Export'}
                        color="inherit" onClick={(e) => { e.stopPropagation();
                            downloadText([`${s.keysScanned || 'Keys Scanned'}: ${data.totalScanned} / ${data.dbSize}`,
                                `${s.topN || 'Top N'}: ${topN}`, `${s.maxScanKeys || 'Max Scan Keys'}: ${maxScanKeys}`].join('\n'),
                                `${connName}-analysis-overview.txt`) }} />
                </>}>
                <List disablePadding>
                    <InfoRow label={s.keysScanned || 'Keys Scanned'} value={`${data.totalScanned} / ${data.dbSize}`} />
                    <ListItem sx={{ px: 2, py: 1 }}>
                        <Box sx={{ display: 'flex', width: '100%', alignItems: 'center' }}>
                            <Box sx={{ flex: 1 }}>{s.topN || 'Top N'}</Box>
                            <TextField size="small" type="number" value={topN} onChange={e => setTopN(Number(e.target.value))}
                                slotProps={{ htmlInput: { min: 5, max: 100 } }} sx={{ width: 80 }} />
                        </Box>
                    </ListItem>
                    <Divider />
                    <ListItem sx={{ px: 2, py: 1 }}>
                        <Box sx={{ display: 'flex', width: '100%', alignItems: 'center' }}>
                            <Box sx={{ flex: 1 }}>{s.maxScanKeys || 'Max Scan Keys'}</Box>
                            <TextField size="small" type="number" value={maxScanKeys} onChange={e => setMaxScanKeys(Number(e.target.value))}
                                slotProps={{ htmlInput: { min: 100, max: 100000, step: 1000 } }} sx={{ width: 100 }} />
                        </Box>
                    </ListItem>
                </List>
            </P3xrAccordion>

            <br />

            {/* Memory Breakdown */}
            <P3xrAccordion title={s.memoryBreakdown || 'Memory Breakdown'} accordionKey="analysis-memory-info"
                actions={<P3xrButton icon={<Download sx={{ fontSize: 18 }} />} label={strings?.intention?.export || 'Export'}
                    color="inherit" onClick={(e) => { e.stopPropagation();
                        downloadText([`${s.totalMemory || 'Total'}: ${m.usedHuman}`, `${s.rssMemory || 'RSS'}: ${m.rssHuman}`,
                            `${s.peakMemory || 'Peak'}: ${m.peakHuman}`, `${s.overheadMemory || 'Overhead'}: ${formatBytes(m.overhead)}`,
                            `${s.datasetMemory || 'Dataset'}: ${formatBytes(m.dataset)}`, `${s.luaMemory || 'Lua'}: ${formatBytes(m.lua)}`,
                            `${s.fragmentation || 'Fragmentation'}: ${m.fragRatio}x`, `${s.allocator || 'Allocator'}: ${m.allocator}`].join('\n'),
                            `${connName}-memory-breakdown.txt`) }} />}>
                <List disablePadding>
                    <InfoRow label={s.totalMemory || 'Total Memory'} value={m.usedHuman} />
                    <InfoRow label={s.rssMemory || 'RSS Memory'} value={m.rssHuman} />
                    <InfoRow label={s.peakMemory || 'Peak Memory'} value={m.peakHuman} />
                    <InfoRow label={s.overheadMemory || 'Overhead'} value={formatBytes(m.overhead)} />
                    <InfoRow label={s.datasetMemory || 'Dataset'} value={formatBytes(m.dataset)} />
                    <InfoRow label={s.luaMemory || 'Lua Memory'} value={formatBytes(m.lua)} />
                    <InfoRow label={s.fragmentation || 'Fragmentation'} value={`${m.fragRatio}x`} />
                    <InfoRow label={s.allocator || 'Allocator'} value={m.allocator} />
                </List>
            </P3xrAccordion>

            <br />

            {/* Type Distribution */}
            <P3xrAccordion title={s.typeDistribution || 'Type Distribution'} accordionKey="analysis-type-dist"
                actions={<P3xrButton icon={<Download sx={{ fontSize: 18 }} />} label={strings?.intention?.export || 'Export'}
                    color="inherit" onClick={(e) => { e.stopPropagation(); exportChart(typeChartRef, 'type-distribution') }} />}>
                <Box ref={typeChartRef} sx={{ minHeight: 200, width: '100%' }} />
                <List disablePadding>
                    {typeEntries.map(item => (
                        <Box key={item.type}>
                            <ListItem sx={{ px: 2, py: 1 }}>
                                <Box sx={{ display: 'flex', width: '100%' }}>
                                    <Box sx={{ flex: 1 }}>
                                        <Box component="span" sx={{ fontWeight: 500 }}>{item.type}</Box>
                                        <Box component="span" sx={{ ml: 1, opacity: 0.5, fontSize: 12 }}>{item.count} keys</Box>
                                    </Box>
                                    <Box sx={{ fontFamily: "'Roboto Mono', monospace", fontSize: 13 }}>{formatBytes(item.bytes)}</Box>
                                </Box>
                            </ListItem>
                            <Divider />
                        </Box>
                    ))}
                </List>
            </P3xrAccordion>

            <br />

            {/* Memory by Prefix */}
            <P3xrAccordion title={s.prefixMemory || 'Memory by Prefix'} accordionKey="analysis-prefix-mem"
                actions={<P3xrButton icon={<Download sx={{ fontSize: 18 }} />} label={strings?.intention?.export || 'Export'}
                    color="inherit" onClick={(e) => { e.stopPropagation(); exportChart(prefixChartRef, 'memory-by-prefix') }} />}>
                <Box ref={prefixChartRef} sx={{ minHeight: 200, width: '100%' }} />
                <List disablePadding>
                    {(data.prefixMemory || []).map((item: any, i: number) => (
                        <Box key={item.prefix}>
                            <ListItem sx={{ px: 2, py: 1 }}>
                                <Box sx={{ display: 'flex', width: '100%' }}>
                                    <Box sx={{ flex: 1 }}>
                                        <Box component="span" sx={{ opacity: 0.4, mr: 1 }}>#{i + 1}</Box>
                                        <Box component="span" sx={{ fontFamily: "'Roboto Mono', monospace", fontSize: 13 }}>{item.prefix}</Box>
                                        <Box component="span" sx={{ ml: 1, opacity: 0.5, fontSize: 12 }}>{item.keyCount} keys</Box>
                                    </Box>
                                    <Box sx={{ fontFamily: "'Roboto Mono', monospace", fontSize: 13 }}>{formatBytes(item.totalBytes)}</Box>
                                </Box>
                            </ListItem>
                            <Divider />
                        </Box>
                    ))}
                </List>
            </P3xrAccordion>

            <br />

            {/* Key Expiration Overview */}
            <P3xrAccordion title={s.expirationOverview || 'Key Expiration'} accordionKey="analysis-expiration"
                actions={<P3xrButton icon={<Download sx={{ fontSize: 18 }} />} label={strings?.intention?.export || 'Export'}
                    color="inherit" onClick={(e) => { e.stopPropagation();
                        downloadText([`${s.withTTL || 'With TTL'}: ${exp.withTTL}`, `${s.persistent || 'Persistent'}: ${exp.persistent}`,
                            `${s.avgTTL || 'Average TTL'}: ${formatTTL(exp.avgTTL)}`].join('\n'), `${connName}-expiration.txt`) }} />}>
                <List disablePadding>
                    <InfoRow label={s.withTTL || 'With TTL'} value={exp.withTTL} />
                    <InfoRow label={s.persistent || 'Persistent'} value={exp.persistent} />
                    <InfoRow label={s.avgTTL || 'Average TTL'} value={formatTTL(exp.avgTTL)} />
                </List>
            </P3xrAccordion>

        </Box>
    )
}