import { Card, CardContent, CardHeader, Input, TextArea, Button, Chip, Switch, Separator, TextField, Label } from '@heroui/react';
import { Shield, Filter, Link, Ban, AlertTriangle, Save } from 'lucide-react';
import { useApp } from '../context/AppContext';
import { SectionCard } from '../components/shared/SectionCard';

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

  return (
    <SectionCard title="Automod" subtitle="Filter, Logging und Sicherheit">
      <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">Filter konfigurieren</h3>
          </CardHeader>
          <CardContent className="flex flex-col gap-4 p-5">
            <Switch isSelected={settings.automodEnabled !== false} onChange={(v) => setSettings((s) => ({ ...s, automodEnabled: v }))}>
              <div className="flex items-center gap-2">
                <Shield size={16} /> Automod aktiv
              </div>
            </Switch>

            <div className="grid grid-cols-2 gap-3">
              <Switch isSelected={settings.automodConfig?.badWordFilter ?? false} onChange={(v) => setSettings((s) => ({ ...s, automodConfig: { ...(s.automodConfig || {}), badWordFilter: v } }))}>
                <div className="flex items-center gap-2"><Ban size={14} /> Bad-Word-Filter</div>
              </Switch>
              <Switch isSelected={settings.automodConfig?.linkFilter ?? false} onChange={(v) => setSettings((s) => ({ ...s, automodConfig: { ...(s.automodConfig || {}), linkFilter: v } }))}>
                <div className="flex items-center gap-2"><Link size={14} /> Link-Filter</div>
              </Switch>
              <Switch isSelected={settings.automodConfig?.spamFilter ?? false} onChange={(v) => setSettings((s) => ({ ...s, automodConfig: { ...(s.automodConfig || {}), spamFilter: v } }))}>
                <div className="flex items-center gap-2"><AlertTriangle size={14} /> Spam-Filter</div>
              </Switch>
            </div>

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

            <TextField>
              <Label>Whitelist Links (Komma-getrennt)</Label>
              <TextArea
                value={(settings.automodConfig?.linkWhitelist || []).join(', ')}
                onChange={(e) => setSettings((s) => ({ ...s, automodConfig: { ...(s.automodConfig || {}), linkWhitelist: e.target.value.split(',').map((x) => x.trim()).filter(Boolean) } }))}
                placeholder="trusted-domain.com, another-safe.site"
              />
            </TextField>

            <Separator />

            <Button color="primary" startContent={<Save size={16} />} onPress={() => saveSettingsPayload({ automodEnabled: settings.automodEnabled !== false, automodConfig: settings.automodConfig || {} }, 'Automod gespeichert')}>
              Speichern
            </Button>
          </CardContent>
        </Card>

        <div className="flex flex-col gap-4">
          <Card className="border border-default-100 bg-default-50/20">
            <CardHeader className="px-5 pt-5 pb-0">
              <h3 className="text-base font-semibold">Info</h3>
            </CardHeader>
            <CardContent className="flex flex-col gap-3 p-5">
              <div className="rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
                <p className="text-default-500">Die Automod-Einstellungen werden nach dem Speichern sofort aktiv.</p>
              </div>
              <div className="rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
                <p className="text-default-500">Bad-Word-Filter entfernt Nachrichten mit unerw�nschten Begriffen.</p>
              </div>
              <div className="rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
                <p className="text-default-500">Link-Filter blockiert bekannte sch�dliche Domains und nicht-whitelistete Links.</p>
              </div>
              <div className="rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
                <p className="text-default-500">Spam-Filter erkennt und unterdr�ckt Mehrfachnachrichten in kurzer Zeit.</p>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </SectionCard>
  );
}