import React, { useState } from 'react';
import FileSystemNavigator from '../../../shared/components/FileSystemNavigator';
import { useAgentDrillDown } from '../hooks/useAgentDrillDown';
import DrillDownHeader from './drilldown/DrillDownHeader';
import ChatTracker from './drilldown/ChatTracker';
import EvaluationPanel from './drilldown/EvaluationPanel';
import ConfigPanel from './drilldown/ConfigPanel';
import MetricsPanel from './drilldown/MetricsPanel';

export default function AgentDrillDown({ agentId, onNavigate }) {
    const hookData = useAgentDrillDown(agentId);
    const {
        agent, chatHistory, loading, error, activeTab, setActiveTab,
        editConfig, setEditConfig, saving, userConfig, tokenUsage, tokenError,
        clearing, triggers, newTriggerType, setNewTriggerType, newCronValue, setNewCronValue,
        newIntervalValue, setNewIntervalValue, newDefaultPrompt, setNewDefaultPrompt,
        creatingTrigger, modalConfig, setModalConfig, nodes, allSkills, flippedCards, setFlippedCards,
        feedbackContent, rubricContent, coworkerContent, setCoworkerContent,
        historyLog, savingGroundTruth, selectedAuditId, setSelectedAuditId,
        runningSeconds, lastTotalConsumption, currentAction, lastAction, lastActionDuration,
        handleAction, handleClearHistory, handleSaveConfig, handleSaveGroundTruth, fetchData,
        handleAddTrigger, handleDeleteTrigger, handleFireTrigger, handleFireWebhook,
        handleResetMetrics, overrideText, setOverrideText, handleInjectOverride,
        availableModels, fetchingModels, allProviders
    } = hookData;

    if (loading && !agent) return (
        <div className="flex h-screen items-center justify-center bg-[#070b14] text-white">
            <div className="animate-spin w-8 h-8 border-4 border-indigo-500 border-t-transparent rounded-full font-mono text-sm ml-4"></div>
        </div>
    );

    if (error) return (
        <div className="flex h-screen items-center justify-center bg-gray-950 text-red-500">
            Error loading Agent Drilldown: {error}
        </div>
    );

    return (
        <div className="flex flex-col flex-grow h-full bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-sans overflow-hidden">
            
            <DrillDownHeader 
                agent={agent} 
                onNavigate={onNavigate} 
                nodes={nodes} 
            />

            {/* Mobile View Toggle */}
            <div className="lg:hidden flex border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-800 sticky top-0 z-20 overflow-x-auto no-scrollbar">
                {['chat', 'evaluation', 'config', 'workspace', 'metrics'].map(tab => (
                    <button 
                        key={tab}
                        onClick={() => setActiveTab(tab)} 
                        className={`flex-1 min-w-[100px] px-4 py-3 text-[10px] font-black uppercase tracking-widest transition-all border-b-2 ${activeTab === tab || (tab === 'chat' && !['config', 'workspace', 'metrics', 'evaluation'].includes(activeTab)) ? 'border-indigo-500 text-indigo-500 bg-indigo-50/10' : 'border-transparent text-gray-500'}`}
                    >
                        {tab === 'chat' ? 'Live Chat' : tab.charAt(0).toUpperCase() + tab.slice(1)}
                    </button>
                ))}
            </div>

            {/* Main Content Area */}
            <div className="flex-1 grid grid-cols-1 lg:grid-cols-[1.8fr_2.2fr] overflow-hidden gap-1 p-1 bg-gray-200 dark:bg-gray-950">
                
                {/* Left Pane: Chat Tracker */}
                <div className={`flex flex-col overflow-hidden ${activeTab === 'evaluation' || activeTab === 'config' || activeTab === 'workspace' || activeTab === 'metrics' ? 'hidden lg:flex' : 'flex'}`}>
                    <ChatTracker 
                        agent={agent}
                        chatHistory={chatHistory}
                        handleClearHistory={handleClearHistory}
                        handleAction={handleAction}
                        clearing={clearing}
                        editConfig={editConfig}
                        currentAction={currentAction}
                        lastAction={lastAction}
                        lastActionDuration={lastActionDuration}
                        runningSeconds={runningSeconds}
                    />
                </div>

                {/* Right Pane: Multi-Tab Dashboard */}
                <div className={`flex flex-col bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800/80 rounded-xl overflow-hidden relative shadow-lg ${activeTab === 'chat' ? 'hidden lg:flex' : 'flex'}`}>
                    {/* Desktop Tab Switcher */}
                    <div className="hidden lg:flex bg-gray-50 dark:bg-gray-950 border-b border-gray-200 dark:border-gray-800/80 px-4 pt-2 gap-1 shrink-0">
                        {['evaluation', 'config', 'workspace', 'metrics'].map(tab => (
                            <button 
                                key={tab}
                                onClick={() => setActiveTab(tab)}
                                className={`px-4 py-2 text-xs font-bold uppercase tracking-widest rounded-t-lg transition-colors ${activeTab === tab ? 'bg-white dark:bg-gray-900 text-indigo-500 border-t border-l border-r border-gray-200 dark:border-gray-800/80 -mb-px' : 'text-gray-500 hover:text-gray-400'}`}
                            >
                                {tab.charAt(0).toUpperCase() + tab.slice(1)}
                            </button>
                        ))}
                    </div>

                    <div className="flex-1 overflow-hidden relative">
                        {activeTab === 'evaluation' && (
                            <EvaluationPanel 
                                chatHistory={chatHistory}
                                selectedAuditId={selectedAuditId}
                                setSelectedAuditId={setSelectedAuditId}
                                feedbackContent={feedbackContent}
                                rubricContent={rubricContent}
                                historyLog={historyLog}
                                coworkerContent={coworkerContent}
                                setCoworkerContent={setCoworkerContent}
                                handleSaveGroundTruth={handleSaveGroundTruth}
                                savingGroundTruth={savingGroundTruth}
                                editConfig={editConfig}
                                fetchData={fetchData}
                                agent={agent}
                            />
                        )}

                        {activeTab === 'config' && (
                            <ConfigPanel 
                                editConfig={editConfig}
                                setEditConfig={setEditConfig}
                                saving={saving}
                                handleSaveConfig={handleSaveConfig}
                                nodes={nodes}
                                allSkills={allSkills}
                                triggers={triggers}
                                handleAddTrigger={handleAddTrigger}
                                handleDeleteTrigger={handleDeleteTrigger}
                                handleFireTrigger={handleFireTrigger}
                                handleFireWebhook={handleFireWebhook}
                                newTriggerType={newTriggerType}
                                setNewTriggerType={setNewTriggerType}
                                newCronValue={newCronValue}
                                setNewCronValue={setNewCronValue}
                                newIntervalValue={newIntervalValue}
                                setNewIntervalValue={setNewIntervalValue}
                                newDefaultPrompt={newDefaultPrompt}
                                setNewDefaultPrompt={setNewDefaultPrompt}
                                creatingTrigger={creatingTrigger}
                                overrideText={overrideText}
                                setOverrideText={setOverrideText}
                                handleInjectOverride={handleInjectOverride}
                                agentId={agentId}
                                availableModels={availableModels}
                                fetchingModels={fetchingModels}
                                allProviders={allProviders}
                                userConfig={userConfig}
                            />
                        )}

                        {activeTab === 'workspace' && (
                            <div className="flex flex-col h-full bg-[#0d0d0d]">
                                <FileSystemNavigator 
                                    nodeId={agent?.mesh_node_id || "hub"} 
                                    sessionId={agent?.session?.sync_workspace_id || agent?.session_id} 
                                />
                            </div>
                        )}

                        {activeTab === 'metrics' && (
                            <MetricsPanel 
                                agent={agent}
                                tokenUsage={tokenUsage}
                                tokenError={tokenError}
                                flippedCards={flippedCards}
                                setFlippedCards={setFlippedCards}
                                handleResetMetrics={handleResetMetrics}
                                clearing={clearing}
                            />
                        )}
                    </div>
                </div>
            </div>

            {/* Modal Dialogs */}
            {modalConfig && (
                <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
                    <div className="bg-white dark:bg-gray-900 rounded-3xl p-8 max-w-sm w-full shadow-2xl border border-gray-200 dark:border-gray-800 animate-in zoom-in-95 duration-200">
                        <div className={`w-12 h-12 rounded-2xl flex items-center justify-center mb-6 ${modalConfig.type === 'error' ? 'bg-red-100 dark:bg-red-500/20 text-red-600' : 'bg-emerald-100 dark:bg-emerald-500/20 text-emerald-600'}`}>
                            {modalConfig.type === 'error' ? (
                                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
                            ) : (
                                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>
                            )}
                        </div>
                        <h3 className="text-xl font-black mb-2 text-gray-900 dark:text-white uppercase tracking-tight">{modalConfig.title}</h3>
                        <p className="text-gray-500 dark:text-gray-400 text-sm leading-relaxed mb-8">{modalConfig.message}</p>
                        <div className="flex gap-3">
                            {modalConfig.confirmAction ? (
                                <>
                                    <button 
                                        onClick={() => setModalConfig(null)}
                                        className="flex-1 px-4 py-3 rounded-xl bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white text-xs font-black uppercase tracking-widest hover:bg-gray-200 dark:hover:bg-gray-700 transition-all"
                                    >
                                        Cancel
                                    </button>
                                    <button 
                                        onClick={() => {
                                            modalConfig.confirmAction();
                                            setModalConfig(null);
                                        }}
                                        className="flex-1 px-4 py-3 rounded-xl bg-red-600 text-white text-xs font-black uppercase tracking-widest hover:bg-red-700 transition-all shadow-lg shadow-red-500/20"
                                    >
                                        {modalConfig.confirmText || 'Confirm'}
                                    </button>
                                </>
                            ) : (
                                <button 
                                    onClick={() => setModalConfig(null)}
                                    className="w-full px-4 py-3 rounded-xl bg-indigo-600 text-white text-xs font-black uppercase tracking-widest hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-500/20"
                                >
                                    Dismiss
                                </button>
                            )}
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}
