import { Card, CardContent, CardHeader, Input, Button, Switch, Separator, TextField, Label } from '@heroui/react';
import { Settings, Save, Logs, Bell, Shield, Edit3, Trash2 } from 'lucide-react';
import { useApp } from '../context/AppContext';
import { SectionCard } from '../components/shared/SectionCard';

export function SettingsPage() {
  const { settings, setSettings, saveSettingsPayload } = useApp();

  return (
    <SectionCard title="Einstellungen & Logging" subtitle="Globale Guild-Settings und Log-Kategorien">
      <div className="grid gap-5 xl:grid-cols-2">
        <Card className="border border-default-100 bg-default-50/20">
          <CardHeader className="px-5 pt-5 pb-0">
            <h3 className="text-base font-semibold">Allgemein</h3>
          </CardHeader>
          <CardContent className="flex flex-col gap-4 p-5">
            <TextField>
              <Label>Welcome Channel ID</Label>
              <Input
                placeholder="Channel ID"
                value={settings.welcomeChannelId || ''}
                onChange={(e) => setSettings((s) => ({ ...s, welcomeChannelId: e.target.value }))}
              />
            </TextField>

            <TextField>
              <Label>Log Channel ID</Label>
              <Input
                placeholder="Channel ID"
                value={settings.logChannelId || ''}
                onChange={(e) => setSettings((s) => ({ ...s, logChannelId: e.target.value }))}
              />
            </TextField>

            <TextField>
              <Label>Support Role ID</Label>
              <Input
                placeholder="Role ID"
                value={settings.supportRoleId || ''}
                onChange={(e) => setSettings((s) => ({ ...s, supportRoleId: e.target.value }))}
              />
            </TextField>

            <Separator />

            <Button color="primary" startContent={<Save size={16} />} onPress={() => saveSettingsPayload(settings, 'Settings gespeichert')}>
              Speichern
            </Button>
          </CardContent>
        </Card>

        <Card className="border border-default-100 bg-default-50/20">
          <CardHeader className="px-5 pt-5 pb-0">
            <h3 className="text-base font-semibold">Logging Kategorien</h3>
          </CardHeader>
          <CardContent className="flex flex-col gap-4 p-5">
            <Switch isSelected={settings.loggingConfig?.categories?.joinLeave !== false} onChange={(v) => setSettings((s) => ({ ...s, loggingConfig: { ...(s.loggingConfig || {}), categories: { ...(s.loggingConfig?.categories || {}), joinLeave: v } } }))}>
              <div className="flex items-center gap-2"><Logs size={14} /> Join / Leave loggen</div>
            </Switch>

            <Switch isSelected={settings.loggingConfig?.categories?.messageEdit !== false} onChange={(v) => setSettings((s) => ({ ...s, loggingConfig: { ...(s.loggingConfig || {}), categories: { ...(s.loggingConfig?.categories || {}), messageEdit: v } } }))}>
              <div className="flex items-center gap-2"><Edit3 size={14} /> Message Edit loggen</div>
            </Switch>

            <Switch isSelected={settings.loggingConfig?.categories?.messageDelete !== false} onChange={(v) => setSettings((s) => ({ ...s, loggingConfig: { ...(s.loggingConfig || {}), categories: { ...(s.loggingConfig?.categories || {}), messageDelete: v } } }))}>
              <div className="flex items-center gap-2"><Trash2 size={14} /> Message Delete loggen</div>
            </Switch>

            <Switch isSelected={settings.loggingConfig?.categories?.automodActions !== false} onChange={(v) => setSettings((s) => ({ ...s, loggingConfig: { ...(s.loggingConfig || {}), categories: { ...(s.loggingConfig?.categories || {}), automodActions: v } } }))}>
              <div className="flex items-center gap-2"><Shield size={14} /> Automod Actions loggen</div>
            </Switch>

            <Switch isSelected={settings.loggingConfig?.categories?.ticketActions !== false} onChange={(v) => setSettings((s) => ({ ...s, loggingConfig: { ...(s.loggingConfig || {}), categories: { ...(s.loggingConfig?.categories || {}), ticketActions: v } } }))}>
              <div className="flex items-center gap-2"><Bell size={14} /> Ticket Actions loggen</div>
            </Switch>

            <Separator />

            <Button color="primary" startContent={<Save size={16} />} onPress={() => saveSettingsPayload(settings, 'Settings gespeichert')}>
              Speichern
            </Button>
          </CardContent>
        </Card>
      </div>
    </SectionCard>
  );
}