// Path: src/components/errors/AccessDenied.tsx
"use client";

import { useRouter } from "next/navigation";
import { motion } from "framer-motion";

interface Props {
  // Optional — customize message per page
  title?:       string;
  description?: string;
  showBack?:    boolean;
}

export default function AccessDenied({
  title       = "Access Denied",
  description = "You don't have permission to view this page. Contact your administrator if you think this is a mistake.",
  showBack    = true,
}: Props) {
  const router = useRouter();

  return (
    <div
      className="min-h-screen flex items-center justify-center p-6"
      style={{ background: "var(--color-background)" }}
    >
      <motion.div
        initial={{ opacity: 0, y: 24 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, ease: "easeOut" }}
        className="flex flex-col items-center text-center max-w-md w-full"
      >

        {/* Icon */}
        <motion.div
          initial={{ scale: 0.8, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ delay: 0.1, duration: 0.4, ease: "easeOut" }}
          className="relative mb-8"
        >
          {/* Outer glow ring */}
          <div
            className="absolute inset-0 rounded-full blur-xl opacity-20"
            style={{ background: "var(--color-danger)", transform: "scale(1.4)" }}
          />

          {/* Icon container */}
          <div
            className="relative w-24 h-24 rounded-full flex items-center justify-center"
            style={{
              background: "var(--color-surface)",
              border:     "1.5px solid var(--color-border)",
              boxShadow:  "var(--shadow-card-lg)",
            }}
          >
            {/* Lock icon */}
            <svg
              width="36"
              height="36"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
              style={{ color: "var(--color-danger)" }}
            >
              <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
              <path d="M7 11V7a5 5 0 0 1 10 0v4" />
            </svg>
          </div>

          {/* Small badge */}
          <div
            className="absolute -top-1 -right-1 w-7 h-7 rounded-full flex items-center justify-center"
            style={{
              background: "var(--color-danger)",
              border:     "2px solid var(--color-background)",
            }}
          >
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round">
              <line x1="18" y1="6" x2="6" y2="18" />
              <line x1="6" y1="6" x2="18" y2="18" />
            </svg>
          </div>
        </motion.div>

        {/* Text */}
        <motion.div
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2, duration: 0.4 }}
          className="mb-8"
        >
          <h1
            className="text-2xl font-semibold mb-3"
            style={{ color: "var(--color-text)" }}
          >
            {title}
          </h1>
          <p
            className="text-sm leading-relaxed"
            style={{ color: "var(--color-text-secondary)" }}
          >
            {description}
          </p>
        </motion.div>

        {/* Divider */}
        <motion.div
          initial={{ scaleX: 0, opacity: 0 }}
          animate={{ scaleX: 1, opacity: 1 }}
          transition={{ delay: 0.3, duration: 0.4 }}
          className="w-full h-px mb-8"
          style={{ background: "var(--color-border)" }}
        />

        {/* Actions */}
        <motion.div
          initial={{ opacity: 0, y: 8 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.35, duration: 0.4 }}
          className="flex items-center gap-3 w-full"
        >
          {showBack && (
            <button
              onClick={() => router.back()}
              className="flex-1 flex items-center justify-center gap-2 py-3 rounded-2xl text-sm font-medium transition-all duration-200 hover:opacity-80"
              style={{
                background: "var(--color-surface)",
                border:     "1.5px solid var(--color-border)",
                color:      "var(--color-text-secondary)",
                boxShadow:  "var(--shadow-card-sm)",
              }}
            >
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                <line x1="19" y1="12" x2="5" y2="12" />
                <polyline points="12 19 5 12 12 5" />
              </svg>
              Go Back
            </button>
          )}

          <button
            onClick={() => router.push("/dashboard")}
            className="flex-1 flex items-center justify-center gap-2 py-3 rounded-2xl text-sm font-semibold text-white transition-all duration-200 hover:opacity-90"
            style={{
              background: "linear-gradient(90deg, var(--color-cta), var(--color-cta-hover))",
              boxShadow:  "var(--shadow-card-md)",
            }}
          >
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
              <polyline points="9 22 9 12 15 12 15 22" />
            </svg>
            Go to Dashboard
          </button>
        </motion.div>

        {/* Footer note */}
        <motion.p
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.5, duration: 0.4 }}
          className="mt-6 text-xs"
          style={{ color: "var(--color-text-muted)" }}
        >
          Error 403 · Insufficient permissions
        </motion.p>

      </motion.div>
    </div>
  );
}