'use client';

import React from 'react';
import { ShieldAlert, Lock, ArrowLeft, LogIn, KeyRound } from 'lucide-react';
import { useRouter } from 'next/navigation';

interface AccesoRestringidoProps {
  title?: string;
  message?: string;
  roleRequired?: 'SUPERADMIN' | 'ADMIN' | 'CLIENTE';
  loginPath?: string;
}

export default function AccesoRestringido({
  title = "Acceso Restringido",
  message = "No tienes los permisos necesarios ni una sesión activa para ingresar a esta ruta protegida.",
  roleRequired = "SUPERADMIN",
  loginPath = "/administrador"
}: AccesoRestringidoProps) {
  const router = useRouter();

  return (
    <div className="min-h-screen w-full bg-slate-50 flex items-center justify-center p-4 font-sans select-none antialiased">
      <div className="bg-white border border-gray-200 rounded-2xl p-8 max-w-md w-full text-center space-y-6 shadow-xl animate-fadeIn">
        {/* Shield Icon Badge */}
        <div className="mx-auto w-16 h-16 rounded-2xl bg-red-50 border border-red-200 flex items-center justify-center text-red-600 shadow-xs">
          <ShieldAlert size={32} />
        </div>

        {/* Title & Description */}
        <div className="space-y-2">
          <span className="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-red-50 border border-red-200 text-red-700 inline-block">
            403 — Prohibido
          </span>
          <h1 className="text-xl font-bold text-slate-800 tracking-tight">{title}</h1>
          <p className="text-xs text-slate-500 leading-relaxed">
            {message}
          </p>
        </div>

        {/* Action Buttons */}
        <div className="flex flex-col gap-2 pt-2">
          <button
            onClick={() => router.push(loginPath)}
            className="w-full py-2.5 bg-purple-600 hover:bg-purple-700 text-white font-semibold text-xs rounded-xl transition-all shadow-sm flex items-center justify-center gap-2 cursor-pointer"
          >
            <LogIn size={15} />
            <span>Iniciar Sesión con Credenciales Válidas</span>
          </button>

          <button
            onClick={() => router.push('/')}
            className="w-full py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold text-xs rounded-xl transition-all border border-gray-200 flex items-center justify-center gap-2 cursor-pointer"
          >
            <ArrowLeft size={15} />
            <span>Volver a la Página Principal</span>
          </button>
        </div>
      </div>
    </div>
  );
}