"use client";

import { ShieldAlert, LogOut, Home } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useAuth } from "@/contexts/auth-context";

export default function ForbiddenPage() {
  const { clearUser } = useAuth();

  const handleLogout = () => {
    // Clear cookies and sign out
    document.cookie = "__user__=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";
    document.cookie = "__token__=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";
    clearUser();
    window.location.href = process.env.NEXT_PUBLIC_LOGIN_URL || ''; // Assuming there's a login route
  };

  return (
    <div className="flex h-screen w-full flex-col items-center justify-center bg-[#f0f2f5] dark:bg-[#0b141a] px-4 text-center">
      <div className="relative mb-6">
        <div className="absolute -inset-1 rounded-full bg-red-500/20 blur-xl"></div>
        <div className="relative flex h-24 w-24 items-center justify-center rounded-full bg-white dark:bg-[#111b21] shadow-xl">
          <ShieldAlert className="h-12 w-12 text-red-500" />
        </div>
      </div>
      
      <h1 className="mb-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl">
        Akses Dibatasi
      </h1>
      
      <p className="mb-8 max-w-md text-lg text-gray-600 dark:text-gray-400">
        Maaf, Anda tidak memiliki izin untuk mengakses layanan WhatsApp ini. Silakan hubungi administrator Anda untuk mendapatkan akses.
      </p>
      
      <div className="flex flex-col space-y-3 sm:flex-row sm:space-x-4 sm:space-y-0">
        <Button 
          variant="outline" 
          className="flex items-center gap-2 border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800"
          onClick={() => {
            window.location.href = process.env.NEXT_PUBLIC_LOGIN_URL || '';
          }}
        >
          <Home className="h-4 w-4" />
          Kembali Ke Dashboard
        </Button>
        
        {/* <Button 
          variant="destructive" 
          className="flex items-center gap-2"
          onClick={handleLogout}
        >
          <LogOut className="h-4 w-4" />
          Keluar Sesi
        </Button> */}
      </div>
      
      <div className="mt-12 text-sm text-gray-500 dark:text-gray-500">
        Error Code: 403 Forbidden
      </div>
    </div>
  );
}