/* Admin Settings without Partner Management */
'use client';

import { useState, useEffect } from 'react';
import { Switch } from '@/components/ui/switch';

export default function AdminSettings() {
  const [demoActive, setDemoActive] = useState(true);

  useEffect(() => {
    const state = localStorage.getItem('demo_banner_disabled') !== 'true';
    setDemoActive(state);
  }, []);

  const toggleDemo = (checked: boolean) => {
    setDemoActive(checked);
    localStorage.setItem('demo_banner_disabled', (!checked).toString());
    window.dispatchEvent(new Event('storage_demo_changed'));
  };

  return (
    <div className="p-6 max-w-4xl mx-auto text-slate-900 dark:text-white space-y-8">
      {/* Page Header */}
      <div>
        <h1 className="text-3xl font-extrabold tracking-tight">Admin Einstellungen</h1>
        <p className="text-slate-500 dark:text-slate-400 text-sm mt-1">
          Verwalten Sie globale Shopeinstellungen.
        </p>
      </div>

      {/* Allgemeine Einstellungen */}
      <div className="p-5 bg-white dark:bg-slate-900/50 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm space-y-4">
        <h2 className="text-lg font-bold">Allgemeine Einstellungen</h2>
        <div className="flex items-center justify-between p-4 bg-slate-50 dark:bg-white/5 rounded-lg border border-slate-100 dark:border-white/5">
          <div>
            <p className="font-medium text-sm text-slate-900 dark:text-white">Demo-Warnmeldungen</p>
            <p className="text-xs text-slate-500 dark:text-slate-400">Schaltet gelbe Banner ein oder aus.</p>
          </div>
          <Switch checked={demoActive} onCheckedChange={toggleDemo} />
        </div>
      </div>
    </div>
  );
}