"use client";

import * as React from "react";
import { ShieldCheck, Check } from "lucide-react";
import { useAdminAuth } from "@/components/admin/admin-auth-provider";

interface Me {
  user: { level: string; role: string };
  permissions: string[];
}

const PERMISSION_LABELS: Record<string, string> = {
  "admin.manage": "Manage administrators",
  "admin.force_logout": "Force-logout administrators",
  "admin.reset_password": "Reset administrator passwords",
  "security.view_audit": "View security audit",
  "security.manage_reset_requests": "Manage password reset requests",
  "security.manage_settings": "Manage system security settings",
  "content.view_activity": "View content activity",
  "posts.create": "Create articles",
  "posts.edit": "Edit articles",
  "posts.publish": "Publish & schedule articles",
  "seo.manage": "Manage SEO metadata",
  "media.manage": "Manage media library",
  "roles.manage": "Manage roles & permissions",
  "redirects.manage": "Manage URL redirects",
};

/** Read-only view of the signed-in user's role and granted permissions. */
export function MyRolePanel() {
  const { user, permissions, isLoading } = useAdminAuth();

  if (isLoading) return <div className="py-12 text-center text-xs text-neutral-400">Loading your role…</div>;
  if (!user) return null;

  const roleLabel =
    user.level === "MAIN_ADMIN" ? "Main Administrator" : (user.role || "").replace(/_/g, " ");

  const perms = permissions || [];

  return (
    <div className="space-y-6">
      <div className="rounded-2xl border border-neutral-200 bg-white p-6 shadow-xs dark:border-neutral-800 dark:bg-neutral-900">
        <div className="flex items-center gap-3">
          <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-neutral-900 text-white dark:bg-white dark:text-neutral-900">
            <ShieldCheck className="h-5 w-5" />
          </div>
          <div>
            <h3 className="text-sm font-bold text-neutral-900 dark:text-white">My Role</h3>
            <p className="text-xs text-neutral-500">{roleLabel}</p>
          </div>
        </div>
        <p className="mt-4 rounded-lg bg-neutral-50 p-3 text-[11px] text-neutral-500 dark:bg-neutral-950">
          Your role and permissions are managed by the Main Administrator. This is a
          read-only summary of what your account is authorised to do.
        </p>
      </div>

      <div className="rounded-2xl border border-neutral-200 bg-white p-6 shadow-xs dark:border-neutral-800 dark:bg-neutral-900">
        <h3 className="mb-4 text-sm font-bold text-neutral-900 dark:text-white">
          Permissions ({perms.length})
        </h3>
        <ul className="grid grid-cols-1 gap-2 sm:grid-cols-2">
          {perms.map((p) => (
            <li key={p} className="flex items-center gap-2 rounded-lg border border-neutral-100 bg-neutral-50 px-3 py-2 text-xs text-neutral-700 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-300">
              <Check className="h-3.5 w-3.5 text-emerald-600" />
              {PERMISSION_LABELS[p] || p}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default MyRolePanel;