frontend/src/components/layout/RuntimeAccessModal.tsx

import React from 'react';
import { CheckCircle2, Settings, ShieldAlert, X } from 'lucide-react';


interface RuntimeAccessModalProps {
  isOpen: boolean;
  onClose: () => void;
  title?: string;
  runtimeMode?: string;
}

export function RuntimeAccessModal({
  isOpen,
  onClose,
  title = 'Feature unavailable in this runtime profile',
  runtimeMode = 'self_hosted',
}: RuntimeAccessModalProps) {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/75 backdrop-blur-md cursor-pointer" onClick={onClose} />

      <div className="relative w-full max-w-3xl glass-modal rounded-2xl overflow-hidden shadow-[0_0_50px_rgba(245,158,11,0.15)] border border-amber-cinematic/20 z-10 bg-zinc-950/95">
        <button
          onClick={onClose}
          className="absolute top-4 right-4 text-zinc-400 hover:text-white p-1 rounded-full bg-zinc-900/60 hover:bg-zinc-800 transition-colors z-20"
        >
          <X className="w-4 h-4" />
        </button>

        <div className="grid md:grid-cols-2">
          <div className="p-8 border-r border-zinc-800/60 bg-gradient-to-br from-zinc-950 to-zinc-900">
            <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-amber-cinematic/10 border border-amber-cinematic/20 text-amber-cinematic text-[10px] font-bold tracking-widest uppercase mb-4">
              <ShieldAlert className="w-3 h-3" /> Runtime profile
            </div>
            <h2 className="text-2xl font-black text-white tracking-tight uppercase mb-3">
              Feature unavailable in this runtime profile
            </h2>
            <p className="text-zinc-400 text-xs leading-relaxed mb-6">
              {title}. This build no longer depends on commercial licensing, but some profiles can still disable modules
              through environment configuration.
            </p>

            <div className="space-y-3 text-xs text-zinc-300">
              <div className="flex items-start gap-3">
                <CheckCircle2 className="w-4 h-4 text-amber-cinematic mt-0.5" />
                <span>Set <code>OMNIVOICE_RUNTIME_MODE=self_hosted</code> to enable all local features by default.</span>
              </div>
              <div className="flex items-start gap-3">
                <CheckCircle2 className="w-4 h-4 text-amber-cinematic mt-0.5" />
                <span>Use <code>OMNIVOICE_ENABLED_FEATURES=all</code> or explicit flags for custom profiles.</span>
              </div>
              <div className="flex items-start gap-3">
                <CheckCircle2 className="w-4 h-4 text-amber-cinematic mt-0.5" />
                <span>Current runtime profile: <code>{runtimeMode}</code>.</span>
              </div>
            </div>
          </div>

          <div className="p-8 bg-zinc-950/60 flex flex-col justify-between">
            <div className="space-y-4">
              <h3 className="text-xs font-extrabold uppercase tracking-widest text-zinc-400">Recommended profiles</h3>
              <div className="p-4 rounded-xl border border-amber-cinematic/20 bg-amber-cinematic/5">
                <div className="text-xs font-bold text-amber-cinematic">self_hosted</div>
                <div className="text-[10px] text-zinc-400 mt-1">Best for local-first usage without any external activation dependency.</div>
              </div>
              <div className="p-4 rounded-xl border border-zinc-800 bg-zinc-900/30">
                <div className="text-xs font-bold text-zinc-200">internal</div>
                <div className="text-[10px] text-zinc-500 mt-1">Best for QA and team validation with all modules enabled.</div>
              </div>
              <div className="p-4 rounded-xl border border-zinc-800 bg-zinc-900/30">
                <div className="text-xs font-bold text-zinc-200">production</div>
                <div className="text-[10px] text-zinc-500 mt-1">Use only if you intentionally want capability gating from env.</div>
              </div>
            </div>

            <button
              onClick={onClose}
              className="mt-8 w-full py-3 px-4 rounded-xl bg-amber-cinematic hover:bg-amber-glow text-black font-extrabold shadow-lg shadow-amber-cinematic/20 transition-all flex items-center justify-center gap-2 text-sm tracking-wide uppercase"
            >
              <Settings className="w-4 h-4" /> Continue
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}