"use client";

import { PropsWithChildren, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { useDeveloperFlags } from "@/components/developer-flags-provider";

export function HiddenEasterEggTrigger({ children }: PropsWithChildren) {
  const [clickCount, setClickCount] = useState(0);
  const [show, setShow] = useState(false);
  const { flags, setFlag } = useDeveloperFlags();

  return (
    <>
      <button
        onClick={() => {
          const next = clickCount + 1;
          setClickCount(next);
          if (next >= 10) {
            setShow(true);
            setClickCount(0);
          }
        }}
      >
        {children}
      </button>
      <AnimatePresence>
        {show && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-50 grid place-items-center bg-slate-950/60 px-4"
            onClick={() => setShow(false)}
          >
            <motion.div
              initial={{ y: 12, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              className="w-full max-w-sm rounded-2xl border border-cyan-300/30 bg-slate-900/90 p-6 backdrop-blur-lg"
            >
              <p className="text-lg font-semibold text-cyan-300">开发者控制台</p>
              <p className="mt-2 text-sm text-slate-300">仅开发者可见的开关，不对普通用户展示。</p>
              <div className="mt-4 space-y-2 text-sm">
                <label className="flex items-center justify-between rounded-lg border border-white/10 px-3 py-2">
                  运营弹层
                  <input type="checkbox" checked={flags.opsPopup} onChange={(e) => setFlag("opsPopup", e.target.checked)} />
                </label>
                <label className="flex items-center justify-between rounded-lg border border-white/10 px-3 py-2">
                  A/B Banner
                  <input type="checkbox" checked={flags.abBanner} onChange={(e) => setFlag("abBanner", e.target.checked)} />
                </label>
                <label className="flex items-center justify-between rounded-lg border border-white/10 px-3 py-2">
                  事件调试面板
                  <input type="checkbox" checked={flags.eventDebug} onChange={(e) => setFlag("eventDebug", e.target.checked)} />
                </label>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}