
import React, { useState } from 'react';
import { Helmet } from 'react-helmet';
import { Mail, Download, Loader2, Check } from 'lucide-react';
import PrimaryButton from '@/components/PrimaryButton';
import StatusBadge from '@/components/StatusBadget';
import Tabs from '@/components/Tabs';
import { toast } from '@/components/ui/use-toast';

const UIKitPage = () => {
  const [activeTab, setActiveTab] = useState('buttons');

  const tabs = [
    { id: 'buttons', label: 'Boutons' },
    { id: 'badges', label: 'Badges' },
    { id: 'inputs', label: 'Inputs' },
    { id: 'tables', label: 'Tables' },
  ];

  const statuses = ['draft', 'sent', 'accepted', 'refused', 'pending', 'validated', 'paid', 'cancelled', 'open', 'in-progress', 'resolved', 'closed', 'low', 'normal', 'high', 'critical'];

  return (
    <>
      <Helmet>
        <title>UI Kit - Bijou ERP</title>
        <meta name="description" content="Kit de composants UI de Bijou ERP" />
      </Helmet>

      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">UI Kit</h1>
          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">Composants de l'interface Bijou ERP</p>
        </div>

        <Tabs tabs={tabs} active={activeTab} onChange={setActiveTab} />

        <div className="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-2xl p-6">
          {activeTab === 'buttons' && (
            <div className="space-y-8">
              <div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Boutons primaires</h3>
                <div className="flex flex-wrap gap-3">
                  <PrimaryButton onClick={() => toast({ title: "Bouton cliqué!" })}>
                    Bouton normal
                  </PrimaryButton>
                  <PrimaryButton icon={Mail} onClick={() => toast({ title: "Bouton cliqué!" })}>
                    Avec icône
                  </PrimaryButton>
                  <PrimaryButton loading>
                    Chargement
                  </PrimaryButton>
                  <PrimaryButton disabled>
                    Désactivé
                  </PrimaryButton>
                </div>
              </div>

              <div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Boutons secondaires</h3>
                <div className="flex flex-wrap gap-3">
                  <button className="px-4 py-2.5 border border-gray-200 dark:border-gray-800 text-gray-900 dark:text-white rounded-xl text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-900 transition-colors">
                    Secondaire
                  </button>
                  <button className="px-4 py-2.5 text-gray-600 dark:text-gray-400 rounded-xl text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                    Ghost
                  </button>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'badges' && (
            <div className="space-y-4">
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Badges de statut</h3>
              <div className="flex flex-wrap gap-3">
                {statuses.map(status => (
                  <StatusBadge key={status} status={status} />
                ))}
              </div>
            </div>
          )}

          {activeTab === 'inputs' && (
            <div className="space-y-6 max-w-md">
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  Input texte
                </label>
                <input
                  type="text"
                  placeholder="Entrez du texte..."
                  className="w-full px-4 py-2.5 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#941403] text-gray-900 dark:text-white"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  Select
                </label>
                <select className="w-full px-4 py-2.5 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#941403] text-gray-900 dark:text-white">
                  <option>Option 1</option>
                  <option>Option 2</option>
                  <option>Option 3</option>
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  Textarea
                </label>
                <textarea
                  rows={4}
                  placeholder="Entrez votre message..."
                  className="w-full px-4 py-2.5 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#941403] text-gray-900 dark:text-white resize-none"
                />
              </div>
            </div>
          )}

          {activeTab === 'tables' && (
            <div>
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Exemple de table</h3>
              <div className="border border-gray-200 dark:border-gray-800 rounded-xl overflow-hidden">
                <table className="w-full">
                  <thead className="bg-gray-50 dark:bg-gray-900">
                    <tr>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 dark:text-gray-400">Nom</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 dark:text-gray-400">Email</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 dark:text-gray-400">Statut</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-200 dark:divide-gray-800">
                    <tr>
                      <td className="px-4 py-3 text-sm text-gray-900 dark:text-white">Jean Dupont</td>
                      <td className="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">jean@example.com</td>
                      <td className="px-4 py-3"><StatusBadge status="validated" /></td>
                    </tr>
                    <tr>
                      <td className="px-4 py-3 text-sm text-gray-900 dark:text-white">Marie Martin</td>
                      <td className="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">marie@example.com</td>
                      <td className="px-4 py-3"><StatusBadge status="pending" /></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          )}
        </div>
      </div>
    </>
  );
};

export default UIKitPage;
