import React, { useState, useEffect } from 'react';
import {
    getUserSessions,
    deleteSession,
    deleteAllSessions,
    getSessionTokenStatus
} from '../../services/apiService';
import './SessionSidebar.css';

const SessionSidebar = ({ featureName, currentSessionId, onSwitchSession, onNewSession, refreshTick }) => {
    const [isOpen, setIsOpen] = useState(false);
    const [sessions, setSessions] = useState([]);
    const [tokenHoverData, setTokenHoverData] = useState({});
    const [isLoading, setIsLoading] = useState(false);
    const [confirmModal, setConfirmModal] = useState({ isOpen: false, title: '', message: '', onConfirm: null });

    useEffect(() => {
        if (isOpen) fetchSessions();
    }, [isOpen, featureName, currentSessionId, refreshTick]);

    const fetchSessions = async () => {
        setIsLoading(true);
        try {
            const data = await getUserSessions(featureName);
            setSessions(data || []);
        } catch (err) {
            console.error('Failed to fetch sessions:', err);
        } finally {
            setIsLoading(false);
        }
    };

    const handleMouseEnter = async (sessionId) => {
        if (tokenHoverData[sessionId]) return;
        try {
            const data = await getSessionTokenStatus(sessionId);
            setTokenHoverData(prev => ({ ...prev, [sessionId]: data }));
        } catch (err) { /* silent */ }
    };

    const handleDelete = (e, sessionId) => {
        e.stopPropagation();
        setConfirmModal({
            isOpen: true,
            title: 'Delete Session',
            message: 'Are you sure you want to delete this session? This action cannot be undone.',
            onConfirm: async () => {
                try {
                    await deleteSession(sessionId);
                    fetchSessions();
                    if (Number(currentSessionId) === sessionId) {
                        localStorage.removeItem(`sessionId_${featureName}`);
                        if (onNewSession) onNewSession();
                    }
                } catch { alert('Failed to delete session.'); }
            }
        });
    };

    const handleDeleteAll = (e) => {
        if (e) e.stopPropagation();
        setConfirmModal({
            isOpen: true,
            title: 'Clear All History',
            message: 'Are you sure you want to delete ALL history for this feature? This action is permanent.',
            onConfirm: async () => {
                try {
                    await deleteAllSessions(featureName);
                    fetchSessions();
                    if (onNewSession) onNewSession();
                } catch { alert('Failed to delete all sessions.'); }
            }
        });
    };

    const formatDate = (iso) => {
        const d = new Date(iso);
        const now = new Date();
        const diffDays = Math.floor((now - d) / 86400000);
        if (diffDays === 0) return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        if (diffDays === 1) return 'Yesterday';
        if (diffDays < 7) return d.toLocaleDateString([], { weekday: 'short' });
        return d.toLocaleDateString([], { month: 'short', day: 'numeric' });
    };

    const prettyFeatureName = featureName
        .split('_')
        .map(w => w.charAt(0).toUpperCase() + w.slice(1))
        .join(' ');

    return (
        <div className={`session-sidebar ${isOpen ? 'open' : ''}`}>
            {/* ▶/◀ Tab handle */}
            <div className="sidebar-toggle" onClick={() => setIsOpen(!isOpen)}>
                <span className="sidebar-toggle-arrow">{isOpen ? '◀' : '▶'}</span>
                <span className="sidebar-toggle-label">History</span>
            </div>

            {isOpen && (
                <div className="sidebar-content">
                    <div className="sidebar-header">
                        <h3>{prettyFeatureName} History</h3>
                        <button type="button" className="delete-all" onClick={(e) => handleDeleteAll(e)}>
                            Clear All
                        </button>
                    </div>

                    <div className="sidebar-list">
                        {isLoading ? (
                            <p className="sidebar-loading">Loading sessions…</p>
                        ) : sessions.length === 0 ? (
                            <p className="sidebar-empty">No past sessions yet.</p>
                        ) : (
                            sessions.map(s => {
                                const isActive = Number(currentSessionId) === s.id;
                                const td = tokenHoverData[s.id];
                                // Derive a display title: prefer session.title, fall back gracefully
                                const displayTitle = s.title &&
                                    s.title !== 'New Chat Session'
                                    ? s.title
                                    : `Session #${s.id}`;

                                const llmInfo = s.provider_name ? `LLM: ${s.provider_name}` : 'LLM: Default';
                                const sttInfo = s.stt_provider_name ? `STT: ${s.stt_provider_name}` : 'STT: Default';
                                const ttsInfo = s.tts_provider_name ? `TTS: ${s.tts_provider_name}` : 'TTS: Default';

                                const usageInfo = td
                                    ? `Context: ${td.token_count.toLocaleString()} / ${td.token_limit.toLocaleString()} tokens (${td.percentage}%)`
                                    : 'Hover to load token usage stats';

                                const tooltip = `${displayTitle}\n---\n${llmInfo}\n${sttInfo}\n${ttsInfo}\n---\n${usageInfo}`;

                                return (
                                    <div
                                        key={s.id}
                                        className={`sidebar-item ${isActive ? 'active' : ''}`}
                                        onClick={() => onSwitchSession(s.id)}
                                        onMouseEnter={() => handleMouseEnter(s.id)}
                                        title={tooltip}
                                    >
                                        <div className="sidebar-item-info">
                                            <span className="sidebar-item-title">{displayTitle}</span>
                                            <div className="sidebar-item-meta">
                                                <span className="sidebar-item-date">{formatDate(s.created_at)}</span>
                                                {s.provider_name && (
                                                    <span className="sidebar-item-provider">{s.provider_name}</span>
                                                )}
                                            </div>
                                        </div>
                                        <button
                                            type="button"
                                            className="sidebar-item-delete"
                                            onClick={(e) => handleDelete(e, s.id)}
                                            title="Delete this session"
                                        >
                                            ×
                                        </button>
                                    </div>
                                );
                            })
                        )}
                    </div>
                </div>
            )}
            {/* Custom Confirmation Modal */}
            {confirmModal.isOpen && (
                <div className="fixed inset-0 bg-gray-900/60 backdrop-blur-sm flex justify-center items-center z-[2000] animate-in fade-in duration-300 px-4">
                    <div className="bg-white dark:bg-gray-800 p-8 rounded-2xl shadow-2xl max-w-sm w-full text-center border border-red-100 dark:border-red-900/30">
                        <div className="w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg className="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
                        </div>
                        <h2 className="text-xl font-bold mb-2 text-gray-900 dark:text-white">{confirmModal.title}</h2>
                        <p className="text-gray-500 dark:text-gray-400 mb-6 text-sm">{confirmModal.message}</p>
                        <div className="flex gap-3">
                            <button
                                onClick={() => setConfirmModal({ ...confirmModal, isOpen: false })}
                                className="flex-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 font-bold py-3 rounded-xl transition-all active:scale-95 underline-none"
                            >
                                Cancel
                            </button>
                            <button
                                onClick={() => {
                                    confirmModal.onConfirm();
                                    setConfirmModal({ ...confirmModal, isOpen: false });
                                }}
                                className="flex-1 bg-red-600 text-white font-bold py-3 rounded-xl transition-all shadow-lg shadow-red-500/20 active:scale-95 underline-none"
                            >
                                Delete
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default SessionSidebar;
