import { useState, useRef, useEffect, useMemo } from 'react';
import { createPortal } from 'react-dom';
import { supabase } from '../lib/supabaseClient';
import { tradingRuntime } from '../lib/runtime';
import {
    Send, X, Bot, User,
    Check, Loader2,
    Zap, Copy
} from 'lucide-react';

interface ChatMessage {
    id: number;
    role: 'user' | 'assistant';
    content: string;
    profileData?: any;
    action?: string;
    timestamp: Date;
}

interface ChatControlProps {
    profiles: any[];
    onApplyProfile: (action: string, profile: any) => Promise<{ success: boolean; error?: string }>;
}

export interface QuickAction {
    label: string;
    prompt: string;
}

export const BASE_QUICK_ACTIONS: QuickAction[] = [
    { label: 'Conservative Trader', prompt: 'Create a conservative BTC/ETH swing trader with $2000 capital and 1% risk' },
    { label: 'Aggressive Scalper', prompt: 'Build an aggressive scalper for SOL/DOGE with $500 capital, 3% risk and all rules enabled' },
    { label: 'Low Risk Profile', prompt: 'Create a low-risk profile that only trades BTC during London and NY sessions with $5000 capital' },
    { label: 'AI Momentum', prompt: 'Create a momentum strategy with AI analysis enabled, focusing on ETH/SOL with 2% risk' },
    { label: 'What rules?', prompt: 'What rules should I use for a day trading strategy?' },
    { label: 'Modify existing', prompt: 'Show me my existing profiles and suggest improvements' },
];

export const cloneProfileDraft = (profileData: any) => ({
    ...profileData,
    strategy_config: profileData?.strategy_config
        ? JSON.parse(JSON.stringify(profileData.strategy_config))
        : undefined,
});

export const normalizeName = (value: string) => value.toLowerCase().replace(/[^a-z0-9]/g, '');

export const buildQuickActions = (profiles: any[]): QuickAction[] => {
    const profileActions: QuickAction[] = [];
    const highScalper = profiles.find((profileOption) => {
        const normalized = normalizeName(String(profileOption?.name || ''));
        return normalized.includes('highriskscalper') || normalized.includes('highscal');
    });
    const conservativeBag = profiles.find((profileOption) => {
        const normalized = normalizeName(String(profileOption?.name || ''));
        return normalized.includes('conservativebag');
    });

    if (highScalper?.name) {
        profileActions.push({
            label: `Tune ${highScalper.name}`,
            prompt: `Review my current profile "${highScalper.name}" and recommend improved parameters before applying an update.`,
        });
    }

    if (conservativeBag?.name) {
        profileActions.push({
            label: `Tune ${conservativeBag.name}`,
            prompt: `Review my current profile "${conservativeBag.name}" and recommend improved parameters before applying an update.`,
        });
    }

    return [...profileActions, ...BASE_QUICK_ACTIONS];
};

export const normalizeProfileForApply = (profileData: any) => ({
    ...profileData,
    name: String(profileData?.name || 'AI Profile').trim(),
    allocated_capital: Number(profileData?.allocated_capital || 0),
    risk_per_trade_percent: Number(profileData?.risk_per_trade_percent || 0),
    symbols: String(profileData?.symbols || '').trim(),
    is_active: profileData?.is_active !== false,
});

