"use client";

import { motion, useReducedMotion } from "framer-motion";
import { ProgressPill } from "./ProgressPill";

const dockApps = ["Shell", "Apps", "Policy", "Health", "Settings"];

function WindowContent() {
  return (
    <div className="overflow-hidden rounded-[1.25rem] bg-gradient-to-br from-white/90 to-[#F8FAFC]/80">
      {/* Status bar */}
      <div className="flex items-center justify-between border-b border-nexus-border/60 bg-white/50 px-4 py-2">
        <div className="flex items-center gap-2">
          <span className="h-2.5 w-2.5 rounded-full bg-red-400" aria-hidden />
          <span className="h-2.5 w-2.5 rounded-full bg-amber-400" aria-hidden />
          <span className="h-2.5 w-2.5 rounded-full bg-[#06B6D4]" aria-hidden />
        </div>
        <span className="text-[10px] font-medium uppercase tracking-wider text-nexus-muted">
          Nexus Shell · POC
        </span>
        <div className="flex items-center gap-1.5 text-[10px] text-nexus-muted">
          <span className="rounded-full bg-[#A855F7]/15 px-2 py-0.5 text-[#9333EA]">Online</span>
          <span>09:41</span>
        </div>
      </div>

      <div className="grid gap-3 p-4 sm:grid-cols-[4.5rem_1fr]">
        {/* Sidebar */}
        <div className="hidden flex-col gap-2 sm:flex">
          {["⌂", "◫", "⚙", "◉"].map((icon, i) => (
            <div
              key={icon}
              className={`flex h-10 w-10 items-center justify-center rounded-2xl text-sm ${
                i === 0
                  ? "bg-gradient-to-br from-[#A855F7]/20 to-[#06B6D4]/20 text-[#9333EA]"
                  : "bg-white/70 text-nexus-muted"
              }`}
            >
              {icon}
            </div>
          ))}
        </div>

        {/* Main widgets */}
        <div className="space-y-3">
          <div className="glass rounded-2xl p-3">
            <div className="flex items-center justify-between">
              <p className="text-xs font-semibold text-nexus-navy">Platform status</p>
              <ProgressPill label="Build 91" variant="brand" pulse />
            </div>
            <div className="mt-3 grid grid-cols-2 gap-2">
              {[
                { label: "Health", value: "OK" },
                { label: "Auto-update", value: "Klar" },
                { label: "Policy", value: "POC" },
                { label: "Presence", value: "Polling" },
              ].map((item) => (
                <div
                  key={item.label}
                  className="rounded-xl border border-nexus-border bg-white/70 px-3 py-2"
                >
                  <p className="text-[10px] uppercase tracking-wide text-nexus-muted">
                    {item.label}
                  </p>
                  <p className="text-sm font-medium text-nexus-navy">{item.value}</p>
                </div>
              ))}
            </div>
          </div>

          <div className="glass rounded-2xl p-3">
            <p className="text-xs font-semibold text-nexus-navy">Deployment</p>
            <div className="mt-2 h-2 overflow-hidden rounded-full bg-slate-100">
              <div className="h-full w-4/5 rounded-full bg-gradient-to-r from-[#9333EA] via-[#A855F7] to-[#06B6D4]" />
            </div>
            <p className="mt-2 text-[10px] text-nexus-muted">
              Overlay desktop — ikke fuld Windows-erstatning
            </p>
          </div>
        </div>
      </div>

      {/* Dock */}
      <div className="mx-4 mb-4 flex items-center justify-center gap-2 rounded-[1.25rem] border border-nexus-border bg-white/60 px-3 py-2 backdrop-blur-md">
        {dockApps.map((app, i) => (
          <div
            key={app}
            className={`flex flex-col items-center gap-0.5 rounded-xl px-2 py-1 ${
              i === 0 ? "bg-[#A855F7]/10" : ""
            }`}
          >
            <div
              className={`h-8 w-8 rounded-xl ${
                i === 0
                  ? "bg-gradient-to-br from-[#9333EA] to-[#06B6D4]"
                  : "bg-gradient-to-br from-slate-200 to-slate-100"
              }`}
            />
            <span className="text-[8px] text-nexus-muted">{app}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

export function NexusWindowMock() {
  const reduce = useReducedMotion();
  const className = "glass glow-brand w-full max-w-md rounded-[1.75rem] p-3";

  if (reduce) {
    return (
      <div className={className}>
        <WindowContent />
      </div>
    );
  }

  return (
    <motion.div
      className={className}
      initial={{ opacity: 0, y: 24 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, delay: 0.2 }}
    >
      <WindowContent />
    </motion.div>
  );
}
