"use client";

import React from 'react';
import { useUser } from '@/components/UserProvider';
import { ShieldAlert, Mail, ArrowLeft, LogOut } from 'lucide-react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';

export default function SuspendedPage() {
    const { user, logout } = useUser();
    const router = useRouter();

    const handleLogout = () => {
        logout();
        router.push('/');
    };

    return (
        <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4">
            <div className="max-w-md w-full bg-white rounded-2xl shadow-xl border border-rose-100 overflow-hidden">
                <div className="bg-rose-600 p-8 flex flex-col items-center text-white text-center">
                    <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mb-4">
                        <ShieldAlert className="w-8 h-8 text-white" />
                    </div>
                    <h1 className="text-2xl font-bold mb-2">Compte Suspendu</h1>
                    <p className="text-rose-100 text-sm">
                        Votre accès aux fonctionnalités de la plateforme a été restreint.
                    </p>
                </div>

                <div className="p-8 space-y-6">
                    <div>
                        <h2 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-3">Motif de la suspension</h2>
                        <div className="bg-slate-50 border border-slate-100 rounded-xl p-4 text-slate-700 italic text-sm leading-relaxed">
                            "{user?.suspensionReason || "Non respect des conditions générales d'utilisation ou comportement inapproprié constaté par la modération."}"
                        </div>
                    </div>

                    <div className="space-y-4">
                        <p className="text-sm text-slate-600">
                            Si vous pensez qu'il s'agit d'une erreur ou si vous souhaitez contester cette décision, vous pouvez contacter notre équipe de modération.
                        </p>
                        
                        <div className="flex items-center gap-3 p-4 bg-indigo-50 rounded-xl border border-indigo-100">
                            <Mail className="w-5 h-5 text-indigo-600" />
                            <div>
                                <p className="text-xs font-bold text-indigo-900 uppercase">Support Direct</p>
                                <p className="text-sm text-indigo-700">moderation@afrohub.com</p>
                            </div>
                        </div>
                    </div>

                    <div className="flex flex-col gap-3 pt-4 border-t border-slate-100">
                        <button 
                            onClick={handleLogout}
                            className="w-full flex items-center justify-center gap-2 py-3 px-4 bg-slate-900 text-white rounded-xl font-bold text-sm hover:bg-slate-800 transition-all shadow-lg active:scale-95"
                        >
                            <LogOut className="w-4 h-4" />
                            Se déconnecter
                        </button>
                        
                        <Link href="/" className="w-full flex items-center justify-center gap-2 py-3 px-4 bg-white text-slate-600 rounded-xl font-bold text-sm hover:bg-slate-50 transition-all border border-slate-200">
                            <ArrowLeft className="w-4 h-4" />
                            Retour à l'accueil
                        </Link>
                    </div>
                </div>
                
                <div className="p-4 bg-slate-50 border-t border-slate-100 text-center">
                    <p className="text-[10px] text-slate-400">
                        Date de suspension : {new Date().toLocaleDateString('fr-FR')}
                    </p>
                </div>
            </div>
        </div>
    );
}