export const metadata = {
  title: "Admin Panel | TenderHub Kenya",
  description: "Superuser administration panel",
};

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <style>{`
        .admin-container {
          min-height: 100vh;
          background: #0f172a;
          color: #e2e8f0;
        }
        
        .admin-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 1rem 2rem;
          background: #1e293b;
          border-bottom: 1px solid #334155;
        }
        
        .admin-brand {
          display: flex;
          align-items: center;
          gap: 1rem;
        }
        
        .admin-brand h1 {
          margin: 0;
          font-size: 1.5rem;
          font-weight: 600;
        }
        
        .admin-badge {
          background: #dc2626;
          color: white;
          padding: 0.25rem 0.75rem;
          border-radius: 9999px;
          font-size: 0.75rem;
          font-weight: 600;
        }
        
        .admin-nav {
          display: flex;
          gap: 0.5rem;
          align-items: center;
        }
        
        .admin-nav button {
          padding: 0.5rem 1rem;
          border-radius: 0.375rem;
          border: none;
          background: transparent;
          color: #94a3b8;
          cursor: pointer;
          font-size: 0.875rem;
          transition: all 0.2s;
        }
        
        .admin-nav button:hover {
          background: #334155;
          color: #e2e8f0;
        }
        
        .admin-nav button.active {
          background: #3b82f6;
          color: white;
        }
        
        .admin-main {
          padding: 2rem;
          max-width: 1400px;
          margin: 0 auto;
        }
        
        .admin-loading,
        .admin-unauthorized {
          min-height: 100vh;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 1rem;
        }
        
        .admin-error {
          background: #dc2626;
          color: white;
          padding: 1rem;
          border-radius: 0.5rem;
          margin-bottom: 1rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        
        .admin-error button {
          background: white;
          color: #dc2626;
          border: none;
          padding: 0.25rem 0.75rem;
          border-radius: 0.25rem;
          cursor: pointer;
        }
        
        .stats-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 1.5rem;
          margin-bottom: 2rem;
        }
        
        .stat-card {
          background: #1e293b;
          border: 1px solid #334155;
          border-radius: 0.5rem;
          padding: 1.5rem;
          text-align: center;
        }
        
        .stat-value {
          font-size: 2rem;
          font-weight: 700;
          color: #3b82f6;
        }
        
        .stat-label {
          font-size: 0.875rem;
          color: #94a3b8;
          margin-top: 0.5rem;
        }
        
        .admin-table {
          width: 100%;
          border-collapse: collapse;
          background: #1e293b;
          border-radius: 0.5rem;
          overflow: hidden;
        }
        
        .admin-table th,
        .admin-table td {
          padding: 1rem;
          text-align: left;
          border-bottom: 1px solid #334155;
        }
        
        .admin-table th {
          background: #0f172a;
          font-weight: 600;
          font-size: 0.875rem;
          color: #94a3b8;
          text-transform: uppercase;
          letter-spacing: 0.05em;
        }
        
        .admin-table tbody tr:hover {
          background: #334155;
        }
        
        .badge-superuser {
          background: #dc2626;
          color: white;
          padding: 0.25rem 0.5rem;
          border-radius: 0.25rem;
          font-size: 0.75rem;
          font-weight: 600;
        }
        
        .badge-user {
          background: #334155;
          color: #94a3b8;
          padding: 0.25rem 0.5rem;
          border-radius: 0.25rem;
          font-size: 0.75rem;
        }
        
        .btn-sm {
          padding: 0.25rem 0.75rem;
          border-radius: 0.25rem;
          border: none;
          background: #3b82f6;
          color: white;
          cursor: pointer;
          font-size: 0.75rem;
        }
        
        .btn-sm:hover {
          background: #2563eb;
        }
        
        .quick-actions {
          display: flex;
          gap: 1rem;
          margin-top: 1rem;
        }
        
        .quick-actions button {
          padding: 0.75rem 1.5rem;
          border-radius: 0.375rem;
          border: none;
          background: #3b82f6;
          color: white;
          cursor: pointer;
          font-weight: 500;
        }
        
        .quick-actions button:hover {
          background: #2563eb;
        }
        
        .spinner {
          width: 40px;
          height: 40px;
          border: 4px solid #334155;
          border-top-color: #3b82f6;
          border-radius: 50%;
          animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
          to { transform: rotate(360deg); }
        }
        
        h2 {
          margin-bottom: 1.5rem;
          font-size: 1.25rem;
          font-weight: 600;
        }
        
        h3 {
          margin-top: 2rem;
          margin-bottom: 1rem;
          font-size: 1rem;
          font-weight: 600;
          color: #94a3b8;
        }
      `}</style>
      {children}
    </>
  );
}