import { useState } from 'react';
import PageHeader from '@/components/workshop/PageHeader';

const SECTIONS = [
  'Application Identity', 'Account Rules', 'Invitation Rules', 'Customer Portal',
  'Builder Permissions', 'Security', 'File Uploads', 'Notifications', 'SHiRE Branding',
  'Materials', 'Printers', 'Ossiguard', 'Export and Migration',
];

export default function AdminSettings() {
  const [active, setActive] = useState(SECTIONS[0]);
  return (
    <>
      <PageHeader eyebrow="Administration" title="Workshop Settings"
        description="Configuration sections. Secrets are never exposed after saving." />
      <div className="grid gap-6 lg:grid-cols-4">
        <nav className="space-y-1">
          {SECTIONS.map(s => (
            <button key={s} onClick={() => setActive(s)} className={`nav-link w-full ${active === s ? 'nav-link-active' : ''}`}><span>{s}</span></button>
          ))}
        </nav>
        <section className="panel p-6 lg:col-span-3">
          <h2 className="section-title">{active}</h2>
          <p className="text-sm text-shire-text-secondary">Settings for <strong>{active}</strong> are stored via the settings registry. During the hosted phase, values persist as app settings records. No secret values are returned to the client after being saved.</p>
          <div className="mt-4 grid gap-3">
            <label className="text-sm text-slate-300">Value<input className="workshop-input" placeholder="Configure value" /></label>
            <button className="btn-primary w-fit">Save</button>
          </div>
        </section>
      </div>
    </>
  );
}