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

export function ReactionRoles() {
  const { reactionRoles, reactionDraft, setReactionDraft, saveReactionRole } = useApp();

  return (
    <SectionCard title="Reaction Roles" subtitle="Sets anzeigen und neue Zuordnungen anlegen">
      <div className="grid gap-5 xl:grid-cols-[1fr_420px]">
        <div>
          <h3 className="mb-3 text-base font-semibold">Bestehende Sets ({reactionRoles.length})</h3>
          <div className="space-y-3">
            {reactionRoles.length ? reactionRoles.map((set, i) => (
              <Card key={set.id || i} className="border border-default-100 bg-default-50/20">
                <CardContent className="flex items-center gap-3 p-4">
                  <div className="flex size-10 items-center justify-center rounded-xl bg-primary-500/10 text-primary-400">
                    <Tag size={18} />
                  </div>
                  <div className="min-w-0 flex-1">
                    <div className="font-semibold text-small truncate">{set.title || 'Reaction Role'}</div>
                    <div className="text-tiny text-default-400 truncate">Channel: {set.channelId || '-'}</div>
                  </div>
                  <Chip size="sm" variant="flat">{(set.entries?.length || 0)} Eintr�ge</Chip>
                </CardContent>
              </Card>
            )) : (
              <div className="flex flex-col items-center gap-2 py-8 text-center text-small text-default-400">
                <Tag size={24} />
                Keine Sets
              </div>
            )}
          </div>
        </div>

        <Card className="border border-default-100 bg-default-50/20">
          <CardHeader className="px-5 pt-5 pb-0">
            <h3 className="text-base font-semibold">Neues Set</h3>
          </CardHeader>
          <CardContent className="flex flex-col gap-4 p-5">
            <TextField>
              <Label>Titel</Label>
              <Input
                placeholder="Rollenauswahl"
                value={reactionDraft.title}
                onChange={(e) => setReactionDraft((s) => ({ ...s, title: e.target.value }))}
              />
            </TextField>

            <TextField>
              <Label>Channel ID</Label>
              <Input
                placeholder="Channel f�r die Nachricht"
                value={reactionDraft.channelId}
                onChange={(e) => setReactionDraft((s) => ({ ...s, channelId: e.target.value }))}
              />
            </TextField>

            <div>
              <label className="block text-small font-medium mb-1">Eintr�ge</label>
              <TextArea
                placeholder="Emoji | Role ID | Label&#10;:emoji: | 123456789 | Rolle 1&#10;:wave: | 987654321 | Rolle 2"
                minRows={6}
                value={reactionDraft.entries}
                onChange={(e) => setReactionDraft((s) => ({ ...s, entries: e.target.value }))}
              />
              <p className="mt-1 text-tiny text-default-400">
                Pro Zeile: Emoji | Role ID | Label (optional) | Beschreibung (optional)
              </p>
            </div>

            <Button color="primary" startContent={<Save size={16} />} onPress={saveReactionRole}>
              Reaction Role speichern
            </Button>
          </CardContent>
        </Card>
      </div>
    </SectionCard>
  );
}