"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import { Check, Copy, KeyRound, Terminal } from "lucide-react";
import { PERMISSIONS, type PermissionKey } from "@/lib/permissions";
import { useDevMode } from "@/components/providers/DevModeProvider";

interface DevModePanelProps {
  userId: string;
  permissions: string[];
  isImpersonating?: boolean;
}

const ACTION_ORDER = ["view", "create", "update", "delete"] as const;

function friendlyAction(action: string) {
  return action.charAt(0).toUpperCase() + action.slice(1);
}

export default function DevModePanel({
  userId,
  permissions,
  isImpersonating = false,
}: DevModePanelProps) {
  const t = useTranslations("profile");
  const devMode = useDevMode();
  const [copied, setCopied] = useState(false);

  if (!devMode) return null;

  function copyId() {
    navigator.clipboard.writeText(userId).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    });
  }

  const grouped = permissions.reduce<Record<string, { name: string; action: string }[]>>(
    (acc, name) => {
      const meta = PERMISSIONS[name as PermissionKey];
      const module = meta?.module ?? "other";
      const action = meta?.action ?? name;
      acc[module] = acc[module] ?? [];
      acc[module].push({ name, action });
      return acc;
    },
    {}
  );

  const modules = Object.entries(grouped).sort(([a], [b]) => a.localeCompare(b));

  return (
    <section className="overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--bg-elevated)]">
      <div className="flex items-center gap-3 px-5 py-4">
        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-emerald-500/15 text-emerald-400">
          <Terminal className="h-4 w-4" />
        </div>
        <div className="min-w-0 flex-1 text-start">
          <p className="text-sm font-semibold text-[var(--text)]">{t("devMode")}</p>
          <p className="text-xs text-[var(--text-faint)]">
            {isImpersonating ? t("devModeImpersonateHint") : t("devModeHint")}
          </p>
        </div>
        <span className="shrink-0 rounded-full border border-emerald-500/25 bg-emerald-500/10 px-2.5 py-0.5 text-[11px] font-medium text-emerald-400">
          {t("devModeOn")}
        </span>
      </div>

      <div className="border-t border-[var(--border)] p-4 sm:p-5 space-y-5">
        <div className="space-y-1.5">
          <div className="flex items-center justify-between gap-3">
            <p className="text-[11px] font-semibold uppercase tracking-widest text-[var(--text-faint)]">
              {t("userId")}
            </p>
            <button
              type="button"
              onClick={copyId}
              className="inline-flex cursor-pointer items-center gap-1 rounded-md px-2 py-0.5 text-[11px] font-medium text-[var(--text-faint)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-muted)]"
            >
              {copied ? (
                <>
                  <Check className="h-3 w-3 text-emerald-400" />
                  {t("copied")}
                </>
              ) : (
                <>
                  <Copy className="h-3 w-3" />
                  {t("copyId")}
                </>
              )}
            </button>
          </div>
          <div className="rounded-lg border border-[var(--border)] bg-[var(--bg)] px-3.5 py-2.5">
            <p className="break-all font-mono text-xs text-[var(--text-muted)]">{userId}</p>
          </div>
        </div>

        <div className="space-y-2">
          <div className="flex items-center gap-2">
            <KeyRound className="h-3.5 w-3.5 text-[var(--text-faint)]" />
            <p className="text-[11px] font-semibold uppercase tracking-widest text-[var(--text-faint)]">
              {t("yourPermissions")}
            </p>
            <span className="ms-auto rounded-md border border-[var(--border)] bg-[var(--bg)] px-2 py-0.5 text-[11px] text-[var(--text-faint)]">
              {permissions.length}
            </span>
          </div>

          {permissions.length === 0 ? (
            <p className="rounded-xl border border-dashed border-[var(--border)] px-4 py-6 text-center text-xs text-[var(--text-faint)]">
              {t("noPermissions")}
            </p>
          ) : (
            <div className="space-y-2">
              {modules.map(([module, perms]) => {
                const sorted = [...perms].sort((a, b) => {
                  const ai = ACTION_ORDER.indexOf(a.action as (typeof ACTION_ORDER)[number]);
                  const bi = ACTION_ORDER.indexOf(b.action as (typeof ACTION_ORDER)[number]);
                  return (ai === -1 ? 99 : ai) - (bi === -1 ? 99 : bi);
                });
                return (
                  <div
                    key={module}
                    className="overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--bg)]/40"
                  >
                    <div className="border-b border-[var(--border)] px-3 py-2">
                      <span className="text-xs font-semibold capitalize text-[var(--text)]">
                        {module}
                      </span>
                      <span className="ms-2 text-[11px] text-[var(--text-faint)]">
                        {t("modulePermCount", { count: perms.length })}
                      </span>
                    </div>
                    <div className="flex flex-wrap gap-2 p-2.5">
                      {sorted.map((perm) => (
                        <span
                          key={perm.name}
                          title={perm.name}
                          className="inline-flex items-center rounded-full border border-emerald-500/25 bg-emerald-500/8 px-3 py-1 text-xs font-medium text-emerald-400"
                        >
                          {friendlyAction(perm.action)}
                        </span>
                      ))}
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>
    </section>
  );
}