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, Search, Filter, Menu } 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, user } = 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();
        } catch (error) {
            console.error("Failed to abort job", error);
        }
    };

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

    return (
        <div className="flex flex-col h-screen bg-secondary font-sans text-text">
            {/* Header */}
            <header className="bg-primary text-white shadow-md z-10">
                <div className="container mx-auto px-4 h-16 flex items-center justify-between">
                    <div className="flex items-center gap-4">
                        <img src="/logo.png" alt="Logo" className="h-8 w-auto" />
                        <nav className="hidden md:flex gap-6 text-sm font-medium">
                            <a href="#" className="opacity-80 hover:opacity-100 border-b-2 border-transparent hover:border-white pb-1">SUBMIT</a>
                            <a href="#" className="opacity-80 hover:opacity-100 border-b-2 border-transparent hover:border-white pb-1">SCHEDULE</a>
                            <a href="#" className="opacity-100 border-b-2 border-white pb-1">DASHBOARD</a>
                            <a href="#" className="opacity-80 hover:opacity-100 border-b-2 border-transparent hover:border-white pb-1">RESULTS</a>
                        </nav>
                    </div>
                    <div className="flex items-center gap-4">
                        <span className="text-sm opacity-90">Welcome, {user?.username}</span>
                        <button onClick={logout} className="p-2 hover:bg-blue-800 rounded-full transition-colors" title="Logout">
                            <LogOut size={18} />
                        </button>
                    </div>
                </div>
            </header>

            {/* Sub-header / Filters */}
            <div className="bg-white border-b border-gray-200 p-4 shadow-sm">
                <div className="container mx-auto flex flex-wrap gap-4 items-center">
                    <div className="flex items-center gap-2 text-primary font-semibold">
                        <Filter size={16} /> FILTERS
                    </div>
                    <div className="flex gap-2">
                        <input type="text" placeholder="Submitter" className="border border-gray-300 rounded px-3 py-1 text-sm focus:outline-none focus:border-accent" />
                        <input type="text" placeholder="Source" className="border border-gray-300 rounded px-3 py-1 text-sm focus:outline-none focus:border-accent" />
                        <input type="text" placeholder="Task ID" className="border border-gray-300 rounded px-3 py-1 text-sm focus:outline-none focus:border-accent" />
                    </div>
                    <div className="ml-auto">
                        <button onClick={() => navigate('/new-job')} className="bg-accent hover:bg-accent-hover text-white px-4 py-1.5 rounded text-sm font-medium flex items-center gap-2 transition-colors">
                            <Plus size={16} /> New Request
                        </button>
                    </div>
                </div>
            </div>

            {/* Main Content */}
            <div className="flex-1 container mx-auto p-4 overflow-hidden flex gap-4">

                {/* Left Panel: Job List */}
                <div className="w-1/3 bg-white rounded shadow-sm border border-gray-200 flex flex-col">
                    <div className="p-3 bg-primary text-white font-semibold text-sm flex items-center gap-2">
                        <Menu size={16} /> TEST REQUESTS
                    </div>
                    <div className="flex-1 overflow-y-auto">
                        <table className="w-full text-sm text-left">
                            <thead className="bg-gray-50 text-text-muted font-medium border-b border-gray-200">
                                <tr>
                                    <th className="p-3">ID</th>
                                    <th className="p-3">STATUS</th>
                                    <th className="p-3">BRANCH</th>
                                </tr>
                            </thead>
                            <tbody>
                                {jobs.map(job => (
                                    <tr
                                        key={job.id}
                                        onClick={() => setSelectedJob(job)}
                                        className={clsx(
                                            "cursor-pointer border-b border-gray-100 hover:bg-blue-50 transition-colors",
                                            selectedJob?.id === job.id && "bg-blue-50 border-l-4 border-l-accent"
                                        )}
                                    >
                                        <td className="p-3 font-medium text-gray-700">#{job.id}</td>
                                        <td className="p-3">{getStatusIcon(job.status)}</td>
                                        <td className="p-3 text-gray-600 truncate max-w-[150px]">{job.branch_name}</td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                </div>

                {/* Right Panel: Job Details */}
                <div className="flex-1 bg-white rounded shadow-sm border border-gray-200 flex flex-col">
                    <div className="p-3 bg-primary text-white font-semibold text-sm flex items-center gap-2">
                        <AlertCircle size={16} /> TEST INFO
                    </div>

                    {selectedJob ? (
                        <div className="p-6 overflow-y-auto">
                            <div className="flex justify-between items-start mb-6 border-b border-gray-100 pb-4">
                                <div>
                                    <h2 className="text-xl font-bold text-gray-800">Test Request #{selectedJob.id}</h2>
                                    <p className="text-sm text-text-muted mt-1">Submitted on {new Date(selectedJob.created_at).toLocaleString()}</p>
                                </div>
                                <div className="flex gap-2">
                                    {selectedJob.status === 'running' && (
                                        <button
                                            onClick={() => handleAbort(selectedJob.id)}
                                            className="bg-red-100 text-red-700 px-4 py-2 rounded text-sm font-medium hover:bg-red-200 transition-colors"
                                        >
                                            Abort Job
                                        </button>
                                    )}
                                    {selectedJob.result_path && (
                                        <a
                                            href={selectedJob.result_path}
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            className="bg-green-600 text-white px-4 py-2 rounded text-sm font-medium hover:bg-green-700 transition-colors flex items-center gap-2"
                                        >
                                            View Results
                                        </a>
                                    )}
                                </div>
                            </div>

                            <div className="grid grid-cols-2 gap-x-8 gap-y-4 text-sm">
                                <div className="grid grid-cols-3 gap-4">
                                    <span className="font-semibold text-gray-600">Status:</span>
                                    <span className="col-span-2 flex items-center gap-2 capitalize font-medium">
                                        {getStatusIcon(selectedJob.status)} {selectedJob.status}
                                    </span>
                                </div>
                                <div className="grid grid-cols-3 gap-4">
                                    <span className="font-semibold text-gray-600">Duration:</span>
                                    <span className="col-span-2">{selectedJob.duration || '-'}</span>
                                </div>
                                <div className="grid grid-cols-3 gap-4">
                                    <span className="font-semibold text-gray-600">Branch:</span>
                                    <span className="col-span-2 font-mono text-gray-700 bg-gray-50 px-2 py-0.5 rounded inline-block w-fit">{selectedJob.branch_name}</span>
                                </div>
                                <div className="grid grid-cols-3 gap-4">
                                    <span className="font-semibold text-gray-600">Environment:</span>
                                    <span className="col-span-2">{selectedJob.environment}</span>
                                </div>
                                <div className="grid grid-cols-3 gap-4">
                                    <span className="font-semibold text-gray-600">Test Mode:</span>
                                    <span className="col-span-2">{selectedJob.test_mode}</span>
                                </div>
                            </div>

                            <div className="mt-8">
                                <h3 className="font-bold text-gray-800 mb-3 border-b border-gray-200 pb-2">Selected Scenarios</h3>
                                <div className="flex flex-wrap gap-2">
                                    {selectedJob.scenarios.map(s => (
                                        <span key={s} className="bg-blue-50 text-blue-700 border border-blue-100 px-3 py-1 rounded-full text-xs font-medium">
                                            {s}
                                        </span>
                                    ))}
                                </div>
                            </div>
                        </div>
                    ) : (
                        <div className="flex-1 flex items-center justify-center text-gray-400 text-sm">
                            Select a job from the list to view details
                        </div>
                    )}
                </div>

            </div>
        </div>
    );
};

export default Dashboard;