import { Link, useNavigate } from "react-router-dom";
import Button from "../../components/Buttons";
import Tabs from "../../components/Tabs";
import { useState, useEffect, useCallback } from "react";
import IconUser from "../../components/Icon/IconUser";
import IconCalendar from "../../components/Icon/IconCalendar";
import IconBuilding from "../../components/Icon/IconBuilding";
import IconAcademicCap from "../../components/Icon/IconAcademicCap";
import IconSearch from "../../components/Icon/IconSearch";
import IconChevronLeft from "../../components/Icon/IconChevronLeft";
import IconChevronRight from "../../components/Icon/IconChevronRight";
import IconRefresh from "../../components/Icon/IconRefresh";
import Tooltip from "../../components/Tooltip";
import api from '../../api/axios';
import { toast } from 'react-toastify';
import config from '../../config';
 
interface AlumniStudent {
    id: number;
    name: string;
    email: string;
    phone: string;
    avatar: string;
    batch: string;
    batch_year: string;
    course: string;
    graduated_year: string;
    placement: {
        company: string;
        job_role: string;
        package: string;
        status: string;
    } | null;
    is_placed: boolean;
    created_at: string;
}

interface PaginationData {
    current_page: number;
    per_page: number;
    total: number;
    last_page: number;
    from: number;
    to: number;
}

