---
interface Props {
  pageStatus: 'active' | 'beta' | 'placeholder' | 'deprecated';
  dbStatus: 'connected' | 'pending' | 'mock' | 'none';
  apiEndpoints?: string[]; // List of required endpoints
  missingInfo?: string; // What exactly is missing
  actionNeeded?: string; // What the dev needs to do
}

const { pageStatus, dbStatus, apiEndpoints = [], missingInfo, actionNeeded } = Astro.props;

const statusColors = {
  active: 'bg-green-500/20 text-green-400 border-green-500/50',
  beta: 'bg-blue-500/20 text-blue-400 border-blue-500/50',
  placeholder: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/50',
  deprecated: 'bg-red-500/20 text-red-400 border-red-500/50'
};

const dbColors = {
  connected: 'text-green-400',
  pending: 'text-yellow-400',
  mock: 'text-blue-400',
  none: 'text-gray-500'
};
---

<div class="fixed bottom-4 right-4 z-50 max-w-md w-full animate-fade-in">
  <div class="bg-obsidian border border-edge-highlight rounded-lg shadow-2xl overflow-hidden backdrop-blur-md">
    <!-- Header -->
    <div class="px-4 py-2 bg-titanium border-b border-edge-subtle flex items-center justify-between">
      <div class="flex items-center gap-2">
        <span class="text-xs font-bold text-gold-500 uppercase tracking-wider">Dev Mode</span>
        <span class={`text-[10px] px-2 py-0.5 rounded-full border ${statusColors[pageStatus]}`}>
          {pageStatus.toUpperCase()}
        </span>
      </div>
      <button class="text-gray-500 hover:text-white transition-colors" onclick="this.parentElement.parentElement.parentElement.remove()">×</button>
    </div>

    <!-- Content -->
    <div class="p-4 space-y-3 text-xs font-mono">
      <!-- Database Status -->
      <div class="flex justify-between items-center border-b border-edge-subtle pb-2">
        <span class="text-gray-400">Database:</span>
        <span class={`font-bold ${dbColors[dbStatus]}`}>
          {dbStatus.toUpperCase()}
        </span>
      </div>

      <!-- API Endpoints -->
      {apiEndpoints.length > 0 && (
        <div class="space-y-1">
          <span class="text-gray-400 block mb-1">Required APIs:</span>
          {apiEndpoints.map(endpoint => (
            <code class="block bg-black/30 px-2 py-1 rounded text-purple-400">{endpoint}</code>
          ))}
        </div>
      )}

      <!-- Missing Info -->
      {missingInfo && (
        <div class="bg-red-500/10 border border-red-500/30 rounded p-2 text-red-300">
          <strong class="block mb-1 text-red-400">Missing:</strong>
          {missingInfo}
        </div>
      )}

      <!-- Action Needed -->
      {actionNeeded && (
        <div class="bg-blue-500/10 border border-blue-500/30 rounded p-2 text-blue-300">
          <strong class="block mb-1 text-blue-400">Action:</strong>
          {actionNeeded}
        </div>
      )}
    </div>
  </div>
</div>

<style>
  .animate-fade-in {
    animation: fadeIn 0.3s ease-out;
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>
