'use client';

import {
  ControlPanel,
  ControlSection,
  ControlGroup,
} from '@/components/ui/ControlPanel';
import { FilterChip } from '@/components/ui/FilterChip';
import { FilterSummary } from '@/components/ui/FilterSummary';
import { ColumnHeader } from '@/components/ui/ColumnHeader';
import { MetricsGrid } from '@/components/ui/MetricsGrid';
import { TagDisplay } from '@/components/ui/TagDisplay';
import {
  CollapsibleSection,
  CollapsibleItem,
} from '@/components/ui/CollapsibleSection';

export function DataDisplaySection() {
  const sampleTags = [
    { id: '1', name: 'refactoring', color: '#3b82f6', usage: 5 },
    { id: '2', name: 'ui', color: '#10b981', usage: 8 },
    { id: '3', name: 'themes', color: '#8b5cf6', usage: 3 },
    { id: '4', name: 'css', color: '#f59e0b', usage: 4 },
    { id: '5', name: 'migration', color: '#ef4444', usage: 2 },
    { id: '6', name: 'nextjs', color: '#06b6d4', usage: 3 },
    { id: '7', name: 'performance', color: '#84cc16', usage: 6 },
    { id: '8', name: 'optimization', color: '#f97316', usage: 2 },
  ];

  const collapsibleItems: CollapsibleItem[] = [
    {
      id: '1',
      title: 'Tâche en attente',
      subtitle: '15 Jan 2024',
      metadata: 'Il y a 2 jours',
      isChecked: false,
      icon: '📋',
      actions: [
        {
          label: 'Déplacer',
          icon: '📅',
          onClick: () => console.log('Move'),
          variant: 'primary',
        },
        {
          label: 'Supprimer',
          icon: '🗑️',
          onClick: () => console.log('Delete'),
          variant: 'destructive',
        },
      ],
    },
    {
      id: '2',
      title: 'Réunion importante',
      subtitle: '16 Jan 2024',
      metadata: 'Dans 1 jour',
      isChecked: true,
      icon: '👥',
      actions: [
        {
          label: 'Modifier',
          icon: '✏️',
          onClick: () => console.log('Edit'),
          variant: 'secondary',
        },
        {
          label: 'Dupliquer',
          icon: '📋',
          onClick: () => console.log('Duplicate'),
          variant: 'secondary',
        },
      ],
    },
  ];

  return (
    <section id="data-display" className="space-y-8">
      <h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
        Data Display & Layout
      </h2>

      <div className="space-y-8">
        {/* Control Panel */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Control Panel
          </h3>
          <ControlPanel>
            <ControlSection>
              <ControlGroup>
                <div className="space-y-2">
                  <label className="text-sm font-medium text-[var(--foreground)]">
                    Status
                  </label>
                  <div className="flex flex-wrap gap-2">
                    <FilterChip variant="selected">Open</FilterChip>
                    <FilterChip>In Progress</FilterChip>
                    <FilterChip>Done</FilterChip>
                  </div>
                </div>
              </ControlGroup>
              <ControlGroup>
                <div className="space-y-2">
                  <label className="text-sm font-medium text-[var(--foreground)]">
                    Priority
                  </label>
                  <div className="flex flex-wrap gap-2">
                    <FilterChip>High</FilterChip>
                    <FilterChip variant="selected">Medium</FilterChip>
                    <FilterChip>Low</FilterChip>
                  </div>
                </div>
              </ControlGroup>
            </ControlSection>
            <ControlSection>
              <ControlGroup>
                <div className="space-y-2">
                  <label className="text-sm font-medium text-[var(--foreground)]">
                    Sort by
                  </label>
                  <select className="w-full p-2 border border-[var(--border)] rounded-lg bg-[var(--background)] text-[var(--foreground)]">
                    <option>Due Date</option>
                    <option>Priority</option>
                    <option>Status</option>
                    <option>Created</option>
                  </select>
                </div>
              </ControlGroup>
            </ControlSection>
          </ControlPanel>
        </div>

        {/* Filter Summary */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Filter Summary
          </h3>
          <FilterSummary
            filters={{
              search: 'urgent',
              priorities: ['high'],
              tags: ['refactoring'],
            }}
            activeFiltersCount={3}
          />
        </div>

        {/* Column Headers */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Column Headers
          </h3>
          <div className="space-y-2">
            <ColumnHeader title="Tasks" count={42} />
            <ColumnHeader title="In Progress" count={14} />
            <ColumnHeader title="Completed" count={28} />
          </div>
        </div>

        {/* Tag Display */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Tag Display
          </h3>

          {/* Avec couleurs */}
          <div className="space-y-2">
            <p className="text-sm text-[var(--muted-foreground)]">
              Avec couleurs et dots
            </p>
            <TagDisplay
              tags={['refactoring', 'ui', 'themes']}
              availableTags={sampleTags}
              showColors={true}
              showDot={true}
            />
          </div>

          {/* Sans couleurs */}
          <div className="space-y-2">
            <p className="text-sm text-[var(--muted-foreground)]">
              Sans couleurs
            </p>
            <TagDisplay
              tags={['refactoring', 'ui', 'themes']}
              showColors={false}
              showDot={false}
            />
          </div>

          {/* Différentes tailles */}
          <div className="space-y-2">
            <p className="text-sm text-[var(--muted-foreground)]">
              Tailles différentes
            </p>
            <div className="space-y-2">
              <TagDisplay
                tags={['small']}
                availableTags={sampleTags}
                size="sm"
              />
              <TagDisplay
                tags={['medium']}
                availableTags={sampleTags}
                size="md"
              />
              <TagDisplay
                tags={['large']}
                availableTags={sampleTags}
                size="lg"
              />
            </div>
          </div>

          {/* Avec limite */}
          <div className="space-y-2">
            <p className="text-sm text-[var(--muted-foreground)]">
              Avec limite (max 2)
            </p>
            <TagDisplay
              tags={['refactoring', 'ui', 'themes', 'css', 'migration']}
              availableTags={sampleTags}
              maxTags={2}
            />
          </div>

          {/* Cliquable */}
          <div className="space-y-2">
            <p className="text-sm text-[var(--muted-foreground)]">Cliquable</p>
            <TagDisplay
              tags={['refactoring', 'ui']}
              availableTags={sampleTags}
              onClick={(tag) => console.log('Clicked tag:', tag)}
            />
          </div>
        </div>

        {/* Collapsible Section */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Collapsible Section
          </h3>
          <CollapsibleSection title="Sample Items" items={collapsibleItems} />
        </div>

        {/* Metrics Grid */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Metrics Grid
          </h3>

          {/* Différentes couleurs */}
          <div className="space-y-2">
            <p className="text-sm text-[var(--muted-foreground)]">
              Avec couleurs
            </p>
            <MetricsGrid
              metrics={[
                { title: 'Tasks Completed', value: '28', color: 'success' },
                { title: 'Tasks Created', value: '35', color: 'primary' },
                { title: 'Tasks Overdue', value: '3', color: 'destructive' },
                {
                  title: 'Avg. Completion Time',
                  value: '2.5d',
                  color: 'warning',
                },
              ]}
            />
          </div>

          {/* Avec icônes et subtitles */}
          <div className="space-y-2">
            <p className="text-sm text-[var(--muted-foreground)]">
              Avec icônes et subtitles
            </p>
            <MetricsGrid
              metrics={[
                {
                  title: 'Total Tasks',
                  value: '42',
                  subtitle: 'This week',
                  icon: '📋',
                },
                {
                  title: 'Completed',
                  value: '28',
                  subtitle: '+12% from last week',
                  icon: '✅',
                },
                {
                  title: 'In Progress',
                  value: '14',
                  subtitle: 'Active work',
                  icon: '🔄',
                },
                {
                  title: 'Overdue',
                  value: '3',
                  subtitle: 'Need attention',
                  icon: '⚠️',
                },
              ]}
            />
          </div>

          {/* Différentes colonnes */}
          <div className="space-y-2">
            <p className="text-sm text-[var(--muted-foreground)]">2 colonnes</p>
            <MetricsGrid
              columns={2}
              metrics={[
                { title: 'Team Velocity', value: '85%', color: 'success' },
                { title: 'Sprint Progress', value: '72%', color: 'primary' },
              ]}
            />
          </div>

          <div className="space-y-2">
            <p className="text-sm text-[var(--muted-foreground)]">3 colonnes</p>
            <MetricsGrid
              columns={3}
              metrics={[
                { title: 'Bugs Fixed', value: '12', color: 'success' },
                { title: 'Features Added', value: '8', color: 'primary' },
                { title: 'Tests Written', value: '25', color: 'warning' },
              ]}
            />
          </div>

          {/* Sans couleurs */}
          <div className="space-y-2">
            <p className="text-sm text-[var(--muted-foreground)]">
              Sans couleurs (default)
            </p>
            <MetricsGrid
              metrics={[
                { title: 'Code Coverage', value: '92%' },
                { title: 'Performance Score', value: '98' },
                { title: 'Uptime', value: '99.9%' },
                { title: 'User Satisfaction', value: '4.8/5' },
              ]}
            />
          </div>
        </div>

        {/* Skeleton Grid */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Skeleton Grid
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div className="h-32 bg-[var(--card)] rounded-lg animate-pulse"></div>
            <div className="h-32 bg-[var(--card)] rounded-lg animate-pulse"></div>
            <div className="h-32 bg-[var(--card)] rounded-lg animate-pulse"></div>
            <div className="h-32 bg-[var(--card)] rounded-lg animate-pulse"></div>
            <div className="h-32 bg-[var(--card)] rounded-lg animate-pulse"></div>
            <div className="h-32 bg-[var(--card)] rounded-lg animate-pulse"></div>
          </div>
        </div>
      </div>
    </section>
  );
}
