'use client';

import { Tag } from '@/lib/types';
import { useTags } from '@/hooks/useTags';
import { Header } from '@/components/ui/Header';
import { Card, CardContent } from '@/components/ui/Card';
import { TagsManagement } from './tags/TagsManagement';
import { ThemeSelector } from '@/components/ThemeSelector';
import { BackgroundImageSelector } from './BackgroundImageSelector';
import Link from 'next/link';
import { Emoji } from '@/components/ui/Emoji';

interface GeneralSettingsPageClientProps {
  initialTags: Tag[];
}

export function GeneralSettingsPageClient({ initialTags }: GeneralSettingsPageClientProps) {
  const { 
    tags, 
    refreshTags,
    deleteTag
  } = useTags(initialTags as (Tag & { usage: number })[]);

  return (
    <div className="min-h-screen bg-[var(--background)]">
      <Header 
        title="TowerControl"
        subtitle="Paramètres généraux"
      />
      
      <div className="container mx-auto px-4 py-4">
        <div className="max-w-4xl mx-auto">
          {/* Breadcrumb */}
          <div className="mb-4 text-sm">
            <Link href="/settings" className="text-[var(--muted-foreground)] hover:text-[var(--primary)]">
              Paramètres
            </Link>
            <span className="mx-2 text-[var(--muted-foreground)]">/</span>
            <span className="text-[var(--foreground)]">Général</span>
          </div>

          {/* Page Header */}
          <div className="mb-6">
            <h1 className="text-2xl font-mono font-bold text-[var(--foreground)] mb-2">
              <Emoji emoji="⚙️" /> Paramètres généraux
            </h1>
            <p className="text-[var(--muted-foreground)]">
              Configuration des préférences de l&apos;interface et du comportement général
            </p>
          </div>

          <div className="space-y-8">
            {/* Sélection de thème */}
            <Card variant="glass">
              <CardContent padding="lg">
                <ThemeSelector />
              </CardContent>
            </Card>

            {/* Sélection d'image de fond */}
            <Card variant="glass">
              <CardContent padding="lg">
                <BackgroundImageSelector />
              </CardContent>
            </Card>

            {/* UI Showcase */}
            <Card variant="glass">
              <CardContent padding="lg">
                <div className="flex items-center justify-between">
                  <div>
                    <h3 className="text-lg font-medium text-[var(--foreground)] mb-2">
                      <Emoji emoji="🎨" /> UI Components Showcase
                    </h3>
                    <p className="text-sm text-[var(--muted-foreground)]">
                      Visualisez tous les composants UI disponibles avec différents thèmes
                    </p>
                  </div>
                  <Link 
                    href="/ui-showcase"
                    className="inline-flex items-center px-4 py-2 bg-[var(--primary)] text-[var(--primary-foreground)] rounded-md hover:bg-[color-mix(in_srgb,var(--primary)_90%,transparent)] transition-colors font-medium"
                  >
                    Voir la démo
                  </Link>
                </div>
              </CardContent>
            </Card>

            {/* Gestion des tags */}
            <TagsManagement
              tags={tags}
              onRefreshTags={refreshTags}
              onDeleteTag={deleteTag}
            />

            {/* Note développement futur */}
            <Card variant="glass">
              <CardContent className="p-4">
                <div className="p-4 bg-[var(--warning)]/10 border border-[var(--warning)]/20 rounded">
                  <p className="text-sm text-[var(--warning)] font-medium mb-2">
                    <Emoji emoji="🚧" /> Interface de configuration en développement
                  </p>
                  <p className="text-xs text-[var(--muted-foreground)]">
                    Les contrôles interactifs pour modifier les autres préférences seront disponibles dans une prochaine version.
                    Pour l&apos;instant, les préférences sont modifiables via les boutons de l&apos;interface principale.
                  </p>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  );
}