import { Card, CardContent, CardDescription, CardHeader, CardTitle, Input, TextArea, Button, Switch, Separator, TextField, Label } from '@heroui/react';
import { Sparkles, Save } from 'lucide-react';
import { useApp } from '../context/AppContext';
import { SectionCard } from '../components/shared/SectionCard';

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

  return (
    <SectionCard title="Willkommen" subtitle="Welcome-Embeds und Join-Nachrichten">
      <div className="grid gap-5 xl:grid-cols-2">
        <Card>
          <CardHeader>
            <div>
              <CardTitle>Welcome konfigurieren</CardTitle>
              <CardDescription>Standardfelder fuer das Welcome-Embed.</CardDescription>
            </div>
          </CardHeader>
          <CardContent className="flex flex-col gap-4">
            <Switch isSelected={settings.welcomeConfig?.enabled !== false} onChange={(v) => setSettings((s) => ({ ...s, welcomeConfig: { ...(s.welcomeConfig || {}), enabled: v } }))}>
              <div className="flex items-center gap-2"><Sparkles size={16} /> Welcome aktiv</div>
            </Switch>

            <TextField>
              <Label>Channel ID</Label>
              <Input
                placeholder="Channel ID fuer Willkommensnachrichten"
                value={settings.welcomeConfig?.channelId || settings.welcomeChannelId || ''}
                onChange={(e) => setSettings((s) => ({ ...s, welcomeConfig: { ...(s.welcomeConfig || {}), channelId: e.target.value } }))}
              />
            </TextField>

            <TextField>
              <Label>Titel</Label>
              <Input
                placeholder="Willkommen {user}!"
                value={settings.welcomeConfig?.embedTitle || ''}
                onChange={(e) => setSettings((s) => ({ ...s, welcomeConfig: { ...(s.welcomeConfig || {}), embedTitle: e.target.value } }))}
              />
            </TextField>

            <TextField>
              <Label>Beschreibung</Label>
              <TextArea
                placeholder="Beschreibung des Embeds"
                value={settings.welcomeConfig?.embedDescription || ''}
                onChange={(e) => setSettings((s) => ({ ...s, welcomeConfig: { ...(s.welcomeConfig || {}), embedDescription: e.target.value } }))}
              />
            </TextField>

            <TextField>
              <Label>Footer</Label>
              <Input
                placeholder={new Date().getFullYear().toString()}
                value={settings.welcomeConfig?.embedFooter || ''}
                onChange={(e) => setSettings((s) => ({ ...s, welcomeConfig: { ...(s.welcomeConfig || {}), embedFooter: e.target.value } }))}
              />
            </TextField>

            <Separator />

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

        <Card>
          <CardHeader>
            <div>
              <CardTitle>Live Vorschau</CardTitle>
              <CardDescription>Normale HeroUI-Karten ohne zusaetzliche Huelle.</CardDescription>
            </div>
          </CardHeader>
          <CardContent className="flex flex-col gap-4">
            <Card>
              <CardHeader>
                <div className="flex items-center gap-2">
                  <Sparkles size={16} />
                  <CardTitle>{settings.welcomeConfig?.embedTitle || 'Willkommen!'}</CardTitle>
                </div>
              </CardHeader>
              <CardContent>
                <p>{settings.welcomeConfig?.embedDescription || 'Willkommen auf dem Server!'}</p>
                {settings.welcomeConfig?.embedFooter && (
                  <p className="text-small text-default-500">{settings.welcomeConfig.embedFooter}</p>
                )}
              </CardContent>
            </Card>

            <p className="text-small text-default-500">
              Nutze {'{user}'} fuer den Benutzernamen und {'{server}'} fuer den Servernamen.
            </p>
          </CardContent>
        </Card>
      </div>
    </SectionCard>
  );
}
