import { Card, CardContent, Avatar, Button } from '@heroui/react';
import { useApp } from '../context/AppContext';
import { guildIconUrl } from '../utils/formatters';

export function GuildSelect() {
  const { guilds, setCurrentGuildId } = useApp();

  return (
    <div className="mx-auto flex min-h-screen max-w-6xl flex-col items-center justify-center px-6 py-12">
      <div className="mb-8 text-center">
        <div className="mx-auto mb-4 flex size-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-400 to-primary-600 text-2xl font-black text-white shadow-lg shadow-primary-500/25">
          P
        </div>
        <h1 className="text-3xl font-bold tracking-tight">Wähle einen Server</h1>
        <p className="mt-2 text-default-500">Wähle einen Discord-Server aus, um das Dashboard zu öffnen.</p>
      </div>

      <div className="grid w-full gap-4 sm:grid-cols-2 xl:grid-cols-3">
        {guilds.map((guild) => (
          <Card
            key={guild.id}
            isPressable
            className="border border-default-100 bg-default-50/20 transition-all hover:border-primary-300 hover:shadow-lg hover:shadow-primary-500/5"
            onPress={() => setCurrentGuildId(guild.id)}
          >
            <CardContent className="flex flex-row items-center gap-4 p-5">
              <Avatar src={guildIconUrl(guild)} name={guild.name} radius="lg" size="lg" />
              <div className="min-w-0">
                <div className="truncate text-lg font-semibold">{guild.name}</div>
                <div className="mt-0.5 text-small text-default-400">ID: {guild.id}</div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}
