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

export function SupportLogin() {
  const { supportLogin, setSupportLogin, saveSupportLogin } = useApp();

  return (
    <SectionCard title="Support Login" subtitle="Login-Panel f�r Supporter konfigurieren">
      <div className="grid gap-5 xl:grid-cols-[1fr_400px]">
        <Card className="border border-default-100 bg-default-50/20">
          <CardHeader className="px-5 pt-5 pb-0">
            <h3 className="text-base font-semibold">Panel-Konfiguration</h3>
          </CardHeader>
          <CardContent className="flex flex-col gap-4 p-5">
            <Switch
              isSelected={supportLogin?.config?.autoRefresh !== false}
              onChange={(v) => setSupportLogin((s) => s ? { ...s, config: { ...s.config, autoRefresh: v } } : s)}
            >
              Auto-Refresh aktiv
            </Switch>

            <TextField>
              <Label>Panel Channel ID</Label>
              <Input
                placeholder="Channel ID eingeben"
                value={supportLogin?.config?.panelChannelId || ''}
                onChange={(e) => setSupportLogin((s) => s ? { ...s, config: { ...s.config, panelChannelId: e.target.value } } : s)}
              />
            </TextField>

            <TextField>
              <Label>Titel</Label>
              <Input
                value={supportLogin?.config?.title || 'Support Login'}
                onChange={(e) => setSupportLogin((s) => s ? { ...s, config: { ...s.config, title: e.target.value } } : s)}
              />
            </TextField>

            <TextField>
              <Label>Beschreibung</Label>
              <TextArea
                value={supportLogin?.config?.description || ''}
                onChange={(e) => setSupportLogin((s) => s ? { ...s, config: { ...s.config, description: e.target.value } } : s)}
              />
            </TextField>

            <TextField>
              <Label>Login Button Label</Label>
              <Input
                value={supportLogin?.config?.loginLabel || 'Ich bin jetzt im Support'}
                onChange={(e) => setSupportLogin((s) => s ? { ...s, config: { ...s.config, loginLabel: e.target.value } } : s)}
              />
            </TextField>

            <TextField>
              <Label>Logout Button Label</Label>
              <Input
                value={supportLogin?.config?.logoutLabel || 'Ich bin nicht mehr im Support'}
                onChange={(e) => setSupportLogin((s) => s ? { ...s, config: { ...s.config, logoutLabel: e.target.value } } : s)}
              />
            </TextField>

            <Separator />

            <div className="flex gap-2">
              <Button color="primary" startContent={<Save size={16} />} onPress={saveSupportLogin}>
                Speichern & Panel senden
              </Button>
              <Button variant="flat" startContent={<Send size={16} />}>
                Panel manuell senden
              </Button>
            </div>
          </CardContent>
        </Card>

        <div className="space-y-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">Live Vorschau</h3>
            </CardHeader>
            <CardContent className="p-5">
              <div className="rounded-xl border border-default-100 bg-gradient-to-b from-default-50/40 to-background p-4">
                <div className="flex items-center gap-3 mb-3">
                  <div className="flex size-10 items-center justify-center rounded-xl bg-primary-500/10 text-primary-400">
                    <LogIn size={20} />
                  </div>
                  <div>
                    <div className="font-semibold">{supportLogin?.config?.title || 'Support Login'}</div>
                    <div className="text-tiny text-default-400">{supportLogin?.config?.description || 'Melde dich als Support an/ab.'}</div>
                  </div>
                </div>
                <div className="flex gap-2">
                  <Button size="sm" color="primary" variant="flat">{supportLogin?.config?.loginLabel || 'Login'}</Button>
                  <Button size="sm" variant="flat">{supportLogin?.config?.logoutLabel || 'Logout'}</Button>
                </div>
              </div>
            </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">Aktive Supporter</h3>
            </CardHeader>
            <CardContent className="flex flex-col gap-2 p-5">
              {supportLogin?.status?.active?.length ? supportLogin.status.active.map((s, i) => (
                <div key={i} className="flex items-center gap-3 rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
                  <div className="size-2 rounded-full bg-success-400" />
                  <Avatar name={s.username?.[0]} size="sm" className="size-6" />
                  <span className="font-medium">{s.username || s.userId}</span>
                  <Chip size="sm" variant="flat" color="success" className="ml-auto">Online</Chip>
                </div>
              )) : (
                <div className="flex flex-col items-center gap-2 py-4 text-center text-tiny text-default-400">
                  <UserRound size={20} />
                  Keine aktiven Supporter
                </div>
              )}
              <p className="mt-2 text-tiny text-default-400">
                Support Role ID: {supportLogin?.supportRoleId || 'Nicht gesetzt'}
              </p>
            </CardContent>
          </Card>
        </div>
      </div>
    </SectionCard>
  );
}