// Desktop chrome: wallpaper backdrop + top menu bar
const { useState: dUseState, useEffect: dUseEffect } = React;

const MenuBar = ({ onOpenDropdown, onOpenQuickAdd, dropdownOpen, accent, todayCount }) => {
  const [now, setNow] = dUseState(new Date(2026, 4, 11, 14, 23));
  // Don't actually tick — keep it stable for the mock
  const timeStr = now.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" });
  const dateStr = now.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" });

  return (
    <div className="menubar">
      <div className="menubar-inner">
        {/* Left: app menus */}
        <div className="menubar-left">
          <button className="menubar-item logo" aria-label="System">
            <Icon name="apple_logo" size={14} />
          </button>
          <button className="menubar-item bold">Finder</button>
          <button className="menubar-item">File</button>
          <button className="menubar-item">Edit</button>
          <button className="menubar-item">View</button>
          <button className="menubar-item">Go</button>
          <button className="menubar-item">Window</button>
          <button className="menubar-item">Help</button>
        </div>

        {/* Right: status items */}
        <div className="menubar-right">
          {/* Taskify menu item — this is "us" */}
          <button
            className={"menubar-item taskify-item" + (dropdownOpen ? " active" : "")}
            onClick={onOpenDropdown}
            aria-label="Open Taskify"
          >
            <span className="taskify-glyph" style={{ background: accent }}>
              <span className="taskify-glyph-tick" />
            </span>
            <span className="taskify-count">{todayCount}</span>
          </button>

          <button className="menubar-item" aria-label="Battery">
            <Icon name="battery" size={20} />
            <span className="bat-pct">82%</span>
          </button>
          <button className="menubar-item" aria-label="Wi-Fi">
            <Icon name="wifi" size={14} />
          </button>
          <button className="menubar-item" aria-label="Search">
            <Icon name="spotlight" size={14} />
          </button>
          <button className="menubar-item control-center" aria-label="Control center">
            <span className="cc-pill" />
            <span className="cc-pill" />
          </button>
          <button className="menubar-item time-block">
            <span className="time-day">{dateStr}</span>
            <span className="time-now">{timeStr}</span>
          </button>
        </div>
      </div>
    </div>
  );
};

// Wallpaper backdrop — Tahoe-style gradient ridges
const Wallpaper = ({ dark }) => (
  <div className={"wallpaper " + (dark ? "dark" : "light")}>
    <div className="wp-sky" />
    <div className="wp-ridge wp-ridge-3" />
    <div className="wp-ridge wp-ridge-2" />
    <div className="wp-ridge wp-ridge-1" />
    <div className="wp-glow" />
  </div>
);

// Dock at the bottom
const Dock = () => {
  const apps = [
    { c: "linear-gradient(160deg,#FF7F61,#FF4F8B)",  label: "Finder" },
    { c: "linear-gradient(160deg,#2A6FFF,#7B5BFF)",  label: "Mail" },
    { c: "linear-gradient(160deg,#34D399,#10B981)",  label: "Messages" },
    { c: "linear-gradient(160deg,#FFC457,#FF7A30)",  label: "Calendar" },
    { c: "linear-gradient(160deg,#A78BFA,#EC4899)",  label: "Photos" },
    { c: "linear-gradient(160deg,#60A5FA,#22D3EE)",  label: "Safari" },
    { c: "linear-gradient(160deg,#1F2937,#111827)",  label: "Terminal" },
    { c: "linear-gradient(160deg,#F472B6,#F87171)",  label: "Music" },
    { c: "linear-gradient(160deg,#34D399,#0EA5E9)",  label: "Maps" },
  ];
  return (
    <div className="dock">
      {apps.map((a, i) => (
        <div key={i} className="dock-app" style={{ background: a.c }} title={a.label} />
      ))}
      <div className="dock-sep" />
      <div className="dock-app" style={{ background: "linear-gradient(160deg,#71717A,#3F3F46)" }} />
    </div>
  );
};

window.Desktop = { MenuBar, Wallpaper, Dock };