'use client';

// 九宮格 App Launcher（受 Google Apps menu 啟發）
// 規範：matrix/identity/.agents/specs/identity/design.md §2.5
// 非白名單 user 看到 mira 等受限 app 顯示為灰色 + tooltip「即將開放」

import { useEffect, useRef, useState } from 'react';
import { MATRIX_APPS, isAppAccessible, type AppEntry } from './apps';

export default function AppLauncher({ userEmail }: { userEmail: string | null }) {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!open) return;
    const onClickOutside = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener('mousedown', onClickOutside);
    return () => document.removeEventListener('mousedown', onClickOutside);
  }, [open]);

  return (
    <div className="relative" ref={ref}>
      <button
        type="button"
        onClick={() => setOpen(o => !o)}
        aria-label="切換應用"
        className="flex items-center justify-center w-9 h-9 rounded-md text-[#888] hover:text-white hover:bg-[#1a1a1a] transition-colors"
      >
        {/* 九宮格 icon */}
        <svg width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
          <circle cx="3" cy="3" r="1.5" /><circle cx="9" cy="3" r="1.5" /><circle cx="15" cy="3" r="1.5" />
          <circle cx="3" cy="9" r="1.5" /><circle cx="9" cy="9" r="1.5" /><circle cx="15" cy="9" r="1.5" />
          <circle cx="3" cy="15" r="1.5" /><circle cx="9" cy="15" r="1.5" /><circle cx="15" cy="15" r="1.5" />
        </svg>
      </button>

      {open && (
        <div
          className="absolute right-0 mt-2 w-72 bg-[#0f0f0f] border border-[#222] rounded-lg shadow-xl p-2 z-50"
          role="menu"
        >
          <div className="grid grid-cols-3 gap-1">
            {MATRIX_APPS.map(app => (
              <AppTile key={app.id} app={app} userEmail={userEmail} onClose={() => setOpen(false)} />
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

function AppTile({
  app,
  userEmail,
  onClose,
}: {
  app: AppEntry;
  userEmail: string | null;
  onClose: () => void;
}) {
  const accessible = isAppAccessible(app, userEmail);
  const tooltip = !accessible ? (app.locked_tooltip ?? '即將開放') : (app.description ?? '');

  if (!accessible) {
    return (
      <div
        title={tooltip}
        className="flex flex-col items-center justify-center gap-1 p-3 rounded-md cursor-not-allowed opacity-40"
      >
        <span className="text-2xl grayscale">{app.icon ?? '📦'}</span>
        <span className="text-xs text-[#666] text-center">{app.name}</span>
      </div>
    );
  }

  return (
    <a
      href={app.url}
      onClick={onClose}
      title={tooltip}
      className="flex flex-col items-center justify-center gap-1 p-3 rounded-md hover:bg-[#1a1a1a] transition-colors text-[#ccc] hover:text-white"
    >
      <span className="text-2xl">{app.icon ?? '📦'}</span>
      <span className="text-xs text-center">{app.name}</span>
    </a>
  );
}