import React, { useState, useEffect, useRef } from 'react';
import axios from 'axios';
import { motion, AnimatePresence } from 'framer-motion';
import { Send, Bot, User, Info, Wifi, AlertTriangle, CheckCircle2 } from 'lucide-react';
import ReactMarkdown from 'react-markdown';

const API_BASE = import.meta.env.VITE_API_BASE || '';

const OrchestrationLog = ({ steps }) => {
    if (!steps || !Array.isArray(steps)) return null;
    return (
        <div className="orchestration-log">
            <div className="orch-title">
                <Info size={10} /> Agent Reasoning & Path
            </div>
            <ul className="orch-list">
                {steps.map((step, i) => (
                    <li key={i} className="orch-item">
                        <span className="orch-dot" />
                        {step}
                    </li>
                ))}
            </ul>
        </div>
    );
};

const ResultCards = ({ data }) => {
    if (!data || !Array.isArray(data)) return null;
    return (
        <div className="result-cards">
            {data.map((item, idx) => {
                const status = item.status || (item.anomaly === 1 ? 'Critical' : 'Normal');
                let pillClass = 'pill-green';
                let Icon = CheckCircle2;

                if (status === 'Critical') { pillClass = 'pill-red'; Icon = AlertTriangle; }
                else if (status === 'Warning') { pillClass = 'pill-yellow'; Icon = Info; }
                else if (status === 'No Data') { pillClass = 'pill-white'; Icon = Wifi; }

                return (
                    <div key={idx} className={`result-card status-${status.toLowerCase().replace(' ', '')}`}>
                        <div className="rc-head">
                            <span className="rc-name">{item.name || item.asset || item.asset_name || 'Asset'}</span>
                            <span className={`rc-pill ${pillClass}`}>
                                <Icon size={10} />
                                {status}
                            </span>
                        </div>
                        <div className="rc-metrics">
                            {item.value !== undefined && <span>Value: <strong>{item.value}</strong></span>}
                            {item.latest_mse !== undefined && <span>MSE: <strong>{item.latest_mse.toFixed(5)}</strong></span>}
                            {item.mse !== undefined && <span>MSE: <strong>{item.mse.toFixed(5)}</strong></span>}
                        </div>
                    </div>
                );
            })}
        </div>
    );
};