function ManageAlumni() {
    const navigate = useNavigate();
    const [alumniStudents, setAlumniStudents] = useState<AlumniStudent[]>([]);
    const [loading, setLoading] = useState(true);
    const [searchTerm, setSearchTerm] = useState('');
    const [debouncedSearch, setDebouncedSearch] = useState('');
    const [pagination, setPagination] = useState<PaginationData>({
        current_page: 1,
        per_page: 12,
        total: 0,
        last_page: 1,
        from: 0,
        to: 0
    });

    const tabData = [
        { id: 'Manage Interview', label: 'Manage Interview', path: '/manage_placements' },
        { id: 'Alumni', label: 'Alumni', path: '/manage_alumni' },
        { id: 'Placed Student', label: 'Placed Student', path: '/manage_placed_student' },
    ];

    // Debounce search
    useEffect(() => {
        const timer = setTimeout(() => {
            setDebouncedSearch(searchTerm);
        }, 500);
        return () => clearTimeout(timer);
    }, [searchTerm]);

    // Fetch alumni students
    const fetchAlumniStudents = useCallback(async () => {
        setLoading(true);
        try {
            const params = new URLSearchParams({
                page: pagination.current_page.toString(),
                per_page: pagination.per_page.toString(),
                search: debouncedSearch
            });

            const response = await api.get(`/placement/alumni-students?${params}`);

            if (response.data.status) {
                setAlumniStudents(response.data.data.data);
                setPagination({
                    current_page: response.data.data.current_page,
                    per_page: response.data.data.per_page,
                    total: response.data.data.total,
                    last_page: response.data.data.last_page,
                    from: response.data.data.from,
                    to: response.data.data.to
                });
            }
        } catch (error) {
            console.error('Failed to fetch alumni students:', error);
            toast.error('Failed to load alumni students');
        } finally {
            setLoading(false);
        }
    }, [pagination.current_page, pagination.per_page, debouncedSearch]);

    useEffect(() => {
        fetchAlumniStudents();
    }, [fetchAlumniStudents]);

    const handlePageChange = (page: number) => {
        if (page >= 1 && page <= pagination.last_page) {
            setPagination(prev => ({ ...prev, current_page: page }));
        }
    };

    const handlePerPageChange = (perPage: number) => {
        setPagination(prev => ({ ...prev, per_page: perPage, current_page: 1 }));
    };

    const handleSearch = (val: string) => {
        setSearchTerm(val);
        setPagination(prev => ({ ...prev, current_page: 1 }));
    };

    const handleRefresh = () => {
        setSearchTerm('');
        setDebouncedSearch('');
        setPagination(prev => ({ ...prev, current_page: 1 }));
    };

    const storageBaseUrl = config.storageUrl;

    const getImageUrl = (imagePath: string | null): string => {
        if (!imagePath) return `https://ui-avatars.com/api/?background=6366f1&color=fff&name=${encodeURIComponent('Alumni')}`;
        if (imagePath.startsWith('http://') || imagePath.startsWith('https://')) {
            return imagePath;
        }
        return `${storageBaseUrl}/${imagePath}`;
    };

    // Skeleton Loader Card
    const SkeletonCard = () => (
        <div className="col-span-12 md:col-span-6 lg:col-span-4 animate-pulse">
            <div className="p-4 border rounded-xl">
                <div className="grid grid-cols-12 gap-3">
                    <div className="col-span-12">
                        <div className="flex items-start gap-2">
                            <div className="p-2 rounded-xl bg-gray-200 w-10 h-10"></div>
                            <div className="flex flex-col flex-1 gap-2">
                                <div className="h-4 bg-gray-200 rounded w-32"></div>
                                <div className="h-3 bg-gray-200 rounded w-24"></div>
                            </div>
                        </div>
                    </div>
                    <div className="col-span-12">
                        <div className="flex items-center gap-2">
                            <div className="w-5 h-5 bg-gray-200 rounded"></div>
                            <div className="h-4 bg-gray-200 rounded w-40"></div>
                        </div>
                    </div>
                    <div className="col-span-12">
                        <div className="flex items-center gap-2">
                            <div className="w-5 h-5 bg-gray-200 rounded"></div>
                            <div className="h-4 bg-gray-200 rounded w-32"></div>
                        </div>
                    </div>
                    <div className="col-span-12">
                        <div className="p-2 rounded bg-gray-50 flex gap-2 items-center" style={{ height: "60px" }}>
                            <div className="w-5 h-5 bg-gray-200 rounded"></div>
                            <div className="h-4 bg-gray-200 rounded w-48"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );

    return (
        <>
            <div className="flex items-center justify-between gap-2 mb-2 flex-wrap">
                <ul className="flex space-x-2 items-center">
                    <li>
                        <Link to="/manage_placements" className="text-primary text-lg hover:underline">
                            Manage Placement
                        </Link>
                    </li>
                    <li className="before:content-['/'] ml-2">
                        <span>Alumni</span>
                    </li>
                </ul>
            </div>

            <Tabs
                tabs={tabData}
                defaultTab="Alumni"
                onChange={(tabId) => {
                    const selectedTab = tabData.find(t => t.id === tabId);
                    if (selectedTab?.path) {
                        navigate(selectedTab.path);
                    }
                }}
            />

            <div className="pt-4">
                <div className="p-4 rounded-xl bg-white w-full max-w-full overflow-hidden">
                    {/* Filters */}
                    <div className="flex flex-wrap justify-between items-center gap-4 mb-6">
                        <div className="flex-1 min-w-[250px]">
                            <div className="relative">
                                <input
                                    type="text"
                                    placeholder="Search by Student Name, Batch, Course..."
                                    value={searchTerm}
                                    onChange={(e) => handleSearch(e.target.value)}
                                    className="w-full border rounded-lg px-4 py-2 pl-10 focus:outline-none focus:ring-2 focus:ring-primary"
                                />
                                <IconSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
                            </div>
                        </div>
                    </div>

                    {/* Alumni Grid */}
                    <div className="grid grid-cols-12 gap-4">
                        {loading ? (
                            // Show skeleton loading
                            Array.from({ length: pagination.per_page }).map((_, index) => (
                                <SkeletonCard key={index} />
                            ))
                        ) : alumniStudents.length === 0 ? (
                            <div className="col-span-12 text-center py-12">
                                <div className="text-gray-400 text-lg">No alumni students found</div>
                                <p className="text-gray-400 text-sm mt-2">Try adjusting your search</p>
                            </div>
                        ) : (
                            alumniStudents.map((alumni) => (
                                <div key={alumni.id} className="col-span-12 md:col-span-6 lg:col-span-4">
                                    <div className="p-4 border rounded-xl hover:shadow-lg transition-all duration-300">
                                        <div className="grid grid-cols-12 gap-3">
                                            {/* Student Info */}
                                            <div className="col-span-12">
                                                <div className="flex items-start gap-2">
                                                    <div className='p-2 rounded-xl bg-[#FCE7F3] text-primary'>
                                                        <IconUser />
                                                    </div>
                                                    <div className='flex flex-col flex-1'>
                                                        <Tooltip content={alumni.name}>
                                                            <span className='font-semibold text-sm mb-0 text-black truncate'>
                                                                {alumni.name}
                                                            </span>
                                                        </Tooltip>
                                                        <label className='text-xs mb-0 text-pink-500'>
                                                            {alumni.batch}
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>

                                            {/* Course */}
                                            <div className="col-span-12">
                                                <div className="flex items-center gap-2">
                                                    <IconAcademicCap className="w-4 h-4 text-gray-500" />
                                                    <Tooltip content={alumni.course}>
                                                        <span className='text-sm mb-0 text-gray-700 truncate'>
                                                            {alumni.course}
                                                        </span>
                                                    </Tooltip>
                                                </div>
                                            </div>

                                            {/* Graduated Year */}
                                            <div className="col-span-12">
                                                <div className="flex items-center gap-2">
                                                    <IconCalendar className="w-4 h-4 text-gray-500" />
                                                    <div className="flex gap-2 items-center">
                                                        <label className='text-sm mb-0 text-gray-600'>Graduated:</label>
                                                        <label className='text-sm mb-0 text-gray-500 font-medium'>
                                                            {alumni.graduated_year}
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>

                                            {/* Placement Info */}
                                            {!alumni.is_placed ? (
                                                <div className="col-span-12">
                                                    <div className="p-2 rounded bg-gray-50 flex gap-2 items-center" style={{ minHeight: "60px" }}>
                                                        <IconBuilding className="w-4 h-4 text-gray-500" />
                                                        <i className="text-gray-500 text-sm">Not Yet Placed</i>
                                                    </div>
                                                </div>
                                            ) : (
                                                <div className="col-span-12">
                                                    <div className="p-2 rounded bg-gray-50 flex gap-2 items-start border">
                                                        <IconBuilding className="w-4 h-4 text-primary-600 mt-1" />
                                                        <div className="flex items-center justify-between w-full flex-wrap gap-2">
                                                            <div className="flex flex-col flex-1">
                                                                <Tooltip content={alumni.placement?.company}>
                                                                    <span className="text-gray-700 font-medium text-sm truncate">
                                                                        {alumni.placement?.company}
                                                                    </span>
                                                                </Tooltip>
                                                                <label className="text-gray-900 font-semibold text-md">
                                                                    {alumni.placement?.job_role}
                                                                </label>
                                                            </div>
                                                            <div className="flex flex-col items-end">
                                                                <span className="text-md font-semibold text-pink-600">
                                                                    {alumni.placement?.package} LPA
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            )}
                                        </div>
                                    </div>
                                </div>
                            ))
                        )}
                    </div>

                    {/* Pagination */}
                    {!loading && alumniStudents.length > 0 && (
                        <div className="flex flex-col sm:flex-row justify-between items-center gap-4 mt-8 pt-6 border-t">
                            {/* Left side - Showing entries */}
                            <div className="text-sm text-gray-600">
                                Showing <strong>{pagination.from}</strong> to <strong>{pagination.to}</strong> of{' '}
                                <strong>{pagination.total}</strong> alumni
                            </div>

                            {/* Right side - Per page and pagination */}
                            <div className="flex items-center gap-4 flex-wrap justify-center">
                                {/* Per Page Selector */}
                                <div className="flex items-center gap-2">
                                    <select
                                        value={pagination.per_page}
                                        onChange={(e) => handlePerPageChange(Number(e.target.value))}
                                        className="border rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
                                    >
                                        <option value="12">12</option>
                                        <option value="24">24</option>
                                        <option value="36">36</option>
                                        <option value="48">48</option>
                                    </select>
                                </div>

                                {/* Pagination Controls */}
                                <div className="flex gap-2 items-center">
                                    <button
                                        onClick={() => handlePageChange(pagination.current_page - 1)}
                                        disabled={pagination.current_page === 1}
                                        className="w-9 h-9 flex items-center justify-center border rounded-full disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 transition-colors"
                                    >
                                        <IconChevronLeft className="w-4 h-4" />
                                    </button>

                                    {/* Page Numbers */}
                                    <div className="flex gap-1">
                                        {(() => {
                                            const pages: number[] = [];
                                            const totalPages = pagination.last_page;
                                            const currentPage = pagination.current_page;

                                            if (totalPages <= 7) {
                                                for (let i = 1; i <= totalPages; i++) {
                                                    pages.push(i);
                                                }
                                            } else {
                                                pages.push(1);
                                                if (currentPage > 4) pages.push(-1);
                                                const start = Math.max(2, currentPage - 1);
                                                const end = Math.min(totalPages - 1, currentPage + 1);
                                                for (let i = start; i <= end; i++) {
                                                    pages.push(i);
                                                }
                                                if (currentPage < totalPages - 3) pages.push(-1);
                                                pages.push(totalPages);
                                            }

                                            return pages.map((page, index) => {
                                                if (page === -1) {
                                                    return (
                                                        <span
                                                            key={`ellipsis-${index}`}
                                                            className="w-9 h-9 flex items-center justify-center text-gray-400"
                                                        >
                                                            ...
                                                        </span>
                                                    );
                                                }
                                                return (
                                                    <button
                                                        key={page}
                                                        onClick={() => handlePageChange(page)}
                                                        className={`w-9 h-9 flex items-center justify-center border rounded-full text-sm font-medium transition-colors ${
                                                            pagination.current_page === page
                                                                ? 'bg-primary text-white shadow-md shadow-primary/30'
                                                                : 'border hover:bg-gray-50 hover:border-primary/50'
                                                        }`}
                                                    >
                                                        {page}
                                                    </button>
                                                );
                                            });
                                        })()}
                                    </div>

                                    <button
                                        onClick={() => handlePageChange(pagination.current_page + 1)}
                                        disabled={pagination.current_page === pagination.last_page}
                                        className="w-9 h-9 flex items-center justify-center border rounded-full disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 transition-colors"
                                    >
                                        <IconChevronRight className="w-4 h-4" />
                                    </button>
                                </div>
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </>
    );
}

export default ManageAlumni;