import { Link, Navigate } from 'react-router-dom';
import FavoritesCardsGrid from '../components/FavoritesCardsGrid';
import Navbar from '../components/Navbar';
import { useAuth } from '../contexts/AuthContext';
import { useFavorites } from '../contexts/FavoritesContext';

export default function PublicFavoritesPage() {
    const { isAuthenticated, isLoading } = useAuth();
    const { localEntries, favoriteIds } = useFavorites();

    if (isLoading) {
        return (
            <div className="min-h-screen bg-canvas">
                <Navbar />
                <div className="max-w-4xl mx-auto px-4 pt-20 pb-10">
                    <div className="h-7 w-40 animate-pulse rounded-md bg-surface mb-6" />
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        {[...Array(3)].map((_, i) => (
                            <div key={i} className="rounded-xl border border-borderSubtle bg-panel h-64 animate-pulse" />
                        ))}
                    </div>
                </div>
            </div>
        );
    }

    // If authenticated, redirect to client area favorites
    if (isAuthenticated) {
        return <Navigate to="/area-do-cliente/favoritos" replace />;
    }

    return (
        <div className="min-h-screen bg-canvas">
            <Navbar />
            <div className="max-w-4xl mx-auto px-4 pt-20 pb-10">
                <div className="mb-8 flex items-center justify-between gap-4">
                    <div>
                        <h1 className="text-2xl font-semibold text-textPrimary">Meus Favoritos</h1>
                        <p className="text-sm text-textTertiary mt-1">
                            {favoriteIds.size} {favoriteIds.size === 1 ? 'imóvel salvo' : 'imóveis salvos'} localmente
                        </p>
                    </div>
                    <Link to="/imoveis" className="text-sm text-accent hover:text-accentHover transition shrink-0">
                        ← Voltar à listagem
                    </Link>
                </div>

                {/* Banner — incentivo ao cadastro */}
                <div className="mb-6 rounded-xl border border-brand/30 bg-brand/5 px-4 py-4 flex flex-col sm:flex-row sm:items-center gap-3 justify-between">
                    <div>
                        <p className="text-sm font-medium text-textPrimary">Sincronize seus favoritos</p>
                        <p className="text-xs text-textTertiary mt-0.5">
                            Crie uma conta gratuita para acessar seus favoritos em qualquer dispositivo.
                        </p>
                    </div>
                    <div className="flex gap-2 shrink-0">
                        <Link
                            to="/cadastro"
                            state={{ from: { pathname: '/area-do-cliente/favoritos' } }}
                            className="rounded-lg bg-brand px-4 py-2 text-xs font-semibold text-white hover:bg-accentHover transition"
                        >
                            Criar conta
                        </Link>
                        <Link
                            to="/login"
                            state={{ from: { pathname: '/area-do-cliente/favoritos' } }}
                            className="rounded-lg border border-borderSubtle bg-surface px-4 py-2 text-xs font-semibold text-textPrimary hover:bg-panel transition"
                        >
                            Entrar
                        </Link>
                    </div>
                </div>

                <FavoritesCardsGrid entries={localEntries} />
            </div>
        </div>
    );
}