import React, { useState } from 'react';
import { Helmet } from 'react-helmet';
import PrimaryButton from '@/components/PrimaryButton';
import { Save, Lock, Bell, FileText, Check } from 'lucide-react';
import { Input, FormSection, FormField } from '@/components/FormModal';
import { Switch } from '@/components/ui/switch';
import { toast } from '@/components/ui/use-toast';

const SignatureSettings = () => {
  const [apiKey, setApiKey] = useState('************************');
  
  const handleSave = () => {
    toast({
      title: "Paramètres enregistrés",
      description: "Vos préférences de signature ont été mises à jour.",
      variant: "success"
    });
  };

  return (
    <>
      <Helmet>
        <title>Paramètres Signature - Bijou ERP</title>
      </Helmet>

      <div className="max-w-4xl mx-auto space-y-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Configuration Signature</h1>
            <p className="text-gray-500">Gérez votre connexion Universign et vos préférences d'envoi.</p>
          </div>
          <PrimaryButton icon={Save} onClick={handleSave}>Enregistrer</PrimaryButton>
        </div>

        <div className="bg-white dark:bg-gray-950 p-6 rounded-2xl border border-gray-200 dark:border-gray-800 space-y-8">
          
          {/* API Config */}
          <div>
            <h3 className="flex items-center gap-2 font-bold text-lg mb-4 text-gray-900 dark:text-white">
              <Lock className="w-5 h-5 text-[#338660]" />
              Connexion Universign
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <FormField label="Clé API">
                <Input type="password" value={apiKey} onChange={(e) => setApiKey(e.target.value)} />
              </FormField>
              <FormField label="Environnement">
                <select className="w-full px-3 py-2 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-xl text-sm">
                  <option>Production</option>
                  <option>Test / Sandbox</option>
                </select>
              </FormField>
            </div>
            <div className="mt-2 flex items-center gap-2 text-sm text-[#338660]">
              <Check className="w-4 h-4" />
              Connexion établie avec succès
            </div>
          </div>

          <div className="border-t border-gray-100 dark:border-gray-800" />

          {/* Docs Integration */}
          <div>
            <h3 className="flex items-center gap-2 font-bold text-lg mb-4 text-gray-900 dark:text-white">
              <FileText className="w-5 h-5 text-[#338660]" />
              Documents éligibles
            </h3>
            <div className="space-y-4">
              <div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-900 rounded-xl">
                <div>
                  <p className="font-medium">Devis clients</p>
                  <p className="text-xs text-gray-500">Activer la signature électronique pour les devis</p>
                </div>
                <Switch checked={true} />
              </div>
              <div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-900 rounded-xl">
                <div>
                  <p className="font-medium">Bons de commande</p>
                  <p className="text-xs text-gray-500">Activer pour les confirmations de commande</p>
                </div>
                <Switch checked={true} />
              </div>
              <div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-900 rounded-xl">
                <div>
                  <p className="font-medium">Contrats cadres</p>
                  <p className="text-xs text-gray-500">Pour les documents juridiques longs</p>
                </div>
                <Switch checked={false} />
              </div>
            </div>
          </div>

          <div className="border-t border-gray-100 dark:border-gray-800" />

          {/* Notifications */}
          <div>
            <h3 className="flex items-center gap-2 font-bold text-lg mb-4 text-gray-900 dark:text-white">
              <Bell className="w-5 h-5 text-[#338660]" />
              Notifications
            </h3>
            <div className="space-y-4">
              <div className="flex items-center gap-2">
                <input type="checkbox" className="rounded text-[#338660]" defaultChecked />
                <span className="text-sm">M'avertir quand un document est signé</span>
              </div>
              <div className="flex items-center gap-2">
                <input type="checkbox" className="rounded text-[#338660]" defaultChecked />
                <span className="text-sm">M'avertir quand un document est refusé</span>
              </div>
              <div className="flex items-center gap-2">
                <input type="checkbox" className="rounded text-[#338660]" defaultChecked />
                <span className="text-sm">Alerte stock critique (moins de 10 crédits)</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default SignatureSettings;