import { useState, useEffect } from 'react';
import {
    FileText,
    LogOut,
    ChevronLeft,
    ChevronRight,
    User,
    RefreshCw,
} from 'lucide-react';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate, Routes, Route, useParams } from 'react-router-dom';
import { RootState } from '@/store';
import { logout } from '@/store/slices/authSlice';
import { toast } from 'sonner';
import { API } from '@/api/API';
import { formatDateTime } from '@/components/ui/utils';
import { Badge } from '@/components/ui/badge';
import { ProspectiveApplicationDetails } from '@/features/onboarding/pages/ProspectiveApplicationDetails';

export function ProspectiveDashboardPage() {
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const { user } = useSelector((state: RootState) => state.auth);
    const [collapsed, setCollapsed] = useState(false);
    const [activeTab, setActiveTab] = useState('applicant');

    const handleLogout = () => {
        dispatch(logout());
        toast.info('Logged out successfully');
        navigate('/');
    };

    return (
        <div className="flex h-screen bg-slate-50">
            {/* Sidebar */}
            <div className={`bg-slate-900 text-white h-screen flex flex-col transition-all duration-300 ${collapsed ? 'w-20' : 'w-64'}`}>
                <div className="p-4 border-b border-slate-800">
                    <div className="flex items-center justify-between">
                        {!collapsed && (
                            <div className="flex items-center gap-2">
                                <div className="w-10 h-10 bg-amber-600 rounded-lg flex items-center justify-center">
                                    <FileText className="w-6 h-6 text-white" />
                                </div>
                                <span className="text-amber-600 font-bold">Applicant Portal</span>
                            </div>
                        )}
                        <button
                            onClick={() => setCollapsed(!collapsed)}
                            className="p-1 hover:bg-slate-800 rounded transition-colors"
                        >
                            {collapsed ? <ChevronRight className="w-5 h-5" /> : <ChevronLeft className="w-5 h-5" />}
                        </button>
                    </div>
                </div>

                <nav className="flex-1 p-4 space-y-2">
                    <div>
                        <button
                            onClick={() => {
                                setActiveTab('applicant');
                                navigate('/prospective-dashboard');
                            }}
                            className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${activeTab === 'applicant' ? 'bg-amber-600 text-white' : 'text-slate-300 hover:bg-slate-800 hover:text-white'}`}
                        >
                            <FileText className="w-5 h-5 flex-shrink-0" />
                            {!collapsed && <span className="flex-1 text-left">My Applications</span>}
                        </button>
                    </div>
                </nav>

                <div className="p-4 border-t border-slate-800 space-y-2">
                    {!collapsed && (
                        <div className="px-4 py-2 bg-slate-800 rounded-lg mb-2">
                            <div className="flex items-center gap-3">
                                <div className="w-10 h-10 bg-amber-600 rounded-full flex items-center justify-center text-white">
                                    <span className="font-bold">{user?.name?.charAt(0) || 'A'}</span>
                                </div>
                                <div className="flex-1 min-w-0">
                                    <p className="truncate text-sm font-medium">{user?.name || 'Applicant'}</p>
                                    <p className="text-slate-400 truncate text-xs">{user?.role || 'Prospective'}</p>
                                </div>
                            </div>
                        </div>
                    )}
                    <button
                        onClick={handleLogout}
                        className={`w-full flex items-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 text-slate-300 hover:bg-slate-800 hover:text-white ${collapsed ? 'justify-center' : 'justify-start'}`}
                    >
                        <LogOut className="w-5 h-5 flex-shrink-0" />
                        {!collapsed && <span className="ml-3">Logout</span>}
                    </button>
                </div>
            </div>

            {/* Main Content */}
            <div className="flex-1 flex flex-col overflow-hidden">
                <header className="bg-white border-b border-slate-200 px-6 py-4">
                    <div className="flex items-center justify-between">
                        <div>
                            <h1 className="text-slate-900 text-xl font-semibold">Applicant Management</h1>
                            <p className="text-slate-600 text-sm">Manage and track dealership applications</p>
                        </div>
                        <div className="flex items-center gap-3">
                            <div className="flex items-center gap-3 px-3 py-2 bg-slate-100 rounded-lg">
                                <div className="w-8 h-8 bg-amber-600 rounded-full flex items-center justify-center">
                                    <User className="w-4 h-4 text-white" />
                                </div>
                                <div className="text-left">
                                    <p className="text-slate-900 text-sm font-medium">{user?.name || 'Applicant'}</p>
                                    <p className="text-slate-600 text-xs">{user?.role || 'User'}</p>
                                </div>
                            </div>
                            <button className="p-2 rounded-md hover:bg-slate-100" title="Refresh" onClick={() => window.location.reload()}>
                                <RefreshCw className="w-4 h-4 text-slate-600" />
                            </button>
                        </div>
                    </div>
                </header>

                <main className="flex-1 overflow-y-auto p-6">
                    <Routes>
                        <Route path="/" element={<ProspectiveApplicationList />} />
                        <Route path="/application/:id" element={<ProspectiveApplicationDetailsWrapper />} />
                    </Routes>
                </main>
            </div>
        </div>
    );
}

function ProspectiveApplicationList() {
    const navigate = useNavigate();
    const { user } = useSelector((state: RootState) => state.auth);
    const [applications, setApplications] = useState<any[]>([]);

    useEffect(() => {
        if (user?.id) {
            fetchApplications();
        }
    }, [user?.id]);

    const fetchApplications = async () => {
        try {
            const response: any = await API.getApplications();
            if (response.data?.success) {
                setApplications(response.data.data);
            }
        } catch (error) {
            console.error('Failed to fetch applications', error);
        }
    };

    return (
        <div className="max-w-7xl mx-auto">
            <div className="space-y-6">
                <div className="flex items-center justify-between mb-8">
                    <div>
                        <h1 className="text-slate-900 text-3xl font-bold mb-2">My Applications</h1>
                        <p className="text-slate-500 font-medium">Track and manage your dealership applications</p>
                    </div>
                </div>

                {applications.length === 0 ? (
                    <div className="bg-white rounded-2xl border border-slate-200 border-dashed p-12 text-center">
                        <div className="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4">
                            <FileText className="w-8 h-8 text-slate-400" />
                        </div>
                        <h3 className="text-lg font-semibold text-slate-900 mb-1">No applications found</h3>
                        <p className="text-slate-500 max-w-sm mx-auto mb-6">
                            You haven't submitted any dealership applications yet.
                        </p>
                    </div>
                ) : (
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        {applications.map((app) => (
                            <div
                                key={app.id}
                                className="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm hover:shadow-md hover:border-amber-500 cursor-pointer transition-all group"
                                onClick={() => navigate(`/prospective-dashboard/application/${app.id}`)}
                            >
                                <div className="flex justify-between items-start mb-4">
                                    <div className="w-12 h-12 bg-amber-50 rounded-xl flex items-center justify-center group-hover:bg-amber-600 transition-colors">
                                        <FileText className="w-6 h-6 text-amber-600 group-hover:text-white" />
                                    </div>
                                    <Badge className={`px-4 py-1.5 rounded-xl text-[10px] uppercase font-bold ${app.overallStatus === 'Completed' ? 'bg-green-100 text-green-700' :
                                        app.overallStatus === 'Rejected' ? 'bg-red-100 text-red-700' :
                                            'bg-amber-100 text-amber-700'}`}>
                                        {app.overallStatus || 'Active'}
                                    </Badge>
                                </div>
                                <h3 className="text-xl font-bold text-slate-900 mb-1 truncate">{app.applicationId}</h3>
                                <p className="text-slate-500 text-sm mb-4 font-medium">{app.city}, {app.state}</p>

                                <div className="space-y-4 pt-6 border-t border-slate-100">
                                    <div className="flex justify-between items-center">
                                        <span className="text-xs text-slate-500 font-medium">Current Stage</span>
                                        <span className="text-xs font-bold text-slate-900 bg-slate-100 px-3 py-1 rounded-lg">{app.currentStage || 'Initial'}</span>
                                    </div>
                                    <div className="flex justify-between items-center">
                                        <span className="text-xs text-slate-500 font-medium">Applied</span>
                                        <span className="text-xs font-bold text-slate-600">{formatDateTime(app.createdAt)}</span>
                                    </div>
                                    <div className="mt-6">
                                        <div className="flex justify-between items-center mb-1">
                                            <span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Progress</span>
                                            <span className="text-xs font-bold text-amber-600">{app.progressPercentage || 0}%</span>
                                        </div>
                                        <div className="w-full bg-slate-100 rounded-full h-2">
                                            <div className="bg-amber-500 h-2 rounded-full transition-all duration-1000" style={{ width: `${app.progressPercentage || 0}%` }}></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </div>
    );
}

function ProspectiveApplicationDetailsWrapper() {
    const { id } = useParams<{ id: string }>();
    const navigate = useNavigate();

    if (!id) return null;

    return (
        <div className="max-w-7xl mx-auto">
            <ProspectiveApplicationDetails
                id={id}
                onBack={() => navigate('/prospective-dashboard')}
            />
        </div>
    );
}
