'use client';

import { Avatar } from '@/components/ui/Avatar';

export function AvatarSection() {
  const sampleUsers = [
    {
      name: 'Alain Dubois',
      email: 'alain.dubois@example.com',
      avatar:
        'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face',
    },
    {
      name: 'Sophie Martin',
      email: 'sophie.martin@example.com',
      avatar: null,
    },
    {
      name: 'Pierre Durand',
      email: 'pierre.durand@example.com',
      avatar:
        'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face',
    },
    {
      name: 'Marie Leclerc',
      email: 'marie.leclerc@example.com',
      avatar: null,
    },
    {
      name: 'Thomas Bernard',
      email: 'thomas.bernard@gravatar.com',
      avatar:
        'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200&d=identicon&r=g',
    },
  ];

  return (
    <section id="avatar-section" className="space-y-8">
      <div>
        <h2 className="text-3xl font-mono font-bold text-[var(--foreground)] mb-4">
          Avatar
        </h2>
        <p className="text-[var(--muted-foreground)] mb-6">
          Composant d&apos;avatar avec support automatique Gravatar, URLs
          personnalisées et fallback intelligent.
        </p>
      </div>

      {/* Exemples de base */}
      <div className="space-y-6">
        <h3 className="text-xl font-mono font-semibold text-[var(--foreground)]">
          Tailles disponibles
        </h3>

        <div className="flex flex-wrap items-center gap-4">
          {[24, 32, 40, 48, 64, 80, 96].map((size) => (
            <div key={size} className="text-center">
              <Avatar
                name="Test User"
                email="test@example.com"
                size={size}
                className="mb-2"
              />
              <div className="text-xs text-[var(--muted-foreground)]">
                {size}px
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Différents types d'avatar */}
      <div className="space-y-6">
        <h3 className="text-xl font-mono font-semibold text-[var(--foreground)]">
          Types d&apos;avatar
        </h3>

        <div className="bg-[var(--card)] rounded-xl p-6 border border-[var(--border)]">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {sampleUsers.map((user, index) => (
              <div
                key={index}
                className="flex flex-col items-center space-y-3 p-4 bg-[var(--input)] rounded-lg border border-[var(--border)]"
              >
                <Avatar
                  url={user.avatar}
                  email={user.email}
                  name={user.name}
                  size={60}
                  className="mb-2"
                />

                <div className="text-center">
                  <div className="font-medium text-[var(--foreground)] text-sm">
                    {user.name}
                  </div>
                  <div className="text-xs text-[var(--muted-foreground)]">
                    {user.email}
                  </div>

                  <div className="mt-2 text-xs">
                    {user.avatar ? (
                      user.avatar.includes('gravatar.com') ? (
                        <span className="px-2 py-1 bg-[var(--primary)]/20 text-[var(--primary)] rounded-full">
                          🔗 Gravatar
                        </span>
                      ) : (
                        <span className="px-2 py-1 bg-[var(--accent)]/20 text-[var(--accent)] rounded-full">
                          🖼️ Custom URL
                        </span>
                      )
                    ) : (
                      <span className="px-2 py-1 bg-[var(--muted)]/20 text-[var(--muted-foreground)] rounded-full">
                        👤 Fallback
                      </span>
                    )}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Utilisation dans différents contextes */}
      <div className="space-y-6">
        <h3 className="text-xl font-mono font-semibold text-[var(--foreground)]">
          Utilisation dans différents contextes
        </h3>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Liste d'utilisateurs */}
          <div className="bg-[var(--card)] rounded-xl p-6 border border-[var(--border)]">
            <h4 className="font-medium text-[var(--foreground)] mb-4">
              Liste d&apos;utilisateurs
            </h4>

            <div className="space-y-3">
              {sampleUsers.slice(0, 3).map((user, index) => (
                <div
                  key={index}
                  className="flex items-center gap-3 p-2 hover:bg-[var(--input)] rounded-md transition-colors"
                >
                  <Avatar
                    url={user.avatar}
                    email={user.email}
                    name={user.name}
                    size={32}
                  />
                  <div className="flex-1">
                    <div className="font-medium text-[var(--foreground)] text-sm">
                      {user.name}
                    </div>
                    <div className="text-xs text-[var(--muted-foreground)]">
                      {user.email}
                    </div>
                  </div>
                  <div className="text-xs text-[var(--muted-foreground)]">
                    {user.avatar ? 'Connecté' : 'Absent'}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Notification avec avatar */}
          <div className="bg-[var(--card)] rounded-xl p-6 border border-[var(--border)]">
            <h4 className="font-medium text-[var(--foreground)] mb-4">
              Notifications
            </h4>

            <div className="space-y-4">
              <div className="flex items-start gap-3 p-3 bg-[var(--primary)]/10 rounded-lg border border-[var(--primary)]/20">
                <Avatar
                  url={sampleUsers[0].avatar}
                  email={sampleUsers[0].email}
                  name={sampleUsers[0].name}
                  size={40}
                />
                <div className="flex-1">
                  <div className="font-medium text-[var(--foreground)] text-sm">
                    {sampleUsers[0].name} a terminé une tâche
                  </div>
                  <div className="text-xs text-[var(--muted-foreground)] mt-1">
                    Il y a 5 minutes
                  </div>
                </div>
              </div>

              <div className="flex items-start gap-3 p-3 bg-[var(--accent)]/10 rounded-lg border border-[var(--accent)]/20">
                <Avatar
                  url={sampleUsers[1].avatar}
                  email={sampleUsers[1].email}
                  name={sampleUsers[1].name}
                  size={40}
                />
                <div className="flex-1">
                  <div className="font-medium text-[var(--foreground)] text-sm">
                    {sampleUsers[1].name} vous a envoyé un message
                  </div>
                  <div className="text-xs text-[var(--muted-foreground)] mt-1">
                    Il y a 12 heures
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Code exemple */}
      <div className="space-y-4">
        <h3 className="text-xl font-mono font-semibold text-[var(--foreground)]">
          Utilisation
        </h3>

        <div className="bg-[var(--card)] rounded-xl p-6 border border-[var(--border)] font-mono text-sm">
          <pre className="text-[var(--foreground)] overflow-x-auto">
            {`// Avatar avec URL personnalisée
<Avatar 
  url="https://example.com/photo.jpg" 
  email="user@example.com"
  name="John Doe"
  size={64}
/>

// Avatar Gravatar automatique
<Avatar 
  email="user@gravatar.com"
  name="Jane Doe"
  size={48}
/>

// Avatar avec fallback
<Avatar 
  email="unknown@example.com"
  name="Unknown User"
  size={32}
/>

// Avatar avec icône par défaut seulement
<Avatar 
  name="Guest"
  size={40}
/>`}
          </pre>
        </div>
      </div>

      {/* Props disponibles */}
      <div className="space-y-4">
        <h3 className="text-xl font-mono font-semibold text-[var(--foreground)]">
          Props
        </h3>

        <div className="bg-[var(--card)] rounded-xl p-6 border border-[var(--border)]">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 font-mono text-sm">
            <div>
              <div className="font-semibold text-[var(--primary)] mb-2">
                Props principales
              </div>
              <div className="space-y-1 text-[var(--foreground)]">
                <div>
                  <span className="text-[var(--accent)]">url?</span> - URL de
                  l&apos;avatar
                </div>
                <div>
                  <span className="text-[var(--accent)]">email?</span> - Email
                  pour Gravatar
                </div>
                <div>
                  <span className="text-[var(--accent)]">name?</span> - Nom
                  d&apos;affichage
                </div>
                <div>
                  <span className="text-[var(--accent)]">size?</span> - Taille
                  en pixels (défaut: 40)
                </div>
                <div>
                  <span className="text-[var(--accent)]">className?</span> -
                  Classes CSS supplémentaires
                </div>
              </div>
            </div>

            <div>
              <div className="font-semibold text-[var(--success)] mb-2">
                Comportement
              </div>
              <div className="space-y-1 text-[var(--foreground)]">
                <div>• Support automatique Gravatar</div>
                <div>• Validation URLs HTTPS</div>
                <div>• Détection intelligente du type</div>
                <div>• Fallback avec icône User</div>
                <div>• Cache et optimisations</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
