import React from 'react'
import { Head } from '@inertiajs/react'
import AdminLayout from '../../Layouts/AdminLayout'

const SETTING_GROUPS = [
  {
    label: 'Platform',
    items: [
      { key: 'site_name',        label: 'Site Name',        type: 'text',     description: 'The public name of the platform' },
      { key: 'site_description', label: 'Site Description', type: 'textarea', description: 'Short tagline shown in meta tags' },
      { key: 'maintenance_mode', label: 'Maintenance Mode', type: 'toggle',   description: 'Put the site into maintenance mode' },
    ],
  },
  {
    label: 'Registration',
    items: [
      { key: 'registration_open', label: 'Open Registration', type: 'toggle', description: 'Allow new users to register' },
      { key: 'require_invite',    label: 'Require Invite',    type: 'toggle', description: 'New users must have an invite code' },
    ],
  },
]

export default function AdminSettings({ settings = {} }) {
  return (
    <AdminLayout title="Settings" subtitle="Platform-wide configuration">
      <Head title="Admin · Settings" />

      <div className="space-y-8 max-w-2xl">
        {SETTING_GROUPS.map((group) => (
          <div key={group.label} className="rounded-2xl border border-white/[0.07] bg-white/[0.02] p-6">
            <h2 className="mb-5 text-sm font-bold uppercase tracking-wider text-slate-500">{group.label}</h2>
            <div className="space-y-5">
              {group.items.map((item) => (
                <div key={item.key} className="flex items-start justify-between gap-6">
                  <div>
                    <p className="text-sm font-medium text-white">{item.label}</p>
                    <p className="mt-0.5 text-xs text-slate-500">{item.description}</p>
                  </div>
                  {item.type === 'toggle' ? (
                    <div className="flex h-6 w-11 flex-shrink-0 cursor-not-allowed items-center rounded-full border border-white/10 bg-white/[0.06] px-1 opacity-60">
                      <span className="h-4 w-4 rounded-full bg-slate-600" />
                    </div>
                  ) : item.type === 'textarea' ? (
                    <textarea
                      defaultValue={settings[item.key] ?? ''}
                      rows={2}
                      readOnly
                      className="w-64 cursor-not-allowed resize-none rounded-xl border border-white/10 bg-white/[0.04] px-3 py-2 text-sm text-white/60"
                    />
                  ) : (
                    <input
                      type="text"
                      defaultValue={settings[item.key] ?? ''}
                      readOnly
                      className="w-64 cursor-not-allowed rounded-xl border border-white/10 bg-white/[0.04] px-3 py-2 text-sm text-white/60"
                    />
                  )}
                </div>
              ))}
            </div>
          </div>
        ))}
        <p className="text-xs text-slate-600">Full settings management via config files and environment variables.</p>
      </div>
    </AdminLayout>
  )
}