const TrendChartRenderer = ({ chart }) => {
    if (!chart || !chart.series || chart.series.length === 0) return null;

    const [hoveredPoint, setHoveredPoint] = useState(null);

    // Dimensions
    const width = 520;
    const height = 240;
    const paddingLeft = 45;
    const paddingRight = 20;
    const paddingTop = 25;
    const paddingBottom = 35;

    // Get all values to compute range
    let allValues = [];
    chart.series.forEach(s => {
        if (s.points) {
            s.points.forEach(p => allValues.push(p.value));
        }
    });

    if (allValues.length === 0) return null;

    let minVal = Math.min(...allValues);
    let maxVal = Math.max(...allValues);
    if (minVal === maxVal) {
        minVal = minVal - 1;
        maxVal = maxVal + 1;
    }

    const valRange = maxVal - minVal;
    const yMin = minVal - valRange * 0.1;
    const yMax = maxVal + valRange * 0.1;

    // Helper functions for scaling
    const getX = (index, total) => {
        if (total <= 1) return paddingLeft + (width - paddingLeft - paddingRight) / 2;
        return paddingLeft + (index / (total - 1)) * (width - paddingLeft - paddingRight);
    };

    const getY = (value) => {
        return paddingTop + (1 - (value - yMin) / (yMax - yMin)) * (height - paddingTop - paddingBottom);
    };

    // Gridlines (Y-axis)
    const gridCount = 4;
    const gridLines = [];
    for (let i = 0; i <= gridCount; i++) {
        gridLines.push(yMin + (i / gridCount) * (yMax - yMin));
    }

    // X-axis labels (render up to 5 labels to avoid clutter)
    const maxLabelCount = 5;
    const totalPoints = chart.series[0]?.points?.length || 0;
    const labelIndices = [];
    if (totalPoints > 0) {
        const step = Math.max(1, Math.floor(totalPoints / maxLabelCount));
        for (let i = 0; i < totalPoints; i += step) {
            labelIndices.push(i);
        }
        if (labelIndices[labelIndices.length - 1] !== totalPoints - 1 && totalPoints > 1) {
            labelIndices.push(totalPoints - 1);
        }
    }

    const isLine = chart.chart_type === 'line';

    return (
        <div className="trend-chart-card">
            <div className="trend-chart-header">
                <div>
                    <h3 className="trend-chart-title">{chart.title || 'Telemetry Trend'}</h3>
                    <p className="trend-chart-subtitle">{chart.y_label || 'Values'} over {chart.x_label || 'Time'}</p>
                </div>
            </div>

            <div className="trend-chart-svg-container">
                <svg viewBox={`0 0 ${width} ${height}`} width="100%" height="100%" style={{ overflow: 'visible' }}>
                    <defs>
                        {chart.series.map((s, sIdx) => (
                            <linearGradient key={sIdx} id={`grad-${sIdx}`} x1="0" y1="0" x2="0" y2="1">
                                <stop offset="0%" stopColor={s.color || '#6366f1'} stopOpacity="0.25" />
                                <stop offset="100%" stopColor={s.color || '#6366f1'} stopOpacity="0.01" />
                            </linearGradient>
                        ))}
                    </defs>

                    {/* Horizontal Gridlines & Y Labels */}
                    {gridLines.map((val, i) => {
                        const y = getY(val);
                        return (
                            <g key={i}>
                                <line
                                    x1={paddingLeft}
                                    y1={y}
                                    x2={width - paddingRight}
                                    y2={y}
                                    className="trend-chart-grid"
                                />
                                <text
                                    x={paddingLeft - 8}
                                    y={y + 3}
                                    textAnchor="end"
                                    className="trend-chart-label"
                                >
                                    {val.toFixed(1)}
                                </text>
                            </g>
                        );
                    })}

                    {/* X Axis Base Line */}
                    <line
                        x1={paddingLeft}
                        y1={height - paddingBottom}
                        x2={width - paddingRight}
                        y2={height - paddingBottom}
                        className="trend-chart-axis-line"
                    />

                    {/* X Axis Labels */}
                    {chart.series[0]?.points?.map((p, pIdx) => {
                        if (!labelIndices.includes(pIdx)) return null;
                        const x = getX(pIdx, totalPoints);
                        return (
                            <g key={pIdx}>
                                <line
                                    x1={x}
                                    y1={height - paddingBottom}
                                    x2={x}
                                    y2={height - paddingBottom + 4}
                                    className="trend-chart-axis-line"
                                />
                                <text
                                    x={x}
                                    y={height - paddingBottom + 16}
                                    textAnchor="middle"
                                    className="trend-chart-label"
                                    transform={`rotate(-12, ${x}, ${height - paddingBottom + 16})`}
                                >
                                    {p.label}
                                </text>
                            </g>
                        );
                    })}

                    {/* Plot Series */}
                    {chart.series.map((s, sIdx) => {
                        if (!s.points || s.points.length === 0) return null;
                        const pointsCount = s.points.length;

                        // 1. Line Chart Path
                        if (isLine) {
                            let pathD = '';
                            s.points.forEach((p, pIdx) => {
                                const x = getX(pIdx, pointsCount);
                                const y = getY(p.value);
                                pathD += `${pIdx === 0 ? 'M' : 'L'} ${x} ${y}`;
                            });

                            const bottomY = height - paddingBottom;
                            const firstX = getX(0, pointsCount);
                            const lastX = getX(pointsCount - 1, pointsCount);
                            const areaD = `${pathD} L ${lastX} ${bottomY} L ${firstX} ${bottomY} Z`;

                            return (
                                <g key={sIdx}>
                                    {/* Shaded Area Under Line */}
                                    <path
                                        d={areaD}
                                        fill={`url(#grad-${sIdx})`}
                                        className="trend-chart-area"
                                    />
                                    {/* Glow Stroke Line */}
                                    <path
                                        d={pathD}
                                        stroke={s.color || '#6366f1'}
                                        className="trend-chart-line"
                                    />
                                    {/* Data Points */}
                                    {s.points.map((p, pIdx) => {
                                        const x = getX(pIdx, pointsCount);
                                        const y = getY(p.value);
                                        return (
                                            <circle
                                                key={pIdx}
                                                cx={x}
                                                cy={y}
                                                r={3.5}
                                                fill="#0f172a"
                                                stroke={s.color || '#6366f1'}
                                                strokeWidth={1.5}
                                                className="trend-chart-point"
                                                onMouseEnter={(e) => {
                                                    const rect = e.target.getBoundingClientRect();
                                                    const containerRect = e.target.ownerDocument.querySelector('.trend-chart-svg-container').getBoundingClientRect();
                                                    setHoveredPoint({
                                                        label: p.label,
                                                        value: p.value,
                                                        seriesLabel: s.label,
                                                        color: s.color,
                                                        x: rect.left - containerRect.left + rect.width / 2,
                                                        y: rect.top - containerRect.top
                                                    });
                                                }}
                                                onMouseLeave={() => setHoveredPoint(null)}
                                            />
                                        );
                                    })}
                                </g>
                            );
                        } else {
                            // 2. Bar Chart Columns
                            const barWidth = Math.max(4, ((width - paddingLeft - paddingRight) / pointsCount) * 0.55);
                            const spacing = ((width - paddingLeft - paddingRight) / pointsCount) * 0.45;

                            return (
                                <g key={sIdx}>
                                    {s.points.map((p, pIdx) => {
                                        const x = paddingLeft + pIdx * (barWidth + spacing) + spacing / 2;
                                        const y = getY(p.value);
                                        const bottomY = height - paddingBottom;
                                        const barHeight = Math.max(2, bottomY - y);

                                        return (
                                            <rect
                                                key={pIdx}
                                                x={x}
                                                y={y}
                                                width={barWidth}
                                                height={barHeight}
                                                rx={Math.min(3, barWidth / 3)}
                                                fill={s.color || '#6366f1'}
                                                opacity={0.8}
                                                className="trend-chart-bar"
                                                onMouseEnter={(e) => {
                                                    const rect = e.target.getBoundingClientRect();
                                                    const containerRect = e.target.ownerDocument.querySelector('.trend-chart-svg-container').getBoundingClientRect();
                                                    setHoveredPoint({
                                                        label: p.label,
                                                        value: p.value,
                                                        seriesLabel: s.label,
                                                        color: s.color,
                                                        x: rect.left - containerRect.left + rect.width / 2,
                                                        y: rect.top - containerRect.top
                                                    });
                                                }}
                                                onMouseLeave={() => setHoveredPoint(null)}
                                            />
                                        );
                                    })}
                                </g>
                            );
                        }
                    })}
                </svg>

                {/* Tooltip Overlay */}
                {hoveredPoint && (
                    <div
                        className="trend-chart-tooltip"
                        style={{
                            left: `${(hoveredPoint.x / width) * 100}%`,
                            top: `${(hoveredPoint.y / height) * 100}%`
                        }}
                    >
                        <span className="trend-tooltip-series" style={{ color: hoveredPoint.color }}>
                            {hoveredPoint.seriesLabel}
                        </span>
                        <span className="trend-tooltip-value">
                            {hoveredPoint.value.toFixed(2)}
                        </span>
                        <span className="trend-tooltip-label">
                            {hoveredPoint.label}
                        </span>
                    </div>
                )}
            </div>

            {/* Legend */}
            {chart.series.length > 0 && (
                <div className="trend-chart-legend">
                    {chart.series.map((s, sIdx) => (
                        <div key={sIdx} className="trend-legend-item">
                            <span className="trend-legend-color" style={{ backgroundColor: s.color || '#6366f1' }} />
                            <span>{s.label}</span>
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
};

const MessageBubble = ({ message }) => {
    const isAI = message.sender === 'ai';
    const results = message.result;
    const analysis = message.analysis;
    const trendChart = analysis?.trend_chart || (analysis?.trend_charts && analysis.trend_charts[0]);

    return (
        <motion.div
            initial={{ y: 16, opacity: 0, scale: 0.97 }}
            animate={{ y: 0, opacity: 1, scale: 1 }}
            transition={{ duration: 0.25, ease: 'easeOut' }}
            className={`msg-row ${message.sender}`}
        >
            <div className={`bubble-avatar ${message.sender}`}>
                {isAI ? <Bot size={14} /> : <User size={14} />}
            </div>
            <div className={`bubble ${message.sender}`}>
                {isAI ? (
                    <div className="markdown-content">
                        <ReactMarkdown>{message.text}</ReactMarkdown>
                        {message.orchestration && <OrchestrationLog steps={message.orchestration} />}
                        {trendChart && <TrendChartRenderer chart={trendChart} />}
                        {results && <ResultCards data={results} />}
                    </div>
                ) : (
                    <p>{message.text}</p>
                )}
            </div>
        </motion.div>
    );
};

const ChatPanel = () => {
    const [messages, setMessages] = useState([
        {
            id: 1,
            text: "Hello! I am **The Foreman**, your Industrial Multi-Agent Supervisor. I can help with real-time telemetry, historical analysis, and anomaly detection. How can I assist you today?",
            sender: 'ai'
        }
    ]);
    const [input, setInput] = useState('');
    const [loading, setLoading] = useState(false);
    const scrollRef = useRef(null);

    useEffect(() => {
        if (scrollRef.current) {
            scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
        }
    }, [messages, loading]);

    const handleSend = async (e) => {
        e.preventDefault();
        if (!input.trim()) return;

        const userMsg = { id: Date.now(), text: input, sender: 'user' };
        setMessages(prev => [...prev, userMsg]);
        setInput('');
        setLoading(true);

        try {
            const { data } = await axios.post(`${API_BASE}/api/v1/chat/message`, { message: input });
            const aiMsg = {
                id: Date.now() + 1,
                text: data.answer || data.reply,
                sender: 'ai',
                result: data.data,
                intent: data.intent,
                analysis: data.analysis,
                orchestration: data.orchestration
            };
            setMessages(prev => [...prev, aiMsg]);
        } catch (err) {
            console.error("Gateway error:", err);
            const errorDetail = err.response ? ` (${err.response.status}: ${JSON.stringify(err.response.data)})` : ` (${err.message})`;
            setMessages(prev => [...prev, {
                id: Date.now(),
                text: `The Foreman is currently unable to reach the gateway${errorDetail}. Please check your network connection.`,
                sender: 'ai'
            }]);
        } finally {
            setLoading(false);
        }
    };

    return (
        <main className="foreman-chat">
            {/* Topbar */}
            <div className="chat-topbar">
                <div className="topbar-avatar">
                    <Bot size={18} />
                </div>
                <div className="topbar-meta">
                    <h2 className="topbar-title">The Foreman</h2>
                    <span className="topbar-sub">Supervising Industrial Systems</span>
                </div>
                <div className="topbar-status">
                    <Wifi size={12} />
                    All systems reporting
                </div>
            </div>

            {/* Messages */}
            <div className="chat-messages" ref={scrollRef}>

                {/* Guide Card */}
                <div className="guide-card">
                    <div className="guide-icon"><Info size={18} /></div>
                    <div className="guide-body">
                        <p className="guide-title">Operational Guide</p>
                        <p className="guide-desc">To analyze specific systems, use these naming conventions:</p>
                        <ul className="guide-list">
                            <li><strong>Coldrooms:</strong> "coldroom 1" through "coldroom 9"</li>
                            <li><strong>Refinery:</strong> "tank 1" to "tank 13", no tank 10</li>
                        </ul>
                    </div>
                </div>

                <AnimatePresence>
                    {messages.map((m) => (
                        <MessageBubble key={m.id} message={m} />
                    ))}
                </AnimatePresence>

                {loading && (
                    <motion.div
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                        className="typing-row"
                    >
                        <div className="bubble-avatar ai"><Bot size={14} /></div>
                        <div className="typing-dots">
                            <span /><span /><span />
                        </div>
                    </motion.div>
                )}
            </div>


            {/* Input */}
            <div className="chat-input-area">
                <form className="input-form" onSubmit={handleSend}>
                    <input
                        type="text"
                        className="input-field"
                        placeholder="Type a message to The Foreman..."
                        value={input}
                        onChange={(e) => setInput(e.target.value)}
                    />
                    <button type="submit" className="send-btn" disabled={loading}>
                        <Send size={15} />
                    </button>
                </form>
            </div>
        </main>
    );
};


export default ChatPanel;