'use client';

import { useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Label, Button, Switch, useToast } from '@the-order/ui';

export default function SettingsPage(): JSX.Element {
  const { success } = useToast();
  const [settings, setSettings] = useState({
    siteName: 'The Order',
    maintenanceMode: false,
    allowRegistrations: true,
    requireEmailVerification: true,
    maxApplicationsPerDay: 10,
    apiRateLimit: 100,
  });

  const handleSave = (): void => {
    // In production, this would save to an API
    success('Settings saved successfully', 'Your changes have been applied.');
  };

  return (
    <div className="min-h-screen bg-gray-50 py-12">
      <div className="container mx-auto px-4 max-w-4xl">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">System Settings</h1>
          <p className="text-gray-600">Configure system-wide settings and preferences</p>
        </div>

        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>General Settings</CardTitle>
              <CardDescription>Basic system configuration</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <Label htmlFor="siteName">Site Name</Label>
                <Input
                  id="siteName"
                  value={settings.siteName}
                  onChange={(e) => setSettings({ ...settings, siteName: e.target.value })}
                  className="mt-2"
                />
              </div>
              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="maintenanceMode">Maintenance Mode</Label>
                  <p className="text-sm text-gray-600">Enable to put the site in maintenance mode</p>
                </div>
                <Switch
                  id="maintenanceMode"
                  checked={settings.maintenanceMode}
                  onChange={(e) => setSettings({ ...settings, maintenanceMode: e.target.checked })}
                />
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Application Settings</CardTitle>
              <CardDescription>Configure application submission rules</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="allowRegistrations">Allow New Registrations</Label>
                  <p className="text-sm text-gray-600">Enable or disable new user registrations</p>
                </div>
                <Switch
                  id="allowRegistrations"
                  checked={settings.allowRegistrations}
                  onChange={(e) => setSettings({ ...settings, allowRegistrations: e.target.checked })}
                />
              </div>
              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="requireEmailVerification">Require Email Verification</Label>
                  <p className="text-sm text-gray-600">Users must verify their email before applying</p>
                </div>
                <Switch
                  id="requireEmailVerification"
                  checked={settings.requireEmailVerification}
                  onChange={(e) =>
                    setSettings({ ...settings, requireEmailVerification: e.target.checked })
                  }
                />
              </div>
              <div>
                <Label htmlFor="maxApplicationsPerDay">Max Applications Per Day</Label>
                <Input
                  id="maxApplicationsPerDay"
                  type="number"
                  value={settings.maxApplicationsPerDay}
                  onChange={(e) =>
                    setSettings({ ...settings, maxApplicationsPerDay: parseInt(e.target.value) || 0 })
                  }
                  className="mt-2"
                />
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>API Settings</CardTitle>
              <CardDescription>Configure API rate limits and access</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <Label htmlFor="apiRateLimit">API Rate Limit (requests per minute)</Label>
                <Input
                  id="apiRateLimit"
                  type="number"
                  value={settings.apiRateLimit}
                  onChange={(e) =>
                    setSettings({ ...settings, apiRateLimit: parseInt(e.target.value) || 0 })
                  }
                  className="mt-2"
                />
              </div>
            </CardContent>
          </Card>

          <div className="flex justify-end">
            <Button onClick={handleSave}>Save Settings</Button>
          </div>
        </div>
      </div>
    </div>
  );
}

