'use client';

import { useState } from 'react';
import { Dropdown } from '@/components/ui';
import type { DropdownPlacement, DropdownVariant } from '@/components/ui';

const PLACEMENTS: DropdownPlacement[] = [
  'top-start',
  'top',
  'top-end',
  'left-start',
  'left',
  'left-end',
  'right-start',
  'right',
  'right-end',
  'bottom-start',
  'bottom',
  'bottom-end',
];

const SAMPLE_OPTIONS = [
  { id: '1', label: 'Option 1', icon: '🔹' },
  { id: '2', label: 'Option 2', icon: '🔷' },
  { id: '3', label: 'Option 3', icon: '🔸' },
  { id: '4', label: 'Option 4', icon: '🔶' },
];

const VARIANTS: DropdownVariant[] = [
  'default',
  'secondary',
  'primary',
  'selected',
  'ghost',
];

export function DropdownsSection() {
  const [selectedOption, setSelectedOption] = useState<string>('');

  return (
    <section id="dropdowns" className="space-y-8">
      <div>
        <h2 className="text-3xl font-bold text-[var(--foreground)] mb-2">
          Dropdowns
        </h2>
        <p className="text-[var(--muted-foreground)]">
          Composants dropdown avec portal automatique et positionnement
          intelligent
        </p>
      </div>

      <div className="space-y-8">
        {/* Dropdown basique */}
        <div className="space-y-4">
          <h3 className="text-xl font-semibold text-[var(--foreground)]">
            Dropdown Basique
          </h3>
          <div className="flex gap-4">
            <Dropdown
              trigger="Menu simple"
              variant="secondary"
              content={
                <div className="space-y-1">
                  {SAMPLE_OPTIONS.map((option) => (
                    <button
                      key={option.id}
                      onClick={() => setSelectedOption(option.label)}
                      className="w-full px-3 py-2 text-left text-sm hover:bg-[var(--card-hover)] transition-colors flex items-center gap-2"
                    >
                      <span>{option.icon}</span>
                      <span>{option.label}</span>
                    </button>
                  ))}
                </div>
              }
              placement="bottom-start"
            />

            {selectedOption && (
              <div className="text-sm text-[var(--muted-foreground)]">
                Sélectionné: {selectedOption}
              </div>
            )}
          </div>
        </div>

        {/* Dropdown avec état contrôlé */}
        <div className="space-y-4">
          <h3 className="text-xl font-semibold text-[var(--foreground)]">
            Dropdown avec État Contrôlé
          </h3>
          <div className="flex gap-4">
            <Dropdown
              trigger="Menu contrôlé"
              variant="primary"
              content={
                <div className="space-y-1">
                  <div className="px-3 py-2 text-xs font-mono text-[var(--muted-foreground)] border-b border-[var(--border)]">
                    Menu avec état contrôlé
                  </div>
                  {SAMPLE_OPTIONS.map((option) => (
                    <button
                      key={option.id}
                      onClick={() => setSelectedOption(option.label)}
                      className="w-full px-3 py-2 text-left text-sm hover:bg-[var(--card-hover)] transition-colors flex items-center gap-2"
                    >
                      <span>{option.icon}</span>
                      <span>{option.label}</span>
                    </button>
                  ))}
                </div>
              }
              placement="bottom-start"
            />
          </div>
        </div>

        {/* Dropdown avec différents placements */}
        <div className="space-y-4">
          <h3 className="text-xl font-semibold text-[var(--foreground)]">
            Placements
          </h3>
          <div className="grid grid-cols-3 gap-4">
            {PLACEMENTS.map((placement) => (
              <Dropdown
                key={placement}
                trigger={placement}
                variant="ghost"
                content={
                  <div className="space-y-1 min-w-[120px]">
                    <div className="px-3 py-2 text-xs font-mono text-[var(--muted-foreground)] border-b border-[var(--border)]">
                      {placement}
                    </div>
                    {SAMPLE_OPTIONS.slice(0, 2).map((option) => (
                      <button
                        key={option.id}
                        className="w-full px-3 py-2 text-left text-sm hover:bg-[var(--card-hover)] transition-colors flex items-center gap-2"
                      >
                        <span>{option.icon}</span>
                        <span>{option.label}</span>
                      </button>
                    ))}
                  </div>
                }
                placement={placement}
              />
            ))}
          </div>
        </div>

        {/* Dropdown avec différents variants */}
        <div className="space-y-4">
          <h3 className="text-xl font-semibold text-[var(--foreground)]">
            Variants
          </h3>
          <div className="flex gap-4 flex-wrap">
            {VARIANTS.map((variant) => (
              <Dropdown
                key={variant}
                trigger={variant}
                variant={variant}
                content={
                  <div className="space-y-1 min-w-[120px]">
                    <div className="px-3 py-2 text-xs font-mono text-[var(--muted-foreground)] border-b border-[var(--border)]">
                      {variant}
                    </div>
                    {SAMPLE_OPTIONS.slice(0, 2).map((option) => (
                      <button
                        key={option.id}
                        className="w-full px-3 py-2 text-left text-sm hover:bg-[var(--card-hover)] transition-colors flex items-center gap-2"
                      >
                        <span>{option.icon}</span>
                        <span>{option.label}</span>
                      </button>
                    ))}
                  </div>
                }
                placement="bottom-start"
              />
            ))}
          </div>
        </div>

        {/* Dropdown avec contenu complexe */}
        <div className="space-y-4">
          <h3 className="text-xl font-semibold text-[var(--foreground)]">
            Contenu Complexe
          </h3>
          <div className="flex gap-4">
            <Dropdown
              trigger="Menu complexe"
              variant="selected"
              content={
                <div className="w-80">
                  <div className="px-4 py-3 border-b border-[var(--border)]">
                    <h4 className="font-semibold text-[var(--foreground)]">
                      Paramètres
                    </h4>
                    <p className="text-sm text-[var(--muted-foreground)]">
                      Configurez vos préférences
                    </p>
                  </div>

                  <div className="p-4 space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="text-sm">Notifications</span>
                      <input
                        type="checkbox"
                        className="w-4 h-4"
                        defaultChecked
                      />
                    </div>

                    <div className="flex items-center justify-between">
                      <span className="text-sm">Mode sombre</span>
                      <input type="checkbox" className="w-4 h-4" />
                    </div>

                    <div className="flex items-center justify-between">
                      <span className="text-sm">Langue</span>
                      <select className="text-sm bg-[var(--background)] border border-[var(--border)] rounded px-2 py-1">
                        <option>Français</option>
                        <option>English</option>
                      </select>
                    </div>
                  </div>

                  <div className="px-4 py-3 border-t border-[var(--border)] flex gap-2">
                    <button className="flex-1 px-3 py-2 text-sm bg-[var(--primary)] text-[var(--primary-foreground)] rounded-md hover:bg-[var(--primary)]/90 transition-colors">
                      Sauvegarder
                    </button>
                    <button className="flex-1 px-3 py-2 text-sm bg-[var(--card)] text-[var(--foreground)] border border-[var(--border)] rounded-md hover:bg-[var(--card-hover)] transition-colors">
                      Annuler
                    </button>
                  </div>
                </div>
              }
              placement="bottom-start"
            />
          </div>
        </div>

        {/* Dropdown avec désactivation */}
        <div className="space-y-4">
          <h3 className="text-xl font-semibold text-[var(--foreground)]">
            États
          </h3>
          <div className="flex gap-4">
            <Dropdown
              trigger="Normal"
              variant="secondary"
              content={
                <div className="space-y-1">
                  {SAMPLE_OPTIONS.map((option) => (
                    <button
                      key={option.id}
                      className="w-full px-3 py-2 text-left text-sm hover:bg-[var(--card-hover)] transition-colors flex items-center gap-2"
                    >
                      <span>{option.icon}</span>
                      <span>{option.label}</span>
                    </button>
                  ))}
                </div>
              }
              placement="bottom-start"
            />

            <Dropdown
              trigger="Désactivé"
              variant="secondary"
              disabled={true}
              content={
                <div className="space-y-1">
                  {SAMPLE_OPTIONS.map((option) => (
                    <button
                      key={option.id}
                      className="w-full px-3 py-2 text-left text-sm hover:bg-[var(--card-hover)] transition-colors flex items-center gap-2"
                    >
                      <span>{option.icon}</span>
                      <span>{option.label}</span>
                    </button>
                  ))}
                </div>
              }
              placement="bottom-start"
            />
          </div>
        </div>
      </div>
    </section>
  );
}
