"use client";

import * as React from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  Shield,
  Lock,
  Edit3,
  CheckCircle2,
  Globe,
  RotateCw,
} from "lucide-react";
import { MonoLabel, Label, BodyText } from "../Typography";
import { cn } from "../../utils/cn";

export const CMSVisualizer: React.FC<{ className?: string }> = ({
  className,
}) => {
  const [activeTab, setActiveTab] = React.useState<"cms" | "live">("cms");
  const [lastAction, setLastAction] = React.useState<string | null>(null);

  const triggerAction = (action: string) => {
    setLastAction(action);
    setTimeout(() => setLastAction(null), 2000);
  };

  return (
    <div
      className={cn(
        "relative w-full aspect-square rounded-3xl overflow-hidden border border-slate-100 bg-white shadow-2xl group/cms flex flex-col",
        className,
      )}
    >
      {/* ── BROWSER CHROME ── */}
      <div className="h-16 bg-slate-50 border-b border-slate-100 flex flex-col shrink-0 z-30">
        <div className="h-full flex items-center justify-between px-4 gap-4">
          <div className="flex gap-1.5 shrink-0">
            <div className="w-2.5 h-2.5 rounded-full bg-slate-200" />
            <div className="w-2.5 h-2.5 rounded-full bg-slate-200" />
            <div className="w-2.5 h-2.5 rounded-full bg-slate-200" />
          </div>

          <div className="flex-1 max-w-md h-8 bg-white border border-slate-200 rounded-lg flex items-center px-3 gap-2">
            <Globe className="w-3 h-3 text-slate-400" />
            <span className="text-[9px] font-mono text-slate-400 truncate">
              {activeTab === "cms"
                ? "mintel.localhost/admin/posts/edit"
                : "mintel.me/projects/performance"}
            </span>
          </div>

          <div className="flex bg-slate-200/50 rounded-lg p-0.5 text-[8px] font-mono font-bold shrink-0">
            <button
              onClick={() => setActiveTab("cms")}
              className={cn(
                "px-3 py-1.5 rounded-md transition-all",
                activeTab === "cms"
                  ? "bg-white text-slate-900 shadow-sm"
                  : "text-slate-400",
              )}
            >
              CMS
            </button>
            <button
              onClick={() => setActiveTab("live")}
              className={cn(
                "px-3 py-1.5 rounded-md transition-all",
                activeTab === "live"
                  ? "bg-white text-slate-900 shadow-sm"
                  : "text-slate-400",
              )}
            >
              LIVE
            </button>
          </div>
        </div>
      </div>

      {/* ── MAIN CONTENT AREA ── */}
      <div className="flex-1 relative overflow-hidden bg-slate-50/20">
        <AnimatePresence mode="wait">
          {activeTab === "cms" ? (
            <motion.div
              key="cms-view"
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -10 }}
              className="absolute inset-0 flex flex-col md:flex-row"
            >
              {/* LEFT: Editor */}
              <div className="flex-1 p-6 md:p-8 flex flex-col gap-5 bg-white border-r border-slate-100">
                <div className="space-y-4">
                  <div className="space-y-1">
                    <Label className="text-[9px] text-slate-400">
                      BLOG TITEL
                    </Label>
                    <div className="h-10 rounded-lg bg-slate-50 border border-slate-200 p-3 relative">
                      <motion.div
                        animate={{ opacity: [1, 0.4, 1] }}
                        transition={{ repeat: Infinity, duration: 2 }}
                        className="w-32 h-3.5 bg-slate-200/50 rounded"
                      />
                    </div>
                  </div>
                  <div className="space-y-1">
                    <Label className="text-[9px] text-slate-400">
                      TITELBILD
                    </Label>
                    <div
                      className="aspect-video rounded-lg bg-slate-50 border border-slate-200 flex items-center justify-center cursor-pointer hover:bg-slate-100 transition-colors"
                      onClick={() => triggerAction("Image Updated")}
                    >
                      <span className="text-xl text-slate-300">+</span>
                    </div>
                  </div>
                </div>
                <div className="mt-auto flex justify-end">
                  <button
                    onClick={() => triggerAction("Published")}
                    className="px-5 py-2 bg-slate-900 text-white text-[10px] font-bold rounded-xl flex items-center gap-2"
                  >
                    <CheckCircle2 className="w-3 h-3" /> Veröffentlichen
                  </button>
                </div>
              </div>

              {/* RIGHT: Preview */}
              <div className="hidden md:flex flex-1 p-8 items-center justify-center bg-slate-50/50 relative">
                <div className="w-full max-w-[240px] aspect-[3/4] bg-white rounded-2xl border border-slate-200 shadow-sm p-4 space-y-3 relative opacity-60">
                  <div className="absolute top-2 right-2">
                    <Lock className="w-2.5 h-2.5 text-blue-400" />
                  </div>
                  <div className="h-2 w-3/4 bg-blue-100 rounded" />
                  <div className="aspect-video w-full bg-slate-100 rounded" />
                  <div className="space-y-1.5">
                    <div className="h-1 w-full bg-slate-50 rounded" />
                    <div className="h-1 w-full bg-slate-50 rounded" />
                  </div>
                </div>
                <MonoLabel className="absolute bottom-4 text-[7px] text-slate-300">
                  SANDBOX MODE: DESIGN FROZEN
                </MonoLabel>
              </div>
            </motion.div>
          ) : (
            <motion.div
              key="live-view"
              initial={{ opacity: 0, scale: 0.98 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 1.02 }}
              className="absolute inset-0 bg-white flex flex-col p-6 md:p-12"
            >
              <header className="flex justify-between items-center border-b border-slate-100 pb-4 mb-8">
                <div className="w-8 h-8 bg-slate-900 rounded flex items-center justify-center text-white text-xs font-bold">
                  M
                </div>
                <div className="flex gap-4 text-[8px] font-mono text-slate-400">
                  <span>BLOG</span>
                  <span>WORK</span>
                </div>
              </header>
              <div className="space-y-6">
                <div className="space-y-2">
                  <MonoLabel className="text-blue-500">
                    ARTICLE PREVIEW
                  </MonoLabel>
                  <h3 className="text-2xl md:text-4xl font-bold text-slate-900">
                    Performance by{" "}
                    <span className="text-slate-400 italic">Code.</span>
                  </h3>
                </div>
                <div className="aspect-video md:aspect-[21/9] w-full bg-slate-100 rounded-3xl relative overflow-hidden">
                  <div className="absolute inset-0 flex items-center justify-center">
                    <span className="px-4 py-2 bg-white/90 rounded-full border border-slate-100 text-[10px] font-bold text-slate-900 flex items-center gap-2">
                      <Shield className="w-3 h-3 text-blue-500" /> DESIGN
                      ENFORCED
                    </span>
                  </div>
                </div>
                <BodyText className="text-slate-400 text-xs max-w-md">
                  Layout-Stabilität garantiert durch strikte Trennung von
                  Content und Architektur.
                </BodyText>
              </div>
              <div className="mt-auto h-6 bg-slate-900 -mx-12 -mb-12 flex items-center px-6 justify-between">
                <span className="text-[6px] font-mono text-white/40 uppercase tracking-widest">
                  Global CDN: Optimal
                </span>
                <span className="text-[6px] font-mono text-white/20">
                  © 2026 MINTEL.ME
                </span>
              </div>
            </motion.div>
          )}
        </AnimatePresence>

        <AnimatePresence>
          {lastAction && (
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.9 }}
              className="absolute bottom-6 left-1/2 -translate-x-1/2 z-50 bg-slate-900 text-white px-5 py-2.5 rounded-xl shadow-2xl flex items-center gap-3"
            >
              <RotateCw className="w-3 h-3 animate-spin text-blue-400" />
              <span className="text-[9px] font-bold tracking-wider uppercase">
                {lastAction}
              </span>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
};