// 3D Robot SVG Icon
const RobotIcon = ({ size = 32 }: { size?: number }) => (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
        {/* Antenna */}
        <line x1="32" y1="6" x2="32" y2="14" stroke="#00ff88" strokeWidth="2.5" strokeLinecap="round" />
        <circle cx="32" cy="5" r="3" fill="#00ff88" opacity="0.9">
            <animate attributeName="opacity" values="0.5;1;0.5" dur="2s" repeatCount="indefinite" />
        </circle>
        {/* Head */}
        <rect x="14" y="14" width="36" height="28" rx="8" fill="url(#headGrad)" stroke="#00ff88" strokeWidth="1.5" opacity="0.95" />
        {/* Eyes */}
        <circle cx="24" cy="28" r="4.5" fill="#0a0b10" />
        <circle cx="24" cy="28" r="3" fill="#00ff88" opacity="0.9">
            <animate attributeName="r" values="3;2.5;3" dur="3s" repeatCount="indefinite" />
        </circle>
        <circle cx="40" cy="28" r="4.5" fill="#0a0b10" />
        <circle cx="40" cy="28" r="3" fill="#00ff88" opacity="0.9">
            <animate attributeName="r" values="3;2.5;3" dur="3s" repeatCount="indefinite" />
        </circle>
        {/* Mouth */}
        <rect x="24" y="35" width="16" height="3" rx="1.5" fill="#00ff88" opacity="0.4" />
        {/* Body */}
        <rect x="18" y="44" width="28" height="14" rx="5" fill="url(#bodyGrad)" stroke="#00ff88" strokeWidth="1" opacity="0.8" />
        {/* Body detail */}
        <circle cx="32" cy="51" r="3" fill="#00ff88" opacity="0.3" />
        {/* Arms */}
        <rect x="8" y="46" width="8" height="10" rx="4" fill="url(#headGrad)" stroke="#00ff88" strokeWidth="1" opacity="0.7" />
        <rect x="48" y="46" width="8" height="10" rx="4" fill="url(#headGrad)" stroke="#00ff88" strokeWidth="1" opacity="0.7" />
        <defs>
            <linearGradient id="headGrad" x1="14" y1="14" x2="50" y2="42" gradientUnits="userSpaceOnUse">
                <stop stopColor="#1a1b2e" />
                <stop offset="1" stopColor="#12131a" />
            </linearGradient>
            <linearGradient id="bodyGrad" x1="18" y1="44" x2="46" y2="58" gradientUnits="userSpaceOnUse">
                <stop stopColor="#1a1b2e" />
                <stop offset="1" stopColor="#0f1017" />
            </linearGradient>
        </defs>
    </svg>
);

