import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Inbox } from 'lucide-react';
import { type Team } from '@/types';
import { RequestCard, RequestEmptyState, type TeamRequest } from '@/components/team/requests';

interface Props {
    team?: Team | null;
    canManageMembers: boolean;
}

// Datos estáticos de ejemplo hasta implementar el backend
const EXAMPLE_REQUESTS: TeamRequest[] = [
    {
        id: 1,
        user: {
            id: 101,
            name: 'Carlos',
            lastname: 'Méndez',
            profile_photo_url: undefined,
        },
        status: 'pending',
        message: 'Me gustaría unirme al equipo. Tengo experiencia en crianza de American Bully y cuento con varios ejemplares XL.',
        requested_role: 'Integrante',
        created_at: '2025-11-10T10:30:00Z',
    },
    {
        id: 2,
        user: {
            id: 102,
            name: 'María',
            lastname: 'Rodríguez',
            profile_photo_url: undefined,
        },
        status: 'pending',
        message: 'Estoy interesada en colaborar con el equipo y aportar mi conocimiento en exposiciones.',
        requested_role: 'CoPresidente',
        created_at: '2025-11-09T15:45:00Z',
    },
    {
        id: 3,
        user: {
            id: 103,
            name: 'Roberto',
            lastname: 'García',
            profile_photo_url: undefined,
        },
        status: 'approved',
        message: 'Solicito unirme como integrante del equipo.',
        requested_role: 'Integrante',
        created_at: '2025-11-08T09:20:00Z',
    },
];

export default function TeamRequestsTab({
    team,
    canManageMembers,
}: Props) {
    // Por ahora usar datos de ejemplo
    // TODO: Reemplazar con datos reales del backend cuando esté implementado
    const requests = EXAMPLE_REQUESTS;
    const pendingRequests = requests.filter(r => r.status === 'pending');

    const handleApprove = (requestId: number) => {
        console.log('Aprobar solicitud:', requestId);
        // TODO: Implementar llamada al backend
        alert('Funcionalidad de aprobación en desarrollo');
    };

    const handleReject = (requestId: number) => {
        console.log('Rechazar solicitud:', requestId);
        // TODO: Implementar llamada al backend
        alert('Funcionalidad de rechazo en desarrollo');
    };

    return (
        <Card className="rounded-xl">
            <CardHeader className="flex flex-row items-start justify-between rounded-xl">
                <div>
                    <CardTitle>Solicitudes de ingreso</CardTitle>
                    <CardDescription>
                        {pendingRequests.length > 0
                            ? `${pendingRequests.length} solicitudes pendientes de aprobación`
                            : 'Gestiona las solicitudes de usuarios que quieren unirse al equipo.'}
                    </CardDescription>
                </div>
                {pendingRequests.length > 0 && (
                    <div className="flex items-center gap-2">
                        <Button
                            variant="outline"
                            className="rounded-xl"
                            disabled
                        >
                            <Inbox className="w-4 h-4 mr-2" />
                            {pendingRequests.length} Pendientes
                        </Button>
                    </div>
                )}
            </CardHeader>
            <CardContent>
                {requests.length > 0 ? (
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-4 gap-3 sm:gap-4">
                        {requests.map((request) => (
                            <RequestCard
                                key={request.id}
                                request={request}
                                onApprove={handleApprove}
                                onReject={handleReject}
                                canManage={canManageMembers}
                                isProcessing={false}
                            />
                        ))}
                    </div>
                ) : (
                    <RequestEmptyState isOwner={canManageMembers} />
                )}
            </CardContent>
        </Card>
    );
}