"use client";

import Link from "next/link";
import { useState } from "react";
import {
  FileText,
  ImageIcon,
  LayoutGrid,
  Settings2,
  X,
} from "lucide-react";

import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const links = [
  { href: "/admin/content", label: "Content", icon: FileText },
  { href: "/admin/media", label: "Media", icon: ImageIcon },
  { href: "/admin/settings", label: "Settings", icon: Settings2 },
  { href: "/admin", label: "Dashboard", icon: LayoutGrid },
] as const;

type Props = {
  /** Signed-in admin — always show editor shortcuts. */
  isAdmin?: boolean;
  /** Local dev flag (`NEXT_PUBLIC_ENABLE_DEV_EDITOR=true`) — show panel before admin login. */
  devMode?: boolean;
};

export function HomeDevSettings({ isAdmin, devMode }: Props) {
  const [open, setOpen] = useState(false);
  if (!isAdmin && !devMode) return null;

  return (
    <div className="fixed bottom-6 right-6 z-40 flex flex-col items-end gap-2">
      {open ? (
        <div
          className="border-border/80 bg-background/95 w-[min(100vw-3rem,280px)] rounded-2xl border p-3 shadow-xl backdrop-blur-xl"
          role="dialog"
          aria-label="Site editor"
        >
          <div className="mb-2 flex items-center justify-between gap-2 px-1">
            <p className="text-xs font-semibold uppercase tracking-widest text-primary">
              Dev · Site editor
            </p>
            <button
              type="button"
              className="text-muted-foreground hover:text-foreground rounded-md p-1"
              aria-label="Close"
              onClick={() => setOpen(false)}
            >
              <X className="size-4" />
            </button>
          </div>
          {!isAdmin ? (
            <p className="text-muted-foreground mb-2 px-1 text-xs leading-relaxed">
              Sign in as admin to edit. Default:{" "}
              <span className="text-foreground font-medium">admin@bigbodyboyz.com</span>
            </p>
          ) : null}
          <nav className="flex flex-col gap-0.5">
            {links.map(({ href, label, icon: Icon }) => (
              <Link
                key={href}
                href={href}
                className="hover:bg-muted/60 flex items-center gap-2.5 rounded-xl px-3 py-2.5 text-sm font-medium transition-premium"
                onClick={() => setOpen(false)}
              >
                <Icon className="text-primary size-4 shrink-0" />
                {label}
              </Link>
            ))}
          </nav>
        </div>
      ) : null}
      <button
        type="button"
        className={cn(
          buttonVariants({ size: "icon" }),
          "bg-primary text-primary-foreground hover:bg-primary/90 size-12 rounded-full shadow-lg",
        )}
        aria-expanded={open}
        aria-label={open ? "Close site editor" : "Open site editor"}
        onClick={() => setOpen((v) => !v)}
      >
        <Settings2 className="size-5" />
      </button>
    </div>
  );
}