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

export function Birthday() {
  const { birthday, setBirthday, saveBirthday } = useApp();

  return (
    <SectionCard title="Birthday" subtitle="Geburtstags-Feature und gespeicherte Eintr�ge">
      <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">Konfiguration</h3>
          </CardHeader>
          <CardContent className="flex flex-col gap-4 p-5">
            <Switch isSelected={birthday.config?.enabled !== false} onChange={(v) => setBirthday((s) => ({ ...s, config: { ...s.config, enabled: v } }))}>
              <div className="flex items-center gap-2"><Cake size={16} /> Birthday aktiv</div>
            </Switch>

            <TextField>
              <Label>Channel ID</Label>
              <Input
                placeholder="Channel f�r Geburtstagsnachrichten"
                value={birthday.config?.channelId || ''}
                onChange={(e) => setBirthday((s) => ({ ...s, config: { ...s.config, channelId: e.target.value } }))}
              />
            </TextField>

            <TextField>
              <Label>Sendezeit (Stunde)</Label>
              <Input
                type="number"
                min="0"
                max="23"
                value={String(birthday.config?.sendHour ?? 9)}
                onChange={(e) => setBirthday((s) => ({ ...s, config: { ...s.config, sendHour: Number(e.target.value || 0) } }))}
                startContent={<Clock size={16} className="text-default-400" />}
              />
            </TextField>

            <TextField>
              <Label>Template</Label>
              <TextArea
                placeholder="Alles Gute zum Geburtstag, {user}!"
                value={birthday.config?.messageTemplate || ''}
                onChange={(e) => setBirthday((s) => ({ ...s, config: { ...s.config, messageTemplate: e.target.value } }))}
              />
            </TextField>

            <Separator />

            <Button color="primary" startContent={<Save size={16} />} onPress={saveBirthday}>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">Gespeicherte Geburtstage ({(birthday.birthdays || []).length})</h3>
          </CardHeader>
          <CardContent className="flex flex-col gap-2 p-5">
            {(birthday.birthdays || []).length ? (birthday.birthdays || []).map((entry, i) => (
              <div key={i} className="flex items-center justify-between rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
                <div className="flex items-center gap-2">
                  <Cake size={14} className="text-primary-400" />
                  <span className="font-medium">{entry.userId}</span>
                </div>
                <Chip size="sm" variant="flat" color="primary">
                  {String(entry.birthDate || '').replace(/^--/, '')}
                </Chip>
              </div>
            )) : (
              <div className="flex flex-col items-center gap-2 py-4 text-center text-tiny text-default-400">
                <CalendarDays size={20} />
                Keine Eintr�ge
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </SectionCard>
  );
}
