'use client';

import { StudentFilters } from './components/Filters';
import { StudentTable } from './components/StudentTable';
import { PaginationControls } from './components/Pagination';
import { PageSizeSelector } from './components/PageSizeSelector';
import { ExportButton } from './components/ExportButton';
import { useStudentStore } from './store/useStudentStore';
import { useEffect, useState } from 'react';
import { Users, AlertCircle } from 'lucide-react';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { RefreshCw } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useAccessToken } from './hooks/useAccessToken';

export default function StudentsPage() {
    const { token, isLoading: tokenLoading } = useAccessToken();

    // Initial fetch on component mount - only once when token is ready
    const {
        fetchStudents,
        error,
        clearError,
        fetchAcademicData,
        filters,
        initializeStore
    } = useStudentStore();
    const [hasInitialized, setHasInitialized] = useState(false);

    // Initialize store with token FIRST
    useEffect(() => {
        if (!tokenLoading && token && !hasInitialized) {
            console.log('Initializing store with token');
            initializeStore(token); // Set token in store first
            fetchAcademicData(token); // Then fetch academic data
            setHasInitialized(true);
        }
    }, [initializeStore, fetchAcademicData, token, tokenLoading, hasInitialized]);

    // Handle when academic session is set (from persisted data or new selection)
    useEffect(() => {
        if (token && filters.academic_session && hasInitialized) {
            // Small delay to ensure everything is ready
            const timer = setTimeout(() => {
                console.log('Fetching students after initialization');
                fetchStudents(token);
            }, 300);

            return () => clearTimeout(timer);
        }
    }, [filters.academic_session, token, fetchStudents, hasInitialized]);

    const handleSortChange = (sortBy: string, sortOrder: 'asc' | 'desc') => {
        // Update sorting in store and refetch
        useStudentStore.getState().setSorting(sortBy, sortOrder);
    };

    const handleRefresh = () => {
        if (token) {
            fetchStudents(token);
        }
    };

    return (
        <div className="container mx-auto p-4 md:p-6 overflow-x-hidden">
            {/* Header */}
            <div className="mb-8">
                <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
                    <div className="flex items-center gap-3">
                        <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center">
                            <Users className="h-6 w-6 text-primary" />
                        </div>
                        <div>
                            <h1 className="text-3xl font-bold tracking-tight">Manage Students</h1>
                            <p className="text-muted-foreground">
                                Manage and view details. filtering by application status. Update student inform.ation and view application details.
                            </p>
                        </div>
                    </div>
                    <div className="flex items-center gap-2">
                        <ExportButton />
                        <Button
                            variant="outline"
                            size="icon"
                            onClick={handleRefresh}
                            title="Refresh data"
                        >
                            <RefreshCw className="h-4 w-4" />
                        </Button>
                    </div>
                </div>
            </div>

            {/* Main Content */}
            <div className="space-y-6">
                <StudentFilters tokenLoader={tokenLoading} />

                {/* Table Controls */}
                <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                    <PageSizeSelector />
                    {error && (
                        <Alert variant="destructive" className="sm:w-auto">
                            <AlertCircle className="h-4 w-4" />
                            <AlertDescription>
                                {error}
                                <Button
                                    variant="ghost"
                                    size="sm"
                                    className="ml-2 h-auto p-0"
                                    onClick={clearError}
                                >
                                    Dismiss
                                </Button>
                            </AlertDescription>
                        </Alert>
                    )}
                </div>

                {/* Student Table */}
                <StudentTable onSortChange={handleSortChange} />

                {/* Pagination */}
                <PaginationControls />
            </div>
        </div>
    );
}