export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
    const [isOpen, setIsOpen] = useState(false);
    const [messages, setMessages] = useState<ChatMessage[]>([
        {
            id: 0,
            role: 'assistant',
            content: "Hi! I'm your trading assistant. Tell me what kind of strategy profile you'd like to create or modify, and I'll generate the configuration for you.\n\nTry: \"Create a conservative BTC scalper with $1000 capital\"",
            timestamp: new Date(),
        }
    ]);
    const [input, setInput] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    const [appliedIds, setAppliedIds] = useState<Set<number>>(new Set());
    const [cancelledIds, setCancelledIds] = useState<Set<number>>(new Set());
    const [editingIds, setEditingIds] = useState<Set<number>>(new Set());
    const [draftProfiles, setDraftProfiles] = useState<Record<number, any>>({});
    const messagesEndRef = useRef<HTMLDivElement>(null);
    const inputRef = useRef<HTMLTextAreaElement>(null);

    const quickActions = useMemo(() => buildQuickActions(profiles), [profiles]);

    const openDraftEditor = (msg: ChatMessage) => {
        if (!msg.profileData) return;
        setDraftProfiles((prev) => ({ ...prev, [msg.id]: cloneProfileDraft(msg.profileData) }));
        setEditingIds((prev) => new Set(prev).add(msg.id));
    };

    const closeDraftEditor = (msgId: number) => {
        setEditingIds((prev) => {
            const next = new Set(prev);
            next.delete(msgId);
            return next;
        });
    };

    const resetDraft = (msg: ChatMessage) => {
        if (!msg.profileData) return;
        setDraftProfiles((prev) => ({ ...prev, [msg.id]: cloneProfileDraft(msg.profileData) }));
    };

    const updateDraftField = (msgId: number, field: string, value: any) => {
        setDraftProfiles((prev) => ({
            ...prev,
            [msgId]: {
                ...(prev[msgId] || {}),
                [field]: value,
            },
        }));
    };

    useEffect(() => {
        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
    }, [messages]);

    useEffect(() => {
        if (isOpen) {
            setTimeout(() => inputRef.current?.focus(), 300);
        }
    }, [isOpen]);

    const sendMessage = async (text?: string) => {
        const msg = text || input.trim();
        if (!msg || isLoading) return;

        const userMsg: ChatMessage = {
            id: Date.now(),
            role: 'user',
            content: msg,
            timestamp: new Date(),
        };
        setMessages(prev => [...prev, userMsg]);
        setInput('');
        setIsLoading(true);

        try {
            const apiUrl = tradingRuntime.tradingApiUrl;
            const { data: sessionData } = await supabase.auth.getSession();
            const accessToken = sessionData.session?.access_token;
            if (!accessToken) {
                throw new Error('Not authenticated');
            }
            const res = await fetch(`${apiUrl}/api/chat`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${accessToken}`
                },
                body: JSON.stringify({
                    message: msg,
                    context: profiles.map(p => ({
                        id: p.id,
                        name: p.name,
                        allocated_capital: p.allocated_capital,
                        risk_per_trade_percent: p.risk_per_trade_percent,
                        symbols: p.symbols,
                        is_active: p.is_active,
                        strategy_config: p.strategy_config,
                    })),
                }),
            });

            if (!res.ok) {
                const err = await res.json();
                throw new Error(err.error || 'Chat request failed');
            }

            const data = await res.json();

            const assistantMsg: ChatMessage = {
                id: Date.now() + 1,
                role: 'assistant',
                content: data.summary || data.reasoning || 'Profile configuration generated.',
                profileData: data.profile || null,
                action: data.action,
                timestamp: new Date(),
            };

            if (data.reasoning && data.summary) {
                assistantMsg.content = `${data.summary}\n\n${data.reasoning}`;
            }

            setMessages(prev => [...prev, assistantMsg]);
        } catch (err: any) {
            setMessages(prev => [...prev, {
                id: Date.now() + 1,
                role: 'assistant',
                content: `Error: ${err.message}`,
                timestamp: new Date(),
            }]);
        }

        setIsLoading(false);
    };

    const handleApply = async (msg: ChatMessage) => {
        if (msg.profileData && msg.action) {
            const activeDraft = draftProfiles[msg.id] || msg.profileData;
            const payload = normalizeProfileForApply(activeDraft);
            const result = await onApplyProfile(msg.action, payload);
            if (result.success) {
                setAppliedIds(prev => new Set(prev).add(msg.id));
                closeDraftEditor(msg.id);
                setMessages(prev => [...prev, {
                    id: Date.now(),
                    role: 'assistant',
                    content: msg.action === 'create_profile'
                        ? `Profile "${payload.name}" has been created successfully! It's now visible in Strategy Clusters and the bot will pick it up on next sync (~60s).`
                        : `Profile "${payload.name}" has been updated successfully!`,
                    timestamp: new Date(),
                }]);
            } else {
                setMessages(prev => [...prev, {
                    id: Date.now(),
                    role: 'assistant',
                    content: `Failed to ${msg.action === 'create_profile' ? 'create' : 'update'} profile: ${result.error || 'Unknown error'}. Please try again or check your permissions.`,
                    timestamp: new Date(),
                }]);
            }
        }
    };

    const handleCancel = (msgId: number) => {
        setCancelledIds(prev => new Set(prev).add(msgId));
        closeDraftEditor(msgId);
        setMessages(prev => [...prev, {
            id: Date.now(),
            role: 'assistant',
            content: 'Profile creation cancelled. You can ask me to create a different one or modify the parameters.',
            timestamp: new Date(),
        }]);
    };

    const copyJson = (data: any) => {
        navigator.clipboard.writeText(JSON.stringify(data, null, 2));
    };

    const handleKeyDown = (e: React.KeyboardEvent) => {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendMessage();
        }
    };

    // Floating robot button - bottom right corner (portaled to body to avoid parent CSS issues)
    if (!isOpen) {
        return createPortal(
            <button
                onClick={() => setIsOpen(true)}
                style={{
                    position: 'fixed',
                    bottom: '24px',
                    right: '24px',
                    zIndex: 99999,
                    cursor: 'pointer',
                    background: 'none',
                    border: 'none',
                    padding: 0,
                    animation: 'robotFloat 3s ease-in-out infinite',
                }}
                className="group"
            >
                <div style={{ position: 'relative' }}>
                    {/* Glow ring */}
                    <div style={{
                        position: 'absolute',
                        inset: '-8px',
                        borderRadius: '50%',
                        opacity: 0.4,
                        background: 'radial-gradient(circle, rgba(0,255,136,0.25), transparent 70%)',
                        transition: 'opacity 0.3s',
                    }} />
                    {/* Robot container */}
                    <div style={{
                        position: 'relative',
                        width: '56px',
                        height: '56px',
                        borderRadius: '16px',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        background: 'linear-gradient(145deg, #1a1b2e, #0f1017)',
                        border: '1.5px solid rgba(0,255,136,0.25)',
                        boxShadow: '0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(0,255,136,0.1), inset 0 1px 0 rgba(255,255,255,0.06)',
                        transition: 'transform 0.2s',
                    }}>
                        <RobotIcon size={34} />
                    </div>
                    {/* Pulse dot */}
                    <div style={{
                        position: 'absolute',
                        top: '-2px',
                        right: '-2px',
                        width: '14px',
                        height: '14px',
                        borderRadius: '50%',
                        background: '#00ff88',
                        border: '2px solid #0a0b10',
                        boxShadow: '0 0 8px rgba(0,255,136,0.5)',
                        animation: 'pulseDot 2s ease-in-out infinite',
                    }} />
                </div>
                <style>{`
                    @keyframes robotFloat {
                        0%, 100% { transform: translateY(0px); }
                        50% { transform: translateY(-4px); }
                    }
                    @keyframes pulseDot {
                        0%, 100% { transform: scale(1); opacity: 1; }
                        50% { transform: scale(0.8); opacity: 0.6; }
                    }
                `}</style>
            </button>,
            document.body
        );
    }

    return createPortal(
        <>
        {/* Backdrop */}
        <div
            onClick={() => setIsOpen(false)}
            style={{
                position: 'fixed',
                inset: 0,
                zIndex: 999998,
                background: 'rgba(0,0,0,0.6)',
                backdropFilter: 'blur(6px)',
                animation: 'fadeIn 0.15s ease-out',
            }}
        />
        <div style={{
            position: 'fixed',
            bottom: '24px',
            right: '24px',
            zIndex: 999999,
            width: '460px',
            maxWidth: 'calc(100vw - 48px)',
            height: '640px',
            maxHeight: 'calc(100vh - 48px)',
            display: 'flex',
            flexDirection: 'column',
            borderRadius: '20px',
            overflow: 'hidden',
            border: '1px solid rgba(0,255,136,0.12)',
            boxShadow: '0 25px 80px rgba(0,0,0,0.6), 0 0 40px rgba(0,255,136,0.06)',
            animation: 'chatSlideUp 0.25s ease-out',
        }}>
            {/* Header */}
            <div style={{
                background: 'linear-gradient(135deg, #14151f 0%, #0f1017 100%)',
                borderBottom: '1px solid rgba(255,255,255,0.06)',
                padding: '14px 18px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
            }}>
                <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{
                        background: 'linear-gradient(145deg, #1a1b2e, #0f1017)',
                        border: '1px solid rgba(0,255,136,0.2)',
                        boxShadow: '0 2px 8px rgba(0,0,0,0.3), 0 0 10px rgba(0,255,136,0.06)',
                    }}>
                        <RobotIcon size={26} />
                    </div>
                    <div>
                        <h3 className="text-[13px] font-bold text-white leading-none">AI Strategy Assistant</h3>
                        <p className="text-[10px] text-zinc-500 mt-1">Create & manage profiles with natural language</p>
                    </div>
                </div>
                <button
                    onClick={() => setIsOpen(false)}
                    className="w-8 h-8 rounded-lg flex items-center justify-center text-zinc-500 hover:text-white transition-all"
                    style={{
                        background: 'rgba(255,255,255,0.04)',
                        border: '1px solid rgba(255,255,255,0.06)',
                    }}
                >
                    <X size={14} />
                </button>
            </div>

            {/* Messages */}
            <div className="flex-1 overflow-y-auto px-4 py-4 space-y-4" style={{
                background: '#0a0b10',
                scrollbarWidth: 'thin',
                scrollbarColor: 'rgba(0,255,136,0.06) transparent',
            }}>
                {messages.map(msg => (
                    <div key={msg.id} className={`flex gap-2.5 ${msg.role === 'user' ? 'flex-row-reverse' : ''}`}>
                        {/* Avatar */}
                        <div className={`shrink-0 w-7 h-7 rounded-lg flex items-center justify-center ${msg.role === 'user'
                            ? 'bg-blue-500/15 border border-blue-500/20'
                            : 'bg-[#00ff88]/10 border border-[#00ff88]/20'
                            }`}>
                            {msg.role === 'user'
                                ? <User size={12} className="text-blue-400" />
                                : <Bot size={12} className="text-[#00ff88]" />
                            }
                        </div>

                        {/* Bubble */}
                        <div className={`max-w-[85%] ${msg.role === 'user' ? 'text-right' : ''}`}>
                            <div className="rounded-xl px-3.5 py-2.5 text-[12px] leading-relaxed" style={{
                                background: msg.role === 'user'
                                    ? 'linear-gradient(135deg, rgba(59,130,246,0.15), rgba(59,130,246,0.08))'
                                    : 'linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015))',
                                border: `1px solid ${msg.role === 'user' ? 'rgba(59,130,246,0.2)' : 'rgba(255,255,255,0.06)'}`,
                                color: msg.role === 'user' ? '#93c5fd' : '#d4d4d8',
                                whiteSpace: 'pre-wrap',
                            }}>
                                {msg.content}
                            </div>

                            {/* Profile preview card */}
                            {msg.profileData && msg.action !== 'explain' && (() => {
                                const activeProfileData = draftProfiles[msg.id] || msg.profileData;
                                const isEditing = editingIds.has(msg.id);
                                const activeRules = Array.isArray(activeProfileData?.strategy_config?.rules)
                                    ? activeProfileData.strategy_config.rules.filter((r: any) => r?.enabled).length
                                    : 0;

                                return (
                                    <div className="mt-2 rounded-xl overflow-hidden" style={{
                                        background: 'linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01))',
                                        border: '1px solid rgba(255,255,255,0.06)',
                                        boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
                                    }}>
                                        <div className="px-3.5 py-2 flex items-center justify-between" style={{
                                            background: 'linear-gradient(90deg, rgba(0,255,136,0.06), transparent)',
                                            borderBottom: '1px solid rgba(255,255,255,0.04)',
                                        }}>
                                            <div className="flex items-center gap-2">
                                                <Zap size={10} className="text-[#00ff88]" />
                                                <span className="text-[10px] font-bold text-zinc-400 uppercase tracking-wider">
                                                    {msg.action === 'create_profile' ? 'New Profile' : 'Update Profile'}
                                                </span>
                                            </div>
                                            <button
                                                onClick={() => copyJson(activeProfileData)}
                                                className="text-zinc-600 hover:text-zinc-400 transition-colors"
                                                title="Copy JSON"
                                            >
                                                <Copy size={11} />
                                            </button>
                                        </div>

                                        <div className="px-3.5 py-2.5 space-y-1.5">
                                            <div className="flex justify-between">
                                                <span className="text-[10px] text-zinc-600">Name</span>
                                                <span className="text-[11px] font-bold text-white">{activeProfileData?.name}</span>
                                            </div>
                                            {activeProfileData?.allocated_capital ? (
                                                <div className="flex justify-between">
                                                    <span className="text-[10px] text-zinc-600">Capital</span>
                                                    <span className="text-[11px] font-bold text-blue-400 font-mono">${activeProfileData.allocated_capital}</span>
                                                </div>
                                            ) : null}
                                            {activeProfileData?.risk_per_trade_percent ? (
                                                <div className="flex justify-between">
                                                    <span className="text-[10px] text-zinc-600">Risk / Trade</span>
                                                    <span className="text-[11px] font-bold text-amber-400 font-mono">{activeProfileData.risk_per_trade_percent}%</span>
                                                </div>
                                            ) : null}
                                            {activeProfileData?.symbols ? (
                                                <div className="flex justify-between items-center">
                                                    <span className="text-[10px] text-zinc-600">Symbols</span>
                                                    <span className="text-[10px] font-mono text-zinc-400">{activeProfileData.symbols}</span>
                                                </div>
                                            ) : null}
                                            {activeRules > 0 ? (
                                                <div className="flex justify-between items-center">
                                                    <span className="text-[10px] text-zinc-600">Rules</span>
                                                    <span className="text-[10px] font-mono text-[#00ff88]">
                                                        {activeRules} active
                                                    </span>
                                                </div>
                                            ) : null}
                                        </div>

                                        {isEditing ? (
                                            <div className="px-3.5 pb-3 space-y-2">
                                                <div className="text-[10px] text-zinc-500 uppercase tracking-wider font-bold">Edit Parameters Before Apply</div>
                                                <input
                                                    value={activeProfileData?.name || ''}
                                                    onChange={(e) => updateDraftField(msg.id, 'name', e.target.value)}
                                                    placeholder="Profile Name"
                                                    className="w-full rounded-lg px-2.5 py-1.5 text-[11px] bg-[#161722] border border-white/10 text-white outline-none"
                                                />
                                                <div className="grid grid-cols-2 gap-2">
                                                    <input
                                                        type="number"
                                                        min="0"
                                                        step="1"
                                                        value={activeProfileData?.allocated_capital ?? ''}
                                                        onChange={(e) => updateDraftField(msg.id, 'allocated_capital', e.target.value)}
                                                        placeholder="Capital"
                                                        className="w-full rounded-lg px-2.5 py-1.5 text-[11px] bg-[#161722] border border-white/10 text-white outline-none"
                                                    />
                                                    <input
                                                        type="number"
                                                        min="0"
                                                        step="0.1"
                                                        value={activeProfileData?.risk_per_trade_percent ?? ''}
                                                        onChange={(e) => updateDraftField(msg.id, 'risk_per_trade_percent', e.target.value)}
                                                        placeholder="Risk %"
                                                        className="w-full rounded-lg px-2.5 py-1.5 text-[11px] bg-[#161722] border border-white/10 text-white outline-none"
                                                    />
                                                </div>
                                                <input
                                                    value={activeProfileData?.symbols || ''}
                                                    onChange={(e) => updateDraftField(msg.id, 'symbols', e.target.value)}
                                                    placeholder="Symbols (e.g. BTC/USDT,ETH/USDT)"
                                                    className="w-full rounded-lg px-2.5 py-1.5 text-[11px] bg-[#161722] border border-white/10 text-white outline-none"
                                                />
                                                <div className="flex items-center justify-between rounded-lg px-2.5 py-1.5 bg-[#161722] border border-white/10">
                                                    <span className="text-[10px] text-zinc-400 uppercase tracking-wider">Auto Trading</span>
                                                    <select
                                                        value={activeProfileData?.is_active === false ? 'false' : 'true'}
                                                        onChange={(e) => updateDraftField(msg.id, 'is_active', e.target.value === 'true')}
                                                        className="rounded px-2 py-1 text-[10px] bg-[#0f1017] border border-white/10 text-zinc-300 outline-none"
                                                    >
                                                        <option value="true">Active</option>
                                                        <option value="false">Paused</option>
                                                    </select>
                                                </div>
                                                <div className="flex justify-end">
                                                    <button
                                                        onClick={() => resetDraft(msg)}
                                                        className="px-2.5 py-1 rounded border border-white/10 text-[9px] font-bold uppercase tracking-wider text-zinc-300 hover:bg-white/5 transition-colors"
                                                    >
                                                        Reset
                                                    </button>
                                                </div>
                                            </div>
                                        ) : null}

                                        {!appliedIds.has(msg.id) && !cancelledIds.has(msg.id) ? (
                                            <div className="flex" style={{ borderTop: '1px solid rgba(255,255,255,0.04)' }}>
                                                <button
                                                    onClick={() => handleCancel(msg.id)}
                                                    className="flex-1 py-2.5 flex items-center justify-center gap-1.5 text-[11px] font-bold transition-all hover:bg-white/[0.03]"
                                                    style={{
                                                        color: '#ef4444',
                                                        borderRight: '1px solid rgba(255,255,255,0.04)',
                                                    }}
                                                >
                                                    <X size={11} />
                                                    Cancel
                                                </button>
                                                <button
                                                    onClick={() => isEditing ? closeDraftEditor(msg.id) : openDraftEditor(msg)}
                                                    className="flex-1 py-2.5 flex items-center justify-center gap-1.5 text-[11px] font-bold transition-all hover:bg-white/[0.03]"
                                                    style={{
                                                        color: '#fbbf24',
                                                        borderRight: '1px solid rgba(255,255,255,0.04)',
                                                    }}
                                                >
                                                    <Copy size={11} />
                                                    {isEditing ? 'Done Editing' : 'Edit Params'}
                                                </button>
                                                <button
                                                    onClick={() => handleApply(msg)}
                                                    className="flex-[2] py-2.5 flex items-center justify-center gap-1.5 text-[11px] font-bold transition-all hover:brightness-110"
                                                    style={{
                                                        background: 'linear-gradient(90deg, rgba(0,255,136,0.12), rgba(0,255,136,0.06))',
                                                        color: '#00ff88',
                                                    }}
                                                >
                                                    <Zap size={11} />
                                                    Apply to Dashboard
                                                </button>
                                            </div>
                                        ) : cancelledIds.has(msg.id) ? (
                                            <div className="w-full py-2 flex items-center justify-center gap-1.5 text-[10px] font-semibold" style={{
                                                borderTop: '1px solid rgba(255,255,255,0.03)',
                                                color: '#71717a',
                                            }}>
                                                <X size={10} />
                                                Cancelled
                                            </div>
                                        ) : (
                                            <div className="w-full py-2.5 flex items-center justify-center gap-2 text-[11px] font-bold" style={{
                                                background: 'rgba(0,255,136,0.05)',
                                                borderTop: '1px solid rgba(0,255,136,0.1)',
                                                color: 'rgba(0,255,136,0.5)',
                                            }}>
                                                <Check size={12} />
                                                Applied
                                            </div>
                                        )}
                                    </div>
                                );
                            })()}

                            <span className="text-[9px] text-zinc-700 mt-1 block">
                                {msg.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                            </span>
                        </div>
                    </div>
                ))}

                {/* Suggested quick actions - shown when only welcome message exists */}
                {messages.length <= 1 && !isLoading && (
                    <div className="mt-2">
                        <p style={{ fontSize: '9px', color: '#a1a1aa', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 700, marginBottom: '10px', paddingLeft: '4px' }}>Quick Actions</p>
                        <div className="grid grid-cols-2 gap-2">
                            {quickActions.map((action, i) => (
                                <button
                                    key={i}
                                    onClick={() => sendMessage(action.prompt)}
                                    className="text-left px-3.5 py-3 rounded-xl transition-all"
                                    style={{
                                        background: '#161722',
                                        border: '1px solid rgba(255,255,255,0.08)',
                                        cursor: 'pointer',
                                    }}
                                    onMouseEnter={e => {
                                        e.currentTarget.style.borderColor = 'rgba(0,255,136,0.25)';
                                        e.currentTarget.style.background = '#1a1b2a';
                                    }}
                                    onMouseLeave={e => {
                                        e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)';
                                        e.currentTarget.style.background = '#161722';
                                    }}
                                >
                                    <span style={{ fontSize: '13px', display: 'block', marginBottom: '3px' }}>{action.label}</span>
                                    <span style={{ fontSize: '10px', color: '#a1a1aa', lineHeight: '1.4', display: 'block' }}>{action.prompt.slice(0, 55)}...</span>
                                </button>
                            ))}
                        </div>
                    </div>
                )}

                {isLoading && (
                    <div className="flex gap-2.5">
                        <div className="w-7 h-7 rounded-lg bg-[#00ff88]/10 border border-[#00ff88]/20 flex items-center justify-center">
                            <Bot size={12} className="text-[#00ff88]" />
                        </div>
                        <div className="rounded-xl px-3.5 py-2.5 flex items-center gap-2" style={{
                            background: 'rgba(255,255,255,0.03)',
                            border: '1px solid rgba(255,255,255,0.06)',
                        }}>
                            <Loader2 size={12} className="text-[#00ff88] animate-spin" />
                            <span className="text-[11px] text-zinc-500">Generating configuration...</span>
                        </div>
                    </div>
                )}

                <div ref={messagesEndRef} />
            </div>

            {/* Input area */}
            <div style={{
                background: '#0e0f18',
                borderTop: '1px solid rgba(0,255,136,0.1)',
                padding: '14px 16px',
            }}>
                <div className="flex items-end gap-2.5">
                    <div className="flex-1 relative">
                        <textarea
                            ref={inputRef}
                            value={input}
                            onChange={e => setInput(e.target.value)}
                            onKeyDown={handleKeyDown}
                            placeholder="Describe a strategy profile..."
                            disabled={isLoading}
                            rows={2}
                            className="w-full rounded-xl py-3 pl-4 pr-12 outline-none disabled:opacity-50 transition-all resize-none"
                            style={{
                                background: '#161722',
                                border: '1px solid rgba(255,255,255,0.12)',
                                boxShadow: 'inset 0 2px 6px rgba(0,0,0,0.3)',
                                lineHeight: '1.5',
                                fontFamily: 'inherit',
                                fontSize: '13px',
                                color: '#ffffff',
                                caretColor: '#00ff88',
                            }}
                        />
                        <button
                            onClick={() => sendMessage()}
                            disabled={!input.trim() || isLoading}
                            className="absolute right-2.5 bottom-2.5 w-8 h-8 rounded-lg flex items-center justify-center transition-all disabled:opacity-20 hover:scale-105"
                            style={{
                                background: input.trim() ? 'linear-gradient(135deg, #00ff88, #00cc6a)' : 'rgba(255,255,255,0.05)',
                                color: input.trim() ? '#000' : '#52525b',
                                boxShadow: input.trim() ? '0 2px 10px rgba(0,255,136,0.3)' : 'none',
                            }}
                        >
                            <Send size={14} />
                        </button>
                    </div>
                </div>
                <p className="text-[9px] text-zinc-700 mt-1.5 ml-1">Enter to send · Shift+Enter new line</p>
            </div>

            <style>{`
                @keyframes chatSlideUp {
                    from { transform: translateY(20px) scale(0.97); opacity: 0; }
                    to { transform: translateY(0) scale(1); opacity: 1; }
                }
                @keyframes fadeIn {
                    from { opacity: 0; }
                    to { opacity: 1; }
                }
            `}</style>
        </div>
        </>,
        document.body
    );
};