"use client";

import { useEditMode } from "@/context/EditModeContext";
import { X, ExternalLink } from "lucide-react";
import { useEffect, useRef } from "react";

export function AdminPanel() {
  const { adminPanelOpen, closeAdminPanel } = useEditMode();
  const iframeRef = useRef<HTMLIFrameElement>(null);

  // Close on Escape key
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.key === "Escape") closeAdminPanel();
    };
    document.addEventListener("keydown", handler);
    return () => document.removeEventListener("keydown", handler);
  }, [closeAdminPanel]);

  if (!adminPanelOpen) return null;

  return (
    <div className="fixed inset-0 z-[60] flex flex-col">
      {/* Top bar */}
      <div className="bg-[#0d1117] h-10 flex items-center justify-between px-4 flex-shrink-0 border-b border-white/10">
        <div className="flex items-center gap-3">
          <span className="text-white text-sm font-semibold">Gestion du site ANED</span>
          <span className="text-white/30 text-xs">·</span>
          <span className="text-white/40 text-xs">Toutes vos modifications sont sauvegardées en base de données</span>
        </div>
        <div className="flex items-center gap-4">
          <a
            href="/admin/dashboard"
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-1.5 text-white/50 hover:text-white text-xs transition-colors"
          >
            <ExternalLink size={12} />
            Ouvrir dans un onglet
          </a>
          <button
            onClick={closeAdminPanel}
            className="flex items-center gap-1.5 bg-white/10 hover:bg-white/20 text-white text-xs px-3 py-1.5 rounded-md transition-colors"
          >
            <X size={13} />
            Retour au site
          </button>
        </div>
      </div>

      {/* Admin iframe */}
      <iframe
        ref={iframeRef}
        src="/admin/dashboard"
        className="flex-1 w-full border-0 bg-white"
        title="Administration ANED"
        allow="clipboard-read; clipboard-write"
      />
    </div>
  );
}