'use client';

import React from 'react';

export function OperationsOperators() {
  return (
    <div className="space-y-6">
      {/* Header Row */}
      <div className="pb-4 border-b border-outline-variant/30">
        <span className="text-[11px] font-mono text-primary-fixed-dim block font-semibold">
          Access Control
        </span>
        <h1 className="font-headline-xl text-2xl sm:text-3xl lg:text-4xl font-extrabold text-on-surface tracking-tight mt-1">
          Operators
        </h1>
        <p className="text-xs sm:text-sm text-outline mt-1.5 max-w-2xl">
          Directory and role assignments for platform administrative operators.
        </p>
      </div>

      {/* Clean Placeholder Panel */}
      <div className="p-8 sm:p-12 rounded-2xl bg-surface-container-low border border-outline-variant/30 max-w-4xl mx-auto my-10 text-center space-y-6 shadow-sm">
        <div className="w-16 h-16 rounded-2xl bg-surface-container-high border border-outline-variant/40 flex items-center justify-center text-outline mx-auto shadow-inner">
          <span className="material-symbols-outlined text-[32px]">manage_accounts</span>
        </div>

        <div className="space-y-2">
          <h2 className="text-lg sm:text-xl font-bold text-on-surface tracking-tight">
            Operators
          </h2>
          <p className="text-xs sm:text-sm text-on-surface-variant max-w-lg mx-auto leading-relaxed">
            Operator management is not enabled in this Operations foundation.
          </p>
        </div>

        <div className="pt-4 border-t border-outline-variant/20 text-xs text-outline text-left space-y-2.5 bg-surface-container-lowest/50 p-5 sm:p-6 rounded-xl">
          <div className="flex items-center gap-2 font-mono text-on-surface font-semibold text-xs">
            <span className="material-symbols-outlined text-[16px] text-primary-fixed-dim">
              info
            </span>
            <span>Security Governance Policy</span>
          </div>
          <p className="leading-relaxed">
            Operator accounts, role promotions, and revocations are managed strictly through versioned PostgreSQL infrastructure migrations on the <code className="text-primary-fixed-dim font-mono">ops.operators</code> table.
          </p>
        </div>
      </div>
    </div>
  );
}