import { Settings as SettingsIcon, Bell, Shield, Palette, Globe, Database } from 'lucide-react';
import { AppLayout } from '@/components/layout/AppLayout';
import { cn } from '@/lib/utils';

const settingsSections = [
  {
    icon: Bell,
    title: 'Notifications',
    description: 'Configure email and push notification preferences',
    status: 'Enabled',
  },
  {
    icon: Shield,
    title: 'Security',
    description: 'Two-factor authentication and session management',
    status: '2FA Active',
  },
  {
    icon: Palette,
    title: 'Appearance',
    description: 'Theme, colors, and display settings',
    status: 'Light Mode',
  },
  {
    icon: Globe,
    title: 'Localization',
    description: 'Language, timezone, and currency settings',
    status: 'INR / IST',
  },
  {
    icon: Database,
    title: 'Data & Export',
    description: 'Export data and manage backups',
    status: 'Last backup: Today',
  },
];

export default function Settings() {
  return (
    <AppLayout 
      title="Settings" 
      description="Configure platform settings and preferences."
    >
      {/* Settings Header Card */}
      <div className="neu-card p-6 mb-8">
        <div className="flex items-center gap-4">
          <div className="h-16 w-16 rounded-2xl bg-primary shadow-neu-inset flex items-center justify-center">
            <SettingsIcon className="h-8 w-8 text-primary-foreground" />
          </div>
          <div>
            <h2 className="text-xl font-bold text-foreground">Platform Configuration</h2>
            <p className="text-muted-foreground">Manage your Eventify backoffice settings</p>
          </div>
        </div>
      </div>

      {/* Settings Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {settingsSections.map((section) => (
          <button
            key={section.title}
            className="neu-card neu-card-hover p-6 text-left group"
          >
            <div className="flex items-start gap-4">
              <div className="h-12 w-12 rounded-xl bg-secondary shadow-neu-inset-sm flex items-center justify-center group-hover:shadow-neu-inset transition-shadow">
                <section.icon className="h-6 w-6 text-accent" />
              </div>
              <div className="flex-1">
                <div className="flex items-center justify-between">
                  <h3 className="font-semibold text-foreground">{section.title}</h3>
                  <span className="text-xs font-medium px-2 py-1 rounded-full bg-success/10 text-success">
                    {section.status}
                  </span>
                </div>
                <p className="text-sm text-muted-foreground mt-1">{section.description}</p>
              </div>
            </div>
          </button>
        ))}
      </div>

      {/* API Settings */}
      <div className="neu-card p-6 mt-8">
        <h3 className="text-lg font-bold text-foreground mb-4">API Configuration</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-muted-foreground mb-2">
              API Base URL
            </label>
            <input
              type="text"
              value="https://api.eventify.in/v1"
              readOnly
              className="w-full h-10 px-4 rounded-xl text-sm bg-secondary shadow-neu-inset focus:outline-none text-foreground"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-muted-foreground mb-2">
              Webhook URL
            </label>
            <input
              type="text"
              value="https://api.eventify.in/webhooks"
              readOnly
              className="w-full h-10 px-4 rounded-xl text-sm bg-secondary shadow-neu-inset focus:outline-none text-foreground"
            />
          </div>
        </div>
      </div>
    </AppLayout>
  );
}