import React, { useEffect, useState } from 'react';
import { useAuth } from '../context/AuthContext';
import api from '../api';
import { useNavigate } from 'react-router-dom';
import { CheckCircle, XCircle, Clock, AlertCircle, Plus, LogOut } from 'lucide-react';
import clsx from 'clsx';

interface Job {
    id: number;
    branch_name: string;
    status: string;
    duration: string;
    result_path: string;
    created_at: string;
    scenarios: string[];
    environment: string;
    test_mode: string;
}

const Dashboard: React.FC = () => {
    const { logout } = useAuth();
    const [jobs, setJobs] = useState<Job[]>([]);
    const [selectedJob, setSelectedJob] = useState<Job | null>(null);
    const navigate = useNavigate();

    useEffect(() => {
        fetchJobs();

        const wsUrl = import.meta.env.VITE_API_URL
            ? import.meta.env.VITE_API_URL.replace('http', 'ws') + '/ws/jobs'
            : 'ws://localhost:8000/ws/jobs';

        const socket = new WebSocket(wsUrl);

        socket.onmessage = (event) => {
            const data = JSON.parse(event.data);
            if (data.type === 'job_update') {
                updateJobStatus(data.job_id, data.status);
            }
        };

        return () => socket.close();
    }, []);

    const fetchJobs = async () => {
        try {
            const response = await api.get('/jobs');
            setJobs(response.data);
        } catch (error) {
            console.error("Failed to fetch jobs", error);
        }
    };

    const updateJobStatus = (jobId: number, status: string) => {
        setJobs(prev => prev.map(job =>
            job.id === jobId ? { ...job, status } : job
        ));
        if (selectedJob?.id === jobId) {
            setSelectedJob(prev => prev ? { ...prev, status } : null);
        }
    };

    const handleAbort = async (jobId: number) => {
        try {
            await api.post(`/jobs/${jobId}/abort`);
            fetchJobs(); // Refresh to ensure sync
        } catch (error) {
            console.error("Failed to abort job", error);
        }
    };

    const getStatusIcon = (status: string) => {
        switch (status) {
            case 'passed': return <CheckCircle className="text-green-500" />;
            case 'failed': return <XCircle className="text-red-500" />;
            case 'running': return <Clock className="text-orange-500 animate-pulse" />;
            case 'aborted': return <AlertCircle className="text-red-900" />;
            default: return <Clock className="text-gray-400" />;
        }
    };

    return (
        <div className="flex h-screen bg-gray-100 overflow-hidden">
            {/* Sidebar */}
            <div className="w-1/3 bg-white border-r border-gray-200 flex flex-col">
                <div className="p-4 border-b border-gray-200 flex justify-between items-center bg-primary text-white">
                    <h1 className="font-bold text-lg">TestArena</h1>
                    <div className="flex gap-2">
                        <button onClick={() => navigate('/new-job')} className="p-1 hover:bg-secondary rounded" title="New Job">
                            <Plus size={20} />
                        </button>
                        <button onClick={logout} className="p-1 hover:bg-secondary rounded" title="Logout">
                            <LogOut size={20} />
                        </button>
                    </div>
                </div>
                <div className="flex-1 overflow-y-auto">
                    {jobs.map(job => (
                        <div
                            key={job.id}
                            onClick={() => setSelectedJob(job)}
                            className={clsx(
                                "p-4 border-b border-gray-100 cursor-pointer hover:bg-gray-50 flex items-center justify-between",
                                selectedJob?.id === job.id && "bg-blue-50 border-l-4 border-l-accent"
                            )}
                        >
                            <div>
                                <div className="font-medium">#{job.id} {job.branch_name}</div>
                                <div className="text-xs text-gray-500">{new Date(job.created_at).toLocaleString()}</div>
                            </div>
                            <div>{getStatusIcon(job.status)}</div>
                        </div>
                    ))}
                </div>
            </div>

            {/* Main Content */}
            <div className="flex-1 p-8 overflow-y-auto">
                {selectedJob ? (
                    <div className="bg-white rounded-lg shadow-sm p-6">
                        <div className="flex justify-between items-start mb-6">
                            <h2 className="text-2xl font-bold">Job #{selectedJob.id} Details</h2>
                            {selectedJob.status === 'running' && (
                                <button
                                    onClick={() => handleAbort(selectedJob.id)}
                                    className="bg-red-100 text-red-700 px-4 py-2 rounded hover:bg-red-200"
                                >
                                    Abort Job
                                </button>
                            )}
                        </div>

                        <div className="grid grid-cols-2 gap-6 mb-6">
                            <div className="bg-gray-50 p-4 rounded">
                                <div className="text-sm text-gray-500">Status</div>
                                <div className="flex items-center gap-2 font-medium capitalize">
                                    {getStatusIcon(selectedJob.status)}
                                    {selectedJob.status}
                                </div>
                            </div>
                            <div className="bg-gray-50 p-4 rounded">
                                <div className="text-sm text-gray-500">Duration</div>
                                <div className="font-medium">{selectedJob.duration || '-'}</div>
                            </div>
                            <div className="bg-gray-50 p-4 rounded">
                                <div className="text-sm text-gray-500">Branch</div>
                                <div className="font-medium">{selectedJob.branch_name}</div>
                            </div>
                            <div className="bg-gray-50 p-4 rounded">
                                <div className="text-sm text-gray-500">Environment</div>
                                <div className="font-medium">{selectedJob.environment}</div>
                            </div>
                            <div className="bg-gray-50 p-4 rounded">
                                <div className="text-sm text-gray-500">Test Mode</div>
                                <div className="font-medium">{selectedJob.test_mode}</div>
                            </div>
                        </div>

                        <div className="mb-6">
                            <h3 className="font-bold mb-2">Selected Scenarios</h3>
                            <div className="flex flex-wrap gap-2">
                                {selectedJob.scenarios.map(s => (
                                    <span key={s} className="bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm">
                                        {s}
                                    </span>
                                ))}
                            </div>
                        </div>

                        {selectedJob.result_path && (
                            <div className="mt-6">
                                <a
                                    href={selectedJob.result_path}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="inline-flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700"
                                >
                                    View HTML Report
                                </a>
                            </div>
                        )}
                    </div>
                ) : (
                    <div className="flex items-center justify-center h-full text-gray-400">
                        Select a job to view details
                    </div>
                )}
            </div>
        </div>
    );
};

export default Dashboard;
